SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    I want my 4th arrow! garlinto's Avatar
    Join Date
    Jun 2002
    Location
    Riding the electron wave
    Posts
    372
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Div won't align in relation to other divs

    At my oft refered-to page found HERE, I have a great many nested divs on the right-hand side that contain links to my on-line store.

    For the life of me, I cannot get the header div (the ones called "Ford", "Chevy", and so on) to center and align with the rest of the other divs. I have torn apart my css and xhtml, but I cannot find the problem. Quite possibly, the offending attribute/code is right in front of me, but I can't see it.

    Also, I have specified in my stylesheet that the width of the div.header be the same as the div.cell class, which is really what I want, but it doesn't display that way.

    HTML:
    Code:
    <div id="myTables">
      <div id="ford" style="z-index: 1">
        <div class="header" style="color: #ffffff">Ford Trucks:</div><br />
           <div class="cell">
            <a class="span" href="...">
             <span class="cell"><span class="left">
              <b><span style="color: red">1150R</span>
              &nbsp;&nbsp;&nbsp;1980-1996&nbsp;&#189;  Ton
              </b></span>
             </span></a>
    	<a class="spam" href="....">
    	 <span class="cellpkg">
    	  <b><span style="font-family: webdings">4</span></b>
               &nbsp;1150R and brake control <b>pkg</b>
    	 </span></a></div>
    </div>
    My Styles:
    Code:
    div.header {
    	background-color: navy;
    	cursor: default;
    	font-size:10pt;
    	text-align: center;
    	border:1px solid navy;
    	font-variant: small-caps;
    	width: 220px;
    	padding:2px 0px 2px 0px
    	}
    
    div.cell {
    	cursor: pointer;
    	font-size:8pt;
    	width: 220px;
    	margin-bottom: 2px;
    	padding:2px 10px 0px 0px
    	}
    
    span.cell {
    	cursor: pointer;
    	display: block;
    	font-size:8pt;
    	width: 220px;
    	border:1px solid black;
    	margin-bottom: 2px;
    	padding:2px 10px 2px 0px
    	}
    
    span.cellpkg {
    	cursor: pointer;
    	display: block;
    	text-align: right;
    	font-size:8pt;
    	border:1px solid black;
    	width: 220px;
    	margin: 0px 0px 7px 0px;
    	padding:2px 10px 2px 0px
    	}
    
    span.left {
    	display: block;
    	text-align: left;
    	}
    
    span.right {
    	display: block;
    	text-align: right;
    	}
    
    #ford, #chevrolet, #dodge, #toyota, #other {
    	position: absolute;
    	top: 5px;
    	left: 5px;
    	width: 250px;
    	height: 600px;
    	background-color: #ffffff;
    	z-index: 0;
    	}
    
    #myButtons {
    	text-align: center;
    	font-size: 9pt; 
    	font-family: verdana, arial, courier;
    	text-decoration: none;
    	background-color: #ffffff; 
    	float: left;
    	margin: 10px 0px 20px 0px;
    	top: 10px; left: 0px; width: 250px; height: 660px;
    	visibility: visible;
    	z-index: 1;
    	}
    
    #myTables {
    	font-size: 9pt; 
    	font-family: verdana, arial, courier;
    	text-decoration: none;
    	background-color: #ffffff; 
    	position: absolute;
    	top: 237px; left: 1px; width: 250px; height: 600px;
    	visibility: visible;
    	z-index: 1;
    	}
    Any solutions?
    Cheers.
    Ducharme's Axiom: "If you view your problem closely
    enough, you will recognize yourself as part of the problem."


  2. #2
    SitePoint Addict Knightime's Avatar
    Join Date
    Jan 2003
    Location
    USA
    Posts
    376
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    youhave one <a class="spam" that might be causing problems. Also, the names you are giving the classes might be causing conflicts. The document might be reading the "span.cell" and the "div.cell" as the same class..."cell"

    Hope this helps..

    Troy

  3. #3
    SitePoint Addict Knightime's Avatar
    Join Date
    Jan 2003
    Location
    USA
    Posts
    376
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Also, put your inline styles in the external css document. They are going to cause conflicts eventually as the document is parsed and precedents take over.


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
  •