SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member JH Knight's Avatar
    Join Date
    Jun 2008
    Location
    Tallahassee, FL USA
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS positioning freak out!

    I'm designing a simple web page. I'm trying to place 5 boxes on the page; I'm using colors in them so that I can see them as I position them, but they will be utilized to highlight various products. I intend to update them regularly.

    I can't position them! Basically, I intend to have five or six boxes (I call them "promo boxes") which will be on the page, each will feature some item or items, and be linked to the applicable department in the navigation where this item is located. In development, the boxes have a background color, but of course there will be no color after I get them placed (I anticipate these boxes having thumbnail photos and text).

    Boxes go where they want! I have a grasp of relative versus absolute positioning, but, it is TOTALLY out of my control! To get my main navigation box to go correctly, I had to use relative positioning, and I don't know why. "Promo box 1" was fairly easy to get situated, but box 2 goes where it wants, and using relative, absolute, or float distorts the width of the box! I have no idea what's going on. In fact, if you look at what I have right now, box 2 is above box 1, above the menu, and stretches the who width of the page (It's supposed to be 400 px or so, as I want to put three rectangular boxes next to each other in the open area at the bottom.


    Here's the code for the page, and it's accompanying CSS, if anybody wants to comment on it. I'm lost.
    HTML Code:
    <!DOCTYPE html 	PUBLIC "-//W3C//DTD XHTML 1.0 STRICT//EN"
    "......w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns=.........w.w3.org/1999/xhtml">
     <head> 
         <title>The Reckless Schooner</title>
             <meta http-equiv="Content-Type"
                  content="text/html; charset=utf-8" />
            <link href="style1.css" rel= "stylesheet" type="text/css" /></head><body background="images/paper1.jpg" 
    bgproperties=fixed>
    <center><img src="images/h7.gif"></center><br>
    <div id="storm">
    <center><img src="images/skon.gif" width="130" height="130"></center></div>
    
    
    <div id="start">
    <p>
     <p>Intro text</p>
    
    </div>
    <div id="promobox1">
    <p>PROMOXBOX 1 This is promobox1. </p>
                       <!--- insert promo box 1 here --->
    </div>
    
    <div id= "secondbox">
     <p>secondbox</p>             
    </div>
    
    
    
    <div id="promobox3" ><!----insert promobox3 here---->
    </div>
    
    
    <div id="navigation">
    <center><h4>Site Navigation</h4></center>
    <ul>
    <li><a href="index.htm">Home</a></li>
    <li><a href="about.htm">About Us</a></li>
    <li><a href="guarantee.htm">Our Guarantee</a></li>
    <li><a href="testim.htm">Testimonials</a></li>
    <li><a href="contact.htm">Contact Us</a></li>
    <li><a href="new.htm">New Arrivals</a></li>
    <li><a href="closeout.htms">Closeouts</a></li>
    <li><a href="cam.htm">Cameras/Optics</a></li>
    <li><a href="car.htm">Car audio &video</a></li>
    <li><a href="cbscan.htm">CB's and Scanners</a></li>
    <li><a href="collect.htm">Collectibles</a></li>
    <li><a href="Compacc.htm">Computer accessories</a></li>
    <li><a href="health.htm">Health and Beauty</a></li>
    <li><a href="electron.htm">Home Electronics</a></li>
    <li><a href="housewares.htm">Housewares</a></li>
    <li><a href="misc.htm">Miscellaneous</a></li>
    <li><a href="Office.htm">Office Products</a></li>
    <li><a href="portelect.htm">Portable Electronics</a></li>
    <li><a href="radar.htm">Radar Detectors</a></li>
    <li><a href="seasonal.htm">Seasonal Items</a></li>
    <li><a href="Sports.htm">Sports and Recreational</a></li>
    <li><a href="Telephone.htm">Telephones</a></li>
    <li><a href="tools.htm">Tools</a></li>
    <li><a href="toy.htm">Toys and Games</a></li>
    <li><a href="gps.htm">2 way radios/GPS</a></li>
    </ul>
    </div>
    
    
    
    
    <hr>
    <address> Reclessschooner.com &copy 2008
    </body>
    -------------------------------------end of html; below is css

    Code CSS:
    /****************************************Style 1.css-----------this is css for Schooner************************** 
    BEGIN CSS   */
     
     
    h1, h2, h3, h4{
    Font-family: Verdana, sans-serif;
    color: black;
    }
     
    #start{
    font-weight: bold;
    color: black;
    font-size: x-small;
    font-family: Verdana, sans-serif;
    font-style: italic
    padding: 0
    margin:5
    }
     
     
     
    #navigation {
    position: relative;
    top: 4px;
    left: 0px;
    background-color: #FFCC66;
    font-weight: bold;
    color: black;
    font-size: medium;
    width: 200px;
    height: 540px;
    }
     
    #storm {
    float: right;
    }
     
    /*    the next six promobox rules are for the 6 promoboxes on the index page */
     
     
    #promobox1{
    position: absolute;
    top: 300px;
    left: 250px;
    font-weight:normal;
    color: black;
    font-size: small;
    font-family: helvetica;
    padding: 5 px;
    background-color: yellow;
    width: 575px;
    height: 300px;
    }
     
     
    #secondbox {
    position: absolute;
    top: 100&#37;;
    left: 25%;
    font-weight: normal;
    color: black;
    font-size: small;
    font-family: helvetica;
    background-color: red;
    width: 170 px;
    height: 170 px;
    }
     
     
    /*   link settings - primarily for navigation links, but would apply to any links  (remember, applying a: lvha order)
    ********************************************************************************************************************** */
     
    a {
    font-weight: bold;
    }
     
    a:link {
    color: black;
    }
     
    a:visited{
    color: black;}
     
    a:hover{
    text-decoration: none;
    color: white;
    }
     
    a:active {
    color: none;
    background-color: none;
    }
     
    /*******************************************************************   end of link settings  /*
     
     
     
    /***********************CLASS SETTINGS***********    */
    Last edited by Dan Schulz; Aug 28, 2008 at 22:28. Reason: added code tags to improve readability of the markup

  2. #2
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,182
    Mentioned
    16 Post(s)
    Tagged
    4 Thread(s)
    one row with 5 columns or how exactly do want them arranged? - image?

  3. #3
    SitePoint Member JH Knight's Avatar
    Join Date
    Jun 2008
    Location
    Tallahassee, FL USA
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well,

    Navigation goes to the left, where it's been successfully placed. A large box (promobox1) goes to the right of navigation, roughly in the upper center of the page underneath the intro paragraph. Three boxes, smaller, go side by side underneath the large box.

    As you probably surmise, I'm new to CSS. Ian LLoyd swears that CSS is the best way to position stuff, but it SURE doesn't look that way to me.

    I'm tempted to buy Dreamweaver and just master that thing. I really wanted to be able to do this from scratch, though.......

  4. #4
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,182
    Mentioned
    16 Post(s)
    Tagged
    4 Thread(s)
    You can use absolute faux positioning for the three columns.

    html
    Code:
    <ul id="promo-module" class="es-line">
      <li id="promo-1" class="es-item">
        <div class="es-content">
         <!-- place content here -->
        </div>
      </li>
      <li id="promo-2" class="es-item">
        <div class="es-content">
         <!-- place content here -->
        </div>
      </li>
      <li id="promo-3" class="es-item">
        <div class="es-content">
        <!-- place content here -->
        </div>
      </li>
    </ul> <!-- end of promo-module -->
    css
    Code:
    /* special classes for absolute faux technique */
    .es-line {
      float: left;
      width: 100&#37;;
      display: block;
      position: relative;
    }
    
    .es-item {
      position: relative;
      float: left;
      left: 100%;
    }
    
    /* promo box layout */
    #promo-module #promo-1 {
      margin-left: -100%;
      width: 33.3%;
    }
    #promo-module #promo-2 {
      margin-left: -66.6%;
      width: 33.3%;
    }
    #promo-module #promo-3 {
      margin-left: -33.3%;
      width: 33.3%;
    }
    If you need to add any padding add it to .es-content and do it specific to the item which you want to pad ie. #promo-1 .es-content { }

    One caution: avoid adding padding to the line(.line) this will offset the width of the element in IE. It doesn't mean you can't, but you would need to redo the logic for the margins on the .items.

    You can actually use this technique to create your entire layout to avoid clearing troubles.

    html
    Code:
    <div id="page-wrapper">
      <div class="es-line">
    
        <div id="navigation-module" class="es-item">
    
          <div class="es-content">
         </div>
    
        </div> <!-- end of line #navigation-module -->
    
        <div id="view-module" class="es-item">
    
          <div class="es-content">
         </div>
       
       </div> <!-- end of line #view-module
    
    </div>
    css
    Code:
    #navigation-module {
      margin-left: -100%;
      width: 20%;
    }
    #view-module {
      margin-left: -80%;
      width: 80%;
    }
    Now place it all together by placing the promo-module inside #view-module and adding a #product-preview area.

    html
    Code:
    <div id="page-wrapper">
      <div class="es-line">
    
        <div id="navigation-module" class="es-item">
    
          <div class="es-content">
         </div>
    
        </div> <!-- end of line #navigation-module -->
    
        <div id="view-module" class="es-item">
    
          <div class="es-content">
    
          <div id="product-preview">
         </div> <!-- end of product-preview -->
    
    <ul id="promo-module" class="es-line">
      <li id="promo-1" class="es-item">
        <div class="es-content">
         <!-- place content here -->
        </div>
      </li>
      <li id="promo-2" class="es-item">
        <div class="es-content">
         <!-- place content here -->
        </div>
      </li>
      <li id="promo-3" class="es-item">
        <div class="es-content">
        <!-- place content here -->
        </div>
      </li>
    </ul> <!-- end of promo-module -->
    
         </div>
       
       </div> <!-- end of line #view-module
    
    </div>
    Now you don't need to worry about any of the positioning besides for setting widths,margins and heights(if needed) for the .items. The floating is all taken care of by the es-item and es-line classes.

    article

  5. #5
    SitePoint Member JH Knight's Avatar
    Join Date
    Jun 2008
    Location
    Tallahassee, FL USA
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks SSOOO much for the help!

    Being so new to CSS, I know very little of what you wrote, but by the end of the day tomorrow (or the day after) I should have a good grip on it.

    I really appreciate it!


    Jim Knight

  6. #6
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi JH Knight, welcome to SitePoint (Haven't seen you before.)

    If you feel oddz example is a bit hard to begin with this time of the day, try some of these two/three-columns examples and more at the same site, there are examples you can adapt to what you want.

    Tip: Also read the FAQ in the css forum.
    Happy ADD/ADHD with Asperger's

  7. #7
    SitePoint Member JH Knight's Avatar
    Join Date
    Jun 2008
    Location
    Tallahassee, FL USA
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the advice. I'm looking at that page now. 'Odd'z's code is excellent, but I have no idea what it is. I need to learn all of this.

  8. #8
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,182
    Mentioned
    16 Post(s)
    Tagged
    4 Thread(s)
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Layout</title>
    
    <style>
    .es-line {
      float: left;
      width: 100&#37;;
      display: block;
      position: relative;
    }
    
    .es-item {
      position: relative;
      float: left;
      left: 100%;
    }
    
    ol,ul {
    	margin: 0;
    	padding: 0;
    	list-style:none;
    }
    
    ol li,ul li {
    	margin:0;
    }
    
    #page-wrapper {
    	width: 950px;
    	margin: 0 auto;
    	background-color: #CCCCCC;
    }
    
    #masthead {
    	height: 100px;
    	background-color: green;
    }
    
    #product-preview {
    	height: 300px;
    	width: 100%;
    	background-color: #FF00FF;
    }
    
    #navigation-module {
      margin-left: -100%;
      width: 20%;
      background-color: #BB67EE;
    }
    
    #content {
    	background-color: #8978BB;
    }
    
    #view-module {
      margin-left: -80%;
      width: 80%;
      background-color: red;
    }
    
    #footer {
    	clear:left;
    	background-color: yellow;
    	padding: 10px
    }
    
    #promo-module #promo-1 {
      margin-left: -100%;
      width: 33.3%;
      background-color: blue;
    }
    #promo-module #promo-2 {
      margin-left: -66.6%;
      width: 33.3%;
      background-color: #AA7867;
    }
    #promo-module #promo-3 {
      margin-left: -33.3%;
      width: 33.3%;
      background-color: #5678EE;
    }
    
    #promo-module .es-content {
    	padding: 5px 10px;
    }
    </style>
    
    </head>
    
    <body>
    
    <div id="page-wrapper">
    
      <div id="masthead">
      </div> <!-- end of #masthead -->
    
    
      <div id="content" class="es-line">
    
        <div id="navigation-module" class="es-item">
    
          <div class="es-content">
          
          	<h4 class="primary navigation">Site Navigation</h4>
          
    		<ul class="primary navigation">
    			<li><a href="index.htm">Home</a></li>
    			<li><a href="about.htm">About Us</a></li>
    			<li><a href="guarantee.htm">Our Guarantee</a></li>
    			<li><a href="testim.htm">Testimonials</a></li>
    			<li><a href="contact.htm">Contact Us</a></li>
    			<li><a href="new.htm">New Arrivals</a></li>
    			<li><a href="closeout.htms">Closeouts</a></li>
    			<li><a href="cam.htm">Cameras/Optics</a></li>
    			<li><a href="car.htm">Car audio &video</a></li>
    			<li><a href="cbscan.htm">CB's and Scanners</a></li>
    			<li><a href="collect.htm">Collectibles</a></li>
    			<li><a href="Compacc.htm">Computer accessories</a></li>
    			<li><a href="health.htm">Health and Beauty</a></li>
    			<li><a href="electron.htm">Home Electronics</a></li>
    			<li><a href="housewares.htm">Housewares</a></li>
    			<li><a href="misc.htm">Miscellaneous</a></li>
    			<li><a href="Office.htm">Office Products</a></li>
    			<li><a href="portelect.htm">Portable Electronics</a></li>
    			<li><a href="radar.htm">Radar Detectors</a></li>
    			<li><a href="seasonal.htm">Seasonal Items</a></li>
    			<li><a href="Sports.htm">Sports and Recreational</a></li>
    			<li><a href="Telephone.htm">Telephones</a></li>
    			<li><a href="tools.htm">Tools</a></li>
    			<li><a href="toy.htm">Toys and Games</a></li>
    			<li><a href="gps.htm">2 way radios/GPS</a></li>
    		</ul> <!-- end of #primary-navigation -->
          
         </div>
    
        </div> <!-- end of line #navigation-module -->
    
        <div id="view-module" class="es-item">
    
          <div class="es-content">
    
          <div id="product-preview">
         	</div> <!-- end of product-preview -->
    
    		<ul id="promo-module" class="es-line">
      			<li id="promo-1" class="es-item">
        			<div class="es-content">
         				<!-- place content here -->
         				<h4>Pomo 1</h4>
         				<p>
         				Product promo 1s qws q sq	s	qs
         				sq	 s	qs qw sd qw d w q dqwdwq
         				dwq dq wd qw d qw d q wd qwdwqd
         				dwqd qw d qwd qw d qw d qw d qwd
         				dwqd qw dqw d
         				</p>
        			</div>
      			</li>
      			<li id="promo-2" class="es-item">
        			<div class="es-content">
         				<!-- place content here -->
         				<h4>Pomo 2</h4>
         				<p>
         				Product promo 2 dwqdqwdqwdqwd
         				dwqdqw dqwd qwd qwdqwd qwd qwdq
         				dqwd qwd qw  d qwd qwdqwdqwdqwdq
         				dqw dq wd qw d qw d qw
         				</p>
        			</div>
      			</li>
      			<li id="promo-3" class="es-item">
        			<div class="es-content">
        				<!-- place content here -->
        				<h4>Pomo 3</h4>
        				<p>
        				Product promo  qwdsq wdw qdq dqwd
        				dqwd wq d qw dqw d q w d qwd qw d
        				dqwd wq d qw d  qwd qw dqwdqdqdwq
        				dqwdqwd qw d q wd qw d
        				</p>
        			</div>
      			</li>
    		</ul> <!-- end of promo-module -->
    
         </div>
       
       </div> <!-- end of line #view-module -->
       
       <div id="footer">
       		<p id="copyright">Reclessschooner.com &copy; 2008</p>
       </div> <!-- end of #footer -->
    
    </div>
    
    </body>
    </html>

    Is that what your trying to achieve?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •