Missing something? CSS [Archive]

View Full Version : Missing something? CSS

Jakobi

06-14-2006, 02:50 AM

Having a small issue I think. I have been adding some Javascipt and PHP to my page. I just noticed that in smaller browers it doesnt stay. Meaning the output from scripts I have are pushed right and are not staying.

See Here:

Look at this in different sizes, say 800x600 (http://first-ward.com/TEST/index.php)

I think its something I am missing from my CSS but not sure.

Thanks for any insight or help.

Kravvitz

06-14-2006, 03:09 AM

You're not missing something. You absolutely positioned it so that it will do that.

I suggest you follow and read the 2nd and 3rd links under Absolute and Relative Positioning on this page. (http://dynamicsitesolutions.com/css/layout_techniques/#abs_rel_pos)

Jakobi

06-16-2006, 01:15 AM

Nice reads...

So after reading that is it that I dont have a container basically so the scripts are moving or should the divs for the scripts be different.

I thought I had a container but just named it something else. So I thought my issue was with my css;

-either I was missing something
-wrong css for what I was trying to do
-missing something on my index.php

I messed with it but wondering if someone might know the direction for me to look.

Thanks for any help.

Kravvitz

06-16-2006, 02:49 AM

Put a wrapper <div> around everything in <body> and give it position:relative so that the absolutely positioned elements will be positioned relative to it instead of the viewport.

Jakobi

06-16-2006, 04:10 AM

I am still boggled by this. I am rather new to css but good at figuring some things out. I have tried numerous combinations and still can get it to stay put. The current version which collaspes on me is the best I have gotten even after changing things around after your suggestions.

If you spot "bad css" anywhere in the following or could say what area is the issue I would appreciate it:

Thanks.

body {
margin: 0;
padding: 0;
background: #68696d
url("/TEST/images/main_bg.jpg")
center center repeat-y;
color: #fff;
font: 10px "Flip the Switch", sans-serif;
}

a.button:link
{
color:white;
display: block;
text-decoration: none;
background-color: transparent;
font-size:14px;
font-weight:bold;
}

a.button:visited
{
color:white;
display: block;
text-decoration: none;
background-color: transparent;
font-size:14px;
font-weight:bold;
}

a.button:hover
{
color:red;
text-decoration:underline;
display: block;
background-color: transparent;
font-size:16px;
font-weight:bold;
}

a.button:active
{
color:white;
display: block;
text-decoration: none;
background-color: transparent;
font-size:14px;
font-weight:bold;
}

div#main {
margin: 0 auto;
width: 800px;
}

div#main div {
height: 1232px;
float: left;
padding-left: 15px;
}

div.leftcolumn {
width: 120px;
}

div.centerleftcolumn {
width: 310px;
}

div.centerrightcolumn {
width: 185px;
}

div.rightcolumn {
width: 125px;
}

#header {
width: 800px;
margin: 0 auto;
background: url(/TEST/images/header_logo.jpg) no-repeat;
position:relative;
}

.users {
position:absolute;
top:153px; /*adjust this till its where you want it to be*/
left:775px; /*adjust this till its where you want it to be*/
z-index: 1
}

.date {
position:absolute;
top:1px; /*adjust this till its where you want it to be*/
left:775px; /*adjust this till its where you want it to be*/
z-index: 1
}

#header img {
width: 228px;
height: 206px;
display: block;
margin-left: 572px;
border: 0;
}

div#header div {
height: 206px;
float: left;
}

div.header_logo {
height: 206px;
width: 572px;
background-image: url(/TEST/images/header_logo.jpg);
background-repeat: no-repeat;
}

#navigation_top {
height: 48px;
width: 800px;
margin: 0 auto;
background-image: url(/TEST/images/nav2.jpg);
background-repeat: no-repeat;
}

#banner {
height: 105px;
width: 800px;
margin: 0 auto;
background-image: url(/TEST/images/banner.jpg);
background-repeat: no-repeat;
}

#ad {
position:absolute;
top:212px; /*adjust this till its where you want it to be*/
left:173px; /*adjust this till its where you want it to be*/
z-index: 1
}

#ad1 {
position:absolute;
top:336px; /*adjust this till its where you want it to be*/
left:807px; /*adjust this till its where you want it to be*/
z-index: 1
}

#ad2 {
position:absolute;
top:459px; /*adjust this till its where you want it to be*/
left:807px; /*adjust this till its where you want it to be*/
z-index: 1
}

#ad3 {
position:absolute;
top:582px; /*adjust this till its where you want it to be*/
left:807px; /*adjust this till its where you want it to be*/
z-index: 1
}

#top_title_bar {
position:relative;
height: 24px;
width: 800px;
margin: 0 auto;
background-image: url(/TEST/images/top_title_bar.jpg);
background-repeat: no-repeat;
}

div#footer {
height: 205px;
width: 800px;
margin: auto;
clear: left;
}

Heres my Test Page:

<!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-1" />
<title>First-Ward</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script language='JavaScript' type='text/javascript' src='http://www.first-ward.com/TEST/scripts/Ads/adx.js'></script>
</head>

