0

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
19
Views
3 Years
Discussion Span
Last Post by JorgeM
0

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

0

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

0

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

0

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

0

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.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.