Hello, I have learned in the last 3 days CSS (around 20 hours of coding). I cant undertand few things: 1.When should i use position:absolute; , and when should i use position:relative; ? 2.When and how should i use margin? 3.lets say the my design is 1024x768 , so i set the body like that: .body { width:1024; margin:auto; } is that ok or i should write it differently? 4.What is the bestway to setup image background? I did it like that between the <body> tags: <style type="text/css"> body { background-image: url('images/bg.png') } </style> 5.lets say that I sliced design to 13 pieces , 9 for the header(should be on the top) , 1 search line (should be on the middle) , 1 box(should be on the middle) , and 2 other images that should be on the bottom. What is the strategy that i should work with that kind of design? Sorry for the newbie questions and thanks a lot!
I think you should learn more. Try small pieces of code first rather try creating a website. First try to create container box, add background etc, then you might try creating a simple navigation. Perhaps w3 school is the best place for you.
Hi, I'm fairly new to CSS also, but answering some of your questions. 1) Absolute positioning means it disregards everything but the width and height of the browser. Another way to look at it is as if it is RELATIVE to X=0 and Y=0, of the browser window. In other words: position: absolute; left:100px; top:200px; Code (markup): This example will place the object at 100px from the left and 200px from the top of your browser window, and it will stay there, it is not inline with other content. In regards to relative positioning, im not sure you'll use that much, i havent anyway. 2) Margins can be used like relative positioning i suppose. So: margin-top:10px; Code (markup): This will set the object 10px down from the position it would normally be in. Padding works in a similar way, however it moves everything located WITHIN that object down 10px. 3) Generally i have been setting body with to 100%. I would use a wrapper div to hold all of your other divs and set its propertys to your designs proportions. 4) Yes, setting the body background-image is a normal way to do so. 5) Having 9 divs for a header is a bit unusual, but still works depending on what you are doing. There are better ways to create navigation buttons if you are using divs for that. I think all i can say is to try and work in a logical manner. Although CSS is tableless, you can still try to think of it as a tabled. Arrange all your divs in the right order. Some people tend to put the code for left columns after the right column, although this works, it can make things more complicated to read through and fix. Again, i'm a bit of a newb at this , but i've found the above has worked for me thus far just fine. Hope it helps. -Rhett.
WOW thx a lot my friend , as i can see i worked pretty ok , but there are few things that i cant under why wont they work. for an example i`m not able to put the bottom bar on the bottom , there is always blank space under that bottom , same in the header , blank spaces above him , if i use position absolute it sticks it as it should but then i wont be in the mid , I tried using margin but with no success. What did i do wroing here? the main div the controls the page: #body{ width:1024px; height:100%; font-style: regular; font-family:"Verdana", Verdana, Sans-serif; margin: 0 auto; } the menu bar(header): .main { width: 950px; height: 54px; margin: 0 auto; margin-top:0; } Footer: #Footercontent{ width:1024px; margin: 0 auto; } #leftfooter { width:161px; height:54px; /* Height of the footer */ background-image: url(img/leftfooter.png); background-repeat:no-repeat; background-attachment:scroll; background-position:left bottom; display:inline; float:right; margin:0; } #rightfooter { width:863px; height:54px; /* Height of the footer */ background: url(img/rightfooter.png); background-repeat:no-repeat; background-attachment:scroll; background-position:right bottom; display:inline; float:right; margin:0; }
You need to remove the margins from the body itself. Try this: body { margin: 0; padding: 0; } Code (markup): On a side note, the general rule for defining font families is that you place double-quotation marks when the font contains a space, like "Times New Roman". You do not need to wrap "Verdana" in quotes, so you would get: .class { font-family: Verdana, Arial, sans-serif; } Code (markup):