Zeke Posted October 20, 2010 Share Posted October 20, 2010 Hi. I know Im new here, but I was wondering if anyone had any advice for me. Im having alot of trouble getting the foundation for structuring a website together. If it helps, Im not here to get a quick answer and then jet off, I'm in this to learn and keep going. I am extremely new to codeing but am attempting to learn everything I can.Ok so in theory, I create a containing Div tag, that everything goes into.So lets say I want a centered banner, a nav on the left, a content section in the middle, and another nav on the right.So, it's basically, a containing div around all of that to start with. Now are there any special attributes I should be setting for this div? Ill start it at 800px wide div.container {width:800px;margin-left:auto;margin-right:auto;position:relative;background-color:#ffffff;} The margin-left/right are there to center it. The relative position is to make it relative to the previous element, being the <body>tag(?) so it centers on that?(trying to understand this, so be gentle).Ok so if that is correct.(im assuming the height comes into play when I input more data.Next I want the center banner.So div.banner {width:600px;height:20px;left:100px;background-color:#ffffff;position:relative;border:1px solid green; } Skipping the obvious, I want it centered; so I made it left 100px because the center div tag is 800 px(800-600=200=100px on each side). Now is that the best/appriopriate way of aligning an element? Also, if I want some space between the top of the div.container and the banner, do I use <br /> or top padding? (I am imagining <br />)Im kinda screwed here, and it's really bugging me to be honest. I now want to create a nav on the left a content section in the middle and a nav on the right.But how do I do this? :S Before I even get to the right side im screwed div.leftnav {width:100px;position:relative;border:1px solid red;}div.content {position:relative;vertical-align:top;left:100px;width:500px;margin-left:50px;border:1px solid red;} It creates the content section below the leftnav. How do I create them to be top aligned :S. I dont know, I feel like I am going about this all wrong to be honest lol. Any direct advice on my problem(s)? Im not sure I understand the concept of relative positioning. Link to comment Share on other sites More sharing options...
dsonesuk Posted October 20, 2010 Share Posted October 20, 2010 first off are to declaring a doctype? http://www.w3schools.com/tags/tag_DOCTYPE.aspto center banner you would use margin: 0 auto; again, the position:relative is not really required, unless you plan to use position absolute element within it.to position nav right and nav left, you would use float left and float right for their respective elements, the middle content section would be place after these, usually using overflow:auto; to force its edges to butt up against the side nav panels. Link to comment Share on other sites More sharing options...
ShadowMage Posted October 20, 2010 Share Posted October 20, 2010 Well, for starters you probably don't need to use relative positioning. Relative positioning is really only useful (IMO) for creating a container to position absolutely positioned elements. (Which are rarely recommended, though the do have their use cases)I would remove any positioning from your elements. And BTW, the correct way to center your banner div is the same way you centered the wrapper. Use left and right margins set at auto. (The shorthand looks like this: margin: 0px auto; )And, since you're learning, you may as well start off using one of the Strict DTD's listed here: http://w3schools.com/tags/tag_doctype.asp(It'll provide better cross-browser compatibility. There are situations that demand other DTD's like Transitional, as dsonesuk will undoubtedly point out, but I still recommend Strict)And validate your code as you go using the W3 Validator: http://validator.w3.org/ Link to comment Share on other sites More sharing options...
dsonesuk Posted October 20, 2010 Share Posted October 20, 2010 I would refrain from using <br /> as a substitute for margin or padding, but use these instead as that is there purpose. Link to comment Share on other sites More sharing options...
Zeke Posted October 20, 2010 Author Share Posted October 20, 2010 Wow thanks for the quick repliesOk so, .. div.leftnav {width:100px;float:left;border:1px solid red;}div.content {position:relative;left:100px;width:500px;margin-left:50px;border:1px solid red;}div.rightnav {width:100px;float:right;border:1px solid red;} The overflow tag seems to push the content too far to the right(im assuming because the right nav is outside the container div for some reason). And my right nav is outside the container div now. Hmm... Im not sure what ive done wrong. Sorry I suppose this is another question, but so far the left nav and content are top aligned Link to comment Share on other sites More sharing options...
dsonesuk Posted October 20, 2010 Share Posted October 20, 2010 there are a number of ways to do the middle content section, not involving position: relative;div.content {border:1px solid red;overflow:auto;}div.content {border:1px solid red;margin:0 210px;} Link to comment Share on other sites More sharing options...
Zeke Posted October 20, 2010 Author Share Posted October 20, 2010 div.content {border:1px solid red;margin:0 210px;}Hmm ok, I'll look up this code because Im not entirely sure why it centers it. Rather know then plug it in Thanks for thatAlright, so you're saying not to use position:relative/absolute in this case. When is it appriopriate to use these codes for positioning? Link to comment Share on other sites More sharing options...
dsonesuk Posted October 20, 2010 Share Posted October 20, 2010 it is very rare to us these styling at all, as float margin and padding as we have found can achieve the result we required.if you were planning to overlap another element, position an element outside the confines of the div.container then that would be the appropriate situation to use position: relative and absolute together. Link to comment Share on other sites More sharing options...
Zeke Posted October 20, 2010 Author Share Posted October 20, 2010 Ahh ok. Thanks for that. Starting to paint a better pictureI know why my right nav was below the content, it was because I hadn't arranged the HTML properly, I had the content between the two navs, instead of having the content after the two navs :)Thanks alot guys. You've been a great help, and super fast.Incase anyone new is curious this is what I did. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><style type="text/css">body {background-color:#000000;}div.container {width:800px;margin-left:auto;margin-right:auto;position:relative;background-color:white;}div.banner {width:600px;height:30px;margin: 0 auto;background-color:green;margin-bottom:10px;border:1px solid green; }div.leftnav {width:100px;margin-right:10px;float:left;border:1px solid red;}div.content {border:1px solid red;overflow:auto;}div.rightnav {width:100px;float:right;border:1px solid red;margin-left:10px;}</style></head><body><div class="container"><div class="banner"> </div><div class="leftnav">sdfsdf </div><div class="rightnav">sdfsdfds </div><div class="content"> sdfdsfdsf </div></div></body></html> Im assuming it's a crude way of doing this, but it's a start. Im sure I'll be hitting you guys up with some more questions soon Thanks again Link to comment Share on other sites More sharing options...
dsonesuk Posted October 20, 2010 Share Posted October 20, 2010 margin:0 210px;}sorry i added a extra 100px; basically because the div content is not a fixed width we use margin to force its edges inward by 110px 100 being the width of nav sidepanels + 10 to prevent text butting up against side panel edges. Link to comment Share on other sites More sharing options...
Zeke Posted October 20, 2010 Author Share Posted October 20, 2010 Thanks for the explanation :)Is there a prefered method in this situation? overflow vs margin positioning? Can you actually help me understand the content/overflow solution? How come overflow:auto; spans all the way across until it reaches the next element? Is this simply what overflow:auto does? Link to comment Share on other sites More sharing options...
ShadowMage Posted October 20, 2010 Share Posted October 20, 2010 Is there a prefered method in this situation? overflow vs margin positioning? Can you actually help me understand the content/overflow solution? How come overflow:auto; spans all the way across until it reaches the next element? Is this simply what overflow:auto does?I personally prefer the overflow method. I'm not sure why it works, but overflow: auto; fixes a good range of problems. For example, floated elements don't expand their container, adding overflow: auto; to the container forces it to expand to wrap around floated elements. Link to comment Share on other sites More sharing options...
dsonesuk Posted October 20, 2010 Share Posted October 20, 2010 overflow: auto; usually used for fixed width or height element, which if its content exceeds this height or width a scroll bar is produced. I actually prefer to use the margin method, but i have seen the overflow method mentioned a couple of times within the forum. Its width is the full width of the div.container, but forces the content to remain within the side edges of the floated sidepanels. Link to comment Share on other sites More sharing options...
Zeke Posted October 20, 2010 Author Share Posted October 20, 2010 lol well what a better thing then to see two people liking two different methods. I take it there are no structural rammifications or conflictions with using either method down the line as coding advances.I suppose this says to me that there are multipul methods for producing like or similar results. Link to comment Share on other sites More sharing options...
ShadowMage Posted October 21, 2010 Share Posted October 21, 2010 lI suppose this says to me that there are multipul methods for producing like or similar results.That is precisely what it says... Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.