CSS Layout Formatting? [Archive] - Lissa Explains it All: Web Design Forums

View Full Version : CSS Layout Formatting?

echoes412

06-28-2004, 08:01 AM

Okay, I'm using a CSS layout from LEIA. It's the header, two column. Anyway, I was trying to make the background and fonts and everything different colors, but everyway I tried, I couldn't get it to work. I'm thinking maybe I just put it in the wrong area, or left out something. I can show you what I have so far, if needed.

Thanks :)

Dude128

06-28-2004, 08:07 AM

I can show you what I have so far, if needed.

please do :)

echoes412

06-28-2004, 09:15 AM

I haven't even began to work on content, so please excuse the use of the same text that came with the layout. Oddly enough, I don't know if this matters, but I'm building my page on geocities, and when I click to preview the page as it appears below, it changes the yahoo links and everything to fit those specifications, yet the window where my page is supposed appear shows nothing but black TNR text on a white background.

Thanks :)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Two Column CSS Layout with Header</title>
<style type="text/css">

A:link
{ text-decoration: none; color:#FFC26A; }
A:visited
{ text-decoration: none; color:#DFE4EA; }
A:active
{ text-decoration: none; color:#FFC26A; }
A:hover
{ text-decoration: line-through; color:#FFC26A;

background-color: #314052;

font-family: Arial Narrow;
color: #FF914A;
letter-spacing: 2pt;
font-weight: normal;
font-size: small;

body
{ margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}

#header {
margin: 20px;
padding: 10px;
height: 200px;
}
#left {

position: absolute;
left: 15px;
top: 160px;
width: 200px;

}
#center {
top: 0;
margin-left: 230px;
margin-right: 15px;
}

</style>
</head>

<body>

<div id="header">

Your header will go here. You can place images, text links, etc. in this div. To change the properties of this div you can change the #header selector in the style sheet that is located on this page between the head tags.

</div>

<div id="left">

Your left menu will go here. You can place images, text links, etc. in this div. To change the properties of this div you can change the #left selector in the style sheet that is located on this page between the head tags.

</div>

<div id="center">
All of your content goes in this div. This section is fluid so that if the window is collapsed, your div will collapse also and fit the screen perfectly. To change the properties of this div you can change the #center selector in the style sheet that is located on this page between the head tags.
</div>

</body>
</html>

kittycat

06-28-2004, 05:04 PM

You're missing a closing } on the a:hover section, here's the first part of your stylesheet:

A:link
{ text-decoration: none; color:#FFC26A; }
A:visited
{ text-decoration: none; color:#DFE4EA; }
A:active
{ text-decoration: none; color:#FFC26A; }
A:hover
{ text-decoration: line-through; color:#FFC26A;
background-color: #314052; }

body
{ font-family: Arial Narrow;
color: #FF914A;
letter-spacing: 2pt;
font-weight: normal;
font-size: small;
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}

The bold stuff I'm not sure if you want it to go in the body or link section, so I just put it in the body... if you need to just stick it in with the link stuff :)

echoes412

06-28-2004, 11:39 PM

Thanks for your reply. I added the closing thing, but it still doesn't work? I don't know what's going on with it. I moved the background-color to the top, and that finally fixed the font and the font color, but the background is still showing up as white. Thanks so much for your help! Here's what I have:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Two Column CSS Layout with Header</title>
<style type="text/css">

background-color: #314052

A:link
{ text-decoration: none; color:#FFC26A; }
A:visited
{ text-decoration: none; color:#DFE4EA; }
A:active
{ text-decoration: none; color:#FFC26A; }
A:hover
{ text-decoration: line-through; color:#FFC26A;}

body
{font-family: Arial Narrow;
color: #FF914A;
letter-spacing: 2pt;
font-weight: normal;
font-size: x-small; }

{ margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}

kittycat

06-29-2004, 01:43 AM

That part of your CSS should look like this then:

A:link
{ text-decoration: none; color:#FFC26A; }
A:visited
{ text-decoration: none; color:#DFE4EA; }
A:active
{ text-decoration: none; color:#FFC26A; }
A:hover
{ text-decoration: line-through; color:#FFC26A;}

body
{font-family: Arial Narrow;
color: #FF914A;
letter-spacing: 2pt;
font-weight: normal;
font-size: x-small;
background-color: #314052;
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}

echoes412

06-29-2004, 01:50 AM

YAY! Thank you soooo much! It works now!!! :D

echoes412

06-29-2004, 03:25 AM

Umm...one more question. If I want the center column (the fluid one) to stop at say 785 pixels, but still remain fluid, how could I do that? I want my site to be accessible to all monitors, so I was going to arrange it in 800 x 600. If there's another way to do this, I'd be grateful for any help.

Thanks :)

domostick

06-29-2004, 05:46 AM

I have the sort of the same problem that echoes did dealing with the div frames. Lets say my navigation is on the left and my main text is on the right. I want a link that I click on the left to locate in the right frame but when I put <a href=http://url.com target=content> all it does it open a new window. Is there any way to target into the right frame?

kittycat

06-29-2004, 04:52 PM

You just have to make sure your targetting is correct mainly, if you're positive it's correct and it's still not working show us the page and we'll see if we can help.

domostick

06-29-2004, 07:48 PM

Yea im pretty sure its correct.
Here it is.
<html>
<head>
<title>Two Column CSS Layout</title>

<style type="text/css">
</style>

<script language="javascript" type="text/javascript">
//</script>

<style type="text/css">

body
{ margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}

#menu {
position: absolute;
left: 5px;
padding: 0px;
width: 150px;
}

#content {

margin-left: 200px;
padding: 0px;
margin-right: 15px;
}

</style>
</head>
<body>

<a href="http://www.geocities.com/fioneliloboi/AA/home.html" target="rightside"><img style="position:absolute;top:275;left:234;"
src="http://www.geocities.com/fioneliloboi/pix/aa.gif"></a>
<a href="http://www.geocities.com/fioneliloboibp/home.html"><img style="position:absolute;top:275;left:397;"
src="http://www.geocities.com/fioneliloboi/pix/bp.gif"></a>
<a href="http://www.geocities.com/fioneliloboi/mg/home.html"><img style="position:absolute;top:275;left:560;"
src="http://www.geocities.com/fioneliloboi/pix/mg.gif"></a>
<img style="position:absolute;top:150;left:0;"
src="http://www.geocities.com/fioneliloboi/pix/blue.gif">
<img style="position:absolute;top:40;left:316;"
src="http://www.geocities.com/fioneliloboi/pix/head.gif">
<img style="position:absolute;top:168;left:164;"
src="http://www.geocities.com/fioneliloboi/pix/bluetr.gif">
<img style="position:absolute;top:168;left:770;"
src="http://www.geocities.com/fioneliloboi/pix/bluetr.gif">
<img style="position:absolute;top:318;left:177;"
src="http://www.geocities.com/fioneliloboi/pix/blackhr.gif">
<img style="position:absolute;top:770;left:174;"
src="http://www.geocities.com/fioneliloboi/pix/hr3.gif">
<img style="position:absolute;top:230;left:0;"
src="http://www.geocities.com/fioneliloboi/pix/blackhr2.gif">
<img style="position:absolute;top:168;left:0;" src="http://www.geocities.com/fioneliloboi/pix/bg1.gif">
<img style="position:absolute;top:190;left:29;" height=21 width=111 src="http://www.geocities.com/fioneliloboi/pix/menu.gif">

<div id="menu">

Your menu will go here. You can place images, text links, etc. in this div. To change the properties of this layer you can change the #menu selector in the style sheet that is located on this page between the head tags.

</div>

<div id="content">
<a href="javascript:popup(contact.html)">Contact</a></div></div>

</body>
</html>

kittycat

06-29-2004, 09:34 PM

If this is your entire page code, it's not working because a)you have target as 'rightside' and most importantly b) you have no iframes on there :P You can only target iframe or frames, not divs.

domostick

06-29-2004, 10:31 PM

Nvm I tried it with iframes and it worked.