SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 27
  1. #1
    SitePoint Enthusiast protheory's Avatar
    Join Date
    Mar 2008
    Location
    Notts, England
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Template Help

    Hi, I'm learning CSS and I'd just like to post my own thread about some questions I've got in general. I've downloaded a free CSS based template and I'm planning to use this as a base for my studies but as per usual I've got a lot of questions.

    Here's the template code:

    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>
    	<title>Your Name here</title>
    	<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    	<meta name="author" content="Your Name here" />
    	<meta name="keywords" content="" />
    	<meta name="description" content="" />	
    	<link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    <div id="container">
    	<div id="header"><div>
    		<h1><a href="#">Template<strong style="color:#009900"></strong></a></h1>
    		<ul id="nav">
    			<li><a href="/index.html">home</a></li>
    
    			<li><a href="/index.html">about</a></li>
    			<li><a href="/index.html">services</a></li>
    
    			<li><a href="/index.html">contact</a></li>
    		</ul>
    	</div></div>
    	<div id="strike"><div class="home">
    	  <p>Example text here  </p>
    	</div></div>
    
    	<div id="body">
    
    		<div id="l">
    			<h2>Welcome</h2>
    			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc erat  augue, porttitor sed, sodales vitae, commodo id, urna. Curabitur congue  malesuada sapien. Donec ornare suscipit massa. Curabitur tempus, arcu  ac facilisis posuere, risus dui fermentum nibh, nec ultrices urna ante  et dui. Vestibulum tincidunt lorem vel nisi ultricies ullamcorper. Sed  odio dolor, rutrum et, consequat a, malesuada sed, augue. Vivamus  nonummy urna quis tellus sagittis accumsan. </p>
    			<p>The quick brown fox jumped over the lazy dogs. The quick brown fox jumped over the lazy dogs. The quick brown fox jumped over the lazy dogs.  Etiam vel erat. Sed neque  nunc, hendrerit eu, vulputate elementum, posuere ut, libero. Praesent  pulvinar erat eget eros. Fusce vitae est. Mauris suscipit, nibh sit  amet malesuada porta, dui lectus commodo erat, id bibendum sapien dolor  sit amet metus. Praesent metus nunc, suscipit at, tempor a, auctor vel,  purus. Vivamus convallis scelerisque turpis. Etiam sodales tempus massa.</p>
    		</div>		
    		
    	</div>
    <br clear="all"/></div>	
    
    <div id="footer">
      <div>
    
        <div>
          <p>Copyright &copy; 2006 Your Name here, All Rights Reserved.
            | </p>
          <p><br />
          </p>
        </div>
      </div>
    </div>
    <div id="newdiv">Content for  id "newdiv" Goes Here</div>
    
    <div>Content for  id "newdiv" Goes Here</div><div>Content for  id "newdiv" Goes Here</div><div>Content for  id "newdiv" Goes Here</div><div>Content for  id "newdiv" Goes Here</div><div>Content for  id "newdiv" Goes Here</div><div>Content for  id "newdiv" Goes Here</div>
    </body>
    </html>
    And the CSS:

    Code:
    body {
    	font-family: "Trebuchet MS", Tahoma, Verdana, sans-serif;
    	font-size: 76%; 
    	margin: 0; 
    	padding: 0;
    	color: #666;
    	text-align: center;
    	}
    a { text-decoration: none; border-bottom: 1px solid #ccc; color: #f90; }
    a:hover { border: none; }	
    h2 {
    	color: #333;
    	font-size: 16px;
    	font-weight: bold;
    	clear: both;
    	background-position: 0 25px;
    	padding-bottom: 10px;
    	margin-bottom: -6px;
    	}
    	
    
    #container {
    	height: auto ;
    	height: 100%;
    	min-height: 100%;
    	position: relative;
    	}
    	
    
    #header { border-top: 5px solid #000; }	
    #header div {
    	margin: 0 auto;
    	width: 750px;
    	text-align: left;
    	padding-left: 20px;
    	}
    #header h1 { 
    	font-family: Century Gothic, Tahoma, Verdana, sans-serif;
    	float: left;	
    	font-size: 1.9em;
    	padding: 30px 0;
    	margin: 0;
    	}			
    #header h1 span { color: #999; }	
    #header h1 a {
    	border: none;
    	color: #000;	
    	font-weight: normal;	
    	}		
    
    #nav {
    	float: right;
    	margin: 0;
    	padding: 0;
    	}
    #nav li {
    	list-style-type: none;
    	display: inline;		
    	float: left;	
    	}	
    #nav li a {
    	text-decoration: none;
    	border: none;
    	color: #000;
    	padding-top: 5px;		
    	display: block;	
    	margin: 0 15px;		
    	}		
    #nav li a:hover { color: #33CC00; }	
    
    #strike {
    	background-image:url(images/site-strike.jpg);
    	text-align: center;
    	clear: both;
    	margin-bottom: 35px;
    	padding-left: 10px;
    	}
    #strike div {
    	width: 420px;
    	margin: 0 auto;
    	text-align: left;
    	padding: 40px 30px 40px 0;
    	}	
    
    #strike p {
    	color: #fff;
    	margin: 0;
    	padding: 0;
    	font-size: 20px;
    	letter-spacing: -1px;
    	}	
    	
    
    #body { 
    	width: 750px;
    	margin: 0 auto;
    	text-align: justify;
    	padding-bottom: 61px;	
    	}
    #body:after { 
    	content: "."; 
    	display: block; 
    	clear: both; 
    	visibility: hidden; 
    	height: 0;
    	}
    * html #body { height: 1%; }
    
    #l, 
    #l {
    	width: 440px;
    	margin: 0 auto;
    	}
    #l p,
     {
    	margin-top: 10px;
    	text-align: left;
    	}	
    	
    #footer {
    	margin-top: -61px;
    	color: #fff;
    	padding-top: 30px;
    	width: 100%;
    	z-index: 500;
    	position: relative;
    	background: #fff;
    	padding-bottom: 30px;
    	}
    #footer div {
    	width: 800px;
    	background-color:#000000;
    	margin: 0 auto;
    	}	
    #footer div div {	
    	padding-top: 10px;	
    	padding-bottom: 2px;
    	font-size: 10px;
    	}
    #footer a { color: #fff; font-weight: bold; }
    I've just recently managed to delete a right hand column and align my remaining column center which I'm pleased about, thanks to all from this forum that helped me with this.

    I'll include a screen shot of the current template:



    First, I'd like to start by asking why the link text, home, about, services, contact are positioned where they are. From what I can see the list containing the links is floated right which I understand but it's sort of stopped by something I think as it doesn't automatically extend to the extreme right of my screen. I can't seem to find what's stopping it from floating to the extreme right.

    I'd also like to try to understand what's causing it to be pushed up to the top of my page too, there's quite a large white gap underneath it and a tiny gap at the top of the list.

    Thanks everybody.

    Pro

  2. #2
    doing my best to help c2uk's Avatar
    Join Date
    May 2005
    Location
    Cardiff
    Posts
    1,832
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Let's see whether I can explain a few bits, hope it makes sense:

    1. why doesn't it expand to the very right of the screen:
    the list (#nav) is within another div (this div has no class nor id) which is within another div (#header):

    div#header > div > ul#nav

    now if you look into the css, you'll see this:

    Code css:
    #header div {
    	margin: 0 auto;
    	width: 750px;
    	text-align: left;
    	padding-left: 20px;
    	}
    this addresses the div within the header div, so it restricts its width to 750px and centers it (margin:0 auto) - the auto part is responsible for the centering.

    2. why is it pushed to the top of your page:
    By floating, it is taken out of the natural flow of the content. Without this it would be displayed following the heading, now it is displayed to the right within its parent div. There are no margins or paddings applied to neither the list nor any of its parents (the div without a class/id, div#header, div#container, body)

    3. why is there a gap underneath it:
    This gap is actually created by the padding applied to #header h1 (padding: 30px 0 - which creates a padding of 30px to the top and bottom but no padding to the left and right of the text).

    P.S. Firebug for Firefox is a great tool to explore CSS.
    Dan G
    Marketing Strategist & Consultant

  3. #3
    SitePoint Guru alecrust's Avatar
    Join Date
    Jun 2007
    Location
    London, UK
    Posts
    728
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The reason your navigation links are not flush against the right-hand side of your screen, is because in your CSS file you have:
    Code:
    #header div {
    	margin: 0 auto;
    	width: 750px;
    	text-align: left;
    	padding-left: 20px;
    	}
    This says all DIVs within your "#header" DIV will have these properties. One of these properties happens to be:
    Code:
    width: 750px;
    In your HTML you have:
    Code:
    <div id="header">
      <div>
        header links here
      </div>
    </div>
    Now, what I would have done is just have:
    Code:
    #header {
    	margin: 0 auto;
    	width: 750px;
    	text-align: left;
    	padding-left: 20px;
    	}
    In your CSS, which says the DIV called "#header" will have these properties. Then your HTML would just be:
    Code:
    <div id="header">
      header links here
    </div>
    Which, as you can see will save one DIV. You may have to read what I said above a couple times to get the grip of it, but I promise I'm making sense

    About your second question, it isn't being pushed to the top of the page, it is just the first thing on the page.

    The reason your main page title (<h1>) is lower down than the navigation links, is that it has a padding-top of 30px. Specified wit this CSS:
    Code:
    #header h1 { 
    	font-family: Century Gothic, Tahoma, Verdana, sans-serif;
    	float: left;	
    	font-size: 1.9em;
    	padding: 30px 0;
    	margin: 0;
    	}
    Now in your CSS, it actually uses short hand CSS, which will add even more confusion to you. Just Google: "Short hand CSS" to find out more on that.

    To be quite honest, that template isn't really layout out in either the correct, or an easy to understand way.

    Hope that helped slightly.
    Honda Civic Forum - UK Civic Forum
    Web Host Reviews - Independent, honest host reviews
    My Portfolio - Simplicity is the ultimate sophistication

  4. #4
    SitePoint Enthusiast protheory's Avatar
    Join Date
    Mar 2008
    Location
    Notts, England
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by c2uk View Post
    Let's see whether I can explain a few bits, hope it makes sense:

    1. why doesn't it expand to the very right of the screen:
    the list (#nav) is within another div (this div has no class nor id) which is within another div (#header):

    div#header > div > ul#nav

    now if you look into the css, you'll see this:

    Code css:
    #header div {
    	margin: 0 auto;
    	width: 750px;
    	text-align: left;
    	padding-left: 20px;
    	}
    this addresses the div within the header div, so it restricts its width to 750px and centers it (margin:0 auto) - the auto part is responsible for the centering.

    2. why is it pushed to the top of your page:
    By floating, it is taken out of the natural flow of the content. Without this it would be displayed following the heading, now it is displayed to the right within its parent div. There are no margins or paddings applied to neither the list nor any of its parents (the div without a class/id, div#header, div#container, body)

    3. why is there a gap underneath it:
    This gap is actually created by the padding applied to #header h1 (padding: 30px 0 - which creates a padding of 30px to the top and bottom but no padding to the left and right of the text).

    P.S. Firebug for Firefox is a great tool to explore CSS.
    Great stuff, thanks! So my navbar links, let's see if I've understood you here, align center (margin 0 auto) but as they are contained within a width of 750px and my screen resolution is a lot wider they appear where they do? So they're actually centered but constrained sort of thing?

    I'm confusing myself here, I think my navbar links are floated right but the container they're in is aligned center, and restricted to a centered container width of 750px. Not sure if this makes sense exactly to you but to me it seems to explain why the list appears where it does on the horizontal alignment. And if I increased the 750px container I'd see them move across some more if I had a big enough screen wouldn't I?

    I looked at the list's rules again and again and like you say it has no applied margins or padding and this got me confused. Now I've realised that the H1 saying 'Template' has padding and this affects my list as well. Does this mean that as such my H1 is underneath my floated list in my page flow? I mean that for the H1's padding to affect the list it must be below it mustn't it? I'm going on the floated property of my list #nav as it puts it to the top of the page doesn't it.

    I installed Firebug a couple of days ago, my main interest is editing live code at the moment which is a brilliant addition to my learning experience

  5. #5
    SitePoint Enthusiast protheory's Avatar
    Join Date
    Mar 2008
    Location
    Notts, England
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by alecrust View Post
    The reason your navigation links are not flush against the right-hand side of your screen, is because in your CSS file you have:
    Code:
    #header div {
    	margin: 0 auto;
    	width: 750px;
    	text-align: left;
    	padding-left: 20px;
    	}
    This says all DIVs within your "#header" DIV will have these properties. One of these properties happens to be:
    Code:
    width: 750px;
    In your HTML you have:
    Code:
    <div id="header">
      <div>
        header links here
      </div>
    </div>
    Now, what I would have done is just have:
    Code:
    #header {
    	margin: 0 auto;
    	width: 750px;
    	text-align: left;
    	padding-left: 20px;
    	}
    In your CSS, which says the DIV called "#header" will have these properties. Then your HTML would just be:
    Code:
    <div id="header">
      header links here
    </div>
    Which, as you can see will save one DIV. You may have to read what I said above a couple times to get the grip of it, but I promise I'm making sense

    About your second question, it isn't being pushed to the top of the page, it is just the first thing on the page.

    The reason your main page title (<h1>) is lower down than the navigation links, is that it has a padding-top of 30px. Specified wit this CSS:
    Code:
    #header h1 { 
    	font-family: Century Gothic, Tahoma, Verdana, sans-serif;
    	float: left;	
    	font-size: 1.9em;
    	padding: 30px 0;
    	margin: 0;
    	}
    Now in your CSS, it actually uses short hand CSS, which will add even more confusion to you. Just Google: "Short hand CSS" to find out more on that.

    To be quite honest, that template isn't really layout out in either the correct, or an easy to understand way.

    Hope that helped slightly.
    Yes, this helped me a lot, thanks It'll take me a bit of time to understand this but I feel like I'm on my way now. I just downloaded a template I liked the look of and now I'm trying out experiments with it. I'm planning to completely re-write it hopefully.

    EDIT - I've just tried saving a DIV and it worked but I lost my 1px black border:

    #header { border-top: 5px solid #000; }

    When I changed it to just a #header it was constrained to 750px and won't extend the border right across the top of my page as before. The border was there but I'd like to make it go right across the top of the page as before if possible.

  6. #6
    doing my best to help c2uk's Avatar
    Join Date
    May 2005
    Location
    Cardiff
    Posts
    1,832
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by protheory View Post
    Great stuff, thanks! So my navbar links, let's see if I've understood you here, align center (margin 0 auto) but as they are contained within a width of 750px and my screen resolution is a lot wider they appear where they do? So they're actually centered but constrained sort of thing?
    Nope, but you got it right here:

    I'm confusing myself here, I think my navbar links are floated right but the container they're in is aligned center, and restricted to a centered container width of 750px. Not sure if this makes sense exactly to you but to me it seems to explain why the list appears where it does on the horizontal alignment. And if I increased the 750px container I'd see them move across some more if I had a big enough screen wouldn't I?
    Yep, that's the way it works

    I looked at the list's rules again and again and like you say it has no applied margins or padding and this got me confused. Now I've realised that the H1 saying 'Template' has padding and this affects my list as well. Does this mean that as such my H1 is underneath my floated list in my page flow? I mean that for the H1's padding to affect the list it must be below it mustn't it? I'm going on the floated property of my list #nav as it puts it to the top of the page doesn't it.
    the navbar is taken out of the flow completely. So the padding doesn't effect the list at all, it just appears to. The padding influences the distance of h1 to the top, try setting it to 0 and you see what I mean.

    I installed Firebug a couple of days ago, my main interest is editing live code at the moment which is a brilliant addition to my learning experience
    There's an inspector button (the glasses or click on Inspect when Firebug is open) to hover over elements and you see the border and such as well as being able to select it in the firebug window. And then there is the layout view on the right hand side of the firebug window which displays dimensions of the element including border, padding and margin.

    But don't be afraid about asking more questions!
    Dan G
    Marketing Strategist & Consultant

  7. #7
    SitePoint Enthusiast protheory's Avatar
    Join Date
    Mar 2008
    Location
    Notts, England
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by c2uk View Post

    the navbar is taken out of the flow completely. So the padding doesn't effect the list at all, it just appears to. The padding influences the distance of h1 to the top, try setting it to 0 and you see what I mean.
    I think I see what you mean, I definitely understand the H1 padding being separate from the navbar but I'm not sure on why my black 1px border appears above my navbar if the navbar is the first thing on my page. My HTML has the header DIV with the black border, then a DIV with no styling (ID) containing my links, but I think this one inherits its properties from somewhere else.

    I seem to remember that my empty DIV gets some style from another element, I'll take a look and see if I can work it out, I just pulled my page up in Firebug's inspector but it didn't quite click for me.

    There's an inspector button (the glasses or click on Inspect when Firebug is open) to hover over elements and you see the border and such as well as being able to select it in the firebug window. And then there is the layout view on the right hand side of the firebug window which displays dimensions of the element including border, padding and margin.

    But don't be afraid about asking more questions!
    Thanks, it's reassuring to know I can ask questions, I have a few to ask lol. I'm just struggling to put it into words. I've got my header ID DIV with the black border all the way across the screen, then my no-id DIV with my navbar floated right (the id=nav on the UL), so I'm wondering if my floated links bar is set to some default positioning at the top of my page. I'm going back to setting the H1 padding to zero here, meaning I understand that the two are not connected in this sense and can be vertically aligned but I'm not quite sure why.

    Do they align vertically because the H1 and floated list push up against each other, side by side? My H1 only contains a single word so there would be ample room for the float to fit next to the header tag I think.

  8. #8
    doing my best to help c2uk's Avatar
    Join Date
    May 2005
    Location
    Cardiff
    Posts
    1,832
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, I think you lost me now
    Dan G
    Marketing Strategist & Consultant

  9. #9
    SitePoint Enthusiast protheory's Avatar
    Join Date
    Mar 2008
    Location
    Notts, England
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, sorry that was a bit confusing. I'm trying to write a reply now but it's even more confusing I reckon so I'll think a bit more first before I type my next question.

  10. #10
    doing my best to help c2uk's Avatar
    Join Date
    May 2005
    Location
    Cardiff
    Posts
    1,832
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'll try some, now:

    but I'm not sure on why my black 1px border appears above my navbar if the navbar is the first thing on my page.
    The navbar is floated within div#header div, as this is its parent item. So it's not taken completely out of the flow of the content, just within its parent item. I would've even said just at its current position but that doesn't appear to be the case there.

    My HTML has the header DIV with the black border, then a DIV with no styling (ID) containing my links, but I think this one inherits its properties from somewhere else.

    I seem to remember that my empty DIV gets some style from another element, I'll take a look and see if I can work it out, I just pulled my page up in Firebug's inspector but it didn't quite click for me.
    This is your header div:
    Code css:
    #header { border-top: 5px solid #000;}

    And this is your no-id/no-class div:
    Code css:
    #header div {
    	margin: 0 auto;
    	width: 750px;
    	text-align: left;
    	padding-left: 20px;
    	}

    There's nothing in your code from which your no-id div could inherit some styling.

    Do they align vertically because the H1 and floated list push up against each other, side by side? My H1 only contains a single word so there would be ample room for the float to fit next to the header tag I think.
    I think that's it, try adding some more words to your header tag, you can do so with Firebug by the way, just select the element and then the text within it, and see what happens, the text wraps around the navbar.

    I hope that helps.
    Dan G
    Marketing Strategist & Consultant

  11. #11
    SitePoint Enthusiast protheory's Avatar
    Join Date
    Mar 2008
    Location
    Notts, England
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Quote Originally Posted by c2uk View Post
    The navbar is floated within div#header div, as this is its parent item. So it's not taken completely out of the flow of the content, just within its parent item. I would've even said just at its current position but that doesn't appear to be the case there.

    This is your header div:
    Code css:
    #header { border-top: 5px solid #000;}

    And this is your no-id/no-class div:
    Code css:
    #header div {
    	margin: 0 auto;
    	width: 750px;
    	text-align: left;
    	padding-left: 20px;
    	}

    There's nothing in your code from which your no-id div could inherit some styling.
    Thanks, I think I was taking the floats thing too literally there. I'd imagined that the right floated navbar element was floated outside of the complete document and not within its container tag, in this case #header div. Now I understand that the navbar is only floated inside its container #header div and so this explains why the border applied to the DIV above it still shows the border.

    The alignment when padding is removed I was asking about because the H1 and the floated navbar seem to line up vertically when the H1 has no padding to move it down. I wondered if these elements butted up against each other as the floated right navbar would wrap up against the H1 as it's the next element down in the HTML. In much the same way that a thumbnail and a paragraph will have top alignment when the right one is floated.

    I think that's it, try adding some more words to your header tag, you can do so with Firebug by the way, just select the element and then the text within it, and see what happens, the text wraps around the navbar.

    I hope that helps.
    I added some more words to my header tag and the navbar went underneath it the more text I typed unless I use a line break in the header text. This seems to be because the header is above the navbar in the HTML so I assume it takes precedence and when space is limited the higher element gets the space.

    Sorry for all the silly questions, I do know quite a lot but I've always lacked a practical application before now and so I've got a lot of questions still.

  12. #12
    doing my best to help c2uk's Avatar
    Join Date
    May 2005
    Location
    Cardiff
    Posts
    1,832
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by protheory View Post
    Sorry for all the silly questions, I do know quite a lot but I've always lacked a practical application before now and so I've got a lot of questions still.
    No silly questions allowed around here, but I can't see any in your case

    I added some more words to my header tag and the navbar went underneath it the more text I typed unless I use a line break in the header text. This seems to be because the header is above the navbar in the HTML so I assume it takes precedence and when space is limited the higher element gets the space.
    That's the behaviour I'd have expected from the beginning (as indicated somewhere above), good to know that it works that way. So really, you should change the position of those two things in the html in order to prevent this happening.

    Case closed, then, or did I miss something somewhere?
    Dan G
    Marketing Strategist & Consultant

  13. #13
    SitePoint Enthusiast protheory's Avatar
    Join Date
    Mar 2008
    Location
    Notts, England
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile

    Quote Originally Posted by c2uk View Post
    No silly questions allowed around here, but I can't see any in your case

    That's the behaviour I'd have expected from the beginning (as indicated somewhere above), good to know that it works that way. So really, you should change the position of those two things in the html in order to prevent this happening.

    Case closed, then, or did I miss something somewhere?
    Thanks I'm happy with my understanding of how the header etc work now I think. I'd like to ask please why my div with id="strike" stretches all the way across my screen. The only code with a width I can find is this:

    Code:
    #strike div {
    	width: 420px;
    	margin: 0 auto;
    	text-align: left;
    	padding: 40px 30px 40px 0;
    	}
    I've looked on Firebug and it seems to be composed of three separate sections in the inspector. One is the left side of the green image, one the right and the middle section is my Example text here piece.

    I'd also be interested to know what this rule means:

    Code:
    #body:after { 
    	content: "."; 
    	display: block; 
    	clear: both; 
    	visibility: hidden; 
    	height: 0;
    	}
    I am learning a lot as I code, I'm still trying to make the transition from a copy/paster to a coder.

  14. #14
    doing my best to help c2uk's Avatar
    Join Date
    May 2005
    Location
    Cardiff
    Posts
    1,832
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is the code for the div within your div id=strike (= it's a child of div id=strike):
    Code:
    #strike div {
    	width: 420px;
    	margin: 0 auto;
    	text-align: left;
    	padding: 40px 30px 40px 0;
    	}
    note that the div comes after #strike, and isn't in front of it, as in div#strike.

    That means, your div#strike doesn't have any css styled applied to it, and as it is the direct child of your container div, which also doesn't have a width applied, your div#strike stretches per default across the whole width.

    I've looked on Firebug and it seems to be composed of three separate sections in the inspector. One is the left side of the green image, one the right and the middle section is my Example text here piece.
    Nope, that's not the case. You have your #strike, which stretches across the whole screen, then you have a div (class=home, this gets the css styles applied mentioned above, width and padding), and then you've got a paragraph in there too, which holds your actual text:

    Code:
    #strike p {
    	color: #fff;
    	margin: 0;
    	padding: 0;
    	font-size: 20px;
    	letter-spacing: -1px;
    	}
    If you can upload it somewhere, I can explain it better to you.

    The after, well that's something really fancy there, and is one of a few pseudo-elements in CSS. I haven't used it often, so I'm just linking to Sitepoint's own reference for CSS here in the hope it explains it good enough to understand: http://reference.sitepoint.com/css/pseudoelement-after
    Dan G
    Marketing Strategist & Consultant

  15. #15
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just something else I want to point out here. Serving your Web page as an application of XML will force a file download in IE (even IE 7 and the IE 8 betas). If you want your pages to be universally accessible, change the MIME type to text/html.

  16. #16
    SitePoint Enthusiast protheory's Avatar
    Join Date
    Mar 2008
    Location
    Notts, England
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile

    Quote Originally Posted by c2uk View Post
    This is the code for the div within your div id=strike (= it's a child of div id=strike):
    Code:
    #strike div {
    	width: 420px;
    	margin: 0 auto;
    	text-align: left;
    	padding: 40px 30px 40px 0;
    	}
    note that the div comes after #strike, and isn't in front of it, as in div#strike.

    That means, your div#strike doesn't have any css styled applied to it, and as it is the direct child of your container div, which also doesn't have a width applied, your div#strike stretches per default across the whole width.

    Nope, that's not the case. You have your #strike, which stretches across the whole screen, then you have a div (class=home, this gets the css styles applied mentioned above, width and padding), and then you've got a paragraph in there too, which holds your actual text:

    Code:
    #strike p {
    	color: #fff;
    	margin: 0;
    	padding: 0;
    	font-size: 20px;
    	letter-spacing: -1px;
    	}
    If you can upload it somewhere, I can explain it better to you.

    The after, well that's something really fancy there, and is one of a few pseudo-elements in CSS. I haven't used it often, so I'm just linking to Sitepoint's own reference for CSS here in the hope it explains it good enough to understand: http://reference.sitepoint.com/css/pseudoelement-after
    Great stuff, I've uploaded my page today for testing purposes and converted in to XHTML Strict, the HTML validates but I've got a CSS error on line 126 which is:

    #body:after {
    content: ".";
    display: block;
    clear: both;
    Line 126 visibility: hidden;
    height: 0;
    }

    It's the same class you posted a link about so next thing for me will be to look at the reference first before I ask any more questions. Thanks for explaining how things work above, I'm pleased to know that DIV tags default to 100&#37; of screen width when no styling is applied, this was confusing me.

    I'm messing around with images at the moment to see what happens, it's important that I try to edit the code properly instead of just reading like I usually do.

    Here's my current uploaded page:

    http://toeprotoe.com/

    And here's my CSS error:

    http://jigsaw.w3.org/css-validator/v...eprotoe.com%2F

    I just removed the offending rule and it applies to the black footer, without this rule my black footer bar appears right after my Welcome text at the top of the page. Perhaps there's a way to replace this rule but to the same effect. I just liked the general look of this template so it's not as if I'm unwilling to fully change it, in fact I want to actively change it.

  17. #17
    SitePoint Enthusiast protheory's Avatar
    Join Date
    Mar 2008
    Location
    Notts, England
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz View Post
    Just something else I want to point out here. Serving your Web page as an application of XML will force a file download in IE (even IE 7 and the IE 8 betas). If you want your pages to be universally accessible, change the MIME type to text/html.
    Thanks for pointing this out to me, I wasn't aware it was even happening as I always use Firefox and hadn't gotten around to testing in IE. I've just tested my link in IE7 and it pulls the page up ok after I converted it to XHTML Strict.

  18. #18
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I always make it a point to test in IE 6, IE 7, Firefox, Opera and Safari equally (at the same time, mind you) so that I don't get caught with my proverbial pants around my proverbial ankles. I've also found that it's forced me to change the way I code, which in turn has made me a far better developer than I would be otherwise (not to mention avoiding 99&#37; of the hacks that most people use for IE).

  19. #19
    SitePoint Enthusiast protheory's Avatar
    Join Date
    Mar 2008
    Location
    Notts, England
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz View Post
    I always make it a point to test in IE 6, IE 7, Firefox, Opera and Safari equally (at the same time, mind you) so that I don't get caught with my proverbial pants around my proverbial ankles. I've also found that it's forced me to change the way I code, which in turn has made me a far better developer than I would be otherwise (not to mention avoiding 99% of the hacks that most people use for IE).
    I used to be much more strict with my testing when I was designing my main website and my vBulletin forum but I've let it slip a little since I replaced my old hard disc and lost my installs of all the browsers.

    I think I'll install Safari soon, I've just got Opera's latest version too. I'm willing to compromise design niceties for code that works cross browser even if it limits me to some extent in my designs.

    I just made 2 really simple errors on the page, I'd copied a rule in the CSS to make another green bar at the bottom of the page but it wouldn't work. Took me about half an hour to realise I'd not re-uploaded the updated style sheet. And I then wondered for 15 minutes which rule was making my green image have a top black border until I realised it was on the image itself.

    The joys of learning eh

  20. #20
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, I've done that before myself. One thing I love to do is tinker with layouts - trying to get them to work identically without hacking for any browser. You'd be surprised at how far I've gotten. There have been times I've been able to get hack-free layouts that work in IE 5 just as well as Firefox, save for the times when a hack really is necessary (like with :hover on non-anchors, :focus support, PNG alpha transparency and so on).

    You'll get there eventually. I know it.

  21. #21
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)

    #body:after {
    content: ".";
    display: block;
    clear: both;
    Line 126 visibility: hidden;
    height: 0;
    }
    At first glance, it looks like a PIE clearing agent. When you have floats in a modern browser, they're attatched to their parents at the top but blocks and stuff not only can slide underneath them (as if they really were floating), but the parent doesn't even extend to the length of the child float. Well, lots of times we want the parent to go all the way around the child float. IE6 (7 too?) does this illegally, so we generally don't worry about them. But if you look on page 247 of HTML Utopia (I think you said somewhere that you had that book), you'll see an HTML clearing element.

    The above code uses CSS to stick an invisible . after the float to do the clearing. Of course, it doesn't work in IE : ) There's hacks around that though.

    There are other ways to clear floats too. It's an art form for sure. I'm lazy and 99% of the time I can get away with overflow: hidden.

    I used this analogy twice before and it seems to work, even if it doesn't account for everything:

    I see positioning as a large, shallow ocean which I'm floating above, like Superman (horizontally). So I look down and I can see the ocean floor, the web page. Elements with no position mentioned are position: static by default. I think of these elements as flat concrete blocks which can change their shapes and bump each other around. They are all trying to be 100% wide if they can get away with it (if you don't contrain them with a set width), and they are all trying to be as close to the top left corner as possible (this means, the side closer to my head than to my feet as I float over this ocean).

    On top of the concrete blocks are flat pieces of metal, attatched to the concrete blocks with chains. If I say position: relative on a block, the metal plate lifts up just a little bit. Floating above the ocean, I can't see the difference. But now if I set coordinates on that block, the metal plate will move:
    #concreteblock {
    position: relative;
    left: 10units;
    top: 10units;
    }

    The plate gets pushed 10 units closer to my feet and 10 units to the left. The metal plate, mind you-- a visual representation of the block. The block itself HAS NOT MOVED however. So if I had bumped that metal plate up (headwise):
    top: -10units; (I'm not sure this is even legal : )
    the blocks "underneath" our block (closer to my feet) cannot move into the place vacated by the new positioning-- because the concrete block is still in place. We only changed where it looks like it is. And if I'd bumped it 10units down, it would then be covering the blocks under it (footwards), not pushing them further towards my feet.

    Float: left/right will actually let the concrete block lift up off the ocean floor, but it's top is actually still attached. The other blocks now cannot see this floated block-- and the floated block cannot see them. Only the inline stuff sees the float (I haven't figured out how inline fit in this scenario yet : ). And of course if this was the Redmond Ocean the other blocks would indeed still see the floated block. Bleh.

    Position: absolute brings our concrete block out of the ocean, and it magically transforms into a mattress (they don't sink so well : ) the ocean floor doesn't know it's there, and for the most part, the mattress doesn't know the ocean floor is there (exception, it knows where its parent container is).

    Now if all these boxes are inside boxes like those Russian women you can get, you can imagine that something that's inside a box, even if you can't see the outline of that box, cannot be bigger, nor can it surround the box it's inside of. Trying to imagine that is like trying to imagine the cat who starts eating his tail and somehow ends up eating himself... how does he eat his own head??

  22. #22
    SitePoint Enthusiast protheory's Avatar
    Join Date
    Mar 2008
    Location
    Notts, England
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz View Post
    Yeah, I've done that before myself. One thing I love to do is tinker with layouts - trying to get them to work identically without hacking for any browser. You'd be surprised at how far I've gotten. There have been times I've been able to get hack-free layouts that work in IE 5 just as well as Firefox, save for the times when a hack really is necessary (like with :hover on non-anchors, :focus support, PNG alpha transparency and so on).

    You'll get there eventually. I know it.
    Well I suppose I couldn't class myself as a proper CSS student if I weren't making schoolboy errors could I

    I love tinkering with layouts too but at my current stage it's not all for fun. I've been into OOP for a long time but again it's all theory with me and little practical application. My next job will probably be playing about with Javascript as an introduction to web coding. It helps bring back my residual knowledge of variables, increment operators etc which I used to read about endlessly until I decided once and for all to go with the web side rather than developing desktop apps.

    That was about a couple of years ago now and since then I've tried to learn CSS and XHTML inside out. I'm still at the transitional stage where I don't (yet) have a complete knowledge of likely bugs in certain environments and particularly layout options but I'm getting there now I think.

    I'm not really used to the design and layout that much, I'm more on the logical relationship side of things so that's probably why the cross browser hacks etc are difficult to pick up. It always helps me put things into perspective when I look at Assembler code, or C++, makes learning CSS seem trivial compared to my first efforts with C. I just started right from the beginning myself by reading but it was worth it in the end even though I haven't written much real code yet. I've invested more time in the whole idea of OOP and bits and bytes first before turning to the practicalities so that I have a thorough understanding of what I'm really dealing with.

    It helps me to understand how the server's operating system works as well as the browser that's running on it.

    I need to learn more about floats and DIV tags' default behaviours as well, I'm trying to think of a design and say "ok, so how do I put that image there, and make sure it stays there on IE et al." It's a good approach for me as a beginner to CSS layouts because it encourages me to experiment. If necessity is the mother of all invention then experimentation must surely be the mother of all discovery.

    My uncle is a Delphi programmer and he's always advised me that I'll never learn until I have a real application for the theory in the real world.

  23. #23
    SitePoint Enthusiast protheory's Avatar
    Join Date
    Mar 2008
    Location
    Notts, England
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    At first glance, it looks like a PIE clearing agent. When you have floats in a modern browser, they're attatched to their parents at the top but blocks and stuff not only can slide underneath them (as if they really were floating), but the parent doesn't even extend to the length of the child float. Well, lots of times we want the parent to go all the way around the child float. IE6 (7 too?) does this illegally, so we generally don't worry about them. But if you look on page 247 of HTML Utopia (I think you said somewhere that you had that book), you'll see an HTML clearing element.

    The above code uses CSS to stick an invisible . after the float to do the clearing. Of course, it doesn't work in IE : ) There's hacks around that though.

    There are other ways to clear floats too. It's an art form for sure. I'm lazy and 99% of the time I can get away with overflow: hidden.

    I used this analogy twice before and it seems to work, even if it doesn't account for everything:

    I see positioning as a large, shallow ocean which I'm floating above, like Superman (horizontally). So I look down and I can see the ocean floor, the web page. Elements with no position mentioned are position: static by default. I think of these elements as flat concrete blocks which can change their shapes and bump each other around. They are all trying to be 100% wide if they can get away with it (if you don't contrain them with a set width), and they are all trying to be as close to the top left corner as possible (this means, the side closer to my head than to my feet as I float over this ocean).

    On top of the concrete blocks are flat pieces of metal, attatched to the concrete blocks with chains. If I say position: relative on a block, the metal plate lifts up just a little bit. Floating above the ocean, I can't see the difference. But now if I set coordinates on that block, the metal plate will move:
    #concreteblock {
    position: relative;
    left: 10units;
    top: 10units;
    }

    The plate gets pushed 10 units closer to my feet and 10 units to the left. The metal plate, mind you-- a visual representation of the block. The block itself HAS NOT MOVED however. So if I had bumped that metal plate up (headwise):
    top: -10units; (I'm not sure this is even legal : )
    the blocks "underneath" our block (closer to my feet) cannot move into the place vacated by the new positioning-- because the concrete block is still in place. We only changed where it looks like it is. And if I'd bumped it 10units down, it would then be covering the blocks under it (footwards), not pushing them further towards my feet.

    Float: left/right will actually let the concrete block lift up off the ocean floor, but it's top is actually still attached. The other blocks now cannot see this floated block-- and the floated block cannot see them. Only the inline stuff sees the float (I haven't figured out how inline fit in this scenario yet : ). And of course if this was the Redmond Ocean the other blocks would indeed still see the floated block. Bleh.

    Position: absolute brings our concrete block out of the ocean, and it magically transforms into a mattress (they don't sink so well : ) the ocean floor doesn't know it's there, and for the most part, the mattress doesn't know the ocean floor is there (exception, it knows where its parent container is).

    Now if all these boxes are inside boxes like those Russian women you can get, you can imagine that something that's inside a box, even if you can't see the outline of that box, cannot be bigger, nor can it surround the box it's inside of. Trying to imagine that is like trying to imagine the cat who starts eating his tail and somehow ends up eating himself... how does he eat his own head??
    I just about followed your analogy but it will take some more time for me to fully appreciate what you're saying I think. It's definitely helped me to imagine containers for elements now though, especially after looking at the diagram on pages 246 and 247 in HTML Utopia. I need to go back and read this book again to refresh my mind : )

    So the clearing element quoted above inserts a hidden character as a clearing element so that my black footer sits where it does? I looked it up as suggested on Sitepoint's reference and it looked like some sort of insertion routine, and the fact that it's called #body:after kind of implies that it's listening for an event. I know it's not really an event listener but it's how I'm seeing it, sort of like it's saying "insert this character immediately after body loads..."

    On the subject of positioning how do negative margins fit in? I'm aware of their uses in general if not in practice but I wonder, are they a hack so to speak or are they a legal part of the CSS specification?

    I'll have to read HTML Utopia thoroughly again, from start to finish, I'm just bordering on my limit for information absorption at the moment. Thanks for your help, I like the shallow ocean idea a lot, and the watery imagery helps with the 'flow' of CSS documents.

    I'm interested in the differences between absolute and relative positioning quite a lot. I discovered Jello Mold a while ago and it fired my imagination. I'm into hybrid combinations of things and so I'm interested in experimenting with relatively positioned elements inside other elements.

    I'm still wary of position absolute though as it seems to break a lot of layouts unless I'm mistaken.

  24. #24
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    You're right. A page entirely (or almost entirely) built from absolute positioning is extremely brittle. It has no flow. It's pretty much perfect for someone coming out of the print world, because you can precisely place everything. Which is fine so long as the browser window is always the same size and the text is always the same size.... no, the web's not print. I use position: absolute for cute tricks or sometimes to move something out of source order.

    Negative margins are a neat idea, and defeat classical physics. Something can have a negative margin 3 times bigger than the thing itself. It's usually used to scootch something a little further to one side (or a bit further up) than there's really room for. But it's also the basis of a nice layout trick I've used several times (and the same mistakes always bite me with it), having a sidebar last in source and wrapped around and up to it's correct place as a sidebar. It's floated first, so the margins can act extra strange, and the weird thing is is that it's sorta out of the flow but not entirely.

    In any case, they are 100&#37; legal and actually encouraged... so long as you're aware how they are mostly out of the flow.

    The :after isn't really like an event listener unless you count the body loading as the event. It's more like, taking a read-only document (the html) and making it writable by either the browser (with its own CSS) or anyone with access to the ordinary CSS (such as when you're told to make a design for this HTML which you can look at but cannot change--think Zen Garden).

    So you can add :before and :after to anything, and it's added there, even though it's not in the HTML. For those people who like the :after content "." clearing method, its appeal is that they don't have meaningless <br class="clear"> stuff in their HTML. Of course, its use is limited by IE6.
    http://www.w3.org/TR/REC-CSS2/generate.html

    With position: relative, the most important thing to remember is that you are only moving the appearance of a thing, but you are not moving the thing itself (if you set position: relative and then set some coordinates....most of the time, position: relative is set either to make IE6 see it, or as a reference for some abso-po'd elements). So while if you actually moved a box, the boxes underneath would be able to reposition themelves, but if you take a box and say
    position: relative;
    top: 30px;
    it sure looks like you've moved that box 30px further down from the top. But it didn't really, and it can cover the top of the next box down (instead of pushing it down as would happen if the content in the first box had increased).

  25. #25
    SitePoint Enthusiast protheory's Avatar
    Join Date
    Mar 2008
    Location
    Notts, England
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile

    Quote Originally Posted by Stomme poes View Post
    You're right. A page entirely (or almost entirely) built from absolute positioning is extremely brittle. It has no flow. It's pretty much perfect for someone coming out of the print world, because you can precisely place everything. Which is fine so long as the browser window is always the same size and the text is always the same size.... no, the web's not print. I use position: absolute for cute tricks or sometimes to move something out of source order.

    Negative margins are a neat idea, and defeat classical physics. Something can have a negative margin 3 times bigger than the thing itself. It's usually used to scootch something a little further to one side (or a bit further up) than there's really room for. But it's also the basis of a nice layout trick I've used several times (and the same mistakes always bite me with it), having a sidebar last in source and wrapped around and up to it's correct place as a sidebar. It's floated first, so the margins can act extra strange, and the weird thing is is that it's sorta out of the flow but not entirely.

    In any case, they are 100&#37; legal and actually encouraged... so long as you're aware how they are mostly out of the flow.

    The :after isn't really like an event listener unless you count the body loading as the event. It's more like, taking a read-only document (the html) and making it writable by either the browser (with its own CSS) or anyone with access to the ordinary CSS (such as when you're told to make a design for this HTML which you can look at but cannot change--think Zen Garden).

    So you can add :before and :after to anything, and it's added there, even though it's not in the HTML. For those people who like the :after content "." clearing method, its appeal is that they don't have meaningless <br class="clear"> stuff in their HTML. Of course, its use is limited by IE6.
    http://www.w3.org/TR/REC-CSS2/generate.html

    With position: relative, the most important thing to remember is that you are only moving the appearance of a thing, but you are not moving the thing itself (if you set position: relative and then set some coordinates....most of the time, position: relative is set either to make IE6 see it, or as a reference for some abso-po'd elements). So while if you actually moved a box, the boxes underneath would be able to reposition themelves, but if you take a box and say
    position: relative;
    top: 30px;
    it sure looks like you've moved that box 30px further down from the top. But it didn't really, and it can cover the top of the next box down (instead of pushing it down as would happen if the content in the first box had increased).
    Thanks, I've had a little experience with absolutely positioned stuff before and when I use ctrl+ to zoom it becomes unreadable. I'm honestly not sure if this is a common thing for visitors to do (ctrl+) but it doesn't look good when it happens.

    Right, so negative margins are legal then, that's surprising to me actually but good to know all the same : ) I've been looking at the pinned 3 column CSS layout thread and I think that one uses negative margins to some extent. I'm not really planning on using them myself yet but I thought it best to try to find out as much as possible about them anyway.

    The body: after, yes I was imagining the body as the loading event and this class as the listener. Not literally in this sense but it's how I looked at the logical flow of the document. First body then this class loading. I wouldn't normally consider using it but it happened to be in the template file so I thought I'd better find out what it was.

    I think that understanding position relative will take me a bit more time. I'd thought of it as just relatively positioned from top left or whatever container it was within such that on window resize all elements expanded/contracted their positions depending on the available screen space. I thought the relatively positioned elements would just 'zoom' in place while adjusting to a larger or smaller size when using ctrl+ or ctrl- I'll get it eventually.

    I found a tutorial last night and it's the best one I think I've ever seen. I started reading it and it informed me that browsers apply their own style sheets. I knew this anyway but I was confused when people were saying "IE applies default margins of..." instaed of "IE's default style sheet displays margins of..." which helped me immediately to visualise what really happens. I'd never quite realised IE etc actually ueed a style sheet, I just thought it was calculated in the actual program logic of the browser itself. Then it explained that DIVs will stretch 100% of screen width by default as well which was recently explained to me in this thread but that I've never read on another tutorial that I can remember.

    LINK: http://www.subcide.com/tutorials/csslayout/index.aspx

    It's the first time I've been able to follow 100% of a tutorial without getting lost on a single line of code or concept This is what I'm trying to learn with my current template file above, sort of strip it down to its bare minimum (minus body: after etc) so that I can start it from scratch. Starting completely from scratch is the only way for me to really understand and get past my gaps of knowledge about the layout process.


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
  •