divs - external style sheet

Discussion in 'CSS' started by Lpspider, Oct 14, 2005.

0
  1. #1
    Okay, whenever I use an external style sheet (and a doctype), the div's in it get all screwed up, and the background color doesn't appear. Any idea why this is doing this?

    The css code is the same. Previously I'm placing the css in a php include, but I know this isn't right so I was going to fix it, but the divs dissapear.

    I hope that was clear and thanks for any help.
     
    Lpspider, Oct 14, 2005 IP
  2. LGRComp

    LGRComp Well-Known Member

    Messages:
    516
    Likes Received:
    27
    Best Answers:
    0
    Trophy Points:
    195
    #2
    You don't need to use a php include to use an external stylesheet. One way to do it is to place code similar to this in your html.

    <style type="text/css">
    /*<![CDATA[*/
    @import "/styles.css";
    /*]]>*/
    </style>

    This will import your style sheet into the page.
     
    LGRComp, Oct 14, 2005 IP
  3. Lpspider

    Lpspider Well-Known Member

    Messages:
    2,216
    Likes Received:
    56
    Best Answers:
    0
    Trophy Points:
    160
    #3
    Well, I know that. I'm placing the external style sheet on the main page 
    <link href="stylesheet.css" rel="stylesheet" type="text/css">
    Code (markup):
    and also on the main page are php includes for the content (header, footer, etc).

    Previously I was using css in the includes, and that's what I want to change. But when I try, the div background colors dissapear.
     
    Lpspider, Oct 14, 2005 IP
  4. LGRComp

    LGRComp Well-Known Member

    Messages:
    516
    Likes Received:
    27
    Best Answers:
    0
    Trophy Points:
    195
    #4
    Oh, that makes more sense now. Perhaps I just need to go to bed.

    Any chance to see the code or a web link to take a closer look?
     
    LGRComp, Oct 14, 2005 IP
  5. Lpspider

    Lpspider Well-Known Member

    Messages:
    2,216
    Likes Received:
    56
    Best Answers:
    0
    Trophy Points:
    160
    #5
    Well, here's the code. When viewing it the bg color of the divs are gone and the footer floats to the top.

    index:

    <!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<title></title>
<link href="stylesheet.css" rel="stylesheet" type="text/css">



</head>


<body bgcolor="#000000">




<?php

include 'content/header.php';

?>



<?php

include 'content/footer.php';

?>



</body>


</html>
    Code (markup):
    php includes:

    

<div class="header">


</div>



<img src="graphics/header3.png" class="main">




<div class="menu">
<b>
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="forum.php">Forum</a></li>
<li><a href="currentissue.php">Current Issue</a></li>
<li><a href="archives.php">Archives</a></li>
<li><a href="editorsrant.php">Editor's Rant</a></li>
<li><a href="contests.php">Contests</a></li>
<li><a href="guidelines.php">Guidelines</a></li>
<li><a href="about.php">About</a></li>
</b>
</ul>
</div>
    Code (markup):
    php include 

    




<div class="footer">


<br>

<center>


<a href="index.php">Home</a> &nbsp;&nbsp;&nbsp;
<a href="contests.php">Contests</a> &nbsp;&nbsp;&nbsp;
<a href="mailto:">Contact Us</a> &nbsp;&nbsp;&nbsp;
<a href="info/terms.php">Terms</a> &nbsp;&nbsp;&nbsp;
<a href="info/privacypolicy.php">Privacy Policy</a> &nbsp;&nbsp;&nbsp;
<a href="subscribe.php">Subscribe</a> &nbsp;&nbsp;&nbsp;
<a href="advertise.php">Advertise</a> &nbsp;&nbsp;&nbsp;
<a href="donate.php">Donate</a>

</center>


</div>

<br>

<div class="copy">

&copy; Copyright 2005

</div>




<p>
    Code (markup):
    external style sheet:

    

<style type="text/css">


<!--begin header style sheet-->



.header
{
position:absolute;
top:20px;
left:40px;
width:920px;
height:125px;
background-color:#333333;
}


.main
{
position:absolute;
top:25px;
left:250px;
z-index:1;
}





.menu
{
position:absolute;
top:145px;
left:0px;
width:980px;
font-size:16px;
text-decoration:heavy;
float:center;
}

.menu a
{
float:left;
width:95px;
text-decoration:none;
color:#d2691e;
background-color:000000;
padding:0.2em 0.6em;
border-right:1px black;
text-align:center;
}

.menu a:visited 
{ 
color:#d2691e;
text-decoration:none;
}

.menu a:hover
{
background-color:#333333;
}

li 
{
display:inline;
}

<!--end header style sheet-->


<!--begin footer style sheet-->





.footer
{
position: absolute;
top: 1500px;
left: 20px;
width:940px; 
height:50px;
background-color:333333;
font-color:#ffffff;
font-size:12px;
font-family:Arial;
}


.footer a
{
color:#696969;
text-decoration: none;
}


