Help - Search - Members - Calendar
Full Version: heading not where I need it. First website help
HTMLHelp Forums > Web Authoring > Cascading Style Sheets
kat35601
The word WebSite I would like in the banner and all the way to the left. What am I doing wrong.

CODE

<html>
<head>
<title>website</title>
<style>


body {
    background-image: url("image/storm_cloud.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    margin:0;
;
}

    #topbar {
        Background-color:#293a4a;
        width:100%;
        height:45px;
}
    #Logo{
          color:black;
          float:left;
         font-weight:bold;
          font-size:205%;
        
        
         
}

    .fixedwith {
        width:1000px;
        margin:0 auto;
        
}
</style>
</head>
<body>

<div id="container">
    <div id= "topbar">
        <div class="fixedwith">

        <div id=Logo>
    <p>WebSite<p>
        </div>


        </div>

    </div>
</div>

</body>
</html>
Christian J
#Logo is floated left, but it's inside .fixedwidth, which is 1000px wide and centered. You might try placing #Logo outside of .fixedwidth instead.
kat35601
I moved it and now it is to left all the way but in the same spot half in and half out of the banner
CODE

<html>
<head>
<title>website</title>
<style>


body {
    background-image: url("image/storm_cloud.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    margin:0;
;
}

    #topbar {
        Background-color:#293a4a;
        width:100%;
        height:45px;
}
    #Logo{
          color:black;
          float:left;
         font-weight:bold;
          font-size:205%;
        
        
          
}

    .fixedwith {
        width:1000px;
        margin:0 auto;
        
}
</style>
</head>
<body>

     <div id=Logo>
    <p>WebSite<p>
      </div>

<div id="container">
    <div id= "topbar">
        <div class="fixedwith">

    


        </div>

    </div>
</div>

</body>
</html>
Frederiek
The P you use inside #Logo has default margins. Set the margin to 0 (zero) and it will work, in both codes you posted.

I suggest you set a better contrasting color to the text, as the background of #topbar is already dark.

BTW, add a DOCTYPE to the page. And get rid of the extra ; you have in the CSS for body.
kat35601
That did it thanks
Frederiek
You're welcome.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2019 Invision Power Services, Inc.