Styles going weird

garry · May 19, 2008

Okay, so I'm not sure if this is officially PHP help but can someone help me anyway?

When I use styles in my pages, they aren't displaying like I want them to. It might have something to do with the positions or something but I'll just give you a run down of how I've got things.

Here's an example of it screwing up:

As you can see, the footer should be right at the bottom but instead it is like that.

Here's the php/html:

<div class="main">
    <div class="artistpage">
    Artist information goes here 
    </div>
    <div class="footer">
    Footer goes here
    </div>
</div

And here is the CSS for those divs.

<script type="text/css">
.main {
position: absolute;
top: 0px;
background-color: #FFFFFF;
padding: 10px;
height: auto;
width: 800px;
margin-left: -410px;
left: 50%;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
border-bottom-style: solid;
}

.artistpage {
width: 400px;
float: right;
}

.footer {
bottom: 0px;
font-size: 9px;
padding-top: 5px;
}

</script>

Can anyone help me with the formatting/positioning of elements so that it works properly. I'm bad at explaining this stuff but I can try do it better if you can't understand properly.

Thanks!!!

dbrimlow · May 19, 2008

First change this <script type="text/css"> to this <style type="text/css">.

Second, it is doing exactly what you are telling it to do.

If the whole container is 800px and the artistpage is 400px floated right,

The footer is doing exactly what you told it to ... be to the right of artistpage.

You have a few issues wrong.

Fist. DIVS are not containers meant to hold text ... they are elements to contain other html elements. Text must be contained in proper html tags that are meant to present text (paragraphs, headers, lists).

Dumping text naked into DIVS is extremely poor code.

Next, position:absolute should be avoided until you understand what it does (and even then, used once in a blue moon).

You should layout your page's wire frame using floats.

Here is the link to Floatutorial.

This will tell you what you need to understand floats. While you are there, look at the other topics, including the most important, Selectutorial.

garry · May 19, 2008

Thanks for your help.

I'm having a little trouble understanding exactly how I should fix this, I was taught to use position absolute and now I always hear everyone saying it is bad.

If I don't use position absolute on the main div, how will I get it in the center?

garry · May 20, 2008

Bumpp

Can anyone help me with how i can position my main div in the center of the page without using absolute positioning?

wrongmove18 · May 20, 2008

Option 1:

<center>
   <div>Content here</div>
</center>

Option 2:

  <div style="margin: 0 auto;">Content here</div>

In option 2, you need to have a DOCTYPE before your html tag

garry · May 20, 2008

Option two worked great. Thankyou!

garry · May 20, 2008

Okay so I have another problem. Now that I'm not using absolute positioning, there is a gap at the top of the page and whenever I float something right inside my main div, the footer messes up. I can't understand why it's doing this?!

Here's the html code generated for page that I took the attatched image on.

<head>
<title>
AlbumFreak - Artists</title>
</head>
<head>
<!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">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />


<link href="/dev/style/style.css" rel="stylesheet" type="text/css"> 

</head>

<div class="main">
<div class="header">

<div class="time">

    20th May 05:42 PM    </div>

    <div class="headerlogin">
        <a href="/dev/index.php?action=login"> Login</a> 
    | <a href="/dev/index.php?action=register">Register</a>
    
    </div>
    
<div class="logo">

<img src="/dev//style/images/logo.jpg" /><br />
</div>

  <a href="/dev/index.php">Home</a> 
| <a href="/dev/artists.php">Artists</a> 
| <a href="/dev/reviews.php">Reviews</a> 
| <a href="/dev/interviews.php">Interviews</a> 

| <a href="/dev/search.php">Search</a>

<hr />
</div>

    
     <div class="artistpage"> <b>Artist:</b> Opeth<br /><br /><b>Description:</b> <br />Opeth is a Swedish heavy metal band that formed in 1990 in Stockholm. While the band has been through several personnel changes, singer, guitarist, and songwriter Mikael Akerfeldt has remained Opeth's driving force since joining shortly after its inception.<br /><br /><b>Reviews:</b><br /><a href="reviews.php?id=1">Watershed</a><br />    </div>

    	</table>

<div class="footer">
<hr />
© AlbumFreak 2008 | Site design by Garrett Heel  
</div></div>

[attachment deleted by admin]

garry · May 20, 2008

bump.. anyone?

haku · May 21, 2008

Got a link? I can't speak for others, but I personally find it difficult to go through people's code with only a screenshot rather than looking at the live site.

garry · May 21, 2008

Sure, here:

http://albumfreak.com/dev/artists.php?id=2

That's an example of one of the pages having trouble when I float to the right.

Just ask if you need me to post any css or php or anything. Thanks!

haku · May 22, 2008

Whatever you did, it worked, because everything looks fine now, and not like your screenshot (although I only checked on firefox, so if the problem was a different browser, let me know).

Looking through your code though, I found one thing you should definitely fix, it can and will most likely cause you problems in the future. Easy to fix though. Look at this code:

<head>
<title>
AlbumFreak - Artists</title>
</head>
<head>
<!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">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />


<link href="/dev/style/style.css" rel="stylesheet" type="text/css"> 

</head>

There are two major problems here. The first is that you have two heads. The second is that your doctype is inside one of those heads, which means the browser is not recognizing it (doctypes have to be the absolute very first thing in a document, with no spaces even before them).

Change your code to look like this:

<!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=UTF-8" />
      <title>AlbumFreak - Artists</title>
      <link href="/dev/style/style.css" rel="stylesheet" type="text/css"> 
   </head>

This gives you a well organized head, and only one of them! You probably won't notice any difference in your site, but it will prevent problems in the future. If you do notice some problems, it's because the browser is now recognizing the doctype, and as such it is parsing the code under that doctype. So you may have to make a couple changes. But better to do that now than to fight it later!

garry · May 22, 2008

Yeah, someone from a different forum helped me figure it out. Turned out all I needed to add was a div with clear:both in it to fix everything up.

And thanks for that info about the heads, didn't realize I had it so sloppy! I've fixed it up now

Sign In

Styles going weird

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information