Jump to content

[CSS] Positioning DIVs


Mixaalser684

Recommended Posts

I've assembled the following code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" /><title>Milan Cvetković - Glavna Strana (Home Page)</title><style>body { background-color:#000000;}#kontejner{background-color:#FF9900;}#zaglavlje{background-color:#FFFF00; height: 10%; top: 0px; left: 5%; width: 90%; position: absolute;}#navigacija{background-color:#0000FF; width: 15%; top: 10%; left:5%; height: 90%; position: absolute;}#sadrzaj{background-color:#00FFFF; width: 75%; left: 20%; top: 10%; height: 85%; position: absolute;}#podnozje{background-color:#FF00FF; height: 5%; top: 95%; left:20%;width: 75%; position: absolute;}</style></head><body><div id="kontejner"><div id="zaglavlje"> zaglavlje</div><div id="navigacija">navigacija</div><div id="sadrzaj">sadrzaj</div><div id="podnozje">podnozje</div></div></body></html>

I wanted to know is there another (better) way to write the necessary code for displaying the layout above?I'm new to this so I want to explore all the possible ways to learn this better.Thank you all for answering.

Link to comment
Share on other sites

I don't know why anybody didn't answer after two days, maybe I've written a valid code but they are obviously some things about it I don't get:I've tried putting textual contenst in Sadrzaj DIV. The text was longer tan thje width of the DIV. After viewing the code in browser I've noticed the bottom scrollbar that extends three times the viewport to the right (obviously because of the long contenst). But it didn't show after the crossing the right boundry of its containing DIV. Why is that? Shouldn't it put the text in the next line after reaching the boundry of display DIV? can someone explain to me why this happens, and what must I do to display my contenst properly? This is why I asked in the first place was the code good, it looks good on first sight but when you (I) worked with it I've noticed some things. Thank you all in advance for clearing this thing up.

Link to comment
Share on other sites

Is your page reading your CSS? Your tag needs to be <style type="text/css">. They may be why it isn't rendering right.
It's rendering them ok. I'm using Dreamweaver for building, but I'm trying the code way. I have to mention that the page, when looked in Design view doesn't look good, but when I previes it in browser it looks as it supposed to.I've solved the problem by adding another DIV inside the "Sadrzaj" (Content DIV) and defined its top, left and right margin, and added overflow: auto, so it can be scrolled down if necessary.All my DIVs are Positioned: Absolute. I've tried to position them normal, but then I couldn't display the Content DIV as I wanted. Could I've done this other way?
Link to comment
Share on other sites

OK. I guess nobody answers because the questions I'm asking are not valid. So I'm asking this concrete question: How do I change my presentation to look the same in IE?Visit My WebsiteIf you can't be specific please provide some tutorials I should refer to regarding this mater.P.S. - When I created the site I preview it in Mozilla Firefox 2.0.0.8 and it looked good. When I tried previewing it in IE 6.0 it didn't look good. In Opera 9.50 Alpha, there where minor things needed to be fixed, but overall it lookeg good 99.8%.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...