hellhound121 Posted May 14, 2006 Share Posted May 14, 2006 ok hey, i was wondering if anyone could explain how to use and what it does with margins and positioning? i tryed to make a simple layout but i just cant position the images where i want them or the text using CSS. i have been to the w3school website and read the margin tut there, but i need more detail and how it does this and why. and how. Link to comment Share on other sites More sharing options...
scott100 Posted May 14, 2006 Share Posted May 14, 2006 ok hey, i was wondering if anyone could explain how to use and what it does with margins and positioning? i tryed to make a simple layout but i just cant position the images where i want them or the text using CSS. i have been to the w3school website and read the margin tut there, but i need more detail and how it does this and why. and how.<{POST_SNAPBACK}> Did you try the "try-it-yourself"'smargin: http://www.w3schools.com/css/tryit.asp?fil...e=trycss_marginThe CSS margin properties define the space around elements Think of the element as a box, the margin creates space between that element and the nextSay the element is your house, your garden would be the margin between yours and the next house (sorry, best i could think off)position (relative): http://www.w3schools.com/css/tryit.asp?fil...sition_relative Link to comment Share on other sites More sharing options...
hellhound121 Posted May 14, 2006 Author Share Posted May 14, 2006 Did you try the "try-it-yourself"'smargin: http://www.w3schools.com/css/tryit.asp?fil...e=trycss_margin Think of the element as a box, the margin creates space between that element and the nextSay the element is your house, your garden would be the margin between yours and the next house (sorry, best i could think off)position (relative): http://www.w3schools.com/css/tryit.asp?fil...sition_relative<{POST_SNAPBACK}> yeah i just need to know how to put it all togeather i know its somthing like.navigation { position:relative; "do i put left/top here?"margin-left: 30px;margin-right: 70px;}, and like how do i make a banner go to the top, in the center, and the rest of the nav, and content, and footer follow it? Link to comment Share on other sites More sharing options...
scott100 Posted May 14, 2006 Share Posted May 14, 2006 Ok, you need a header, nav bar, content bit and footer?Hows this: http://scott100.atspace.com/hellhound.htm Link to comment Share on other sites More sharing options...
boen_robot Posted May 15, 2006 Share Posted May 15, 2006 (edited) Ok, you need a header, nav bar, content bit and footer?Hows this: http://scott100.atspace.com/hellhound.htm The footer comes back to the content in IE7. Not sure why... PM me if you don't have IE7 so we could find a way to make this work in IE7 too .[edit] Good point. Well, from what I see on first sight, min-height is now supported in IE7. It might be the thing driving the whole thing down. Also for the content you have used a combination of percentages and pixels. Is that a hack of some sort? [/edit][edit2] It could be the use of quirks mode. There isn't a doctype in your document which affects IEs behaviour (as it should actually). I must say I'm trying to run both IE7 and IE6, so it's pretty darn hard to make tests, but I'll try editing some...[/edit2][edit3]So far, putting it in strict mode with the doctype and adding the xml prolog to ensure IE6 still reads it, leads to a big mess with the positioning of the left column (but yeah, the footer is positioned correctly).[/edit3] Edited May 15, 2006 by boen_robot Link to comment Share on other sites More sharing options...
scott100 Posted May 15, 2006 Share Posted May 15, 2006 Darn, i use IE6, do you wan't to try and correct it for IE7 and post back? thanks Link to comment Share on other sites More sharing options...
boen_robot Posted May 15, 2006 Share Posted May 15, 2006 I managed to do it, but in a really odd way actually. Probably because of the just as weird way I've installed IE7. This XHTML: <?xml version="1.0" encoding="utf-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>test</title><link rel="stylesheet" media="all" type="text/css" href="style.css" /><!--[if gt IE 6]><link rel="stylesheet" media="all" type="text/css" href="ie7style.css" /><![endif]--></head><body><div id="header">Header</div><div id="leftnavigation"><h2>Menu</h2><ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Etc</a></li></ul></div><div id="content"><h2>Sample Content</h2><p>This is the content section of the page. This is the content section of the page. This is the content section of the page. This is the content section of the page. This is the content section of the page. This is the content section of the page. This is the content section of the page. This is the content section of the page. </p></div><div id="footer">Footer</div></body></html> Where the style.css file has exactly what the page scott100 has and ie7style.css has the following fix. #content { min-height: 140px;} If anything changes in later releases, it would be very easy to fix .P.S. The way posted here does not work for me, because of the weird way I installed IE7, but it should work in a "genuine" version of it. Link to comment Share on other sites More sharing options...
hellhound121 Posted May 15, 2006 Author Share Posted May 15, 2006 I managed to do it, but in a really odd way actually. Probably because of the just as weird way I've installed IE7. This XHTML:<?xml version="1.0" encoding="utf-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>test</title><link rel="stylesheet" media="all" type="text/css" href="style.css" /><!--[if gt IE 6]><link rel="stylesheet" media="all" type="text/css" href="ie7style.css" /><![endif]--></head><body><div id="header">Header</div><div id="leftnavigation"><h2>Menu</h2><ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Etc</a></li></ul></div><div id="content"><h2>Sample Content</h2><p>This is the content section of the page. This is the content section of the page. This is the content section of the page. This is the content section of the page. This is the content section of the page. This is the content section of the page. This is the content section of the page. This is the content section of the page. </p></div><div id="footer">Footer</div></body></html> Where the style.css file has exactly what the page scott100 has and ie7style.css has the following fix. #content { min-height: 140px;} If anything changes in later releases, it would be very easy to fix .P.S. The way posted here does not work for me, because of the weird way I installed IE7, but it should work in a "genuine" version of it. <{POST_SNAPBACK}> yeah thats is what i want, so can you explain how you did it? Link to comment Share on other sites More sharing options...
boen_robot Posted May 15, 2006 Share Posted May 15, 2006 (edited) Didn't I mentioned it? Oh, I didn't... It's a conditional comment. This one to be exact: <!--[if gt IE 6]><link rel="stylesheet" media="all" type="text/css" href="ie7style.css" /><![endif]--> IE 5 and later offer this as a way of escaping their bugs. All other browsers and all validators threat this as simple comment, thus whatever you have there, your page is still valid. The "gt" means "greater then". The other possible operators are "lt"(less then), "gte"(greather then or equal), "lte"(less then or equal). If the operator is omitted, then the exact version is used (that would be IE 6 only in our case). If the version is also omitted, then this means any version of IE. So that's it. Techically speaking, this trick should also work if you use: <!--[if IE 7]><link rel="stylesheet" media="all" type="text/css" href="ie7style.css" /><![endif]--> But as mentioned it didn't worked for me. What DID worked for me was "gte IE 6", which means that IE7 identifies itself as IE6 due to the weird way of installation, by which IE6 is still in the core of Windows.Also note that IE takes with a priority something which is in it's special stylesheet. If you have something in the head, it still has higher priority, but not when both styles are on one level (in this case: external stylesheets).P.S. This IE7 is like a drug I tell you. I feel as I want to scream "happy coding to everyone!" . OMG. I just realized that sooner or later I'll have to remove it, because of all the problems it gives to IE6. Oh, no ! Khm... ignore that.[edit] Yes, but both IE6 and IE7 work REALLY weird. For example, in IE7 I can't do anything else besides browsing different pages, going back and... basically that's it. If I open IE6 window and click/type an adress it opens three new windows before it actually opens the desired page. It works fine if I have clicked the link from somewhe else, such as ICQ for example. In IE7 I don't actually get a load of the tabs. I see the menu of IE6 when I give it a right click, etc... it's * I tell you. But it IS good if you want to check out IEs new rendering engine but just don't have a genuine copy of Windows.*what's wrong with the word for "where the devil came from"?[/edit] Edited May 15, 2006 by boen_robot Link to comment Share on other sites More sharing options...
scott100 Posted May 15, 2006 Share Posted May 15, 2006 Also for the content you have used a combination of percentages and pixels. Is that a hack of some sort?No hack, i just changed the values to zero, they were previously something else. They can be changed to 0px or whatever.Are you running both IE6 and IE7? Link to comment Share on other sites More sharing options...
hellhound121 Posted May 15, 2006 Author Share Posted May 15, 2006 No hack, i just changed the values to zero, they were previously something else. They can be changed to 0px or whatever.Are you running both IE6 and IE7?<{POST_SNAPBACK}> hey? dont forget about me Link to comment Share on other sites More sharing options...
scott100 Posted May 15, 2006 Share Posted May 15, 2006 hey? dont forget about me <{POST_SNAPBACK}> What's the matter? Was there something else you need other than the layout? Link to comment Share on other sites More sharing options...
hellhound121 Posted May 15, 2006 Author Share Posted May 15, 2006 What's the matter? Was there something else you need other than the layout?<{POST_SNAPBACK}> yeah for your to explain how you did it lol, how to position the text and margins, i know how to make them, but my site will be using images. so i normally use to position them with absolute in html, and tables. but ppl say CSS is suppose to be better, to i want to do that with CSS. but how to do it? i have no idea. so id like you to explain how to do it with detail. Link to comment Share on other sites More sharing options...
boen_robot Posted May 15, 2006 Share Posted May 15, 2006 This is a really simple layout. It doesn't use any CSS "hacks" nor some kind of "rarely used properties". Read the tutorial again, look for the properties in the reference for their explanation, play with the values, if you want and add additional properties to see the results and so on. There truly isn't anything beyond the basics here. Link to comment Share on other sites More sharing options...
hellhound121 Posted May 15, 2006 Author Share Posted May 15, 2006 well i moaned a little, but i took your advice and i looked at the CSS and damn its basic :S, as you said, i been looking at it all rolls off of the absolute positioned nav. i see people use "Float" action. one more thing. how do i position it all in the center so there is like a 200px on each side of the layout? Link to comment Share on other sites More sharing options...
Little Goat Posted May 15, 2006 Share Posted May 15, 2006 add this:margin:200px;to the body{...}section if there is one.if not, make one.LGEdit:oh, yeah. I forgot about the top and bottom margins. Link to comment Share on other sites More sharing options...
hellhound121 Posted May 15, 2006 Author Share Posted May 15, 2006 one more thing, when i take away the links in the nav area, the footer doesnt go up, it just leaves a white space. how do i fix this please?and yeah littlegoat, thanks i figured it out body{margin-left:200px;margin-top: 0px;margin-right:200px;padding:0px;} Link to comment Share on other sites More sharing options...
scott100 Posted May 15, 2006 Share Posted May 15, 2006 The footer will stay below the content page, not move up into the white spacechange this below and the content div will take up the full width (you could actually delete that margin now as it isn't being used)#content { margin : 0px 0% 0 0px; padding : 3px; color : #000000; background-color:blue;} Link to comment Share on other sites More sharing options...
hellhound121 Posted May 15, 2006 Author Share Posted May 15, 2006 The footer will stay below the content page, not move up into the white spacechange this below and the content div will take up the full width (you could actually delete that margin now as it isn't being used)#content { margin : 0px 0% 0 0px; padding : 3px; color : #000000; background-color:blue;}<{POST_SNAPBACK}> kk what does the margin: "0px-0%-0-0px" mean :S Link to comment Share on other sites More sharing options...
hellhound121 Posted May 15, 2006 Author Share Posted May 15, 2006 kk what does the margin: "0px-0%-0-0px" mean :S<{POST_SNAPBACK}> kk nvm that i figured it out, but even if i changed the code to what u said, the text goes under the nav bg color, so u cant see half of it. :S Link to comment Share on other sites More sharing options...
scott100 Posted May 15, 2006 Share Posted May 15, 2006 Sorry i misread your question, try deleting bit in red (and change margin back to 150px )#content { margin : 0px 0% 0 150px; padding : 3px; color : #000000; background-color:blue; min-height: 163px;} If that doesn't work can you draw a picture of what you want cause i'm a bit lost with everything that's happened up till now Link to comment Share on other sites More sharing options...
hellhound121 Posted May 15, 2006 Author Share Posted May 15, 2006 kk nvm that i figured it out, but even if i changed the code to what u said, the text goes under the nav bg color, so u cant see half of it. :S<{POST_SNAPBACK}> here, i have selected the problems that i need help fixing, could you take alook and see what u can do? Link to comment Share on other sites More sharing options...
Little Goat Posted May 15, 2006 Share Posted May 15, 2006 first, post your code.I'm assuming that the header and footer are fat cause you used a <p> tag inside.to make the background go all the way down, look at this post:http://w3schools.invisionzone.com/index.ph...st=0#entry19491 Link to comment Share on other sites More sharing options...
hellhound121 Posted May 16, 2006 Author Share Posted May 16, 2006 here is the code ^^ <html><head><style>/* setting margins on the body will change where the hole CSS is places on the website */body{margin-left:100px;margin-top: 0px;margin-right:100px;margin-bottom: 0px;padding: 0px;}/* this is the font of all the <p> tags on the site */p{font-family: tahoma; font-size: 10px; color: #ffffff; text-align:left;}a{font-family: tahoma; font-size: 10px; color: #ffffff; text-align:left;}h2 {font-family: tahoma; font-size: 15px; color: #ffffff;}/* this is the header/banner */#header{ padding : 3px; background-color: #3f424c;} /* this is the navigation bar */#leftnavigation { position : absolute; left : 100px; width : 150px; padding : 3px; background-color: #3f424c; min-height: auto;}/* this is the content box */#content { margin-left:156px; padding : 3px; background-color: #485274; min-height: 163px;} /* this is the footer/end bar */#footer { padding : 3px; background-color: #3f424c;} </style></head><body><div id="header"><p>Header</p></div><div id="leftnavigation"><h2>Menu</h2><a href="#">Home</a><br><a href="#">About</a><br><a href="#">Contact</a><br><a href="#">Etc</a></div><div id="content"><h2>Sample Content</h2><p>This is the content section of the page. This is the content section of the page. This is the content section of the page. This is the content section of the page. This is the content section of the page. This is the content section of the page. This is the content section of the page. This is the content section of the page.This is the content section of the page. This is the content section of the page. This is the content section of the page. This is the content section of the page. This is the content section of the page. This is the content section of the page. This is the content section of the page. This is the content section of the page.This is the content section of the page. This is the content section of the page. This is the content section of the page. This is the content section of the page. This is the content section of the page. This is the content section of the page. This is the content section of the page. This is the content section of the page.This is the content section of the page. This is the content section of the page. This is the content section of the page. This is the content section of the page. This is the content section of the page. This is the content section of the page. This is the content section of the page. This is the content section of the page.This is the content section of the page. This is the content section of the page. This is the content section of the page. This is the content section of the page.This is the content section of the page. This is the content section of the page. This is the content section of the page. This is the content section of the page. This is the content section of the page. This is the content section of the page. This is the content section of the page. This is the content section of the page. </p></div><div id="footer"><p>Footer</p></div></body></html> when i used float:left, on the nav experimenting, it went all way down to the footer, but then a big gap went on the content. so maybe its to do with floats? Link to comment Share on other sites More sharing options...
hellhound121 Posted May 16, 2006 Author Share Posted May 16, 2006 (edited) lol, ###!, i read http://css.maxdesign.com.au/floatutorial/tutorial0801.htm tutorial, i followed the steps, and pow! i got a basic layout, why the ###### couldnt the other tutorials explain is as easy as that site has, i know now the basics of making a simple 2/3 colum layout ^^. im gonna experiment with this, adding images, indead of bg colors and i hope it all works out. thankyou all for all your help, if i need help with anything else, be sure ill post it here Edited May 16, 2006 by aspnetguy Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now