Jump to content

anyone explain?


hellhound121

Recommended Posts

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

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.

Did you try the "try-it-yourself"'smargin: http://www.w3schools.com/css/tryit.asp?fil...e=trycss_margin
The 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

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

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

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 by boen_robot
Link to comment
Share on other sites

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

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.

yeah thats is what i want, so can you explain how you did it?
Link to comment
Share on other sites

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 by boen_robot
Link to comment
Share on other sites

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

What's the matter?  Was there something else you need other than the layout?

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

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

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

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

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

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;}

kk what does the margin: "0px-0%-0-0px" mean :S
Link to comment
Share on other sites

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

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

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 by aspnetguy
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...