Pikachu2000 Posted March 9, 2011 Share Posted 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] Quote Link to comment https://forums.phpfreaks.com/topic/230125-aligning-divs-etc-just-not-sure-of-myself-with-css-in-general/ Share on other sites More sharing options...
Philip Posted March 9, 2011 Share Posted March 9, 2011 Uhh... are you missing some CSS (and html)? I just see: #container { color:red; min-height:600px; }/code] Quote Link to comment https://forums.phpfreaks.com/topic/230125-aligning-divs-etc-just-not-sure-of-myself-with-css-in-general/#findComment-1185158 Share on other sites More sharing options...
cssfreakie Posted March 9, 2011 Share Posted 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. Quote Link to comment https://forums.phpfreaks.com/topic/230125-aligning-divs-etc-just-not-sure-of-myself-with-css-in-general/#findComment-1185179 Share on other sites More sharing options...
Pikachu2000 Posted March 9, 2011 Author Share Posted 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> Quote Link to comment https://forums.phpfreaks.com/topic/230125-aligning-divs-etc-just-not-sure-of-myself-with-css-in-general/#findComment-1185181 Share on other sites More sharing options...
cssfreakie Posted March 9, 2011 Share Posted 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? Quote Link to comment https://forums.phpfreaks.com/topic/230125-aligning-divs-etc-just-not-sure-of-myself-with-css-in-general/#findComment-1185186 Share on other sites More sharing options...
Pikachu2000 Posted March 9, 2011 Author Share Posted 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 . . . Quote Link to comment https://forums.phpfreaks.com/topic/230125-aligning-divs-etc-just-not-sure-of-myself-with-css-in-general/#findComment-1185187 Share on other sites More sharing options...
cssfreakie Posted March 9, 2011 Share Posted 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 Quote Link to comment https://forums.phpfreaks.com/topic/230125-aligning-divs-etc-just-not-sure-of-myself-with-css-in-general/#findComment-1185193 Share on other sites More sharing options...
cssfreakie Posted March 9, 2011 Share Posted 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. Quote Link to comment https://forums.phpfreaks.com/topic/230125-aligning-divs-etc-just-not-sure-of-myself-with-css-in-general/#findComment-1185199 Share on other sites More sharing options...
Philip Posted March 10, 2011 Share Posted 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. Quote Link to comment https://forums.phpfreaks.com/topic/230125-aligning-divs-etc-just-not-sure-of-myself-with-css-in-general/#findComment-1185359 Share on other sites More sharing options...
cssfreakie Posted March 10, 2011 Share Posted 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 Quote Link to comment https://forums.phpfreaks.com/topic/230125-aligning-divs-etc-just-not-sure-of-myself-with-css-in-general/#findComment-1185360 Share on other sites More sharing options...
crmamx Posted March 10, 2011 Share Posted March 10, 2011 WOW! Stop the presses. There is something Pikachu doesn't know. But you have the right detective on the trail. Quote Link to comment https://forums.phpfreaks.com/topic/230125-aligning-divs-etc-just-not-sure-of-myself-with-css-in-general/#findComment-1185635 Share on other sites More sharing options...
Pikachu2000 Posted March 10, 2011 Author Share Posted 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 . . . Quote Link to comment https://forums.phpfreaks.com/topic/230125-aligning-divs-etc-just-not-sure-of-myself-with-css-in-general/#findComment-1185787 Share on other sites More sharing options...
Pikachu2000 Posted March 10, 2011 Author Share Posted 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. Quote Link to comment https://forums.phpfreaks.com/topic/230125-aligning-divs-etc-just-not-sure-of-myself-with-css-in-general/#findComment-1185790 Share on other sites More sharing options...
cssfreakie Posted March 10, 2011 Share Posted March 10, 2011 good luck! let me know if you have questions cssfreakie Quote Link to comment https://forums.phpfreaks.com/topic/230125-aligning-divs-etc-just-not-sure-of-myself-with-css-in-general/#findComment-1185818 Share on other sites More sharing options...
Philip Posted March 10, 2011 Share Posted 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! Quote Link to comment https://forums.phpfreaks.com/topic/230125-aligning-divs-etc-just-not-sure-of-myself-with-css-in-general/#findComment-1185872 Share on other sites More sharing options...
crmamx Posted March 11, 2011 Share Posted 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. Quote Link to comment https://forums.phpfreaks.com/topic/230125-aligning-divs-etc-just-not-sure-of-myself-with-css-in-general/#findComment-1185960 Share on other sites More sharing options...
Pikachu2000 Posted March 11, 2011 Author Share Posted 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. Quote Link to comment https://forums.phpfreaks.com/topic/230125-aligning-divs-etc-just-not-sure-of-myself-with-css-in-general/#findComment-1186019 Share on other sites More sharing options...
Pikachu2000 Posted March 15, 2011 Author Share Posted 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 Quote Link to comment https://forums.phpfreaks.com/topic/230125-aligning-divs-etc-just-not-sure-of-myself-with-css-in-general/#findComment-1187549 Share on other sites More sharing options...
cssfreakie Posted March 15, 2011 Share Posted 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. Quote Link to comment https://forums.phpfreaks.com/topic/230125-aligning-divs-etc-just-not-sure-of-myself-with-css-in-general/#findComment-1187588 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.