.footer a:visited 
{ 
text-decoration: none; 
color:#696969;
}

.footer a:hover 
{
color:#996633;
}



li {
display:inline;
}



.copy
{
position: absolute;
top:1560px;
left:500px;
width:100px;
text-align:center;
font-size:8px;
font-color:dark blue;
}



<!--end footer style sheet-->
</style>
    Code (markup):
     
    Lpspider, Oct 14, 2005 IP
  6. stuw

    stuw Peon

    Messages:
    702
    Likes Received:
    44
    Best Answers:
    0
    Trophy Points:
    0
    #6
    could it be as simple as making the link to the stylesheet root relative?
    eg
    <link href="/stylesheet.css" rel="stylesheet" type="text/css">
     
    stuw, Oct 14, 2005 IP
  7. king_cobra

    king_cobra Peon

    Messages:
    373
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    0
    #7
    to stop the footer floating to top use,

    clear: both;

    in the footer class.
     
    king_cobra, Oct 14, 2005 IP
  8. Lpspider

    Lpspider Well-Known Member

    Messages:
    2,216
    Likes Received:
    56
    Best Answers:
    0
    Trophy Points:
    160
    #8
    niether of those things seem to work...

    the footer will still float to the top when I use "clear:both;" and the div bg colors are sill gone...
     
    Lpspider, Oct 15, 2005 IP
  9. stuw

    stuw Peon

    Messages:
    702
    Likes Received:
    44
    Best Answers:
    0
    Trophy Points:
    0
    #9
    you really need to check through your code
    you have an open <p> but no close </p>, the <b> (which are depreciated) are not wrapping the <ul>, use color not font-color. You don't need <style type="text/css"> and </stlye> in an external style sheet
     
    stuw, Oct 15, 2005 IP
  10. stuw

    stuw Peon

    Messages:
    702
    Likes Received:
    44
    Best Answers:
    0
    Trophy Points:
    0
    #10
    this seems to work though....

    /* begin header style sheet */
    body {background:#000000;text-align:center;}

    div#page {
    margin-right: auto;
    margin-left: auto;
    width: 920px;
    text-align: left;
    }
    div.class {clear:both}

    div.header {
    top:20px;
    height:125px;
    background:#333333;
    }


    div.main {
    position:absolute;
    top:25px;
    left:250px;
    z-index:1;
    }


    div.menu {
    width:920px;
    font-size:16px;
    text-decoration:bold;
    float:center;
    }

    div.menu a {
    float:left;
    width:85px;
    text-decoration:none;
    color:#d2691e;
    background-color:#000000;
    padding:0.2em 0.6em;
    border-right:1px black;
    text-align:center;
    }

    div.menu a:visited { color:#d2691e;text-decoration:none;}
    div.menu a:hover{background-color:#333333;}
    li {display:inline;}
    /* end header style sheet */


    /* begin footer style sheet */
    div.footer{
    clear:both;
    height:50px;
    background-color:333333;
    font-color:#ffffff;
    font-size:12px;
    font-family:Arial;
    }
    div.footer a{color:#696969;text-decoration: none;}
    div.footer a:visited { text-decoration: none; color:#696969;}
    div.footer a:hover {color:#996633;}
    li {display:inline;}



    div.copy
    {
    text-align:center;
    font-size:8px;
    color:#000099;
    }
    /* end footer style sheet */

    header
    <div class="header"></div>
    <img src="graphics/header3.png" class="main">
    <div class="menu">
    <ul>
    <li><a href="index.php">Home</a></li>
    <li><a href="forum.php">Forum</a></li>
    <li><a href="currentissue.php">Current Issue</a></li>
    <li><a href="archives.php">Archives</a></li>
    <li><a href="editorsrant.php">Editor's Rant</a></li>
    <li><a href="contests.php">Contests</a></li>
    <li><a href="guidelines.php">Guidelines</a></li>
    <li><a href="about.php">About</a></li>
    </ul>
    </div>


    footer
    <div class="footer">
    <br>
    <center>
    <a href="index.php">Home</a> &nbsp;&nbsp;&nbsp;
    <a href="contests.php">Contests</a> &nbsp;&nbsp;&nbsp;
    <a href="mailto:">Contact Us</a> &nbsp;&nbsp;&nbsp;
    <a href="info/terms.php">Terms</a> &nbsp;&nbsp;&nbsp;
    <a href="info/privacypolicy.php">Privacy Policy</a> &nbsp;&nbsp;&nbsp;
    <a href="subscribe.php">Subscribe</a> &nbsp;&nbsp;&nbsp;
    <a href="advertise.php">Advertise</a> &nbsp;&nbsp;&nbsp;
    <a href="donate.php">Donate</a>
    </center>
    </div>
    <br>
    <div class="copy">&copy; Copyright 2005</div>

    and it gets rid of the need for absolute postitioning
     
    stuw, Oct 15, 2005 IP