Member Avatar for lewashby

I'm trying to create this site with a solid black top bar the extends from the left img all the way to the right of the screen, then add some text on top of the horizontal block. I created the block just find but when I went to add text on top of it, it extended the block down under the text and to the rest of the screen to the right. What I want is the the text to be aligned 50% left right of the black bar and 50% vertical of the black bar. Which is why I tried wrapping my divs the way they are. The image is w=200, h=266, here is my html and css.

CSS

body { background-color:#5E5858; margin:0px }

#topbar div
{
    display: block;
    position:relative;
    left:200px;
    position:absolute;
    top:0px;
    width:100%;
    height:266px;
    background:black;
}

#heading div
{
    position:relative;
    color:green;
    top:50%;
    right:50%;
}

html

<!DOCTYPE html>

<html>
    <head>
        <title>Test Site</title>
        <link rel="stylesheet" type="text/css" href="style.css">
        <style="text/css" />
        </title>
    </head>
<body>
<img src='assets/pic.jpg' />
<div id='topbar'>
    <div id='1'>

<div id='heading'>
    <div id='1'>Welcome to</div>
</div></div></div>

</body>
</html

>

  • 2 Contributors
  • 5 Replies
  • 245 Views
  • 11 Hours Discussion Span
  • Latest Post Latest Post by JorgeM

Recommended Answers

All 5 Replies

Member Avatar for JorgeM

Maybe something like this to at least get you going...

<!DOCTYPE html>
<html>
<head>
<title>Test Site</title>
<style>
body { background-color:#5E5858; margin:0px }
#left
{
   float:left;
   width: 200px;
   height: 266px;
}
#right
{
   margin-left:200px;   
   height:266px;
   background:black;
}
#text
{
    color:green;
    position:relative;
    color:green;
    top:50%;
    left:50%;
}

</style>
</head>
<body>


<div id='topbar'>
 <div id='left'>
   <img src='assets/pic.jpg' />
 </div>
 <div id='right'>
    <div id="text">
      Welcome to...
    </div>
  </div>
</div>
</body>
</html>
Edited by JorgeM
Member Avatar for lewashby

Thanks, I'll give this a try. Kinda new to CSS, when position is relative, what is it relative to? Thanks again.

Member Avatar for JorgeM

Its relative to its intended position. In other words, relative to where it is supposed to be.

Member Avatar for lewashby

I don't see topbar anywhere in your css but it's referenced in your html?

Member Avatar for JorgeM

True, its not required, but I left it there to group both left and right div within one container in the event there are other properties you want to style that are common to both left and right.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.