Aligning divs, etc. Just not sure of myself with CSS in general.

Pikachu2000 · March 9, 2011

OK, I willingly admit that I'm way behind the curve when it comes to CSS, but I'm finally actually making an effort to learn it properly instead of relying on being able to find open source templates for everything I need.

I'm just trying to lay out a simple set of tab-like nav buttons across the top of a div, but I have a feeling I've grossly overcomplicated this. If someone with better 'mad CSS skilz' than I have wouldn't mind looking it over I'd appreciate it.

The CSS I've written, which although it validates is undoubtedly all over the place:

EDIT: Removed unrelated CSS code . . .

[attachment deleted by admin]

Philip · March 9, 2011

Uhh... are you missing some CSS (and html)? I just see:

#container {
    color:red;
    min-height:600px;
    }/code]

cssfreakie · March 9, 2011

I am missing code to,

but any navigation menu that works would be set-up with an unordered list, and since you use it as a horizotal nav.

you need to display it inline.

If you like i can post some standard code that pretty much any decent menu uses, which in the end is able to do more advanced stuff such as sliding doors technique (css doesn't get more difficult than that really).

Also if you like you can post at my little blog (cssfreakie.blogspot.com), for request on stuff. I am missing input on nice tutorials. Some best practises are already gathered there for the novice till mediocre css student.

Pikachu2000 · March 9, 2011

Oops. Must have mis-selected it. Might as well separate it while I'm at it, and revise the title to something more accurate . . . I just can win today.

Here it is:

body {
   background-color:#CCCCCC;
   }
div {
   background-color:white;
   color:#666666;
   width:960px;
   margin-left:auto;
   margin-right:auto;
   padding-top:1em;
   margin-top:0;
   border-width:0 0 0 0;
   border-style:solid;
   border-color:black;
   }
#container {
   color:red;
   min-height:600px;
   }
.navbar {
   padding:1em;
   border-top-width:1px;
   border-bottom-width:0px;
   border-right-width:1px;
   border-left-width:0px;
   display:inline;
   margin-left:-4px;
   }
#left {
   border-left-width:1px;
   border-bottom-width:0px;
   margin-right:auto;
   margin-left:auto;
   }
.main {
   margin-top:15px;
   padding-left:1em;
   width:auto;
   min-height:550px;
   border: 2px solid black;
   margin-left:0;
   }

HTML

<!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=utf-8" />
<title>Title</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body>
     <div id="container">
    <div class="navbar" id="left">One</div>
    <div class="navbar">Two</div>
    <div class="navbar">Three</div>
    <div class="navbar">Four</div>
    <div class="navbar">Five</div>
    <div class="navbar">Six</div>
    <div class="navbar">Seven</div>
    <div class="navbar" id="right">Eight</div>
    <div class="main">Content here.</div>
    </div>
</body>

</html>

cssfreakie · March 9, 2011

Oh i would really not make a menu like that, an <ul> is much prettier for it.

brb ill check your code for spaces.

-edit: if you mean the top space you you commented out the margin:0; padding:0; in the body style

this should put everything on top:

body {
   background-color:#CCCCCC;
   padding:0;
   margin:0;
   border:0;

   }

Or do you maybe mean the ticker border at the bottom part of the menu where it touches the content?

Pikachu2000 · March 9, 2011

The spaces are eliminated, what I'm really after now is more of a general list of what I did wrong, and why.

Or it may be a shorter list if you go over what I did right . . .

cssfreakie · March 9, 2011

Well div's are ideal for putting more stuff in one container (see it as a bag). By using a div you can target all stuff in that bag.

But right now you put 1 word in a div. which is a bit to much.

brb ill post you the same look and feel of your menu with an unordered list. (sounds unordred but that just the name w3c gave it ::)

cssfreakie · March 9, 2011

here try this out ::)

it wont get any compacter than this, if you like you can put the stuff between style in an external stylesheet.

<!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=UTF-8" />

        <link type="text/css" rel="stylesheet" href="css/reset.css" />

        <title></title>
