SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 33
  1. #1
    SitePoint Zealot
    Join Date
    Oct 2008
    Location
    NE Ohio
    Posts
    117
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    CSS Anthology page 302 described technique does not work in IE8

    I'm working on a Web site and have floated two images to the left within a container DIV (second image below the first). I tried using the method described in CSS Anthology page 302 using class selector, .clear {clear:both} to position the text belonging to the second image to the right and beginning below the first image (instead of following the paragraph of text belonging to the first image, which it would normally do). However, I found that this does not work in IE8. When I used my developer tools to emulate IE7, it worked as expected.

    I fudged it using some additional DIV elements. Is there another way to make this work in IE8?

    Image1.jpg
    William Otis
    Flamenco aficionado and Freelance Web designer
    www.dreammakergraphics.com/

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

    We'd need to see the code you were using as we don't all have that book

    Are you sure you have that correct as its IE7 that has a problem with clearing floats and not IE8?

    When you float sections like that then its best to wrap the image and test ina div so that you can both contain and then clear the floats in each section and avoid all browsers issues.

    Assuming you don't need visible overflow then I would do it like this:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    .wrap {
    	width:50%;
    	clear:both;
    	overflow:hidden;/* contain floats */
    	border-bottom: 1px dotted #000;
    	margin:10px 0;
    	padding:10px;
    }
    .image {
    	float:left;
    	width:200px;
    	height:200px;
    	background:red;
    	margin:0 10px 20px;
    }
    .content {
    	overflow:hidden;/* for a rectangualr block to the side of a float*/
    	zoom:1.0;/* similar for ie6 and 7*/
    }
    </style>
    </head>
    
    <body>
    <div class="wrap">
    		<div class="image">Image</div>
    		<div class="content">
    				<p>Lorem isum text goes here Lorem isum text goes hereLorem isum text goes hereLorem isum text goes hereLorem isum text goes hereLorem isum text goes hereLorem isum text goes hereLorem isum text goes here </p>
    		</div>
    </div>
    <div class="wrap">
    		<div class="image">Image</div>
    		<div class="content">
    				<p>Lorem isum text goes here Lorem isum text goes hereLorem isum text goes hereLorem isum text goes hereLorem isum text goes hereLorem isum text goes hereLorem isum text goes hereLorem isum text goes here </p>
    		</div>
    </div>
    </body>
    </html>

  3. #3
    SitePoint Zealot
    Join Date
    Oct 2008
    Location
    NE Ohio
    Posts
    117
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Yes, I'm sure. Using IE8 developer tools, I switched to browser mode IE7 and it worked perfectly. So, I figured there is a bug in IE8. But, I'll look at it again. I played with it for several hours trying to figure out what I was doing wrong before trying it in IE7. Perhaps I was missing something though. Sometimes when we step away from a problem, and then go back a while later (next day) a problem becomes obvious. There isn't that much code involved here yet; only a header DIV, sidebar DIV and the main content area where the two photos reside. I'll recode it the way I had it and see if something shows up that I missed. I believe I did have the photos wrapped in their own DIV at one time, which I floated left, but I'll try what you posted above and see if something changes.

    That Site Point book is very good, by the way (all of them are). I refer to it often, as I often forget how to do a particular thing (I'm old ... hahaha!). This is just a sample I'm working on for my portfolio ... I thought it would be a good idea, and give me an advantage to have some pre-coded sites ready to use for a particular client (if I had some clients!). It's just too much fun playing with this stuff, so I don't mind redoing it and messing around. Thanks for your suggestions.
    William Otis
    Flamenco aficionado and Freelance Web designer
    www.dreammakergraphics.com/

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    IE8 does have some bugs but on the whole it is miles ahead of IE7 which is very buggy. IE7 doesn't clear floats properly in some circumstances and seems to match what you were saying however I don't rule out that you have encountered an IE8 bug.

    BTW the IE developer tools don't really provide a full emulation of the browsers listed as they miss most of the actual bugs but generally they can give a good idea of how the page looks. IE7 is getting pretty old now so I tend not to spend too much time on it and let it have simpler styles where something is not working.

  5. #5
    SitePoint Zealot
    Join Date
    Oct 2008
    Location
    NE Ohio
    Posts
    117
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I agree, about IE7. I had a client once (she left me, thank God - she was a real PITA), that would complain about something not looking right on her husbands computer. Turned out he was using IE7, and they would never update to IE8. I got tired of messing around to make things work in IE7, but I was usually able to. Now she has a really crappy site hosted on GoDaddy, and a Sommerce WordPress theme, instead of the custom site I had built for her! I laughed when I saw it. It's really ugly.

    These days, I'm not going to even bother with old outdated browsers. If people can't keep updated, it's not my problem, the way I look at it. What is my problem is I still use WindowsXP Media Center, so I can't go beyond IE8 myself. I hate to think of trying to update my machine to Windows 7 (but I think it should be possible), and then have to reinstall Apache and PHP 5.3, MySQL etc. all over again. Not that it's so hard... just a pain, and I don't want to go through it. Sooner or later, I'm going to have to though.
    William Otis
    Flamenco aficionado and Freelance Web designer
    www.dreammakergraphics.com/

  6. #6
    SitePoint Zealot
    Join Date
    Oct 2008
    Location
    NE Ohio
    Posts
    117
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Okay, I give up on this little problem. I have tried everything, but I notice that it doesn't matter which browser I use, it still doesn't work. As I noted above, it works in IE7. I can only conclude that either I am doing something wrong (though I can't figure out what) or this technique just isn't going to work in the newer browsers.

    Here is my code, if you care to look at it.
    CSS.txt
    Index.txt
    Template.txt
    Content.txt
    William Otis
    Flamenco aficionado and Freelance Web designer
    www.dreammakergraphics.com/

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

    I don't see any difference in IE7 or IE8 with the code above so there must be something else going on. Have you made sure the php is being parsed and not leaving any traces above the doctype. Anything above the doctype will throw IE into quirks mode and then all bets are off. (If you had posted the code from View Source we would have been able to see this for ourselves.)

    You do have an error here in the css where you have added a rules in the middle of another rule.

    Code:
    .main {
    	font-family: arial, helvetica, sans-serif;
    	font-size: 16px;
    	height: 200px;
    	text-indent: 1em;
    	line-height: 1.3;
    	padding: 10px 15px 10px 0px;
    	color: #9a9a9a;
     ) .clear {
     clear: both;
    }
    It should be:

    Code:
    .main {
    	font-family: arial, helvetica, sans-serif;
    	font-size: 16px;
    	height: 200px;
    	text-indent: 1em;
    	line-height: 1.3;
    	padding: 10px 15px 10px 0px;
    	color: #9a9a9a;
    
    }
     .clear {
     clear: both;
    }
    
    However the code you posted runs the same in IE7 or 8:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" >
    <head>
    <meta http-equiv="Content-Language" content="en-us" />
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
    <style type="text/css">
    * {
    	margin: 0;
    	padding: 0;
    }
    body {
    	margin: 0;
    	padding: 0;
    	background-color: #000000;
    	color: #ffffff;
    }
    #date {
    	float:left;
    	margin-left:1082px;
    	margin-top: -25px;
    	width: 200px;
    	height: 25px;
    	font-family: century gothic;
    	font-size: 14px;
    	text-align: right;
    	color: #9a9a9a;
    }
    #header {
    	position: relative;
    	margin-top: 35px;
    	height: 150px;
    	width: 100%;
    	background-image: url(/images/background/gridbkg.png);
    	background-repeat: repeat-x;
    }
    #logo {
    	margin-left: 590px;
    	margin-top: 25px;
    }
    #tagline {
    	font-family: century gothic, verdana;
    	font-size: 18px;
    	color: #ffffff;
    	text-align: center;
    	width: 420px;
    	height: 25px;
    	margin-left: 590px;
    	padding-top: 5px;
    }
    #sidebar {
    	float: left;
    	margin-left: 320px;
    	margin-top: -185px;
    	height: 900px;
    	width: 200px;
    	background-color: #2d2d2d;
    	background-image: url(/images/background/sidebargradient.png);
    	background-repeat: repeat-x;
    }
    #content {
    	float: left;
    	margin-top: 30px;
    	margin-left: 30px;
    	width: 730px;
    	height: 690px;
    	background-image: url(/images/background/copyblockgradient.png);
    }
    .image {
    	float: left;
    	margin: 10px 20px 10px 10px;
    	height: 200px;
    	width: 200px;
    }
    .border { border: 1px solid #ffffff; }
    h2 {
    	font-family: "century gothic";
    	text-align: center;
    	margin: 10px auto;
    	font-size: 20px;
    	font-weight: normal;
    	color: #ffffff;
    }
    .main {
    	font-family: arial, helvetica, sans-serif;
    	font-size: 16px;
    	height: 200px;
    	text-indent: 1em;
    	line-height: 1.3;
    	padding: 10px 15px 10px 0px;
    	color: #9a9a9a;
    }
    .clear {
     clear: both;
    }
    </style>
    </head>
    
    <body id="home">
    <div id="header">
    		<div id="date">Date</div>
    		<img id="logo" src="../../images/background/logo.png" alt="logo"/>
    		<div id="tagline">
    				<p>Custom Designer Jewelry Since 1970</p>
    		</div>
    </div>
    <!-- header -->
    <div id="sidebar">
    		<div id="navigation">
    				<ul id="navmain">
    						<li id="navhome"><a href="">Home</a></li>
    						<li id="navabout"><a href="">About</a></li>
    						<li id="navcontact"><a href="">Contact</a></li>
    				</ul>
    		</div>
    </div>
    <!-- sidebar -->
    
    <div id="content">
    		<h2>All our jewelry is hand crafted by our own artisans.</h2>
    		<div class="image"> <img src="/images/product/gold_ring_set.jpg" height="200" width="200" alt="rings" /> </div>
    		<p class="main">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero elit, venenatis consequat fringilla quis, ultrices sit amet lectus. Pellentesque sed dolor at lectus semper volutpat. Ut at urna sit amet turpis posuere fermentum sed viverra ligula. Proin laoreet placerat eleifend. Cras ante est, suscipit at cursus non, laoreet eu ante. Aenean arcu ipsum, elementum ac pulvinar id, suscipit accumsan metus. Pellentesque aliquam tincidunt aliquet. </p>
    		<div class="image"> <img class="border" src="/images/product/diamond.jpg" height="200" width="200" alt="diamond" /> </div>
    		<p class="main">Quisque condimentum risus ac est pulvinar cursus non placerat est. Suspendisse ultrices condimentum lacus, ut gravida lectus laoreet ac. Praesent at mi gravida sapien mattis porttitor. Nulla odio leo, pellentesque a gravida eu, lacinia non risus. Vestibulum eget diam magna, sed rutrum purus. Sed mi augue, convallis sed fermentum nec, tempus ut enim. In elementum, arcu bibendum aliquam volutpat, ante nisl ultrices massa, id pretium mi quam luctus diam.</p>
    </div>
    </body>
    </html>

    If you don't mind me pointing them out there are a number of logic errors in your code though and you can't really construct pages in the manner that you have.

    Code:
    #date {margin-left:1082px;}
    You never want to do something like that unless you have a fixed width page but then you would want to float right anyway.

    Code:
    #sidebar {
    float: left;
    margin-left: 320px;
    margin-top: -185px;
    Same problem in that you start your page layoot 320px from the edge of the page leaving a dead space gap that helps no one (least of all those users with a 320px wide screen). The margin-top:-185px is a magic number and you should have floated the elements so that they fit without negative top margins like that as that will soon break should content change.

    If you have a fixed width page layout then wrap the page in a wrapper of the correct width and center it using margin:auto. Don't offset something 320px from the left of the window and create an unusable dead space at the side.

    Code:
    #content {	height: 690px;}
    .main{height:200px}
    You will rarely want a height on your content as that will limit the content and indeed overflow if users have larger text size settings by default. Any container that holds text content should be a fluid height or at least sized in ems. Or you can use min-height if you want an initial height.

    Code:
    #sidebar {
        height: 900px;
    }
    Same problem here and 900px is another magic number plucked out of the air. You don't want a height here and a full length sidebar effect could be created by repeating a background image in the main parent wrapper (that I mentioned you should be using).

    On your page if the window is smaller than the one on your computer (which only you have) the main content will drop below the sidebar and be mostly unusable.

    Hope that helps anyway but feel free to post any questions. It would help in the future if you just pasted your code in here from "View Source" to expedite matters as it takes a while to put all those snippets you attached together

  8. #8
    SitePoint Zealot
    Join Date
    Oct 2008
    Location
    NE Ohio
    Posts
    117
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Now you've really left me confused!

    Thanks for your comments. Just when I thought I had a pretty good handle on desinging with CSS (though I've never used tables)! I cut my Web design teeth on CSS. You have now left me with a lot of questions that I didn't have before.

    First things first. I didn't know what you meant when you said that I had added a rule in the middle of another rule. I didn't see that, but on close inspection, I noticed I had a ) instead of a } ending the .main rules. I'm surprised it worked at all. Come to think of it, I'm wondering if that's why I couldn't make the .clear {clear: both} work? I'll have t re-code it that way and see if it now works. Perhaps that was my problem all along.

    On to the rest of your comments (logic errors???).

    This is just a simple layout at this point. It is just two columns, with the page width of 960 pixels, which includes the sidebar (200 px), a 30 px margin to the right, and the main content area of 730 px.

    Perhaps I am misinformed, but I thought that the only way to make one element (the sidebar) overlap another element (the header, in my layout) was to use a negative margin. That is why my sidebar has a negative top margin of 185 px, which pushes it all the way to the top of the viewport (the header is set to margin-top: 35px (I don't like pages pushed all the way to the top of the screen). It was also my desire to have the header span the entire width of the screen, thus the "width: 100%" declaration.

    To me, a Web page is artwork, and the code is written to display the art that has been created (I mocked it up first in Paint Shop Pro), as well as the site content, of course.

    I use a lot of floats, as they seem to be the easiest way to achieve the design I'm after with the least amount of trouble.

    I floated the date line to the left with a large left margin (1082 px) so that it stays put with it's right margin aligned with the right edge of the page if the page is zoomed in or out. If I floated it right, as you suggest, it scoots all the way over to the right edge of the screen. That's not what I want. I placed it in the header div and gave it a negative top margin to push it into the space above the header, where I wanted it. That seemed to be the easiest way (I messed around trying to put it up there, outside of the header div, and I wasted a lot of time trying to make it work, as it changed everything else, as one might expect. I finally decided to do it the easy way, and it works.

    Yes, my PHP is parsed, or the date wouldn't show up, and I would be getting nothing but a PHP error message. I'm attaching a screen shot of the source code from my browser.

    I don't see anything very complex or exotic in my CSS or my template. It seems pretty straight forward to me, and it works. What more can I ask? I don't see why I can't construct a page this way. Why is this wrong? It gives me the results I want. Isn't that what it's all about?

    You also said, "Same problem in that you start your page layoot 320px from the edge of the page leaving a dead space gap that helps no one (least of all those users with a 320px wide screen). The margin-top:-185px is a magic number and you should have floated the elements so that they fit without negative top margins like that as that will soon break should content change." This I don't understand at all. Who has a 320px wide screen??? The "dead space gap" is in the margin of the page. Again, the page width is 960px (though as I said above, it was my desire to run the header all the way across. That is the design, so as not to look like everybody else does, looking like a box, with some content. Ugh, and how boring. "Should content change?" Who's going to change it but me? And any content within the sidebar (perhaps some text containing store location info, or perhaps another short vertical menu, shouldn't affect the positioning of the sidebar. How would it? There won't be much text in the main content area (copy), as too much copy isn't going to be read anyhow. People don't want to wade through a lot of text, unless the site is for the purpose of providing information (a blog, or other site).

    I guess I could have used a "wrapper" and set the width to 960px and margin: 35 auto;, but then I would have to have used a negative margin still to get my header graphic all the way to the left of the screen. I guess there are any number of ways this could have been constructed. I chose what seemed to be the least complex.

    I welcome your comments.
    Attached Files Attached Files
    William Otis
    Flamenco aficionado and Freelance Web designer
    www.dreammakergraphics.com/

  9. #9
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,268
    Mentioned
    249 Post(s)
    Tagged
    1 Thread(s)
    When he says that you have a rule in the middle of other rule he means that you didn't close the first rule properly and the second starts in the same line.

    Let me "zoom" what he meant

    Code:
    .main {     
            font-family: arial, helvetica, sans-serif;     
            font-size: 16px;
            height: 200px;
            text-indent: 1em;    
            line-height: 1.3;     
            padding: 10px 15px 10px 0px;     
           color: #9a9a9a;  ) .clear {  clear: both; }
    that ) should be a }. And then, .clear should have stated in the next line (for cleaness)

    As for the rest, I need to read the previous posts

  10. #10
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,268
    Mentioned
    249 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by BillO View Post
    On to the rest of your comments (logic errors???).
    Paul is referring to the fact that you have controled the position of your #date using the margin ... but you want it on the right... shouldn't it be floated to the right? and then control its position with the right margin? That makes more sense. It is more logical We tend to control everything from the left but it is not the only way

    Quote Originally Posted by BillO View Post
    This is just a simple layout at this point. It is just two columns, with the page width of 960 pixels, which includes the sidebar (200 px), a 30 px margin to the right, and the main content area of 730 px.

    Perhaps I am misinformed, but I thought that the only way to make one element (the sidebar) overlap another element (the header, in my layout) was to use a negative margin. That is why my sidebar has a negative top margin of 185 px, which pushes it all the way to the top of the viewport (the header is set to margin-top: 35px (I don't like pages pushed all the way to the top of the screen). It was also my desire to have the header span the entire width of the screen, thus the "width: 100%" declaration.
    Well, you could also use positiong but since it is a floated element and thus taken out of its natural position according to its order, negative margin in this case is fine.

    Quote Originally Posted by BillO View Post
    I use a lot of floats, as they seem to be the easiest way to achieve the design I'm after with the least amount of trouble.
    I think so too

    Quote Originally Posted by BillO View Post
    I floated the date line to the left with a large left margin (1082 px) so that it stays put with it's right margin aligned with the right edge of the page if the page is zoomed in or out.
    Already covered

    If I floated it right, as you suggest, it scoots all the way over to the right edge of the screen.
    Use margin-right to control that

    [quote]I don't see anything very complex or exotic in my CSS or my template.[/quote`] Welcome to the real world... where what seems easy... well, may be not that easy (sorry, couldn't help to do a bad joke... that's me, I'm afrarid)

    It seems pretty straight forward to me, and it works. What more can I ask? I don't see why I can't construct a page this way. Why is this wrong? It gives me the results I want. Isn't that what it's all about?
    Now, I'm confused... Didn't you ask for help because it didn't work? But if it works, then I agree with you... you can't ask for more.


    You also said, "Same problem in that you start your page layoot 320px from the edge of the page leaving a dead space gap that helps no one (least of all those users with a 320px wide screen).
    Well, let me try to explain it better (Paul, correct me if I understood it wrong). If I browse your page using my mobile (320px width) and you set your layout with a margin of 320px from the left... I will see nothing. If my mobile allows it, I can scroll to the right but the first impression will not be good. Let's be fluid!

    The margin-top:-185px is a magic number and you should have floated the elements so that they fit without negative top margins like that as that will soon break should content change." This I don't understand at all. Who has a 320px wide screen??? The "dead space gap" is in the margin of the page.
    My mobile, your mobile... any mobile! We have 320px screens!

    Again, the page width is 960px
    for 15-17" screens...
    (though as I said above, it was my desire to run the header all the way across. That is the design, so as not to look like everybody else does, looking like a box, with some content.
    I like your design

    Ugh, and how boring. "Should content change?" Who's going to change it but me?
    Who knows... maybe in the future you will hire someone to do the job while you're relaxing at the beach...
    And any content within the sidebar (perhaps some text containing store location info, or perhaps another short vertical menu, shouldn't affect the positioning of the sidebar. How would it? There won't be much text in the main content area (copy), as too much copy isn't going to be read anyhow. People don't want to wade through a lot of text, unless the site is for the purpose of providing information (a blog, or other site).
    I guess I could have used a "wrapper" and set the width to 960px and margin: 35 auto;, but then I would have to have used a negative margin still to get my header graphic all the way to the left of the screen. I guess there are any number of ways this could have been constructed. I chose what seemed to be the least complex.
    I understand why you wanted to save yourself from using a wrapper... but sometimes it is necessary to avoid browser bugs... well, I would say that most of the times is necessary.

    I welcome your comments.
    Oooops... these are my comments... but I hope that you don't mind if I got here in the middle (yes, another lame joke )

  11. #11
    SitePoint Zealot
    Join Date
    Oct 2008
    Location
    NE Ohio
    Posts
    117
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Appreciate your comments, Molona

    Aren't these moblie devices really just toys? Seriously, with a screen width that small, who can do any serious Web browsing? My monitor is a wide screen, 20" I think. I don't think anyone has those old format screens anymore, unless they just have an old computer.

    I do see your point, however, with my layout begining 320 px from the left in that case. Perhaps I should modify it to center it no matter what. I'll play around with it; but I want that header running across the entire page.

    I mentioned that I caught that error (missing the closing curly brace). I suspect that is why I couldn't clear my float (which was my original and only question).

    I love the Site Point books. I have learned almost everything I know from Site Point books, but I also have Matt Doyle's "Beginning PHP 5.3." I love using server side scripting. It makes building a Website so much easier, and I can use one template for all pages (unless the page layout actually must change significantly), and assign variables for the content, which are defined in the index.php for the particular page. In any case, it's fun stuff! It ought to be illegal!

    Thanks for your comments.
    William Otis
    Flamenco aficionado and Freelance Web designer
    www.dreammakergraphics.com/

  12. #12
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,268
    Mentioned
    249 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by BillO View Post
    Aren't these moblie devices really just toys? Seriously, with a screen width that small, who can do any serious Web browsing?
    Oh yes, I do! I use my mobile and my Galaxy Tab as much as I use my laptop and my computer... it saved me from having to take my laptop with me so many times! And they are much lighter. And trends say that their use will increase. Mobiles can't be ignored in a professional web world
    Quote Originally Posted by BillO View Post
    My monitor is a wide screen, 20" I think. I don't think anyone has those old format screens anymore, unless they just have an old computer.
    Never assume. You never know who's behind that screen... and there are more people with old screens than you think... in the same way that there more people on dial up connections that you think... and you've got to serve them all

    Quote Originally Posted by BillO View Post
    I do see your point, however, with my layout begining 320 px from the left in that case. Perhaps I should modify it to center it no matter what. I'll play around with it; but I want that header running across the entire page.

    I mentioned that I caught that error (missing the closing curly brace). I suspect that is why I couldn't clear my float (which was my original and only question).
    good job if you caught it... I'm afraid that I didn't catch your comment though Sorry about that

    Quote Originally Posted by BillO View Post
    I love the Site Point books. I have learned almost everything I know from Site Point books, but I also have Matt Doyle's "Beginning PHP 5.3." I love using server side scripting. It makes building a Website so much easier, and I can use one template for all pages (unless the page layout actually must change significantly), and assign variables for the content, which are defined in the index.php for the particular page. In any case, it's fun stuff! It ought to be illegal!

    Thanks for your comments.
    Glad that you're enjoying yourself

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

    First of all don't take this comments to heart as we have all made the same mistakes and unless someone points out what's wrong with an approach then we will never learn the best way to do it.

    Quote Originally Posted by BillO View Post
    Thanks for your comments. Just when I thought I had a pretty good handle on desinging with CSS (though I've never used tables)! I cut my Web design teeth on CSS. You have now left me with a lot of questions that I didn't have before.
    Sorry, and I will try and answer as best I can.

    First things first. I didn't know what you meant when you said that I had added a rule in the middle of another rule. I didn't see that, but on close inspection, I noticed I had a ) instead of a } ending the .main rules. I'm surprised it worked at all. Come to think of it, I'm wondering if that's why I couldn't make the .clear {clear: both} work? I'll have t re-code it that way and see if it now works. Perhaps that was my problem all along.
    Yes that's what I meant and that clear:both rule will not work because it is treated as a malformed selector and ignored.

    On to the rest of your comments (logic errors???).

    This is just a simple layout at this point. It is just two columns, with the page width of 960 pixels, which includes the sidebar (200 px), a 30 px margin to the right, and the main content area of 730 px.
    Then you should create a wrapper of 960px width to hold the columns and get it to center with auto margins. That will allow the design to fit on 960px monitors at least whereas in your example you have set the whole 960px layout 320px from the left of the screen:

    e..g
    Code:
    #sidebar {margin-left: 320px;}
    That leaves 320px dead space in the left of the viewport (640px in IE6 due to the double margin bug). That;s a waste of your users monitor space and serves no purpose.

    Perhaps I am misinformed, but I thought that the only way to make one element (the sidebar) overlap another element (the header, in my layout) was to use a negative margin. That is why my sidebar has a negative top margin of 185 px, which pushes it all the way to the top of the viewport (the header is set to margin-top: 35px (I don't like pages pushed all the way to the top of the screen). It was also my desire to have the header span the entire width of the screen, thus the "width: 100%" declaration.
    Sometimes when working with a fixed height image or fixed height content then you can use neagtive margins but usually when the element you are spanning contains mostly text then you cannot guarantee that 180px is the right height as I may have set my text size to 20px and the text will spill out all over the layout. By letting the height be fluid and avoiding situations where things may overlow or are dependent on fixed criteria you make your layout more robust. There are always exceptions to the rule and sometimes you have no choice but you should always say to yourself "What if?".

    To me, a Web page is artwork, and the code is written to display the art that has been created (I mocked it up first in Paint Shop Pro), as well as the site content, of course.
    Unfortunately that is really the wrong approach and a website is all about its content. It should be content first and then design around how the content needs to be presented. In reality it's a mixture of both but a webpage is not a fixed piece of paper. It's a living breathing thing that has no boundaries. It has no size that you know about and the size of the content can be changed by the user and out of your control. All you can do is prepare containers that will work for those situations which means letting go of control a little and letting the content dictate the presentation and not the reverse.

    When people visit a site the number one reason they visit is for the content. If you have a beautiful site but bad content you will get no return visitors. The ideal is to have a beautiful site and good content of course but content should be the priority.

    I use a lot of floats, as they seem to be the easiest way to achieve the design I'm after with the least amount of trouble.
    Floats are good as long as you don't go overboard. You should only float when needed and make sure your floats are contained and cleared when necessary (they are different concepts).
    I floated the date line to the left with a large left margin (1082 px) so that it stays put with it's right margin aligned with the right edge of the page if the page is zoomed in or out.
    Too reliant on magic numbers. Just float it right or align the text right. If you used a suitable wrapper then it will all sit well.

    Yes, my PHP is parsed, or the date wouldn't show up, and I would be getting nothing but a PHP error message. I'm attaching a screen shot of the source code from my browser.
    Yes that looks ok and I can't see any problems above the doctype so we can rule out quirks mode.

    I don't see anything very complex or exotic in my CSS or my template. It seems pretty straight forward to me, and it works. What more can I ask? I don't see why I can't construct a page this way. Why is this wrong? It gives me the results I want. Isn't that what it's all about?
    No, it's all about the results that your visitors want The problem with CSS is that there are many ways to do the same thing but very often there is only one right way of doing it and that depends on the dynamics of the page and what comes next.

    You also said, "Same problem in that you start your page layoot 320px from the edge of the page leaving a dead space gap that helps no one (least of all those users with a 320px wide screen). The margin-top:-185px is a magic number and you should have floated the elements so that they fit without negative top margins like that as that will soon break should content change." This I don't understand at all. Who has a 320px wide screen??? The "dead space gap" is in the margin of the page.
    As Nuria said above many mobile users have a 320px screen and will get some nice blank space. If your layout is only 960px wide then don't force users to open their windows to 960px + 320px to see it. If you have something going in that 320px then that's a different matter but generally you would want the page to center and to shrink to at least the 960px width of your main container. I have as 27" monitor but I have many windows open at the same time and my browser window at the moment is less that 800px wide.


    Again, the page width is 960px (though as I said above, it was my desire to run the header all the way across. That is the design, so as not to look like everybody else does, looking like a box, with some content. Ugh, and how boring. "Should content change?" Who's going to change it but me?
    No I will change it when I increase my font-size to 20px to read the text as will millions of others with bad eyesight.

    I welcome your comments.
    99% of designing a page is about controlling the dynamics of the content. The design is almost secondary and must adapt to the criteria that the content requires. That's why a lot of top end designers advocate designing in the browser.

    If I've understood your requirements properly then I would use an approach like this:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin:0;
    	padding:0;
    	height:100%;
    }
    body {
    	background-color: #000;
    	color: #fff;
    }
    #outer {
    	width:960px;
    	margin:auto;
    	min-height:100%;
    	position:relative;
    	background:#202020;
    	z-index:1;
    }
    * html #outer { height:100% }/* for ie6 as it doesn;t understand min-height but treats height as a minimum- remove if support not required */
    #main {
    	float:right;
    	width:730px;
    	padding:0 0 1px;
    }
    #header {
    	position: relative;
    	min-height: 140px;
    	background:red url(/images/background/gridbkg.png) repeat-x;
    	overflow:hidden;
    	margin:0 0 10px -30px;
    	padding:5px 30px;
    }
    * html #header { height:150px }
    .date {
    	text-align:right;
    	font-family: century gothic;
    	font-size: 85%;
    	text-align: right;
    	color: #9a9a9a;
    	margin:0;
    	line-height:35px;
    	padding:0 10px 0 0;
    }
    #logo { float:left }
    .tagline {
    	font-family: century gothic, Verdana, sans-serif;
    	font-size: 18px;
    	color: #ffffff;
    	text-align: center;
    	padding-top: 5px;
    	clear:left;
    	margin:0;
    }
    #sidebar {
    	padding:35px 0 1px;
    	width:200px;
    	position:relative;
    	z-index:2;
    	background: #2d2d2d;
    }
    /* this next elements creates the full length sidebar background but isn't supported in ie7*/
    /* for ie7 you would need to repeat a 200px image down the left side of #outer */
    #outer:before {
    	content:" ";
    	width:200px;
    	display:block;
    	position:absolute;
    	background:#2d2d2d;
    	top:0;
    	bottom:0;
    	left:0;
    	z-index:1;
    }
    #outer:after {
    	content:"";
    	display:block;
    	clear:both;
    	height:0;
    	visibility:hidden;
    }
    .sidenav {
    	margin:0;
    	padding:0;
    	list-style:none;
    }
    .sidenav a {
    	color:#000;
    	text-decoration:none;
    	display:block;
    	padding:10px;
    	background:#ccc;
    	color:#fff;
    	border:1px solid #fff;
    }
    .sidenav a:hover { background:#333 }
    .wrap {
    	clear:both;
    	overflow:hidden;/* contain floats */
    	border-bottom: 1px dotted #000;
    	margin:10px 0;
    	padding:10px;
    	zoom:1.0;/* ie7 haslayout*/
    }
    .image {
    	float:left;
    	width:200px;
    	height:200px;
    	background:red;
    	margin:0 10px 20px;
    }
    .content {
    	overflow:hidden;/* for a rectangular block to the side of a float*/
    	zoom:1.0;/* similar for ie6 and 7*/
    }
    .overlay {
    	position:absolute;
    	z-index:0;
    	top:35px;
    	left:0;
    	width:100%;
    	min-width:960px;
    	height:150px;
    	background:red url(/images/background/gridbkg.png) repeat-x 0 0;
    }
    </style>
    </head>
    
    <body>
    <div id="outer">
    		<div id="main">
    				<p class="date">Thursday, Nov 29, 2012</p>
    				<div id="header">
    						<div id="logo"><img  src="../../images/background/logo.png" alt="logo"></div>
    						<p class="tagline">Custom Designer Jewelry Since 1970</p>
    				</div>
    				<div class="content">
    						<div class="wrap">
    								<div class="image">Image</div>
    								<div class="content">
    										<p>Lorem isum text goes here Lorem isum text goes hereLorem isum text goes hereLorem isum text goes hereLorem isum text goes hereLorem isum text goes hereLorem isum text goes hereLorem isum text goes here </p>
    								</div>
    						</div>
    						<div class="wrap">
    								<div class="image">Image</div>
    								<div class="content">
    										<p>Lorem isum text goes here Lorem isum text goes hereLorem isum text goes hereLorem isum text goes hereLorem isum text goes hereLorem isum text goes hereLorem isum text goes hereLorem isum text goes here </p>
    								</div>
    						</div>
    				</div>
    		</div>
    		<div id="sidebar">
    				<ul class="sidenav">
    						<li><a href="#">Link</a></li>
    						<li><a href="#">Link</a></li>
    						<li><a href="#">Link</a></li>
    						<li><a href="#">Link</a></li>
    						<li><a href="#">Link</a></li>
    						<li><a href="#">Link</a></li>
    				</ul>
    		</div>
    </div>
    <div class="overlay"></div>
    </body>
    </html>
    I wouldn't actually use the overlay class shown above but assuming the body isnt carrying an image already I would repeat the image on the body element instead.

  14. #14
    SitePoint Zealot
    Join Date
    Oct 2008
    Location
    NE Ohio
    Posts
    117
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that. I had not noticed my error previously, and that is the reason that my float was not clearing. It now works. Actually, my .clear selector did start on a new line. That is how I do it.
    William Otis
    Flamenco aficionado and Freelance Web designer
    www.dreammakergraphics.com/

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by BillO View Post
    Thanks for that. I had not noticed my error previously, and that is the reason that my float was not clearing. It now works.
    Glad its sorted.

    (Not to worry but I just look through the files you sent originally and you haven't utilised the clear class in your html which is why I said it was a css error but as such did not affect the html you gave us.)

    Actually, my .clear selector did start on a new line. That is how I do it.
    Yes sorry, that was my editor which reformats the code and you helps you spot some typos straight away.

    It's always worth running your CSS through the css validator as it will spot typos like that straight away and stop you pulling your hair out

  16. #16
    SitePoint Zealot
    Join Date
    Oct 2008
    Location
    NE Ohio
    Posts
    117
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    Questions, questions, questions. I was looking at your code above, and see a lot of confusing things; things I have not run into nor found anything about in my books. But first, I do not even try to design for IE6. That is a total waste of time, in my opinion. It is too out dated, was buggy, and didn't support much. I don't use Windows 98 anymore either, and my CPU isn't a 100Mhz (kidding here, but you get my point). Even IE7, is like a Model T Ford.

    While I may put my design concept together in a graphics program (useful when working for a client, because changes are simple, and can be quickly emailed for approval. As I'm designing in the graphics program, I have a pretty good idea how it will be structured in the code, so it saves time there too.

    First question:
    Could you explain z-index? What is it, what does it do, and how do I use it? Is it supported by IE8? It would imply that it is a stacking order, so I get the impression it could be used to overlap two divisions, such as my sidebar overlapping the header in my design. Would I be correct?

    In your code example above, you have:
    <style type="text/css">
    html, body {
    margin:0;
    padding:0;
    height:100%;
    }

    What is the purpose of "html" preceeding "body" in that style declaration? This is what I am familiar with:

    * {
    margin: 0;
    padding: 0;
    }

    body {
    margin: 0;
    padding: 0;
    background-color: #000000;
    color: #ffffff;
    }

    Explain this line and why is it separate from the #header ID selector above it?
    * html #header { height:150px }

    What is "min-height" and what does it do? Why is there a "overflow: hidden;" rule in the #header seletcor? I know what "overflow" normally does (add's scroll bars), but I don't see the reason it would be in the #header?

    Why would I want a full length sidebar? I could understand on a Web site that scrolls down seemingly forever (I hate sites like that), but I like a defined page height. Too much scrolling is an annoyance, unless it's a blog or some other kind of "informational" site, and even many of them break up the content on several pages, a much better way, in my opinion.

    What in the world is all this, and what does it do?

    #outer:before {
    content:" ";
    width:200px;
    display:block;
    position:absolute;
    background:#2d2d2d;
    top:0;
    bottom:0;
    left:0;
    z-index:1;
    }
    #outer:after {
    content:"";
    display:block;
    clear:both;
    height:0;
    visibility:hidden;
    }

    Many more questions. What is .overlay? What is zoom: 1.0? These are things I cannot find explained in anything I have. I havn't run into them anywhere. Maybe I need to check out Alistapart for some answers?

    Your design philosophy is certainly different than mine. I see no reason to think of a Website any differently than when facing a blank piece of paper and envisioning the design coming together to fill the space.

    I think one of the reasons we have so many ugly Websites on the Net is because too many "designers" are programers only and have no artistic ability whatsoever. To me, design is everything. "Content" should be made to fit the design, and become part of it (unless the purpose of the site is only for information, in which case you are really just creating a "paper."

    A company Website is to create an image. It also is for the purpose of creating an emotional response (favorable, of course) so that a visitor will make a decision to call for more information, for an appointment, etc. I like to say that a Website is "your company's 'face' on the Web." It better look good.

    Too much copy on a company Website isn't going to be read. A well thought out headline (the purpose of which is to get the viewer to read the next line, i.e., the copy) is important. The copy should be well written, and elicit a response, but too much of it will lose the visitor. Tell about your product or service, but brevity is king. A good source on copy writing that I would reccomend to anyone creating Websites is "The Copywriter's Handbook", by Robert W. Bly.

    A company Website is an advertisement. That is why design is so important. It should quickly grab the attention of the visitor. An ugly Website isn't going to do that, but will elicit a negative response. There are far too many Websites with too much "content" and not enough "design." That's because they weren't designed by artists, but technicians. People who know nothing about advertising art.

    I have an advantage over them. I am a graduate of The Art Institute of Pittsburgh (1964), and I have attended some good advertising seminars, lead by a "powehouse" in advertising, Jack Trout.

    If all anyone wants on a Website is "content," then just create a Wordpress blog and be done with it. That is what my former client did, and she is now the proud owner of one of the ugliest Websites on the Net. Design is nonexistant, and in my opinion, she destroyed her image. But, we had "issues;" she always had changes and additions for me to do, but she didn't like paying for them.
    William Otis
    Flamenco aficionado and Freelance Web designer
    www.dreammakergraphics.com/

  17. #17
    SitePoint Zealot
    Join Date
    Oct 2008
    Location
    NE Ohio
    Posts
    117
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I do always validate my CSS and my HTML on every Website. Any errors I get I fix. And I always advertise the fact that the code is validated, by placing the little graphic at the bottom of the page.

    However, since the Website we have been discussing only exists on my machine at present, and is not a live site, I cannot use the validator.
    William Otis
    Flamenco aficionado and Freelance Web designer
    www.dreammakergraphics.com/

  18. #18
    SitePoint Zealot
    Join Date
    Oct 2008
    Location
    NE Ohio
    Posts
    117
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Paul, I meant to ask you before, what do you mean when you say "magic number" pulled out of the air?
    William Otis
    Flamenco aficionado and Freelance Web designer
    www.dreammakergraphics.com/

  19. #19
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by BillO View Post
    Hi Paul,

    Questions, questions, questions.
    No worries - That's how you learn and its good to ask

    Some of my replies may souind as though I am being awkward but I am just putting forward the other side of the coin and are meant in a light hearted way.

    But first, I do not even try to design for IE6. That is a total waste of time, in my opinion.
    No that's fine and most people have dropped IE6 support now anyway. I still support IE6 but only at a minimum level. I know all the bugs and what to avoid so its no problem for me as I cut my teeth on ie5 and 6 but for others it would be time consuming to work out all the bugs.
    First question:
    Could you explain z-index? What is it, what does it do, and how do I use it? Is it supported by IE8? It would imply that it is a stacking order, so I get the impression it could be used to overlap two divisions, such as my sidebar overlapping the header in my design. Would I be correct?
    Yes z-index determine how "positioned" elements are stacked on the page. It is supported in all browsers right back to the beginning although earlier browsers did have numerous bugs.

    There are a couple of important things you should know about z-index:

    1) Only positioned elements can have a z-index (position:absolute,position:fixed or position:relative).

    Therefore if you have a static (position:static - the default) element then z-index will not work alone. you would first need to add position:relative and then the z-index will take effects. Adding position:relative without co-ordinates will have no visual effect on the element but will allow z-index to work.

    2) Ultimately its the positioned parent (with a z-index other than auto) that determines the stacking context of its children. A parent with a z-index of one will be "atomic" for all its children and even if a child has z-index of 9999999 it will not lie on top of any element outside its current stacking context that has a z-index of 2.

    3) IE7 applies z-index:0 by default to all positioned elements which means that children can never escape from the confines of a positioned parent. This is an error and it should be z-index:auto by default which allows the children to interact outside that structure.

    4) If no z-index is applied then elements that follow later in the html will generally have precedence in the stacking order where overlaps are concerned.

    In your code example above, you have:
    <style type="text/css">
    html, body {
    margin:0;
    padding:0;
    height:100%;
    }

    What is the purpose of "html" preceeding "body" in that style declaration? This is what I am familiar with:
    When you create styles you can use a comma separated lists where property values may be shared between elements.

    If for example you had these rules:

    Code:
    h1{margin:0 0 1em;color:red;background:#fff}
    h2{margin:0 0 1em;color:red;background:#fff}
    p{margin:0 0 1em;color:red;background:#fff}
    Then you could use the comma separated list instead and save tons of code:

    Code:
    h1,h2,p{margin:0 0 1em;color:red;background:#fff}
    The comma just separates the selectors just as though they were in example one. There is no relationship between the selectors in the comma separated list. They are all individual.

    Explain this line and why is it separate from the #header ID selector above it?
    * html #header { height:150px }
    That is the IE6 hack and as you don't support IE6 the code can be removed. It is a mechanism to supply styles to IE6 only using a flaw in its parsing mechanism. Its valid code but nonsense as the html element has no parent so the universal selctor (*) should fail at that position. IE6 gets this wrong and is therefore a 100% safe hack to use for giving styles to only IE6 and has been the lifeblood for many a coder.

    We hide the height:100% from other browsers because that would limit the height to an initial 100% and thus content would spill out when exceeded. However IE6 treats height as min-height and will always expand a container to fit its contents.

    Code:
    What is "min-height" and what does it do? Why is there a "overflow: hidden;" rule in the #header seletcor? I know what "overflow" normally does (add's scroll bars), but I don't see the reason it would be in the #header?
    min-height sets a minimum height for the page. I set height:100% for html and body (this s the only place you can really use height:100%) and then the first wrapper on the page can utilise min-height:100% and thus stretch all the way to the bottom of the viewport. You can't nest min-height inside another min-height with a percentage value as that defaults to auto so the only time this construct is useful is on the page wrapper where the min-height:100% is based on the body's height:100%.

    The overflow:hidden was used to contain the floats in the header. there are many ways to contain floats but when you don't need visible overflow then overflow:hidden is one of the easiest. If an element contains only floats then it has no height because floats are removed from the flow so you need ot contain the float when you want the parent to wrap around it.

    Why would I want a full length sidebar?
    That looked like what you were aiming for with your 900px high sidebar. Another magic number you plucked out of the air that has no relevance on your page (You can read up on the magic number here).

    I could understand on a Web site that scrolls down seemingly forever (I hate sites like that),
    Well you just created one foe me When I open your page in my browsers your sidebar scrolls down for 500px below the viewport yet there is no content down there. That's a sure sign of a bad design concept. If you look at my example the sidebar goes to the bottom of the viewport and there is no vertical scrollbar. However my sidebar will increase in height should content in that column exceed the available viewport height as required.

    Code:
     but I like a defined page height.
    The Number 1 newbie mistake I'm afraid. Fixed heights just don't work on the web unless its a fixed height photo gallery with no real content but even then it would be in ems and not px so that it grows on font resize.

    There was a campaign about Fixed heights and the slogan was "Just say No "

    Code:
    Too much scrolling is an annoyance,
    ..and that's exactly what your page does for me. It gives me a great big vertical scrollbar and I have to go and look and see what's there and find out there's nothing there. So you've not only given me a vertical scrolbar you've made me look foolish for going and looking
    unless it's a blog or some other kind of "informational" site, and even many of them break up the content on several pages, a much better way, in my opinion.
    I know what you were getting at and long pages can be a sign that the author has not thought enough about the content they want to present so pages that go on forever are a turn off also.

    However you never need to define the height and just let the content define the height and in that way users can resize the text and you can add or remove content withoot changing line of code.

    What in the world is all this, and what does it do?

    #outer:before {
    content:" ";
    width:200px;
    display:block;
    position:absolute;
    background:#2d2d2d;
    top:0;
    bottom:0;
    left:0;
    z-index:1;
    }
    #outer:after {
    content:"";
    display:block;
    clear:both;
    height:0;
    visibility:hidden;
    }
    That's just the css3 pseudo elements and allows us to place certain content/effect into the page via css.

    I used #outer:before to apply the full length sidebar background to the page without the need for adding an extra element. The #outer:after rules were another float clearing technique and you can read up on it here along with the more advanced version.

    Many more questions. What is .overlay?
    That was an empty element I placed n the page to create that full width red background. As I mentioned above that stripe could be added a s a simple repeating background image to the body element instead - assuming you didn't have another image on the body.
    What is zoom: 1.0?
    It is proprietary IE code (invalid but harmless) and used a s a trigger for haslayout. Most of IE's bugs (IE6/7) are down to the element not having haslayout and you can read up on it in that link I just gave.
    These are things I cannot find explained in anything I have.
    Then you didn't buy my book They are all mentioned in the Sitepoint reference which is takes from the book of which I was co author. You will also find a mention of most of these points in the CSS faq (link in my sig).

    Your design philosophy is certainly different than mine. I see no reason to think of a Website any differently than when facing a blank piece of paper and envisioning the design coming together to fill the space.
    Yes it is a fundamental change and I approach it from a coders point of view as drawings just don't give the real picture

    Designing on paper is fine but it only tells a fraction of the story. If I asked you to draw a picture on your piece of paper and then say tear it in half and see if the picture stills fit you couldn't do it. Yet that's exactly what we have to cope with on the web. We have no fixed drawing surface. We don't even have control of the pencil.

    A good website is a marriage of the two. Good design and a good user interface.

    I think one of the reasons we have so many ugly Websites on the Net is because too many "designers" are programers only and have no artistic ability whatsoever. To me, design is everything. "Content" should be made to fit the design, and become part of it (unless the purpose of the site is only for information, in which case you are really just creating a "paper."
    No that's the totally wrong way again and another common mistake - especially from designers. Content is king. There have been many surveys carried out and the one over-riding factor is that users will continue to revisit a site even if it is ugly but as long as the content is good and the site easily used. On the other hands flashy but unusable sites just die. As I said you want the best of both worlds but design should not outweigh content.

    A company Website is to create an image. It also is for the purpose of creating an emotional response (favorable, of course) so that a visitor will make a decision to call for more information, for an appointment, etc. I like to say that a Website is "your company's 'face' on the Web." It better look good.
    No - it better work or you will lose customers. It's no good someone saying "ooh that looks nice" and then trying to click underlined text that's not a link or fill in a contact form that doesn't work or a page that is badly broken on the resolution they are viewing at.

    Too much copy on a company Website isn't going to be read. A well thought out headline (the purpose of which is to get the viewer to read the next line, i.e., the copy) is important. The copy should be well written, and elicit a response, but too much of it will lose the visitor. Tell about your product or service, but brevity is king. A good source on copy writing that I would reccomend to anyone creating Websites is "The Copywriter's Handbook", by Robert W. Bly.
    Good content is good content It can be short or long depending on the requirements but usually on the web shorter is better as surfers have quick attention spans which is why they switch off a site that wont work for them. Many established surfers switch off images anyway to surf faster. I had connection problems for six weeks during sept/oct and the only way I could surf was with images and js disabled.

    Remember google doesn't see your images and for an ugly site google must be at the top yet it is one of the most popular because its so easy and quick to use. No splash page, no irrelevant features. Just straight to the point.
    A company Website is an advertisement. That is why design is so important. It should quickly grab the attention of the visitor. An ugly Website isn't going to do that, but will elicit a negative response. There are far too many Websites with too much "content" and not enough "design." That's because they weren't designed by artists, but technicians. People who know nothing about advertising art.

    I have an advantage over them. I am a graduate of The Art Institute of Pittsburgh (1964), and I have attended some good advertising seminars, lead by a "powehouse" in advertising, Jack Trout.

    If all anyone wants on a Website is "content," then just create a Wordpress blog and be done with it. That is what my former client did, and she is now the proud owner of one of the ugliest Websites on the Net. Design is nonexistant, and in my opinion, she destroyed her image. But, we had "issues;" she always had changes and additions for me to do, but she didn't like paying for them.
    The web is unlike any other medium and designers and experts from outside this medium have little relevance. A good design is important and fundamental design concepts and artistic qualities are also important but they are all secondary to the way that the web works. The best designers on the web are the ones that can marry those distinct qualities into a usable webpage.

    These days its even more important to design with care as more and more clients are demanding responsive websites which cannot follow any single drawing.

    I understand the designers view as I work with them all the time as I mainly code templates for designers but quite often I get designs from experienced designers that just won't work on the web. Not everything is possible or feasible and just because you can draw it doesn't mean it can be coded into a satisfactory working layout.

    However after saying all that I still urge you to be creative and to think outside the box. Good design doesn't have to be boring design - it just has to work. Don't take my word for it either . Do some research and come to your own conclusions.

  20. #20
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by BillO View Post
    I do always validate my CSS and my HTML on every Website. Any errors I get I fix. And I always advertise the fact that the code is validated, by placing the little graphic at the bottom of the page.
    That's old hat I'm afraid and validation is a means to an end. No one's interested in the little logos (we all had them years ago ). However it does show you are keen to get a valid site which is good. The problem these days is that with vendor prefixes so prevalent and necessary it is not possible to get 100% valid code for every site.


    However, since the Website we have been discussing only exists on my machine at present, and is not a live site, I cannot use the validator.
    You can just paste your code onto that link I l already gave you. No need to be live. I keep the tab open in the browser and paste in my code frequently during development. Never wait until the end as that's too late and you may build your page on a foundation that's not solid. If you have Firefox then you can the html validator extension which shows errors immediately in the status bar even for local sites.

  21. #21
    SitePoint Zealot
    Join Date
    Oct 2008
    Location
    NE Ohio
    Posts
    117
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Vindicated! Negative margins not "magic numbers."

    I first read about negative margins as a design technique a couple of years ago, in a Site Point article by Jina Bolton entitled, "Breaking Out of the Box"
    http://www.sitepoint.com/breaking-out-of-the-box/, wherein she described the use of negative margins in design to offset elements and "break the grid" to achieve a more attractive layout. I later read how negative margins could be used to actually overlap elements for design purposes.

    Negative margins are not "magic numbers," a term, it seems from the link that you posted, that has no real meaning, but is used derogatorily to mean "a hack." After doing some research, I found that this is an ongoing controversy, with some designers advising to avoid them like the plague. But negative margins are a valid CSS technique according to the W3C.
    1. Setting the record straight
    We all use margins in our CSS, but when it comes to negative margins, our relationship somehow manages to take a turn for the worse. The use of negative margins in web design is so divided that while some of us absolutely love it, there are also those who simply think it’s the work of the devil.

    A negative margin looks like this:

    view sourceprint?
    1 #content {margin-left:-100px;}
    Negative margins are usually applied in small doses but as you’ll see later on, it’s capable of so much more. A few things to note about negative margins are:

    •They are extremely valid CSS
    I’m not kidding on this one. W3C even says that, “Negative values for margin properties are allowed…” ‘Nuff said. Check out the article 1 for more details.
    •Negative margins are not a hack
    This is especially true. It’s because of not understanding negative margins properly that it got its hackish image. It only becomes a hack if you use it to fix an error you made elsewhere.
    •It goes with the flow
    It does not break the flow of the page if applied to elements without floats. So if you use a negative margin to nudge an element upwards, all succeeding elements will be nudged as well.
    •It is highly compatible
    Negative margins are wholly supported across all modern browsers (and IE6 in most cases).
    •It reacts differently when floats are applied
    Negative margins are not your everyday CSS so they should be applied with care.
    •Dreamweaver doesn’t understand it
    Negative margins don’t show up in the Design View of DW. Why are you even checking your site in Design View anyway?

    http://coding.smashingmagazine.com/2...ative-margins/

    In my design, I used a negative top margin on the sidebar to position it above the header all the way to the top of the page, and overlapping the header (-185 px = 150 px header height + 35px top margin applied to the header div). This was deliberate, and not "picked out of the air." I have not yet found any other way to accomplish this techique, which in my design allows for the header horizontal gray stripes to show over the top of the sidebar (which has a transparent gradient background image that repeats horizontally across it's width).

    This is also the reason I have had to assign a height to the sidebar (which you also called a "magic number"), as without a height there is no sidebar visible, as it collapses (as one might expect). Additionally, the page height is specified at 900px ( I do not understand why you said this caused you to scroll continually — in any of my browsers, I cannot scroll below the set height of the page (which happens to be the height of my monitor (1600px X 900px). For the purposes of testing the design, this 900px height was arbitrary, I admit, and I may set the page height taller if it needs to be. What is wrong with establishing a height for a Web page? Another controversy for which I'm sure there are plenty of desingers who prefer to have no end to the page length, and something I despise in a Website. Make a new page! For cryin' out loud, what's the big deal?

    I think we are probably more or less really on the same page where the importance of design vs. the importance of "content" is concerned, but for me, if design is going to suffer, I'll rethink content placement and styling first. I do agree that what is contained in the page ("content") becomes integral to the design (and I think a good example of what I mean is in Jina Bolton's article referenced above).

    I would like to see some examples of some of your designs. Where can I find them?

    I knew about comma separated lists to apply styles to multiple elements. I don't understand why you added "html" in front of the "body." What, will that do?

    Thanks for the info on z-index. Not sure yet where it might apply, but I can see that it could be useful in accomplishing some design technique.
    William Otis
    Flamenco aficionado and Freelance Web designer
    www.dreammakergraphics.com/

  22. #22
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by BillO View Post
    I first read about negative margins as a design technique a couple of years ago, in a Site Point article by Jina Bolton entitled, "Breaking Out of the Box"
    http://www.sitepoint.com/breaking-out-of-the-box/, wherein she described the use of negative margins in design to offset elements and "break the grid" to achieve a more attractive layout. I later read how negative margins could be used to actually overlap elements for design purposes.
    I think you misunderstand me a little and I have nothing against negative margins as I have been one of the proponents of them for the last ten years. You can read my article on them that pre-dates the Gina Bolton article by some time (whose article incidentally has the layout is broken in IE6 which was the major browser at that time).

    I am just saying be careful when you use them. It looks as though your header section doesn't contain much text content so you will probably be ok. If it's just a logo and tagline then you should be safe.

    Negative margins are not "magic numbers," a term, it seems from the link that you posted, that has no real meaning, but is used derogatorily to mean "a hack."
    Again, you have missed the point. I'm not saying that negative margins are a hack I'm saying that the pixel value that you added to them can't be relied upon. You can't be sure that your header is always going to be 185px high in everyone's browser unless you have a fixed height image and no text. If someone resizes text then the height of your header may change and the sidebar will be misplaced or text overlap. It will probably be ok in your case as long as you don't have great chunks of text in the header.

    As I said sometimes you have no choice when a design requires it but the term "magic number" means that you have measured something and found it to be a certain measurement and then dragged something else up to match that measurement. It's not a reliable way to do something as you want it to be automatic. It's ok if you are matching a fixed height image but not if you are trying to match alongside fluid text.

    After doing some research, I found that this is an ongoing controversy, with some designers advising to avoid them like the plague. But negative margins are a valid CSS technique according to the W3C.
    As I said I was one of the pioneers of negative margin layouts way back here in this very dated thread from 10 years ago.

    In my design, I used a negative top margin on the sidebar to position it above the header all the way to the top of the page, and overlapping the header (-185 px = 150 px header height + 35px top margin applied to the header div). This was deliberate, and not "picked out of the air." I have not yet found any other way to accomplish this techique, which in my design allows for the header horizontal gray stripes to show over the top of the sidebar (which has a transparent gradient background image that repeats horizontally across it's width).
    Yes, as long as the header won''t change in height then it should be ok. It could be done in many other ways but as you are matching the height of the header it is a limiting factor. The ideal would be for the header to be able to expand if someone resizes in their browsers and for the stripe to follow suit but that would be quite complicated but not impossible.

    This is also the reason I have had to assign a height to the sidebar (which you also called a "magic number"), as without a height there is no sidebar visible, as it collapses (as one might expect). Additionally, the page height is specified at 900px ( I do not understand why you said this caused you to scroll continually — in any of my browsers, I cannot scroll below the set height of the page (which happens to be the height of my monitor (1600px X 900px). For the purposes of testing the design, this 900px height was arbitrary, I admit, and I may set the page height taller if it needs to be. What is wrong with establishing a height for a Web page? Another controversy for which I'm sure there are plenty of desingers who prefer to have no end to the page length, and something I despise in a Website. Make a new page! For cryin' out loud, what's the big deal?
    I think you may be missing what I'm getting at here.

    With your example and my browser window open at 450px high as it is now I get 450px of dead space below the viewport and a vertical scrollbar showing me there is content below the fold yet there is none there.

    One of the biggest design Faux pas is to have a scrollbar when none is in fact needed and should be avoided at all times.

    You can't arbitrarily say that a page height is going to be 900px. It wont be that height for anyone perhaps except you. I can't re-iterate this strongly enough and you should not set a height on your page unless its one of those photo gallery sites with no content that sit central in the screen.

    The height of the page should be dictated by its content. You never really need to set it. This is mainly the same for all elements that hold text content and they should finish naturally where their content ends.

    If you need columns to match the height of other columns then you can use the "faux column" techniques I already mentioned or for ie8+ you could use the display:table approach or you could use the neater method as in my example where the sidebar reaches the bottom of the viewport or the bottom of the content if longer than the viewport.

    There are a number of ways you can create the illusion of equal columns but you should always avoid just setting a height as that can never be guaranteed and is a sure way for the site to break should someone resize text or indeed wou8ld have to be modified should you add more text later.

    I would like to see some examples of some of your designs. Where can I find them?
    You can't as I don't create designs. I turn designs into working pages for other designers as css/html is my expertise. I create about 5 templates a week for various designers from their designs so have coded thousands of templates which I then hand over to the client to manage from there on. That's how I know what will work and what won't work although I couldn't design a thing myself. You can read my book though (although its out of print now).

    I knew about comma separated lists to apply styles to multiple elements. I don't understand why you added "html" in front of the "body." What, will that do?
    It's just the same as this:

    Code:
    html{margin:0;padding:0}
    body{margin:0;padding:0}
    But shorter.

    Some browsers add margins to either html or body and some add padding so the only sure way to reset them is to set both to zero.
    Code:
    html,body{margin:0;padding:0}
    But I think you knew that anyway

    I don't use the universal selector to reset things (* {margin:0;padding:0})because it messes with the behaviour of form elements and its better to define your own reset.

    Thanks for the info on z-index. Not sure yet where it might apply, but I can see that it could be useful in accomplishing some design technique.
    You're welcome. It will come in useful I can guarantee it

    Glad that you are taking the time to question these points as they will be important to you as you progress.

  23. #23
    SitePoint Zealot
    Join Date
    Oct 2008
    Location
    NE Ohio
    Posts
    117
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Now this is hysterical. I read your article (link above) this morning before I posted here, not realizing that you had written it! It was a link on another page that I was looking at that was discussing negative margiins.

    I am learning a lot, and a lot of learning comes through experimentation. This is my very first Website that I created some years ago for my ceramic tile business (I'm now retired from that): http://www.kinsmantile.com/
    I have disabled the "ebooks" and the "Where to buy tile" buttons, becuause I never did get any ebooks created, and the "Where to buy tile" page was ugly (basically) and since it covered only one source, where we bought all our supplies, I'm sure it's been outdated for a long time. It was best to just disable the link. The only reason I leave the site active is because there is a lot of good information on it, and I still get calls from people asking for advice. Last call I got was last summer, when I guy from New York called who was building a custom shower (his first project ever!) and had many questions.

    All the tie work shown in the photos was done by my wife and me working together. She had most of the design ideas. I cut the tile and put them together.
    William Otis
    Flamenco aficionado and Freelance Web designer
    www.dreammakergraphics.com/

  24. #24
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    I am learning a lot, and a lot of learning comes through experimentation
    Yes, its the best way to learn and see what works the best. The beauty of CSS is that there are often many ways to achieve a design but its downfall is that often there is only one right way that will work well for the task in hand. Practice and experience certainly helps as you start to see how to approach something before you start.

    It's often difficult to give a definitive answer because it all depends on the dynamics of the layout concerned and indeed two coders may give differing opinions but there are certain concepts that will be agreed upon. In the end you have to make the best choice that works for you as long as you know what the consequences are and then you can work around them.

    I may say things are black and white but there is often a lot of gray in-between also

    The only reason I leave the site active is because there is a lot of good information on it,
    If it stills serves its purpose and has good content then its doing its job so you may as well leave it.

    We could all improve on what we did before (unless we've peaked) and its more a matter of not making the same mistakes each time and trying to be creative without being restrictive.

  25. #25
    SitePoint Zealot
    Join Date
    Oct 2008
    Location
    NE Ohio
    Posts
    117
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks, Paul, for all your help. I have just spent some time here this morning re-reading this entire thread. Main problem solved, but I still have tons of questions. My primary question at this point is regarding my sidebar where I have a background gradient (which I happen to like) which fades to black a the bottom, so the sidebar visually disappears at the bottom (as does the background on the main content block).

    I have repositioned the sidebar using #sidebar {position: absolute; top: 0; width: 200px; background-color: #2d2d2d; background-image: url(/images/background/sidebargradient.png); background-repeat: repeat-x;} (this eliminates the use of the negative top margin), added a container #page {margin: 0 auto; width: 960px;}. I applied a z-index: 1 to the header rules which gives me the overlap I wanted with the stripes of the header overlaying the sidebar (thanks for explaining how to use that). I repositioned the content using #content {float: left; margin-top: 30px; margin-left: 230px; width: 730px; height: 690px; background-image: url(/images/background/copyblockgradient.png); background-repeat: repeat-x;}.

    However, as you can see, I still need to specify a height, or my gradient background does not show up either in the sidebar or the content area. I do not see a way around that. I can understand the concept of "faux columns" if I was a repeating a background image vertically. It does not work with a background image repeated horizontally. Is this just one of those gray areas, or is their a solution? My background gradient fades to solid black so it does not need to be made taller, even if the columns were extended by additional content. I just want that fading background color to show up. Is there a solution here? What am I missing?
    William Otis
    Flamenco aficionado and Freelance Web designer
    www.dreammakergraphics.com/


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
  •