Log in

View Full Version : 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"?




<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


<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>