SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast tapdig's Avatar
    Join Date
    Sep 2003
    Location
    Norman, OK
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS float layout

    I've just completed my first table-less design, and, eventually, to validate XHTML. For a newbie, I feel I have done well to this point. However, there is this one CSS item I can't seem to do. I have set a piece of content to float to the left, top: navigation etc. Then the main content is to the right, top. What I've been trying to do is float to the left again, but this time at the bottom, inline with the navigation. Like stacking "float: left;" but there could be empty space between them. Right now it just sits at the bottom of the main content. For reference, the HTML calls <div id="zmore"> at this point then displays:
    Code:
          Next 4 entries
    
            home (53)
              o architect (2)
              o blosxom (12)
              o music (4)
              o photo (15)
              o    /reviews (1)
              o sports (8)
              o web_dev (12)
    I've added several categorytree_* styles for my clarity, but this should be temporary. The existing navigation at the top is set at 180px wide.

    In summary, how to float at bottom, below and inline with another float at top?
    Thanks in advance. Let me know if more information is needed??
    Here is the working page: http://blog.tapdig.com/
    Here is my CSS: http://blog.tapdig.com/entry/blueman.css

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If I understand you correctly you just want to float the categorytree to the left at the bottom of the page underneath the navigation.

    To achieve this you will need to float the element left but it must be outside the right content container.

    An element will float left at the position it is in the html so floating it left at the end of the right content will mean that it is lower down. You will then need to pull it back upwards level with a negative top margin. Of course you will need to know the height of the element for this to work.

    In your code adding this to the rest of the categorytree_title style should achieve the required effect:
    Code:
     .categorytree_title {
       width:174px;
      float:left;
      margin-top:-140px;
      }
    However you have numerous errors and unclosed and wrongly nested divs in your code which will stop this working. Run your code through the validator and fix all the errors first.

    I've just fixed a few errors so that this example displays correctly but there are still 114 or so errors on the page and I haven't got time to do them all .

    This example should show the effect of floating the element left and dragging it upwards.
    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=iso-8859-1" />
    <title>The Photo Drone</title>
    <style>
    /* Type CSS rules here and they will be applied
    to pages from 'editcss'
    immediately as long as you keep this window open. */
    /**** LINK-tag style sheet blueman.css ****/
     body {
      margin:20px 0px 20px 0px;
      background:#fff;
      margin:20px auto 20px auto;
      padding:0px;
      width:660px;
      text-align:center;
      }
     A  { color: #666699; text-decoration: underline; }
     A:link  { color: #666699; text-decoration: underline; }
     A:visited { color: #9999cc; text-decoration: underline; }
     A:active { color: #999999;  }
     A:hover  { color: #000033;  }
     p {
      font-family:helvetica, arial;
      color: #000033;
      margin: 0px;
      margin-top: 10px;
      margin-bottom: 10px;
      padding: 0px;
      padding-left: 8px;
     }
     h1, h2, h3 {
      margin: 0px;
      padding: 0px;
     }
     #banner {
      font-family:arial;
      height:70px;
      color:#000033;
      font-size:24px;
      font-weight:900;
      margin: 0px;
    		padding:0px;
      padding-left:186px;
      letter-spacing: .35em;
      text-align:left bottom;
      text-transform:none;
      background-color:#669999;
      border:0px solid #EEE;
      border-bottom:0px solid #000066;
      border-left:2px solid #000066;
      border-right:2px solid #000066;
      background-image: url(images/banner.jpg);
    				background-repeat: no-repeat;
    				background-position: top left;
      }
     #contentcenter {
      width:560px;
      padding:0px;
      float:left;
      background-color:#fff;
      border-left:2px solid #000066;
      border-right:2px solid #000066;
      border-bottom:2px solid #000066;
      }
     #contentleft {
      font-family:arial;
      width:180px;
      padding:2px;
      float:left;
      border-left:2px solid #000066;
      border-bottom:2px solid #000066;
      background-color:#99cccc;
      text-align:left;
      background-image: url(images/side.jpg);
    				background-repeat: no-repeat;
    				background-position: top left;
      }
     #frame {
      width:750px;
      margin-right:auto;
      margin-left:auto;
      margin-top:0px;
      padding:0px;
      text-align:left;
      }
     .blog {
      padding:15px;
      background:#FDFDFD;
      background-image: url(images/main.jpg);
    				background-repeat: no-repeat;
    				background-position: top right;
      }
     .blogbody {
      }
     .blogbody a,
     .blogbody a:link,
     .blogbody a:visited,
     .blogbody a:active,
     .blogbody a:hover {
      font-weight: normal;
      text-decoration: underline;
      }
     .title {
      font-family: georgia, helvetica, arial;
      font-size: large;
      color: #000033;
      font-weight:600;
      letter-spacing: .10em;
      text-transform:none;
      background-color:#fff;
      }
     .date {
      font-family: helvetica, arial;
      color:#ccccff;
      border-top:1px solid #000066;
      border-bottom:1px solid #000066;
      font-size:x-small;
      font-weight:600;
      padding-bottom: 1px;
      margin-bottom:2px;
      letter-spacing: .15em;
      text-transform:none;
      text-indent:4px;
      background-color:#9999cc;
      }
     .posted {
      font-family: georgia, helvetica, arial, sans-serif;
      font-size: small;
      color: #000000;
      margin-bottom:5px;
      background-color:#FFFFFF;
      border-top:8px solid #000033;
      background-image: url(images/centre.jpg);
    				background-repeat: no-repeat;
    				background-position: top right;
      }
     .side {
      font-family:verdana, arial, sans-serif;
      color:#6666cc;
      font-size:small;
      font-weight:normal;
      line-height:140%;
      padding-left:20px;
      margin-bottom:10px;
      }
     .sidetitle {
      font-family:arial;
      color:#333399;
      font-size:small;
      font-weight:600;
      padding:0px;
      padding-left:10px;
      margin-top:10px;
      letter-spacing: .15em;
      }
     .categorytree {
      font-family: georgia, helvetica, arial;
      list-style: none;
      font-size: 10pt;
      border: 1px solid #000000;
      padding: 0px;
      margin: 2px;
      text-decoration: none !important;
      width:168px;
      }
     .categorytree_item {
      font-family: georgia, helvetica, arial;
      list-style: none;
      font-size: 10pt;
      padding: 0px;
      margin: 2px;
      text-decoration: none !important;
      }
     .categorytree_title {
      font-family: georgia, helvetica, arial;
      list-style: none;
      font-size: 12pt;
      border: 2px solid #000066;
      padding: 0px;
      margin: 2px;
      text-decoration: none !important;
      width:174px;
      float:left;
      margin-top:-140px;
      }
     
    
    </style>
    </head>
    <body>
    <div id="frame"> <a href="http://blog.tapdig.com/"> 
      <div id="banner"> The Photo Drone... </div>
      </a> 
      <div id="contentleft"> 
    	<div class="sidetitle"> Articles </div>
    	<div class="side"> <a href="http://blog.tapdig.com">Home</a><br />
    	  <a href="http://blog.tapdig.com/cgi-bin/blosxom.cgi/architect/index.tom">architect</a><br />
    	  <a href="http://blog.tapdig.com/cgi-bin/blosxom.cgi/blosxom/index.tom">blosxom</a><br />
    	  <a href="http://blog.tapdig.com/cgi-bin/blosxom.cgi/music/index.tom">music</a><br />
    	  <a href="http://blog.tapdig.com/cgi-bin/blosxom.cgi/photo/index.tom">photo</a><br />
    	  <a href="http://blog.tapdig.com/cgi-bin/blosxom.cgi/sports/index.tom">sports</a><br />
    	  <a href="http://blog.tapdig.com/cgi-bin/blosxom.cgi/web_dev/index.tom">web_dev</a><br />
    	</div>
    	<div class="sidetitle"> Links </div>
    	<div class="side"> :: <a href="http://www.tapdig.com/">tapdig.com</a><br />
    	  :: <a href="http://www.tapdig.com/gallery">gallery</a><br />
    	  :: <a href="http://www.tapdig.com/news.php">feed trough</a><br />
    	  <script>
    <!--
    function escramble(){
     var a,b,c,d,e,f,g,h,i
     a=':: <a href=\"mai'
     b='sco'
     c='?subject=tapdig website\">'
     a+='lto:'
     b+='tt@'
     e='</a>'
     f='email'
     b+='tapdig.com'
     g=''
     document.write(a+b+c+f+e)
    }
    escramble()
    //-->
    </script>
    	</div>
    	<div class="sidetitle"> Random Image </div>
    	<div class="side"> <a href="http://www.tapdig.com/gallery/Greendoor080803/greendoor21"><img   src="http://www.tapdig.com/albums/Greendo...or21.thumb.jpg" border="0" title="Image   generated at random from the Collective gallery" /><br>
    	  Go to Image.</a> <br>
    	  <a href="http://www.tapdig.com/gallery/Greendoor080803">Go to album.</a><br />
    	  <a href="#">Link</a> </div>
    	<div class="sidetitle"> Silly </div>
    	<div class="side"> <a href="http://www.blosxom.com/" title="powered by blosxom">blosxom</a> 
    	  <br />
    	  <a href="http://jigsaw.w3.org/css-validator/check/referer" title="valid css">css</a> 
    	  <br />
    	  <a href="http://validator.w3.org/check/referer" title="not valid html">xhtml</a> 
    	  <br />
    	  <a href="http://blog.tapdig.com/cgi-bin/blosxom.cgi/index.rss" title="some sort of rss feed">eat 
    	  this</a> <br />
    	  <a href="http://creativecommons.org/licenses/by-nd-nc/1.0/" title="silly"><small>CCL 
    	  &copy 2003 <br>
    	  by Scott Mellgren</small></a> </div>
      </div>
      <div id="contentcenter"> 
    	<div class="blog"> 
    	  <div class="blogbody"> <div class="posted"><a name="1052">  <span class="title">Fellowship 
    		Students + Metered Spirit</span> </a></div> 
    	  <div class="date">Sat, Jan 24, 2004 @ 11:52 pm </div>
    	  <p><a href=http://www.tapdig.com/gallery/opensign><img src=http://www.tapdig.com/albums/opensign/IMG_2806.thumb.jpg border=1 hspace=10 align=left></a><a href=http://www.tapdig.com/gallery/opolis012304><img src=http://www.tapdig.com/albums/opolis012304/IMG_2798.thumb.jpg border=1 hspace=10 align=right></a>I 
    		put the first session relults online from the "OPEN" sign series. It was 
    		a hoot. No one seemed to mind and no one revolted. A total of 7 participants. 
    		I'll attempt to continue this series next time I visit the <a href=http://www.starlightmints.com/opolis/>Opolis</a>. 
    	  <hr noshade>
    	  Picks of the bands last night, <a href=http://www.thefellowshipstudents.com/>Fellowship 
    	  Students</a> and <a href=http://meteredspirits.blogspot.com/>Metered Spirit</a> 
    	  are also uploaded. </p> 
    	  <p align="right"> <i> comment[<a href="http://blog.tapdig.com/cgi-bin/blosxom.cgi/photo/1052.writeback">0 
    		comments</a>] :: category[<a href="http://blog.tapdig.com/cgi-bin/blosxom.cgi/photo">/photo</a>] 
    		:: link[<a href="http://blog.tapdig.com/cgi-bin/blosxom.cgi/photo/1052.tom">permalink</a>] 
    		:: edit[<a href="http://blog.tapdig.com/cgi-bin/blosxom.cgi/photo/1052.wiki">wiki</a>] 
    		</i> </p>
    	  <div class="blogbody"> <div class="posted"><a name="1051">  <span class="title">Brian 
    		Jamestown Massacre + Mandragora</span> </a></div> 
    	  <div class="date">Tue, Jan 20, 2004 @ 8:39 pm </div>
    	  <p><a href=http://www.tapdig.com/gallery/opolis011904><img src=http://www.tapdig.com/albums/opolis011904/IMG_2578.thumb.jpg border=1 hspace=10 align=left title="Mandragora at the Opolis"><img src=http://www.tapdig.com/albums/opolis011904/IMG_2613copy.thumb.jpg border=1 hspace=10 align=right title="Brian Jamestown Massacre at the Opolis"></a> 
    		This was a fun night of shooting. My goal that night was to shoot 300 
    		images. I came very close, over 250. The bad part is, the success rate 
    		was what I had expected. "Lucky shot syndrome" is usually about 10% I'd 
    		guess. 
    	  <p>Faced with difficult lighting, worse than usual at times, I tried some 
    		experimentation with flash and long exposures. I seemed to have good luck 
    		at 1600, 4 seconds, f5.6. Several times I covered the lens with my hand 
    		knowing that the exposure was too long. I guess it's a form of painting 
    		with light. 
    	  <p>Thinking about <a href=http://www.livejournal.com/users/rzr_grl>Angela</a>. 
    		I turned the review off this night. I had gotten so used to looking at 
    		the small rendering of an image in that LCD window after every shutter. 
    		I felt like Luke by the end of the night, "Let the force flow." Ends up, 
    		I did pull off several jedi mind tricks. 
    	  <p>The crowd was full of beautiful people and my experiments continued into 
    		the black hole of standing-room-only. </p>
    	  <p align="right"> <i> comment[<a href="http://blog.tapdig.com/cgi-bin/blosxom.cgi/photo/1051.writeback">0 
    		comments</a>] :: category[<a href="http://blog.tapdig.com/cgi-bin/blosxom.cgi/photo">/photo</a>] 
    		:: link[<a href="http://blog.tapdig.com/cgi-bin/blosxom.cgi/photo/1051.tom">permalink</a>] 
    		:: edit[<a href="http://blog.tapdig.com/cgi-bin/blosxom.cgi/photo/1051.wiki">wiki</a>] 
    		</i> </p>
    	  <div class="blogbody">  <div class="posted"><a name="1050"> <span class="title">Photoblog 
    		is born</span> </a> </div> 
    		<div class="date">Thu, Jan 15, 2004 @ 9:33 pm </div>
    		<p>One of my New Year's Resolutions is to create and maintain a "photo 
    		  of the day" place. Something to inspire me to go shoot more. I find 
    		  myself sans camera way too often. 
    		<p>As to the tech of it, I'll just use gallery for now. Here: <a href=http://www.tapdig.com/gallery/photodujour>http://www.tapdig.com/gallery/photodujour</a> 
    		</p>
    		<p align="right"> <i> comment[<a href="http://blog.tapdig.com/cgi-bin/blosxom.cgi/photo/1050.writeback">0 
    		  comments</a>] :: category[<a href="http://blog.tapdig.com/cgi-bin/blosxom.cgi/photo">/photo</a>] 
    		  :: link[<a href="http://blog.tapdig.com/cgi-bin/blosxom.cgi/photo/1050.tom">permalink</a>] 
    		  :: edit[<a href="http://blog.tapdig.com/cgi-bin/blosxom.cgi/photo/1050.wiki">wiki</a>] 
    		  </i> </p>
    		<div class="blogbody"> <div class="posted"> <a name="1049"> <span class="title">fleshdoll 
    		  recordings hit web site</span> </a> 
    		  <div class="date">Mon, Jan 12, 2004 @ 1:58 am </div>
    		  <p>Fleshdoll is a band I was in during the first half of 1993. I played 
    			guitar, with amazingly talented songwriter / band leader Shannon O'brien 
    			on guitar, keyboard programs and vocals, Tom Topkoff on bass and Mike 
    			Landis on drums and click-tracks. 
    		  <p>I hope you enjoy these songs. The recordings for the most part are 
    			from an album titled "Live at the Lounge" which was recorded June 
    			10, 1993 at The Liquid Lounge (no longer exists) in Norman, OK. These 
    			are raw, uncut, yet remastered as best I could from the original four 
    			track cassette, using CoolEditPro and a couple of days of my life 
    			during the winter of 2002. 
    		  <p>The four-track recording was made with a single open room microphone 
    			above the sound guy's (Alan Hiserodt) head and one direct line from 
    			the mixing board. Two tracks were used on Brian Rowland's Fostex X-26 
    			(I think it was) machine. 
    		  <p>However, four songs are from misc. recordings at misc. locations: 
    			"Hey, Hey Helen" (Abba cover, Abba 1975), "Do You Believe," "Too Many," 
    			and "Untitled." Sorry in advance for the "boom box" quality on these 
    			four. 
    		  <p>Follow <a href=http://www.tapdig.com/music/index.php?p=fleshdoll>this 
    			link</a> to browse the songlist. <br>
    			Follow <a href=http://www.tapdig.com/music/index.php?p=fleshdoll&l=8&m=0>this 
    			link</a> to play the playlist. 
    		  <p>OMG, this blog takes up 2.1 MB of disk space. My photos and music 
    			takes 188 MB. Sheesh. I still have some room to fill, so I hope to 
    			leave the mp3s up there as long as I can (no thanks to mp3.com for 
    			changing their service, I can do it myself thanks to Zina and sourceforge). 
    		  </p>
    		  <p align="right"> <i> comment[<a href="http://blog.tapdig.com/cgi-bin/blosxom.cgi/music/1049.writeback">0 
    			comments</a>] :: category[<a href="http://blog.tapdig.com/cgi-bin/blosxom.cgi/music">/music</a>] 
    			:: link[<a href="http://blog.tapdig.com/cgi-bin/blosxom.cgi/music/1049.tom">permalink</a>] 
    			:: edit[<a href="http://blog.tapdig.com/cgi-bin/blosxom.cgi/music/1049.wiki">wiki</a>] 
    			</i> </p>
    		</div>
    	  </div>
    	</div>
      </div></div></div>
      <div id="zmore"><a href='http://blog.tapdig.com/cgi-bin/blosxom.cgi?_start=5'>Next 
    	4 entries</a></div>
     </div>
      <ul class="categorytree_title">
    	<li>&nbsp;&nbsp;<a href=http://blog.tapdig.com/>home</a> (53)
    	<ul class="categorytree">
    	  <li><a class="categorytree_item" href="http://blog.tapdig.com/cgi-bin/blosxom.cgi/architect">architect</a> 
    		(2)</li>
    	  <li><a class="categorytree_item" href="http://blog.tapdig.com/cgi-bin/blosxom.cgi/blosxom">blosxom</a> 
    		(12)</li>
    	  <li><a class="categorytree_item" href="http://blog.tapdig.com/cgi-bin/blosxom.cgi/music">music</a> 
    		(4)</li>
    	  <li><a class="categorytree_item" href="http://blog.tapdig.com/cgi-bin/blosxom.cgi/photo">photo</a> 
    		(15)</li>
    	  <li><a class="categorytree_item" href="http://blog.tapdig.com/cgi-bin/blosxom.cgi/photo/reviews">&nbsp;&nbsp;&nbsp;/reviews</a> 
    		(1)</li>
    	  <li><a class="categorytree_item" href="http://blog.tapdig.com/cgi-bin/blosxom.cgi/sports">sports</a> 
    		(8)</li>
    	  <li><a class="categorytree_item" href="http://blog.tapdig.com/cgi-bin/blosxom.cgi/web_dev">web_dev</a> 
    		(12)</li>
    	</ul>
      </li>
      </ul>
    </div>
    </body>
    </html>
    Hope that helps.

    Paul

  3. #3
    SitePoint Enthusiast tapdig's Avatar
    Join Date
    Sep 2003
    Location
    Norman, OK
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Perhaps someone could explain the importance of having valid XHTML to the successful execution and rendering of CSS. I've seen this topic on several other threads. Yet the explaination is never in full. Perhaps this should be a new topic?

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Perhaps someone could explain the importance of having valid XHTML to the successful execution and rendering of CSS. I've seen this topic on several other threads. Yet the explaination is never in full. Perhaps this should be a new topic?
    Hi,

    Valid xhtml is good for all the code not just css. Improperly nested tags will cause display problems in browsers that are more strict than IE and in some cases may not display at all.

    Also validating your code makes sure that there are no simple typing errors that could trip the code up. If you haven't closed a div for example you will be trying to place elements within the wrong context as in your case above.

    With regards to CSS a page without a doctype will render using the broken box model in ie6 in what is known as quirks mode. With the broken box model you will find that ie6 has different widths and heights to other browsers because padding and borders are included in the width and not added to it as per the specs. (ie5 and 5.5. have the broken box model in standards mode as well so you do still have to cater for them anyway but its better to run ie6 in standards mode.)

    There are also other differences in quirks mode as well that will make it harder to make cross-browser designs.

    When you use a valid doctype (with uri) the browser renders the page in standards mode (according to specs) which means that the display should be more consistent between browsers. While this is not always the case with IE, it is much closer than using quirks mode.

    Standards mode is when you have a valid doctype which means that designers can design to a specific standard and expect similar results with different browsers and also be forward compatible for later updates in browsers. Although there are still variations between different browsers interpretations of these standards, as time goes by things will get better (hopefully). To run your webpages in standards mode you must apply a correct and valid doctype and URI (the address part of the doctype). (Although this is not always true as some valid doctypes can still cause browsers to run in quirks mode if they don't recognise them correctly (but that's another story), so it's best to stick to the recognised Doctypes.)

    There are many other reasons for using valid code such as it's easier to update structured code than a mass of spaghetti code. Search engines like structured valid structured code (so i'm told). It's also good for accessibility (screen readers and the like) as a well structured page makes sense by itself.

    Is that enough to get on with

    Paul


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
  •