6 replies [Last post]
lewashby
lewashby's picture
Offline
newbie
Last seen: 6 years 33 weeks ago
Timezone: GMT-6
Joined: 2014-02-03
Posts: 4
Points: 5

In the following site I have an image at the top left of the screen and a black bar that the same height in pixels as the picture but that extends all the way to the right of page. I also want to be able to place some text in the center of the black bar, so it would be half way between the image and the right side of the browser and in the middle vertically of the black bar. My problem is that when I wrap my text up in my div it goes away completely, and my bar extends past the right side of the screen creating the horizontal side bar at the bottom of browser. Any ideas?

CSS

#image div
{
    float:left;
    width:200px;
    height:266px;
    margin-left:100%;
    margin-right:100%;
}
 
#topbar div
{
    position:relative;
    margin-left:200px;
    position:absolute;
    height:266px;
    width:100%;
    background:black;
    top:0px;
}
 
#heading div
{
    color:green;
    position:relative;
    left:50%;
    position:absolute;
    top:133px;
}

HTML

<!DOCTYPE html>
 
<html>
    <head>
        <title>Garrett's Site</title>
        <link rel="stylesheet" type="text/css" href="style.css">
        <style="text/css" />
        </title>
    </head>
<body>
 
<div id='image'>
    <img src='assets/me.jpg' />
</div>
 
<div id='topbar'>
    <div id='1'>
</div>
 
<div id='heading'>These words to not show up
</div>
These words do
</body>
</html>

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 7 hours 21 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9767
Points: 3849

Errors

You have errors in your html syntax. It is a Good Thing™ to validate your markup before attempting to debug.

You also have conflicting values in your css.

Here is one way to solve your problem. There may be other solutions, but this appears to be the least complex and is robust. (Tested at widths from 390px to 1355px.)

<!DOCTYPE html>
 
<html>
<head>
  <title>Garrett&#39;s Site</title>
  <style type="text/css">
  body {
    font: 100%/1.25 sans-serif black;
    margin: 0;
    }
 
  #banner {
    background-color: black;
    display: table;
    width: 100%;
    }
 
  #banner img {
    background-color: yellow;
    display: table-cell;
    vertical-align: top;
    }
 
  h1 {
    color: yellow;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    }
 
  </style>
</head>
 
<body>
  <div id="banner">
    <img alt="[Garrett Logo]"
         height="266"
         src="assets/me.jpg"
         width="200">
 
    <h1>These words do <del>not</del> show up</h1>
  </div>
 
  <p>These words do</p>
</body>
</html>

N.B. Green on black or vice versa is generally a poor choice of colors for legibility.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

lewashby
lewashby's picture
Offline
newbie
Last seen: 6 years 33 weeks ago
Timezone: GMT-6
Joined: 2014-02-03
Posts: 4
Points: 5

Thanks

Thanks, that worked, well it was close enough anyway, the heading was a little to much to the right but it was still pretty much what I was going for. So what was #banner? I noticed that it wasn't followed by 'div', but it was also preceded by the '#' symbol, unlike other CSS html tag references, body { code }, p { code },... And last of all what was the #banner img line do? Thanks again. I know I need to study CSS but I'm already drowning in PHP and Python.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 7 hours 21 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9767
Points: 3849

The # is the id selector. It

The # is the id selector. It refers, in this case, to the element with id="banner". The #banner img refers to any image descendent of #banner. Do not confuse the css descendent with OOP descendents.

The text of h1 should be well centered ±1px unless there are margins or padding throwing things off. You will need to be more specific.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

lewashby
lewashby's picture
Offline
newbie
Last seen: 6 years 33 weeks ago
Timezone: GMT-6
Joined: 2014-02-03
Posts: 4
Points: 5

here's a pic, and my code

I'v attached a pic so you can see what I mean. I also changed my html and css to closer to what you gave me. It's below.

CSS

body { background-color:#5E5858; margin:0px }
 
#banner
{
    background-color:black;
    display:table;
    width:100%;
}
 
#banner img
{
    background-color:yellow;
    display:table-cell;
    vertical-align:top;
}
 
h1
{
    color:red;
    display:table-cell;
    text-align:center;<img />
    vertical-align:middle;
}

html

<!DOCTYPE html>
 
<html>
    <head>
        <title>Garrett's Site</title>
        <link rel="stylesheet" type="text/css" href="newstyle.css">
        <style="text/css" />
        </title>
    </head>
<body>
 
<div id='banner'>
    <img height='266' width='200' src='assets/me.jpg'>
 
    <h1>Here are some words</h1>
</div>
 
</body>
</html>

lewashby
lewashby's picture
Offline
newbie
Last seen: 6 years 33 weeks ago
Timezone: GMT-6
Joined: 2014-02-03
Posts: 4
Points: 5

the picture?

I uploaded a picture but I don't see it?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 7 hours 21 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9767
Points: 3849

Mixing css and html is a

Mixing css and html is a no-no.

h1
{
    color:red;
    display:table-cell;
    text-align:center;<img />
    vertical-align:middle;
}
Note img tag.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.