Ack! now I have a new problem with my divs!

**lord_havoc** · 07-10-2007, 12:56 PM

Well, my old problem still exists so check that one out also. But now, on my site, the div on the left sticks out for some reason. And I cannot seem to fix this one either. All I was doing, was trying to make my stuff valid. I edited one thing and... kablam. Now I can't fix it even by going back to what I had originally.

The site is http://cyanideperfection.net and the stylesheet can be found at http://cyanideperfection.net/styles/sleek.css

**techno_race** · 07-10-2007, 06:21 PM

What did you change that 'one thing' to and from?

**riptide** · 07-11-2007, 02:42 PM

send your HTMl with it and I think I can fix it

**lord_havoc** · 07-12-2007, 01:42 AM

I fixed "float:none" because I had center (I thought center was a value for float then later realized it wasn't) and I added padding to the columns. And how is the HTML going to do anything? I only changed the CSS.

**riptide** · 07-12-2007, 04:24 PM

so I can see what your css is connected to. it's easier to fix if you're looking at both. Also you need to get a book on CSS.

**lord_havoc** · 07-13-2007, 07:19 AM

You couldn't hit "view page source"?

HTML Code:

<body>
<div id="container">

<div id="top">
<img src="http://www.cyanideperfection.net/images/head.png" alt="top" />
</div>

<div id="logo">
<center>
<img src="http://cyanideperfection.net/styles/logo.gif" alt="logo" />
</center>
</div>

<div id="navigation">
<center>
<a href="http://cyanideperfection.net/">Home</a>
&nbsp;&nbsp;&nbsp;
<a href="http://www.cyanideperfection.net/gallery/index.php">Gallery</a>

&nbsp;&nbsp;&nbsp;
<a href="http://www.cyanideperfection.net/blog.php">Updates/News</a>
&nbsp;&nbsp;&nbsp;
<a href="http://www.cyanideperfection.net/bio.php">Bio</a>
&nbsp;&nbsp;&nbsp;
<a href="http://www.cyanideperfection.net/contact.php">Contact Me</a>
</center>
<br />
</div><div id="lcol">
<img class="me" src="http://cyanideperfection.net/images/thumb.jpg" alt="me"> I am me! I am my own person. I don't take anything from anyone! 
</div>
<div id="rcol">
<p>

Hello there! Welcome to my site. This is where I can display my works to the world, or sneak into seclusion from society. My gallery is just beginning to from, but I love it and I am constantly helping it grow. I am also here to help other photographers. I offer a place to put your photographs. So check out the <a href="apply/host.php">hosting</a> page to find out more.
</p>
</div>


<div id="colbottom">

</div>

</div>
</body>
</html>

**riptide** · 07-13-2007, 02:22 PM

okay that was a bit hard. oh I think this is what your main problem was. when you start adding styles to your page before you go any farther with anything make sure everything you add styles to; add their possition first.

that is the first thing you must do.I think I fixed your page but don't add position to to anything else I was able to fix it with out having to mess with your code to much.

you should also use

top down right and left more then using margin when ever you can

Code:

<style type="text/css">
body, html{
background-color: #000;
background-image: url();
}

div, p{
font-size: 1em;
font-family: "Georgia";
color: #000;
background-color: #fff;
}

#logo{
background-color: #fff;
background-image: url();
}

#navigation{
background-color: #fff;
background-image: url();
}

#lcol, #rcol{
background-color: #fff;
background-image: url();
}

#colbottom{
background-color: #fff;
background-image:
url('foot2.png');
}

#top{
background-color: #fff;
background-image:
url('foot2.png')
background-repeat: none;
}

/* link formatting */
a:link{ 
	text-decoration: underline; 
	color: #000;
        background-color: #fff; }

a:visited{ 
	text-decoration: underline; 
	color: #000;
        background-color: #fff; }

a:hover{ 
	text-decoration: underline; 
	color: #000; 
        background-color: #fff; }

a:active{ 
	text-decoration: underline; 
	color: #000;
        background-color: #fff; }

/* Structure */

#container{
	background-color: #fff;
	left: 0%;
	margin-left: 154px;
	width: 706px;
	z-index: 1;
	position: absolute;
	top: 100px;
}

#logo{
left: 50%;
width: 700px;
z-index: 2;
}

#navigation{
left: 50%;
width: 700px;
z-index: 2;
padding: 3px;
}

#lcol{
float: left;
width: 226px;
z-index: 2;
overflow: auto;
padding: 2px;
}

#rcol{
float: right;
width: 428px;
z-index: 2;
overflow: auto;
border-left: 2px double;
}

#colbottom{
width: 600px;
margin-left: -8px;
z-index: 2;
}

#top{
	width: 619px;
	margin-left:-6px;
	z-index: 2;
	position: absolute;
	top: -47px;
}

#imggal{
float: none;
width: 690px;
z-index: 2;
padding-left: 5px;
padding-right: 5px;
border-left: 0px double #fff;
}

/* Various Tags */

#logo .img{
background-color: #fff;
border: 0px solid #000;
}

#rcol .img{
border: 5px solid #fff;
}

img.me(
width: 100px;
height: 133px;
vertical-align: middle;
)

</style>

Thread: Ack! now I have a new problem with my divs!

Thread Tools

Search Thread

Ack! now I have a new problem with my divs!

Bookmarks

Bookmarks

Posting Permissions