<style type="text/css">
div#menu{
    width:960px;
    border:1px solid #333;
    overflow:hidden; /* if no height is given it will shrink wrap to the height of the inside */
}
ul#hornav{
    list-style: none; /* removes bullets */
    margin:0;
    padding:0; /* if you would have used a reset.css this is done already */
}
#hornav li{
    display:inline; /* make it a horizontal list */
}
#hornav a{
    color:#000; /*give the links some color */
    display:block; /*give them body */
    float:left; /* block elements start at new lines,
                by using float we undo this but keep the body */
    text-decoration: none; /* remove line under link*/
    font-size: 15px;
    padding: 15px;
    border-right:1px solid #333;
}
#hornav a:hover{ /* mouse over */
    background:#999;
}
</style>
    </head>
    <body>
        <div id="menu">
            <ul id="hornav">
                <li><a href=""><span>One</span></a></li>
                <li><a href=""><span>Two</span></a></li>
                <li><a href=""><span>Three</span></a></li>
                <li><a href=""><span>Four</span></a></li>
                <li><a href=""><span>Five</span></a></li>
            </ul>
        </div>
    </body>
</html>

-edit: i adjusted above a tiny bit to give the buttons a mouseover effect:

#hornav a:hover{

background:#999;

}

now you might think why is he using those extra span inside the a elements. That is done to make it ready for sliding doors.

Philip · March 10, 2011

Here's how I would do it, similar to cssfreak's solution. I float the list item instead of the actual anchor tag though.

The CSS:

#menu{
width: 960px;
border: 1px solid #333;
overflow: hidden; 
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
}
#menu ul li {
float: left;
}
#menu ul li a {
color:#000; 
display: block;
text-decoration: none;
font-size: 15px;
padding: 15px;
border-right: 1px solid #333;
}
#menu ul li a:hover{
background:#999;
}

/* Clearfix, you can find more info here: http://stackoverflow.com/questions/211383/which-method-of-clearfix-is-best/211467#211467 */

* html .clearfix{
  height: 1%;
  overflow: visible;
}

*+html .clearfix{
  min-height: 1%;
}
.clearfix:after{
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  font-size: 0;
}

The HTML:

<div id="menu">
<ul class="clearfix">
	<li><a href=""><span>One</span></a></li>
	<li><a href=""><span>Two</span></a></li>
	<li><a href=""><span>Three</span></a></li>
	<li><a href=""><span>Four</span></a></li>
	<li><a href=""><span>Five</span></a></li>
</ul>
</div>

The reason to use an unordered list is simple: because you have a list of menu items. It is the most schematically correct tag to use, unless you were in HTML and even then you'd use nav with an ul/li combo.

cssfreakie · March 10, 2011

Since i started a little blog on css, i thought lets make a tutorial of this, i improved the code a bit without any css hacks

All you use need to use is an ul

http://cssfreakie.blogspot.com/2011/03/making-horizontal-menu.html

Really detailed and all is explained, hope it helps.

But of course there are more roads to Rome

crmamx · March 10, 2011

WOW! Stop the presses. There is something Pikachu doesn't know.

But you have the right detective on the trail.

Pikachu2000 · March 10, 2011

There's a lot I don't know. I'm not a designer by any stretch of the imagination, but I'm trying to learn more about it. Currently, if nobody pukes when they look at a site I've designed, I chalk it up as being good enough . . .

Pikachu2000 · March 10, 2011

I'll try out the other css and html that y'all posted and look it over so I can educate myself a bit more. Thanks cssf and KP.

cssfreakie · March 10, 2011

good luck! let me know if you have questions

cssfreakie

Philip · March 10, 2011

There's a lot I don't know. I'm not a designer by any stretch of the imagination, but I'm trying to learn more about it. Currently, if nobody pukes when they look at a site I've designed, I chalk it up as being good enough . . .

That's a win in my book!

crmamx · March 11, 2011

pikachu:

Hope you didn't take that wrong. It seems you did and I really feel bad about it. It was meant as a funny compliment. So noted by the many thanks I have expressed in the past for your help.

Awfully sorry for a bad choice of words.

Pikachu2000 · March 11, 2011

No, not at all. I'm really not a very good designer, and I don't know much at all about CSS other than taking something that's already written and hacking it up to make it look more to liking.

Honestly, no offense taken at all.

Pikachu2000 · March 15, 2011

OK peeps, I'm decidedly not a designer, so I went and bought a book. I know it won't teach me what looks good, but at least my ugly designs will be technically correct when I'm done

cssfreakie · March 15, 2011

OK peeps, I'm decidedly not a designer, so I went and bought a book. I know it won't teach me what looks good, but at least my ugly designs will be technically correct when I'm done

That is the best thing to do really. Books are overpowered in game terms. Books have structure which on-line tutorials often lack. Don't hesitate to post some stuff ones you feel like it. happy to help.

Sign In

Aligning divs, etc. Just not sure of myself with CSS in general.

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information