Positioning problem with image and text in css

inkgrrl

01-23-2009, 03:02 AM

Hi everyone-
I'm having a tough time on the home page of this site. As you can see, the text, which should be next to the picture, is floated right but won't line up with the image. I feel like I've tried everything! Also, I'm unhappy with the amount of space between the nav bar and top of the picture, but I can't get that to close up either. Any help as soon as possible (this is supposed to go live) would be appreciated so much!
here is the html and css for it.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title> </title><link rel="stylesheet" type="text/css" href="index_style.css"/>
<meta name="language" content="English" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript">

</script>

</head>
<body>

<div class="container">

<div id="logo"><img class="logo" src="logo_add_large.png" alt="b10 logo" width="958" height="160" /></div>

<div class="bar"><img src="orange_bar.png" width="900" height="37" alt="bar"/></div>

<div id="navbar"><ul>

<li><a href="index.html">Home</a></li>
<li><a href="menu_page.html">Menu</a> </li>
<li><a href="news.html">News</a></li>
<li><a href="staff.html">Staff</a></li>

<li><a href="gallery.html">Gallery</a></li>
</ul>
</div>

<img class="painting" src="paintings.gif" alt="copper pot and apple" width="600" height="466" />

<div id="maincontent">
<h1>French-Inspired American Cuisine </h1>
<div id="text">
<p>text</p>
</div>

<div class="hours">

<p class="hour_titles">
Lunch</p>

<p class="timedate">
Tuesday–Friday<br/>

11:30 am–2:00 pm</p>

<p class="hour_titles">Dinner<br/></p>

<p class="timedate">Tuesday–Saturday<br/>

5:00–close</p>

<p class="hour_titles">Happy Hour</p>
<p class="timedate">
Tuesday–Saturday<br/>
4:00–6:00<br/><br/>

Closed Sunday and Monday</p>
</div>
</div>

</div>
</body>
</html>

and css

body {

background-image:url(brown_back.gif);
background-repeat: no-repeat;
margin: 0 auto;
padding: 0;
text-align: center;
}

.container {

margin-top:20px;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
padding-bottom:20px;
text-align:left;
width: 900px;
width: 900px;
}
html>body #content {
width: 900px;
}

img.logo {display: block;
float:left;
padding-top:0px;
}

img{border:none;}

#bar{float: left;
z-index:1;}

#navbar
{
position:relative;
z-index:20;

width:800px;
bottom: 55px;
}

#navbar ul li {
display:inline;
padding-left:50px;
margin:0;
margin-right:45px;
}

#navbar a:link,
#navbar a:visited {
color:#FFFFFF;
text-decoration:none;
font-family:"Monotype Corsiva", "Apple Chancery", cursive;
font-size: 1.35em;
}

#navbar a:hover {
color: #CC0000;
}

#navbar ul{padding-top:5px;
}

#nav a:active {
color: #FFCC00;
}

#text{
display:inline-block;
width: 200px;
height: 184px;
font-family: “Tahoma”, Geneva, sans-serif;
color: #FFFFFF;
padding-left:20px;
}

img.painting
{
margin:0;
padding:0;
border-style:double;
border-color:#4c2e1f;
border-width:.55em;

}

#maincontent

{float:right;
margin:0;
width:230px;
text-align:left;
font-size: .80em;
}

h1{
font-family: "lucinda sans", Helvetica, Sans-serif;
color: #990000;
margin-left:20px;
width: 268px;
}

p{margin:0;
padding:4px;;}

.hours
{font-family:“Tahoma”, Geneva, sans-serif;
color:#FFFFFF;

font-size:.9em;
line-height:.25em;
margin-left: 20px;
padding-top:30px;
height: 175px;
}

.timedate{
line-height:15px;
}

.hour_titles
{line-height: 5px;
color:#CC0000;
font-size: 1.75em;
font-family:"Monotype Corsiva", "Apple Chancery", cursive;

}

And I'm really sorry if I didn't put the code in correctly--If someone could advise me on what I need to do I will do so in the future. thanks again

Excavator

01-23-2009, 03:54 AM

Hello inkgrrl,
A few problems there... your .container is only 900px wide but your putting a 958px wide header image into it. You have an orange .png background for the menu but it's too narrow for either the ul or #navbar.

I can help with a little start here if you're interested - http://nopeople.com/inkgrrl/ Look at the source to see how it's done, you're welcome to use it if you like.
I know it's valid but there is plenty that could still be fixed, I didn't do anything with your text in #maincontent.

I went back and did a little more. Thought that was a good place for a dl and I made your menu a little better

inkgrrl

01-23-2009, 04:15 AM

Hi Excavaor-
thanks for the tips..I meant to fix the logo being larger than the container..i did notice that. Thanks for the link to what you did--I viewed the code but don't see the css--did you eliminate the orange bar img? I wanted to but couldn't get it to extend far enough, although that was when my idea was to have the nav bar go across the length of the screen.
I am examining and comparing codes carefully--I know I take the long road in some of this..still learning!

Any clue about the text not coming up? I can tweak the other stuff, but this issue make the website unviewable, really. Thanks again!

Excavator

01-23-2009, 04:30 AM

