CSS Layout Problem

lora_3677 · 17-Sep-2003, 11:54 AM #1

Ok, I have played with CSS enough to be dangerous. I got the styles down, I'm tackling layouts now. I ripped both of the pieces from tutorial sites and I'm trying to combine them to work for what I want.

I have a basic page with a header, nav, footer (which isn't exactly working, but may once I get the other problem fixed), and main content divs. Inside the main content I have 4 content boxes so I can control some stuff. The first content box i have set leftmargin 20% and then 100 px wide. It is begining at the left side of the page, instead of skipping to the 20% point of the page. WHY?? I have changed the % to px, I've played with the the numbers and it just is not changing. It insists to start at the left side of the page. In the HTML page I have the header div, then the navigation div, then i have the 4 content boxes. Tried it within and outside the Inhalt div (main region) to make the .leftcontent move to where it needs to be and it won't move....

:confused

Here is the CSS:

.box {
background: #FFFFFF; /*this is a box where the bottom-navigation and the copyright will be placed*/
border-color: #48D1CC;
border-style: groove;
border-width: 2px;
color: #000099;
font-family: Arial, Tahoma, Verdana, Helvetica, sans-serif;
font-size: 12px;
margin: 2px;
padding: 2px;
}

.Inhalt p {
max-width: 650px;
}

.Header {
margin-left: 160px;
margin-top: 10px;
}

.Inhalt {
background: #FFFFFF;
color: #003366;
font-family: Verdana, Eyechart, Geneva, Arial, Helvetica, sans-serif;
margin-left: 160px; /*to position the content area to the right of the navigation*/
margin-right: 20px; /*breathing space for the text*/
margin-top: 60px;
max-width: 770px; /*readbility even on big screens*/
padding: 5px; /*space to separate navigation and content*/
width: auto;
}

.navbox {
background-color: #003366;
border-color: #FF6633;
border-style: groove;
border-width: 2px;
color: #FFFFFF;
font-family: Arial, Tahoma, Verdana, Helvetica, sans-serif;
font-size: 15px; /*some button-like boxes for the left-side navigation*/
margin: 2px;
padding: 2px;
}

.Navigation {
font-family: Verdana, Eyechart, Geneva, Arial, Helvetica, sans-serif;
height: auto;
left: 3px;
line-height: 110%; /*line-height set to 110% in order to have the navigation elements better separated*/
position: absolute; /*The navigation on the left side, positioned absolutely*/
top: 105px;
width: 135px;
}

.oldbrowser {
display: none;
}

.leftcontent {
position: absolute;
left:20%;
width:20%;
top:50px;
background:#fff;
}

.centerleftcontent {
position: absolute;
left:42%;
width:20%;
top:50px;
background:#fff;
}

.centerrightcontent {
position: absolute;
left:64%;
width:20%;
top:50px;
background:#fff;
}

.rightcontent {
position: absolute;
left:86%;
width:20%;
top:50px;
background:#fff;
}
.rightcontent, .centerrightcontent, .centerleftcontent, .leftcontent {
border:1px solid #000;
}

Gibble · 17-Sep-2003, 12:13 PM #2

Paste your HTML too please

lora_3677 · 17-Sep-2003, 12:17 PM #3

<html>

<head>
<link rel="stylesheet" href="example.css" type="text/css">

<title>New Page 1</title>
</head>

<body>
<div class="Header">
<img src="images/CSS-2.gif" width="277" height="38" alt="CSS Issues">
</div>

<div class="Navigation">
<div class="navbox"><a class="nav" href="Link1.htm">Link 1</a></div>
<div class="navbox"><a class="nav" href="Link2.htm">Link 2</a></div>
<div class="navbox"><a class="nav" href="Link3.htm">Link 3</a></div>
</div>

<div class="leftcontent">
Some text here, like:blah blah blah blah blah. the quick brown fox ran over the dead dog. hee hee.
my own version of the story. much more interesting i think.
<br>
<h3>CONTENT, with the nested FOOTER box</h3>
<p>Now you have the full stylesheet in the heading section of this page.<br>
<br>
</div>
<div class="centerleftcontent">
Do i have to do this a million times before it makes sense? or do i have to grab the right book and hope for the best?
</div>
<div class="centerrightcontent">
To do that you can use the fact that NN 4.xx does not accept the @import.
Therefore you link two style sheets:<br>
<link rel="stylesheet" href="StyleNN.css"
type="text/css"><br>
<style type="text/css"><br>
@import url(Style.css); /*IE and NN6x styles*/<br>
</style><br>
<br>
</div>
<div class="rightcontent">
Explanation: NN<6 does not recognize the @import, so it uses the
<link> style sheet. IE and NN6 accept the @import, and by placing it
below the <link> style, you give it more importance, therefore IE and
NN6 will give you the styles in the @import sheet.<br>
<br>

You have to remember to use the same selectors and properties in both style
sheets. If you declare a value in the linked stylesheet and omit this in the
imported sheet, IE will take the value from the linked sheet.</p>
</div>
<div class="box">FOOTER BOX
This will be the secondary navigation
</div>

</body>

</html>

lora_3677 · 17-Sep-2003, 12:17 PM #4

the html is what came off te tutorial site... for the most part.. i edited some of it to see if it was a size problem. ha ha.

lora_3677 · 17-Sep-2003, 12:22 PM #5

i may have found the problem.... i took out my comment above the leftcontent and now it moves and works...... is that the wrong comment style????

lora_3677 · 17-Sep-2003, 12:36 PM #6

Gibs...ok, so now all i need is the stupid footer to be a certain percentage or pixels below the longest of the content boxes... how do i make that happen?? can i use a negative percentage from the bottom or something??

Gibble · 17-Sep-2003, 01:23 PM #7

Sorry, didn't get a chance to look at it...seems you got alot figured out

Hmm...about the footer...let me check and see

Gibble · 17-Sep-2003, 01:45 PM #8

To be quite honest I always have problems getting footers to display properly in multi column css layouts...

...you can set it's top to 95% but that may not always work as you want.

lora_3677 · 17-Sep-2003, 01:47 PM #9

what do you think about using a style sheet like this... i found it on a web design company's site... found a link via google....but it's not linked anywhere
http://webctr.com/css-footer.html

does the relative positioning thing really work very well????

Rockn · 17-Sep-2003, 01:51 PM **#10**

.box {
position: whatever;
bottom: 0px;
left: 0px;
}
Might work

lora_3677 · 02:11 PM

I think the problem is that the four content boxes can expand... they don't have a set bottom... so they are inside the content div.. and the footer is below the beginning of the content div, however the content boxes still overlap it because they have grown to compensate for the text... did that make sense at all???

maybe i should just stick this on my website on a test link so it would be easier to see... i'll do that.
uploading to
http://www.preciousgemscattery.netfi...m/example.html

give me a few minutes.

Gibble · 17-Sep-2003, 03:04 PM **#12**

Quote:

Originally posted by lora_3677:
I think the problem is that the four content boxes can expand... they don't have a set bottom... so they are inside the content div.. and the footer is below the beginning of the content div, however the content boxes still overlap it because they have grown to compensate for the text... did that make sense at all???

maybe i should just stick this on my website on a test link so it would be easier to see... i'll do that.
uploading to
http://www.preciousgemscattery.netfi...m/example.html

give me a few minutes.

That is exactly the problem

lora_3677 · 17-Sep-2003, 03:06 PM **#13**

ok, so the only way to fix THAT... is to give the boxes a set size?? maybe i'll just say FORGET THE FOOTER!!! lol...

lora_3677 · 17-Sep-2003, 03:07 PM **#14**

scary that i'm totally understanding this stuff.... that tutorial i came across ROCKS!

Gibble · 17-Sep-2003, 04:25 PM **#15**

CSS is quite simple once you get the hang of it, and yes, scrap the footer

Search
Search in:
Show Threads Show Posts
Advanced Search

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)