<body>
<?php virtual('/TEST/scripts/TG_whos_online.php'); ?>
<?php virtual('/TEST/scripts/date.php'); ?>
<div id="header"><img alt="Navigation Menu" usemap="#nav_header" src="/TEST/images/header_logo_nav.jpg"/>
<map name="nav_header" id="nav_header">
<area shape="rect" coords="34,25,114,50" title="Home" href="#Home" alt="Home" />
<area shape="rect" coords="34,53,114,78" title="Pics" href="#Pictures" alt="Pictures" />
<area shape="rect" coords="34,82,114,106" title="Games" href="#Games" alt="Games" />
<area shape="rect" coords="34,111,115,134" title="Flash" href="#Flash" alt="Flash" />
<area shape="rect" coords="119,26,201,50" title="Videos" href="#Videos" alt="Videos" />
<area shape="rect" coords="117,52,202,78" title="Forums" href="#Forums" alt="Forums" />
<area shape="rect" coords="117,83,202,106" title="Links" href="#Links" alt="Links" />
<area shape="rect" coords="118,110,204,134" title="Comics" href="#Comics" alt="Comics" />
</map>
</div>

<div id="banner"></div>
<div id="ad"><script language='JavaScript' type='text/javascript'>

</script></div>
<div id="top_title_bar"></div>
<div id="main">
<div class="leftcolumn">
<a href="http://www.first-ward.com" class="button" title="Homepage">Home</a>
<a href="http://www.first-ward.com" class="button" title="Homepage">Link</a>
<a href="http://www.first-ward.com" class="button" title="Homepage">Link</a>
<a href="http://www.first-ward.com" class="button" title="Homepage">Link</a>
<a href="http://www.first-ward.com" class="button" title="Homepage">Link</a>
<a href="http://www.first-ward.com" class="button" title="Homepage">Link</a>
<a href="http://www.first-ward.com" class="button" title="Homepage">Link</a>
<a href="http://www.first-ward.com" class="button" title="Homepage">Link</a>
<a href="http://www.first-ward.com" class="button" title="Homepage">Link</a>
<a href="http://www.first-ward.com" class="button" title="Homepage">Link</a>
<a href="http://www.first-ward.com" class="button" title="Homepage">Link</a>
</div>
<div class="centerleftcolumn">TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT</div>
<div class="centerrightcolumn">TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT </div>
<div class="rightcolumn"></div>
<div id="ad1"><script language='JavaScript' type='text/javascript'>

</script></div>
<div id="ad2"><script language='JavaScript' type='text/javascript'>

</script></div>
<div id="ad3"><script language='JavaScript' type='text/javascript'>

</script></div>
</div>
<div id="footer"></div>
</body>
</html>

Kravvitz

06-16-2006, 04:39 AM

It doesn't look like you're using a wrapper <div>.

You should use a list for that left column navigation.
These three articles explain how to style lists.
http://www.alistapart.com/articles/taminglists/
http://css.maxdesign.com.au/listutorial/
http://www.webreference.com/programming/css_lists/

You should read this: Writing Efficient CSS (http://www.communitymx.com/content/article.cfm?cid=90F55)

Jakobi

06-19-2006, 04:14 AM

Ok I think I took care of the issue with the items moving when the screen was reduced to a smaller size. I seen what you meant about containers and believe I fixed that.

Now in regards to a space that has shown up in my IE view. I think its from a error in my CSS maybe with a certain positoning. I have tried to change it and havent had any luck.

See this in IE then FF See Here (http://www.first-ward.com/TEST/index.php)

I think I read somewhere in these forums that IE is putting in space that is taken in my index.php, but not sure about any solutions.

I think I have some redundancy in my CSS, do I? Because if I do then I will fix it, just not sure since I am new to this.

Here is my updated index.php and CSS for any assistance. Thanks.

body {
margin: 0;
padding: 0;
background: #68696d
url("/TEST/images/main_bg.jpg")
center center repeat-y;
color: #fff;
font: 10px "Flip the Switch", sans-serif;
}

a.button:link
{
color:white;
display: block;
text-decoration: none;
background-color: transparent;
font-size:14px;
font-weight:bold;
}

a.button:visited
{
color:white;
display: block;
text-decoration: none;
background-color: transparent;
font-size:14px;
font-weight:bold;
}

a.button:hover
{
color:red;
text-decoration:underline;
display: block;
background-color: transparent;
font-size:16px;
font-weight:bold;
}

a.button:active
{
color:white;
display: block;
text-decoration: none;
background-color: transparent;
font-size:14px;
font-weight:bold;
}

div#main {
margin: 0 auto;
width: 800px;
}

div#main div {
height: 1232px;
float: left;
}

div.leftcolumn {
width: 120px;
padding-left: 15px;
}

div.centerleftcolumn {
width: 310px;
padding-left: 15px;
}

div.centerrightcolumn {
width: 185px;
padding-left: 15px;
}

div.rightcolumn {
width: 125px;
padding-left: 10px;
}