Hi Excavaor-
thanks for the tips..I meant to fix the logo being larger than the container..i did notice that. Thanks for the link to what you did--I viewed the code but don't see the css--did you eliminate the orange bar img?!

I cut a slice out of the orange bar and repeated it.
You can get the files at http://nopeople.com/inkgrrl/files.zip, that will have the .css in it.

You should get the web developers toolbar for FireFox. You would be able to see the .css easier then, edit it live too.

Excavator

01-23-2009, 04:36 AM

Any clue about the text not coming up?

I guess I don't understand where you want it to be. Can put it anywhere you want though.

inkgrrl

01-23-2009, 04:42 AM

Thanks so much for the toolbar tip! I will certainly do that. My friend told me to do everything in dreamweaver but since I learned to code it by hand dreamweaver seems more a pain than anything, the only thing I have used it for is browser viewing that is a little quicker.

I just want the header to be lined with the top of the img, the text in the center, and the hours down towards the bottom with it's last line (closed sunday..) lined with the bottom of the img. Basically where it is now, but shifted up! thanks so much!

Excavator

01-23-2009, 04:45 AM

But I have to say, the pressing issue is the darn text that won't move up. Please help! I'm stumped.

Sorry I'm being so dense... exactly what text are you wanting to move up and exactly where do you want to move it to?

inkgrrl

01-23-2009, 04:57 AM

No problem--I'm thankful you are being so helpful, maybe I'm not being clear. Basically, in the code it's #maincontent. If you look at the site you did as an example for me, it's the text that has the header "French-Inspired American Cuisine" that starts in the bottom right corner, you can see the content if you scroll down. I just want it moved up to sit next to the image of the pot.

Fisher

01-23-2009, 05:55 AM

Add float: left; to your painting class in the CSS.

img.painting
{
margin:0;
padding:0;
border-style:double;
border-color:#4c2e1f;
border-width:0.55em;
float: left;

}

edit: Sorry, that only fixes it in Firefox. Perhaps in IE7 it's okay, but in IE6 the problem remains.

Excavator

01-23-2009, 06:37 AM

inkgrrl

01-23-2009, 02:00 PM

Thanks so much to both of you! I was fiddling around, and because i was scared float wouldn't work in Explorer (and because it was approaching 2 am) I ended up putting a negative position on the text and that seemed to work too, although it made me nervous. I will change it to float, though. Is it bad for any reason to use negative positioning, for the record?

Excavator

01-23-2009, 04:03 PM

I don't like to use negative margins unless they're needed.
Float is the way to do it.

One more change for you (the bits in red):
css
body {
text-align: center;
background: #250F00;
}
* {
margin: 0;
padding: 0;
border: none;
}
#container {
margin: 20px auto;
padding-bottom: 20px;
text-align:left;
width: 958px;
}
#logo {
height: 160px;
}
/*************nav***************/
ul#navbar {
height: 37px;
line-height: 37px;
background: url(orange_bar.png) repeat-x;
}
ul#navbar li {
display: inline;
}
#navbar a:link, #navbar a:visited {
color: #fff;
padding: 4px 45px 5px 50px; /*makes the clickable area bigger*/
text-decoration: none;
font: 1.35em "Monotype Corsiva", "Apple Chancery", cursive;
}
#navbar a:hover {
color: #cc0000;
}
#nav a:active {
color: #ffcc00;
}
#painting {
border: double .55em #4c2e1f;
margin: 30px 0 0 0; /*adjust space between nav and image here*/
float: left;
}
#maincontent {
float: right;
width: 230px;
text-align: left;
font-size: .80em;
margin: 30px 30px 0 0;
padding: 0 0 0 20px
}
h1 {
font-family: "lucinda sans", Helvetica, Sans-serif;
color: #990000;
}
#text{
width: 200px;
color: #fff;
}

/***********dl styles*********/
dl#hours {
font: .9em Tahoma, Geneva, sans-serif;
color: #fff;
margin: 50px 0 0 0;
}
dt.hour_titles {
color: #cc0000;
font: 1.75em "Monotype Corsiva", "Apple Chancery", cursive;
}
dd.timedate{
color: #fff;
}
dd.last {
margin: 50px 0 0 0;
}

markup:<dl id="hours">
<dt class="hour_titles">Lunch</dt>
<dd class="timedate">Tuesday–Friday</dd>
<dd class="timedate">11:30 am–2:00 pm</dd>
<dt class="hour_titles">Dinner</dt>
<dd class="timedate">Tuesday–Saturday</dd>
<dd class="timedate">5:00–close</dd>
<dt class="hour_titles">Happy Hour</dt>
<dd class="timedate">Tuesday–Saturday</dd>
<dd class="timedate">4:00–6:00</dd>
<dd class="timedate last">Closed Sunday and Monday</dd>
</dl>
</div>
</div>
</body>
</html>

inkgrrl

01-23-2009, 04:31 PM

Thanks so much. You've been extremely helpful. I will change the negative numbers to float when i get home. A friend told me that on his internet explorer the words are bunched up, like the line height is off. I don't know which IE he's running, but mine at work looked fine, and i checked it on http://ipinfo.info/netrenderer last night in, i think, ie7 and 6 and they looked ok, assuming it's accurate. hmmm...

inkgrrl

01-28-2009, 07:45 PM

thanks everyone!