SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Zealot Bill Palmer's Avatar
    Join Date
    Oct 2005
    Location
    London, UK
    Posts
    148
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Looking for a simple example (CSS newbie)

    Hi.

    I recently rediscovered this site, then remembered that I had registered for an account here a few years ago and never used it.

    I am looking for an example of a very simple, 2 column, CSS-based layout that has a navigation bar like http://www.us.debian.org/

    I like how a link in the navigation menu is highlighted when you put your cursor over the "box" that it's in (not sure what that is called), but that site's code is too complex for a newbie like me to decipher...

    Does anyone know of any simple layouts like that I could take a look at?

    I want to learn CSS properly, as I realize that using HTML for styling is pretty crap nowadays. I'm interested in learning how to do that "box" technique in a cross-browser way.

    Thanks!

  2. #2
    SitePoint Addict CaryD's Avatar
    Join Date
    Nov 2006
    Location
    San Diego, CA
    Posts
    389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Bill Palmer View Post
    I like how a link in the navigation menu is highlighted when you put your cursor over the "box" that it's in (not sure what that is called)...
    It's usually called a CSS rollover or hover style. Normally, your links will be styled with

    Code:
    a:link { ... }
    or
    Code:
    a:visited { ... }
    if the link has been visited. For the rollover effect you need to tell the browser what the link looks like when your pointer hovers over the link using

    Code:
    a:hover { ... }
    Take a look at these pages:

    Tutorials: CSS Link Styles
    http://www.pmob.co.uk/

  3. #3
    SitePoint Addict CaryD's Avatar
    Join Date
    Nov 2006
    Location
    San Diego, CA
    Posts
    389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by CaryD View Post
    ake a look at these pages:

    Tutorials: CSS Link Styles
    Well, I was looking over this tutorial, which is pretty good for the first page, but the rest is Dreamweaver oriented. Good for me, not so much for those who don't have DW.

    So read the first page of that link, and then take a look at this:
    Fast Rollovers Without Preload.

    The second link I gave above is still very good.

  4. #4
    SitePoint Zealot Bill Palmer's Avatar
    Join Date
    Oct 2005
    Location
    London, UK
    Posts
    148
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for the links.

    I was looking for a simple way to do that effect without using images. As far as I can tell, it requires telling the browser to use a specific "inline box" model. (If I understand the debian site correctly.)

    Maybe I need to get a few books on CSS before I continue.

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

    If you want a simple rollover then you just basically need to set the anchor to display:block so that it expands to fill the parent.

    Here is the simplest example that should make it clear:

    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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    ul#nav{
        margin:0;
        padding:0;
        list-style:none;
        width:10em;
        border:1px solid #000;    
        border-bottom:none;
    }
    #nav li{
        width:10em;
        border-bottom:1px solid #000;
    }
    #nav li a{
        display:block;/* make anchor stretch to fill parent */
        width:10em;/* Ie needs a width*/
        text-indent:1em;
        background:#ffffcc;
        color:#000;
        text-decoration:none;
    }
    #nav li a:hover{
        background:red;
        color:#fff;
    }
    
    </style>
    </head>
    <body>
    <ul id="nav">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
    </ul>
    </body>
    </html>
    Hope that helps

  6. #6
    SitePoint Zealot Bill Palmer's Avatar
    Join Date
    Oct 2005
    Location
    London, UK
    Posts
    148
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul O'B,

    Thank you for the great example! That is exactly what I was looking for.

    I was confused on the usage of display: block; and I didn't realize it was only used in the hyperlink, not the actual list element.

    I've been messing around with trying to make my first 100% CSS site. Here is the code so far (note the color scheme is just for testing. )

    Basically, all formatting is in styles.css, and the actual color scheme is stored in default.css. I did this so that it's possible to change the color scheme/images on the site by loading a different stylesheet. It's not quite as flexible as the CSS Zen Garden, but it should work for me.

    Also, I haven't read up on how to size fonts properly across browsers, so that is not fully implemented yet.

    index.html
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>First CSS Site</title>
    <script type="text/javascript"> </script><!-- <- do not remove, prevents "flash of unstyled content" -->
    <link rel="stylesheet" type="text/css" href="styles.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="css/default.css" media="screen" /> <!-- default color scheme -->
    </head>
    
    <body>
    <div id="wrapper">
    
    <div id="header">
    header image will go here eventually
    </div>
    
    <div id="infobox">
    pertinent info + navigation goes here
    <ul>
    	<li class="category">Category 1</li>
    	<li><a href="#">Link 1</a></li>
    	<li><a href="#">Link 2</a></li>
    	<li><a href="#">Link 3</a></li>
    	<li class="category">Category 2</li>
    	<li><a href="#">Link 4</a></li>
    	<li><a href="#">Link 5</a></li>
    	<li><a href="#">Link 6</a></li>
    </ul>
    </div>
    
    <div id="content">
    <h1>content header</h1>
    content goes here
    </div>
    
    <div id="footer">
    footer text and disclaimer, etc. go here eventually
    </div>
    
    </div>
    </body>
    </html>
    styles.css
    Code:
    /* begin browser specific hacks */
    
    /* fixes IE default font size issue */
    * html body {
    	font-size: xx-small;
    	font-size: small;
    }
    
    /* IE6/7 minimum height hack */
    #content, #infobox {
    	min-height: 500px;
    	height: auto !important;
    	height: 500px;
    }
    
    /* end browser specific hacks */
    
    /* global */
    * {
    	margin: 0;
    	padding: 0;
    	border: 0;
    }
    
    /* body */
    body {
    	font-size: small;
    	margin: 0;
    	padding: 0;
    }
    
    /* wrapper */
    #wrapper {
    	width: 768px;
    	margin: 0 auto;
    	padding: 0;
    }
    
    /* header */
    #header{
    	width: 768px;
    	height: 128px;
    	float: left;
    }
    
    /* info box */
    #infobox {
    	margin: 8px 8px 8px 0;
    	width: 228px;
    	float: right;
    	display: inline; /* fix IE double-margin bug */
    }
    
    #infobox ul {
    	list-style: none;
    	margin: 0.5em 0 0.5em 0;
    	padding: 0;
    }
    
    #infobox .category {
    	text-indent: 0.25em;
    }
    
    #infobox li a {
    	display: block;
    	width: 100%;
    	text-indent: 1em;
    }
    
    
    /* content */
    #content {
    	margin: 8px 0 8px 8px;
    	width: 512px;
    	float: left;
    	display: inline; /* fix IE double-margin bug */
    }
    
    /* footer */
    #footer {
    	clear: both;
    	width: 768px;
    	height: 64px;
    }
    default.css
    Code:
    /* just for testing :) */
    a  {
    	color: #000;
    	font-size: small;
    	text-decoration: none;
    }
    
    a:link, visited, hover, active {
    	text-decoration: none;
    }
    
    /* body */
    body {
    	color: #000;
    	background: #414650;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    }
    
    /* header */
    #header {
    	color: #000;
    	background-color: #005500;
    }
    
    /* wrapper */
    #wrapper {
    	color: #000;
    	background-color: #FF0000;
    }
    
    /* info box */
    #infobox {
    	color: #000;
    	background-color: #EEE;
    	border: 1px solid black;
    }
    
    #infobox ul {
    	border-top: 1px solid #000;    
    	border-bottom: none;
    }
    #infobox li {
    	border-bottom: 1px solid #000;
    }
    
    #infobox .category {
    	color: #000;
    	background: #AAA;
    }
    
    #infobox li a:hover {
    	color: #FFF;
    	background: red;
    }
    
    /* content */
    #content {
    	color: #000;
    	background-color: #EEE;
    	border: 1px solid black;
    }
    
    /* footer */
    #footer {
    	color: #000;
    	background-color: #550055;
    }
    The code all validates, but I couldn't get the "category" class under #infobox working the way I think it's supposed to.

    Code:
    #infobox li .category {
    	color: #000;
    	background: #AAA;
    }
    This code results in the categories not having the different background color.

    Code:
    #infobox .category {
    	color: #000;
    	background: #AAA;
    }
    This code results in the category boxes being colored properly, but it doesn't seem right. Any idea why? Could someone explain that? Should that be under #infobox ul .category?



    If you see any issues/problems, please let me know. I would rather nip any problems in the bud before they grow into bad habits.

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

    The code all validates, but I couldn't get the "category" class under #infobox working the way I think it's supposed to.
    That's because you are looking for a class of .category inside a list structure. You should be looking for a list with a class of .category instead.

    e.g.
    Code:
    #infobox li.category {
        color: #000;
        background: #AAA;
    }
    There is no space between the li and the class otherwise it would suggest a structure where the class of category is applied to an inner element inside the list and of course there is none so nothing gets applied.

    #infobox .category {} is in fact exactly the same as #infobox li.category {} except that it doesn't carry the extra weight of the li selector. To all other intents and purposes they are the same.

    Be careful with your use of hacks and how you position them. There is no point setting a hack for IE's font size at the top of the document and then further down the page setting the font size again as it will over-ride what went before. You also missed out the backslash to separate ie5.+ as that is the browser you are targeting and not ie6.

    e.g. It should be like this and in this order:

    Code:
    /* body */
    body {    font-size: small;}
    /* fixes IE5.+ default font size issue */
    * html body {
        font-size: x-small;/* ie5.+ only*/
        f\ont-size: small;/* ie 6 only*/
    }
    Note the missing backslash which filter out ue5 and ie5.5.

    You had the body style following the ie hack and therefore the hack may get overwritten by the styles that follow.

    Also don't use any other hacks except * html to target IE as there is no point and only confuses the code and makes it look messy and hard to read.

    e.g.
    Code:
    /* IE6/7 minimum height hack */
    #content, #infobox {
        min-height: 500px;
        height: auto !important;
        height: 500px;
    }
    The above code will be fed to all browsers and will rely on them all getting everything right and you would need to know that all browsers are ok with it.

    Instead just separate the ie hacks with the star html hacjk and you know that only IE6 and under will action it.
    Code:
    /* IE6/7 minimum height hack */
    #content, #infobox {
        min-height: 500px;
    }
    /* mac hide \*/
    * html #content, * html #infobox{    height: 500px;}
    /* end browser specific hacks */
    I have hidden the code from ie5 mac with the comment hack but ie5 is practically dead so its not much of an issue these days.

    Regarding your category menu it would be more semantically correct to have it as nested lists so that the sublists become related to the parent list that holds it. This would also negate the need for any extra .category classes as the inner elements can all be targeted by context.


    Code:
            <ul>
                <li>Category 1
                    <ul>
                        <li><a href="#">Link 1</a></li>
                        <li><a href="#">Link 2</a></li>
                        <li><a href="#">Link 3</a></li>
                    </ul>
                </li>
                <li>Category 2
                    <ul>
                        <li><a href="#">Link 4</a></li>
                        <li><a href="#">Link 5</a></li>
                        <li><a href="#">Link 6</a></li>
                    </ul>
                </li>
            </ul>
    The css becomes a little more advanced because you have to control the nested lists. If you apply a style to a parent list then you have to negate it on the child list should you want a different effect.


    Code:
    #infobox {
        margin: 8px 8px 8px 0;
        width: 228px;
        float: right;
        display: inline; /* fix IE double-margin bug */
    }
    
    #infobox ul {
        list-style: none;
        margin: 0.5em 0 0 0;
        padding: 0;
    }
    #infobox ul ul{margin:0}
    
    #infobox li a {
        display: block;
        width: 100&#37;;
        text-indent: 1em;
    }
    #infobox {
        color: #000;
        background-color: #EEE;
        border: 1px solid black;
    }
    
    #infobox ul {
        border-top: 1px solid #000;    
        border-bottom: none;
    }
    #infobox li {
        color: #000;
        background: #AAA;
        text-indent: 0.25em;
    }
    
    #infobox li li {
        border-bottom: 1px solid #000;
        background-color: #EEE;
    }
    #infobox li a:hover {
        color: #FFF;
        background: red;
    }

    Here is the code in place:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>First CSS Site</title>
    <script type="text/javascript"> </script>
    <!-- <- do not remove, prevents "flash of unstyled content" -->
    <link rel="stylesheet" type="text/css" href="styles.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="css/default.css" media="screen" />
    <!-- default color scheme -->
    <style type="text/css">
    /* begin browser specific hacks */
    
    /* IE6/7 minimum height hack */
    #content, #infobox {
        min-height: 500px;
    }
    /* mac hide \*/
    * html #content, * html #infobox{    height: 500px;}
    /* end browser specific hacks */
    
    /* global */
    * {
        margin: 0;
        padding: 0;
    }
    
    /* body */
    body {    font-size: small;text-align:center}
    /* fixes IE5.+ default font size issue */
    * html body {
        font-size: x-small;
        f\ont-size: small;
    }
    /* wrapper */
    #wrapper {
        width: 768px;
        margin: 0 auto;
        padding: 0;
     text-align:left;
    }
    
    /* header */
    #header{
        width: 768px;
        height: 128px;
        float: left;
    }
    
    /* info box */
    #infobox {
        margin: 8px 8px 8px 0;
        width: 228px;
        float: right;
        display: inline; /* fix IE double-margin bug */
    }
    
    #infobox ul {
        list-style: none;
        margin: 0.5em 0 0 0;
        padding: 0;
    }
    #infobox ul ul{margin:0}
    
    #infobox li a {
        display: block;
        width: 100%;
        text-indent: 1em;
    }
    
    
    /* content */
    #content {
        margin: 8px 0 8px 8px;
        width: 512px;
        float: left;
        display: inline; /* fix IE double-margin bug */
    }
    
    /* footer */
    #footer {
        clear: both;
        width: 768px;
        height: 64px;
    }
    
    
    /*........*/
    /* just for testing :) */
    a  {
        color: #000;
        font-size: small;
        text-decoration: none;
    }
    
    a:link, visited, hover, active {
        text-decoration: none;
    }
    
    /* body */
    body {
        color: #000;
        background: #414650;
        font-family: Verdana, Arial, Helvetica, sans-serif;
    }
    
    /* header */
    #header {
        color: #000;
        background-color: #005500;
    }
    
    /* wrapper */
    #wrapper {
        color: #000;
        background-color: #FF0000;
    }
    
    /* info box */
    #infobox {
        color: #000;
        background-color: #EEE;
        border: 1px solid black;
    }
    
    #infobox ul {
        border-top: 1px solid #000;    
        border-bottom: none;
    }
    #infobox li {
        color: #000;
        background: #AAA;
        text-indent: 0.25em;
    }
    
    #infobox li li {
        border-bottom: 1px solid #000;
        background-color: #EEE;
    }
    
    #infobox li a:hover {
        color: #FFF;
        background: red;
    }
    
    /* content */
    #content {
        color: #000;
        background-color: #EEE;
        border: 1px solid black;
    }
    
    /* footer */
    #footer {
        color: #000;
        background-color: #550055;
    }
    
    
    
    </style>
    </head>
    <body>
    <div id="wrapper">
        <div id="header"> header image will go here eventually </div>
        <div id="infobox"> pertinent info + navigation goes here
            <ul>
                <li>Category 1
                    <ul>
                        <li><a href="#">Link 1</a></li>
                        <li><a href="#">Link 2</a></li>
                        <li><a href="#">Link 3</a></li>
                    </ul>
                </li>
                <li>Category 2
                    <ul>
                        <li><a href="#">Link 4</a></li>
                        <li><a href="#">Link 5</a></li>
                        <li><a href="#">Link 6</a></li>
                    </ul>
                </li>
            </ul>
        </div>
        <div id="content">
            <h1>content header</h1>
        </div>
        <div id="footer"> footer text and disclaimer, etc. go here eventually </div>
    </div>
    </body>
    </html>
    I suppose you realise that as you add content the columns will not grow together but will be independent even though you have set them both at a minimum height to start with. It's easiest to leave them like that as equalising columns are a whole other issue and you can read about them in the 3col demo thread at the top of the forum.

    Hope that helps

  8. #8
    SitePoint Zealot Bill Palmer's Avatar
    Join Date
    Oct 2005
    Location
    London, UK
    Posts
    148
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, thank you Paul O'B! Your insight is most appreciated!

    I read through the stickied topics at the top of the CSS forum. That is where I pulled most of the "hacks" from.

    I need to experiment with this "nested lists" concept now. Then on to text formatting.

    Once again, your help as I start off with CSS is very much appreciated.

    Hopefully, I'll eventually be able to help other people with CSS here.

    Edit:

    Just so I'm sure, is the whole "seperating style and color scheme into 2 stylesheets" thing good practice? Or is there a more efficient way?

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Just so I'm sure, is the whole "seperating style and color scheme into 2 stylesheets" thing good practice? Or is there a more efficient way?
    It all depends on your own preference and as long as you are consistent and have a logical method then there is no right or wrong way.

    However when I work with others peoples stylesheets I hate it when the styles are split up into many different places as it makes debugging a nightmare. I've seen sites that group all padding and margins together and then you have no idea if widths have been set and have to look elsewhere and then keep switching back and forth to see if it all adds up.

    I prefer to have one styleblock for a style and have all the styles contained within that block for that element. I don't want to have to go searching back and forth for other styles and colours etc.

    It makes no difference if you are going to use alternate stylesheets anyway as the alternate stylesheet will just have the differences in it anyway. There is no need to break up he main stylesheet into two unless of course you prefer to do it that way.

    I do use multiple stylesheets on big sites but that is only to separate logical sections of the site and make it easier to manage. However I won't split individual rules over 2 files as I don't like to work like that.

    As I said there is no right or wrong way but you must be logical and consistent in whatever method you use.

  10. #10
    SitePoint Zealot Bill Palmer's Avatar
    Join Date
    Oct 2005
    Location
    London, UK
    Posts
    148
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As I said there is no right or wrong way but you must be logical and consistent in whatever method you use.
    Thanks.


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
  •