#header {
width: 800px;
margin: 0 auto;
background: url(/TEST/images/header_logo.jpg) no-repeat;
position:relative;
}

.users {
position:absolute;
top:153px; /*adjust this till its where you want it to be*/
left:700px; /*adjust this till its where you want it to be*/
z-index: 1
}

.date {
position:absolute;
top:1px; /*adjust this till its where you want it to be*/
left:605px; /*adjust this till its where you want it to be*/
z-index: 1
}

#header img {
width: 228px;
height: 206px;
display: block;
margin-left: 572px;
border: 0;
}

div#header div {
height: 206px;
float: left;
}

div.header_logo {
height: 206px;
width: 572px;
background-image: url(/TEST/images/header_logo.jpg);
background-repeat: no-repeat;
}

#navigation_top {
height: 48px;
width: 800px;
margin: 0 auto;
background-image: url(/TEST/images/nav2.jpg);
background-repeat: no-repeat;
}

#banner {
height: 105px;
width: 800px;
margin: 0 auto;
background-image: url(/TEST/images/banner.jpg);
background-repeat: no-repeat;
}

#ad {
position:relative;
top:5px; /*adjust this till its where you want it to be*/
left:20px; /*adjust this till its where you want it to be*/
z-index: 1
}

#ad1 {
position: absolute;
margin: 0 auto;
}

#ad2 {
position: absolute;
margin: 122px auto;
}

#ad3 {
position: absolute;
margin: 242px auto;
}

#top_title_bar {
position:relative;
height: 24px;
width: 800px;
margin: 0 auto;
background-image: url(/TEST/images/top_title_bar.jpg);
background-repeat: no-repeat;
}

div#footer {
height: 205px;
width: 800px;
margin: auto;
clear: left;
}

<!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-1" />
<title>First-Ward</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script language='JavaScript' type='text/javascript' src='http://www.first-ward.com/TEST/scripts/Ads/adx.js'></script>
</head>

<body>
<div id="header"><img alt="Navigation Menu" usemap="#nav_header" src="/TEST/images/header_logo_nav.jpg"/>
<map name="nav_header" id="nav_header">
<area shape="rect" coords="34,25,114,50" title="Home" href="#Home" alt="Home" />
<area shape="rect" coords="34,53,114,78" title="Pics" href="#Pictures" alt="Pictures" />
<area shape="rect" coords="34,82,114,106" title="Games" href="#Games" alt="Games" />
<area shape="rect" coords="34,111,115,134" title="Flash" href="#Flash" alt="Flash" />
<area shape="rect" coords="119,26,201,50" title="Videos" href="#Videos" alt="Videos" />
<area shape="rect" coords="117,52,202,78" title="Forums" href="#Forums" alt="Forums" />
<area shape="rect" coords="117,83,202,106" title="Links" href="#Links" alt="Links" />
<area shape="rect" coords="118,110,204,134" title="Comics" href="#Comics" alt="Comics" />
</map>
<div id="users"><?php virtual('/TEST/scripts/TG_whos_online.php'); ?></div>
<div id="date"><?php virtual('/TEST/scripts/date.php'); ?></div>
</div>

<div id="banner">
<div id="ad"><script language='JavaScript' type='text/javascript'>

</script></div></div>
<div id="top_title_bar"></div>
<div id="main">
<div class="leftcolumn">
<a href="http://www.first-ward.com" class="button" title="Homepage">Home</a>
<a href="http://www.first-ward.com" class="button" title="Homepage">Link</a>
<a href="http://www.first-ward.com" class="button" title="Homepage">Link</a>
<a href="http://www.first-ward.com" class="button" title="Homepage">Link</a>
<a href="http://www.first-ward.com" class="button" title="Homepage">Link</a>
<a href="http://www.first-ward.com" class="button" title="Homepage">Link</a>
<a href="http://www.first-ward.com" class="button" title="Homepage">Link</a>
<a href="http://www.first-ward.com" class="button" title="Homepage">Link</a>
<a href="http://www.first-ward.com" class="button" title="Homepage">Link</a>
<a href="http://www.first-ward.com" class="button" title="Homepage">Link</a>
<a href="http://www.first-ward.com" class="button" title="Homepage">Link</a>
</div>
<div class="centerleftcolumn">TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT</div>
<div class="centerrightcolumn">TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT </div>
<div class="rightcolumn">
<div id="ad1"><script language='JavaScript' type='text/javascript'>

</script></div>
<div id="ad2"><script language='JavaScript' type='text/javascript'>

</script></div>
<div id="ad3"><script language='JavaScript' type='text/javascript'>

</script></div></div>
</div>
<div id="footer"></div>
</body>
</html>

Kravvitz

06-19-2006, 05:10 AM

What I meant in reply number 4 was to put one wrapper <div> around everything in <body>, not separate ones for separate sections.

Because IE's support for floats is buggy, #users and #date are making #header taller. Just remove the #users and #date <div>s -- you don't need them at all.

I think I have some redundancy in my CSS, do I? Because if I do then I will fix it, just not sure since I am new to this.
Yes, the a.button rules are bit redundant.