coco243 Posted January 31, 2009 Share Posted January 31, 2009 Hi, In the past I tried to make a webpage using frames, but my free host server doesn't let me to do that, now I want to learn using divs, I readed the css tutorial but I doesn't learn enough, if somebody can give me a tutorial to help me doing a page like this:A top surface where I can put an image ore something, after this headder, a vertical menu in the left and at right a place where will be displayed the content of the clicked menu. I hope I'll be understood, Thanks. | Link to comment Share on other sites More sharing options...
Enthusiastic Student Posted January 31, 2009 Share Posted January 31, 2009 Hi DamyTry this: <div id="header"></div><div id="menu"></div><div id="content"></div> The css * { margin: 0px; padding: 0px;}#header { float: left; width: 100%;}#menu { float: left; width: 20%; min-width: 100px;}#content { float: left; width: 80%;} Hope it helpsEnthusiastic Student Link to comment Share on other sites More sharing options...
jeffman Posted January 31, 2009 Share Posted January 31, 2009 #header { float: left; width: 100%; } This part is a problem. Because of the float property, the next two divs will float to the left of this, not below it. This will widen the page and add a horizontal scrollbar. Just take the float property out. It does nothing for this div.And since divs default to 100% width, that statement is unnecessary. It can be cut also. Link to comment Share on other sites More sharing options...
Enthusiastic Student Posted January 31, 2009 Share Posted January 31, 2009 Thanks You are right. Link to comment Share on other sites More sharing options...
coco243 Posted February 2, 2009 Author Share Posted February 2, 2009 What this sign "#" means, I don't remember and what is this sign " * " ?Thanks. Link to comment Share on other sites More sharing options...
shadowayex Posted February 2, 2009 Share Posted February 2, 2009 "#" has it search for an id. #menu { float: left; width: 20%; min-width: 100px;} set that code for <div id="menu"></div> "*" Sets that css for all elements. Link to comment Share on other sites More sharing options...
Enthusiastic Student Posted February 2, 2009 Share Posted February 2, 2009 I could also add that many websites have their content centered (with open spaces to the right and left).This might be achieved by: html { height: 100%; width: 100%}body { height: 100%; width: 90%; margin-left: 5%;} I set the <html> attributes first since <body> inherits its max values from <html>. In this example the content would be centered and would fill 90% of the width of the screen.Any element inside body which has "width: 100%;" will only be able to stretch to 90% of the width.Remember to remove preformatted margins by "* {margin: 0px;}".Hope it helpsEnthusiastic Link to comment Share on other sites More sharing options...
coco243 Posted February 3, 2009 Author Share Posted February 3, 2009 How can be colored a div? because I want to put color on each div? For that I asked for a tutorial about divs, because I want to work with them, thanks Link to comment Share on other sites More sharing options...
shadowayex Posted February 3, 2009 Share Posted February 3, 2009 I'm not quite sure what you are asking.You can set the background colr of a div like you can the body tag #content { float: left; width: 80%; background-color: #000099; //That's a blue color, in case you don't know the color codes well} You can also change text color like you can with anything other container tag #content { float: left; width: 80%; background-color: #006600; //Green} Puting two slashes ( // ) is a comment in CSS in case you didn't know. Link to comment Share on other sites More sharing options...
Enthusiastic Student Posted February 3, 2009 Share Posted February 3, 2009 Hi damyI don't know of any tutorial specifically about <div>'s, but for formatting divs you should check out w3schools CSS tutorial. Their XHTML tutorial explains divs.Hope it helpsEnthusiastic Student Link to comment Share on other sites More sharing options...
Jerry62704 Posted February 3, 2009 Share Posted February 3, 2009 How can be colored a div? because I want to put color on each div? For that I asked for a tutorial about divs, because I want to work with them, thanks#yourDiv {background-color: #ff0000;}.yourClass {background-color: #00ff00;}Then either use:<div id="yourDiv">stuff to be colored</div>or<div class="yourClass">more stuff to be colored</div>If you want all divs:div {background-color: #00f;}Not that you are restricted to red, green or blue of course. The last one is the short cut for #0000ff. Link to comment Share on other sites More sharing options...
jeffman Posted February 3, 2009 Share Posted February 3, 2009 Puting two slashes ( // ) is a comment in CSS in case you didn't know. INCORRECT. That's a javascript comment. Also works in PHP./* This is how you add a comment to CSS */ Link to comment Share on other sites More sharing options...
jlhaslip Posted February 3, 2009 Share Posted February 3, 2009 you are both correct.ragae has defined an 'end-of-line' comment. (single line)DD has defined a Comment Block. (multiple lines possible) Link to comment Share on other sites More sharing options...
jeffman Posted February 3, 2009 Share Posted February 3, 2009 We must live in alternate universes. I wouldn't use bold red if I hadn't really checked this out. Every way I tried, Firefox threw warnings. And Jigsaw won't validate it. I could look at the spec, but . . . Link to comment Share on other sites More sharing options...
jlhaslip Posted February 4, 2009 Share Posted February 4, 2009 Really??? I use them all the time... *wait*... maybe in php... I forget...*edit*my mistake... fails in css... I wish the comments tags could be standardised... Link to comment Share on other sites More sharing options...
jeffman Posted February 4, 2009 Share Posted February 4, 2009 I like that PHP lets you use 3 different styles. How hard can they be to parse, really? Link to comment Share on other sites More sharing options...
coco243 Posted February 6, 2009 Author Share Posted February 6, 2009 And how I set the divs dimensions? because my site is like this: http://www.coco243.lx.ro/ Link to comment Share on other sites More sharing options...
Jerry62704 Posted February 6, 2009 Share Posted February 6, 2009 And how I set the divs dimensions? because my site is like this: http://www.coco243.lx.ro/ Your style section in the head is a good start. Check the spelling, however. No such thing as "enght" or "lenght".You add a lot of style to the elements - move all that stuff to the css in the header unless you can show why it is needed at the element level.Simplify your code. You have too many divs in there and WAY too many overrides. 178 "important"s??? I've formatted (pretty print) your code and put in some comments on invalid things (look for ??? or ...):<DOCTYPE is needed here...<html><head><link rel="stylesheet" type="text/css" href="ind.css"/><title is needed here...</head><body><div style="position:absolute !important;top:0 !important;left:0 !important;left:auto;width:100%;margin:0 !important;padding:0 !important;color:#000 !important;"> <div style="position:relative;top:1px;left:0 !important;background:transparent !important;display:block !important;visibility:visible !important;text-indent:0 !important;float:none !important;z-index:1000;padding:0 !important;margin:0 !important;border:0 !important;width:100% !important;height:16px !important;font:normal normal normal 10px/16px Arial,sans-serif !important;"> <a href="http://www.lx.ro/" style="border: 0 !important; display: block !important; float: none !important; position: absolute !important; top: 0 !important; left: 5px !important;"> <img src="http://www.lx.ro/img/adv/sigla.gif" width="60" height="16" style="display: block !important; border: 0 !important; padding: 0 !important; margin: 0 !important;" alt="Lx.ro" title="Lx.ro - Free hosting" /> </a> <a href="http://www.lx.ro/contnou.php" style="border: 0 !important; display: block !important; float: none !important; position: absolute !important; top: 0 !important; left: 66px !important;"> <img src="http://www.lx.ro/img/adv/join.gif" width="46" height="16" style="display: block !important; border: 0 !important; padding: 0 !important; margin: 0 !important;" alt="Cont Nou" title="Deschide-ti si tu un site !" /> </a> <a href="http://www.lx.ro/reportuser.php" style="border: 0 !important; display: block !important; float: none !important; position: absolute !important; top: 0 !important; left: 113px !important;"> <img src="http://www.lx.ro/img/adv/raporteaza.gif" width="24" height="16" style="display: block !important; border: 0 !important; padding: 0 !important; margin: 0 !important;" alt="Raporteaza cont" title="Raporteaza acest cont ca fiind ilegal" /> </a> <img src="http://www.lx.ro/img/adv/reclama-left.gif" width="19" height="16" style="border: 0 !important; display: block !important; float: none !important; position: absolute !important; top: 0 !important; left: 138px !important;" alt="" /> <div style="text-align:left !important;display:block !important;visibility:visible !important;text-indent:0 !important;float:none !important;position:static !important;background:#FFF url(http://www.lx.ro/img/adv/reclama-center.gif) 0 0 repeat-x !important;padding:0 !important;margin:0 !important;margin-left:131px !important;padding-left:30px !important;margin-right:9px !important;border:0 !important;color:#000 !important;width:auto !important;height:16px !important;font:normal 10px/16px Arial,sans-serif !important;"> <img src="http://www.lx.ro/img/adv/reclama-right.gif" width="4" height="16" style="border: 0 !important; display: block !important; float: none !important; position: absolute !important; top: 0 !important; right: 5px !important;" alt="" />Voteaza pe <a href="http://blog.lx.ro">blog </a> site-urile inscrise in concurs | <span style="float: right;">© <a href="http://www.lx.ro/out.php?url=http://www.lx.ro/" style="color:#000 !important; visibility:visible !important; display:inline !important; text-indent:0 !important; float:none !important;text-decoration:underline !important;font:normal bold normal 10px/16px Arial,sans-serif !important;">LX.ro </a> </span> <script type='text/javascript'> <!--//<![CDATA[ var m3_u = (location.protocol=='https:'?'https://adserver.adlence.com/www/delivery/ajs.php':'http://adserver.adlence.com/www/delivery/ajs.php'); var m3_r = Math.floor(Math.random()*99999999999); if (!document.MAX_used) document.MAX_used = ','; document.write ("<scr"+"ipt type='text/javascript' src='"+m3_u); document.write ("?zoneid=2"); document.write ('&cb=' + m3_r); if (document.MAX_used != ',') document.write ("&exclude=" + document.MAX_used); document.write (document.charset ? '&charset='+document.charset : (document.characterSet ? '&charset='+document.characterSet : '')); document.write ("&loc=" + escape(window.location)); if (document.referrer) document.write ("&referer=" + escape(document.referrer)); if (document.context) document.write ("&context=" + escape(document.context)); if (document.mmm_fo) document.write ("&mmm_fo=1"); document.write ("'><\/scr"+"ipt>"); //]]>--> </script> <img src="http://c10.statcounter.com/counter.php?sc_project=997143&java=0&security=a4d92c3e&invisible=1" alt="" /> </div> </div></div><div style="display:block !important;float:none !important;background:transparent !important;position:static !important;height:18px !important;clear:both;"> </div><div id="header"> <p>Top </p></div><div id="menu"> <body class="header"> <!-- body should not be here??? --> <div style="position:absolute !important;top:0 !important;left:0 !important;left:auto;width:100%;margin:0 !important;padding:0 !important;color:#000 !important;"> <div style="position:relative;top:1px;left:0 !important;background:transparent !important;display:block !important;visibility:visible !important;text-indent:0 !important;float:none !important;z-index:1000;padding:0 !important;margin:0 !important;border:0 !important;width:100% !important;height:16px !important;font:normal normal normal 10px/16px Arial,sans-serif !important;"> <a href="http://www.lx.ro/" style="border: 0 !important; display: block !important; float: none !important; position: absolute !important; top: 0 !important; left: 5px !important;"> <img src="http://www.lx.ro/img/adv/sigla.gif" width="60" height="16" style="display: block !important; border: 0 !important; padding: 0 !important; margin: 0 !important;" alt="Lx.ro" title="Lx.ro - Free hosting" /> </a> <a href="http://www.lx.ro/contnou.php" style="border: 0 !important; display: block !important; float: none !important; position: absolute !important; top: 0 !important; left: 66px !important;"> <img src="http://www.lx.ro/img/adv/join.gif" width="46" height="16" style="display: block !important; border: 0 !important; padding: 0 !important; margin: 0 !important;" alt="Cont Nou" title="Deschide-ti si tu un site !" /> </a> <a href="http://www.lx.ro/reportuser.php" style="border: 0 !important; display: block !important; float: none !important; position: absolute !important; top: 0 !important; left: 113px !important;"> <img src="http://www.lx.ro/img/adv/raporteaza.gif" width="24" height="16" style="display: block !important; border: 0 !important; padding: 0 !important; margin: 0 !important;" alt="Raporteaza cont" title="Raporteaza acest cont ca fiind ilegal" /> </a> <img src="http://www.lx.ro/img/adv/reclama-left.gif" width="19" height="16" style="border: 0 !important; display: block !important; float: none !important; position: absolute !important; top: 0 !important; left: 138px !important;" alt="" /> <div style="text-align:left !important;display:block !important;visibility:visible !important;text-indent:0 !important;float:none !important;position:static !important;background:#FFF url(http://www.lx.ro/img/adv/reclama-center.gif) 0 0 repeat-x !important;padding:0 !important;margin:0 !important;margin-left:131px !important;padding-left:30px !important;margin-right:9px !important;border:0 !important;color:#000 !important;width:auto !important;height:16px !important;font:normal 10px/16px Arial,sans-serif !important;"> <img src="http://www.lx.ro/img/adv/reclama-right.gif" width="4" height="16" style="border: 0 !important; display: block !important; float: none !important; position: absolute !important; top: 0 !important; right: 5px !important;" alt="" /> Voteaza pe <a href="http://blog.lx.ro"> blog </a> site-urile inscrise in concurs | <span style="float: right;"> © <a href="http://www.lx.ro/out.php?url=http://www.lx.ro/" style="color:#000 !important; visibility:visible !important; display:inline !important; text-indent:0 !important; float:none !important;text-decoration:underline !important;font:normal bold normal 10px/16px Arial,sans-serif !important;"> LX.ro </a> </span> <script type='text/javascript'> <!--//<![CDATA[ var m3_u = (location.protocol=='https:'?'https://adserver.adlence.com/www/delivery/ajs.php':'http://adserver.adlence.com/www/delivery/ajs.php'); var m3_r = Math.floor(Math.random()*99999999999); if (!document.MAX_used) document.MAX_used = ','; document.write ("<scr"+"ipt type='text/javascript' src='"+m3_u); document.write ("?zoneid=2"); document.write ('&cb=' + m3_r); if (document.MAX_used != ',') document.write ("&exclude=" + document.MAX_used); document.write (document.charset ? '&charset='+document.charset : (document.characterSet ? '&charset='+document.characterSet : '')); document.write ("&loc=" + escape(window.location)); if (document.referrer) document.write ("&referer=" + escape(document.referrer)); if (document.context) document.write ("&context=" + escape(document.context)); if (document.mmm_fo) document.write ("&mmm_fo=1"); document.write ("'><\/scr"+"ipt>"); //]]>--> </script> <img src="http://c10.statcounter.com/counter.php?sc_project=997143&java=0&security=a4d92c3e&invisible=1" alt="" /> </div> </div> </div> <div style="display:block !important;float:none !important;background:transparent !important;position:static !important;height:18px !important;clear:both;">  </div> <p> link </p> <p> link </p> <p> link </p></body><!-- this should not be here ??? --> </div> <div id="content"> <p> content </p> </div></body></html> 1. get rid of all those overrides.2. put the css in the head section (either <style> tag for ease of use or in the external file).3. ditch the absolute positioning.4. after you fix things, run it through the validator like I did to let the machine find the errors it can. Link to comment Share on other sites More sharing options...
coco243 Posted February 6, 2009 Author Share Posted February 6, 2009 Your style section in the head is a good start. Check the spelling, however. No such thing as "enght" or "lenght".You add a lot of style to the elements - move all that stuff to the css in the header unless you can show why it is needed at the element level.Simplify your code. You have too many divs in there and WAY too many overrides. 178 "important"s??? I've formatted (pretty print) your code and put in some comments on invalid things (look for ??? or ...):<html><head><link rel="stylesheet" type="text/css" href="ind.css"/></head><body><div id="header"><p>Top </p></div><div id="menu"><body class="header"><p> link </p><p> link </p><p> link </p></body></div><div id="content"><p> content </p></div></body></html> my CSS file is: * { margin: 0px; padding: 0px;}#header { width: 100%; background-color: yellow;}#menu { float: left; width: 20%; min-width: 100px; lenght: 100%; background-color: green;}#content { float: left; width: 80%; lenght: 100%; background-color: red;} I vave posted that link to be viewed the effect of my page and I want to have fixed divs, the page to be well delimitated.Thanx. Link to comment Share on other sites More sharing options...
coco243 Posted February 7, 2009 Author Share Posted February 7, 2009 I found it, the mistake was that I used lenght, I haved to use height instead lenght :)Now the problem is how I open something in a div, for e xample when I click on a link of the menu I want like in the content div to appear informations. Thanks. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.