IMG tag in div tags problem

Hi,

I am designing a site and using css tables instead of html tables for the first time. I am having trouble with aligning the layout. It was fine but as soon as I insert an img tag in the code it messes up.

My HTML:

<div id="container">

<div id="header">
  <div id="header-logo">
    <div id="header-top"></div>
    <div id="bookmark"><img src="images/button-bookmark.jpg" alt="Bookmark" width="93" height="22" /><div id="search1"><div id="search2"><div id="search3"><div id="search-button"></div></div></div></div></div>
    <div id="header-bot"></div>
  </div>
</div>

</div>

Code (markup):

My CSS:

#container {
	width: 770px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	}
#header {
	width: 100%;
	height: 100px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	}	
#header-logo {
	width: 270px;
	height: 72px;
	margin-left: 0px;
	margin-right: auto;
	background-image: url(images/header-logo.jpg);
	}
#header-top {
	width: 500px;
	height: 29px;
	margin-left: 270px;
	margin-right: auto;
	background-image: url(images/header-top.jpg);
	text-align: right;
	}
#bookmark {
	width: 93px;
	height: 22px;
	margin-left: 270px;
	margin-right: auto;
	}
#search1 {
	width: 21px;
	height: 22px;
	margin-left: 93px;
	margin-right: auto;
	background-image: url(images/header-search1.jpg);
	}
#search2 {
	width: 301px;
	height: 22px;
	margin-left: 21px;
	margin-right: auto;
	background-image: url(images/header-search2.jpg);
	}
#search3 {
	width: 7px;
	height: 22px;
	margin-left: 301px;
	background-image: url(images/header-search3.jpg);
	}
#search-button {
	width: 78px;
	height: 22px;
	margin-left: 7px;
	background-image: url(images/button-search.jpg);
	}
#header-bot {
	width: 500px;
	height: 21px;
	margin-left: 270px;
	margin-right: auto;
	background-image: url(images/header-bot.jpg);
	}

Code (markup):

Without the image in the div it aligns nicely all in the same row. As soon as I add the image all the content in the divs after this drops down under this. I am hoping there is a simple fix to this?

 

Do you have an image of what you are trying to achieve, I can't imaging why you would need to use so many div tags.

Also it is important to understand when making the transition from Table's to CSS layouts that you don't have a div tag for each tr or td.

 

As above it would be better to see the problem visually or have the full code as it's hard to guess what the problem is otherwise.

Also to add only use div class="name" for the main elements on a webpage - header,content,footer,sidebar,menu.
For the rest use a div class="name". The only difference is in the CSS you define classes like this:
.search1 {
width: 21px;
height: 22px;
margin-left: 93px;
}

Basically you use a full stop instead of a hash at the beggining of a name.
So Class name = full stop
ID name = hash
other than that no difference.

 

wd_2k6 meant

: )

Actually, there is a small difference. When using specificity in CSS to override some older rule, an ID gets more "points" than a class. Meaning #foo p.foo will override .foo p.foo if these are all sitting in the code (prolly a very bad example but eh).

 

I am using a new div class for every td. How do I not do this? I just started working away and it was looking fine so I thought I was doing it right.

Here's a screenshot: http://img518.imageshack.us/img518/1010/headeriz3.jpg

I just inserted some text and everything after it drops down below the text too. So it's something to do with the positioning. When content is added between a div it stuffs up. If anyone could show me the correct way that would be great.

 

Whoa, hard to guess, you can use frontpage to edit the page.
Most of the times the problem will be that the image size is bigger then the DIV size.

Good luck

 

First things first, you're using the wrong markup. What does your entire page look like (now), and what images are you using?

 

I think I just need a push in the right direction then I can work from there. I am using too many divs for such a small portion of design. For someone who is good at layouts in css this might look like a mess

To make things easier I have zipped it for you to look at if you wish:
http://ez-files.net/download.php?file=32208

 

Why not just put up a link to a demo page?

 

Yeah sorry it just wasn't online. I thought this would be easier because it includes everything and can be viewed from local HD.

 

What Dan means, though, is that if we can totally look at the whole page (how it's showing up in all browsers) and all the code, we have a better idea of where to push you : )

Looking at that jpg you posted, I'm thinking that should be a form. Y'know, with <form> tags... which changes how we'd CSS that as opposed to using the HTML you currently have.

We can then also explain why the one part is sitting below the other part... did you know that divs, being block elements (and not inline elements) will naturally expand to 100% width of their parents? And that even if you set a width which is smaller, the next block down will still always sit below the first? To get two blocks alongside each other, you need to float those elements. Or, you can have them both be inline elements which do not make new lines or span 100% width of their parents, and so can stack up alongside each other...

See what we mean? Throw up a demo page on a server somewhere, and we can pick it apart and show you Teh Light : ) Esp. Dan, the minumum markup man.

 

I also don't like having to delete unnecessary files from my hard drive either. Which is why I asked for an online demo. I can just look and edit live, then post the changes I'd make here.

 

No worries guys. Here's the demo:

http://hostingfrenzy.com/temp/

There will have to be an input form and the search image would be linked and act as a submit button. And the bookmark button will be linked. I just didn't do that part yet because it's a mess. I have always designed using html tables and realize that's getting a bit old. I'm just finding it hard to get my head around it to begin with. If you look at my code you'll see that I'm using a div in place of what would be a td tag in normal html.

 

The bottom part of the header (where it's ligher blue) will act as a menu of links.

 

OKay, well you're using all those divs then as image holders. That's understandable but it's the long way of doing it. If this part of the page is going to be stuck at that size because everything has to fit inside the image, then you might want to consider making a bigger image so you aren't using 10px font size (that's damn tiny, and likely what we'd have to use if we need to keep text inside that image).

Anyway, if you weren't going to make things bigger, what you'd do is start with a single image, with all the blue stuff.

Here's a (very bad) example of what your image should look like (you can redo it better than me, obviously)... http://stommepoes.nl/backgroundjosh.jpg

You start with a div called header and stick that background in it. Everything else, the input box, the buttons, the other text, including your menu, will be built with HTML.

(inside #container)
<div id="header">
  <h1>Testing Text Here Which Will Be A Main Heading Each Page</h1>
  <form action="somethingbookmarking" method="post" id="bookmarkform">
    <div>
      <input type="submit"  name="bookmark" value="bookmark" />
    </div>
  </form>
  <form action="something" method="post" id="searchform">
    <div>
      <label for="searchbar">Type in your search term</label>
        <input type="text" name="searchbar" id="searchbar" />
      <input type="submit" name="searchsubmit" />
    </div>
  </form>
  <p>Testing text here<p>
  <ul id="header-menu">
    <li><a href="#">first link thingie</a></li>
    <li><a href="#">second thing</a></li>
    <li><a href="#">third thing</a></li>
    <li><a href="#">fourth</a></li>
  </ul>
</div>

Code (markup):

That's my idea, anyway. The label in the search form gets hidden with CSS since it's obvious to visual people that it's a search bar and what it's for (though Dogs_and_things has shown me that that's not always true : ), and I didn't use fieldset and legend because of the smallness and simplicity of the forms.

Ah, I need to post more and explain stuff, and this code will look pretty nasty until we CSS it, but I needs to eat lunch.

 

Stomme poes - thanks. That code looks a lot more efficient.

The bookmark image was just going to use a href link but the form thing should work too.

I agree the sample h1 text is very small and i'll probably modify the image to make it bigger. I just did it quickly as an example. Should I be using em instead of px for text like this? I want my site to still look good if people magnify it.

So I assume the input box searchbar class will use the search bar background image?

 

Sorry, I shouldn't just be posting code for someone like you without going through it or anything. Still not enough time... I willl get to it. Also, there's a pretty good chance that Dan would do it completely differently. Now, I do normally use Fieldset and legend in forms, but not when they're made up of almost nothing.

I don't know anything about bookmarking so if an anchor can do it, that might be better.

If you want the site to grow gracefully, you could set everything in em's, except that your image won't scale along with. My older sites have text in ems while boxes and margins in px and enlargement can get a little fugly at times-- so always test text enlargement in various browsers... although, you might possibly want to force everything to stay at its size in px, simply because they have a relation with an image.

I didn't find a search bar background image, unless it was supposed to be black. Styling forms is difficult cross-browser and there's a good chance someone somewhere won't comply (I'm looking at you, Safari).
But in any case, a seperate div to hold a piece of an image is usually not the best way (depends), cause usually everything can just sit on top of an image.

For the search bar, we'd set a width on the form, and let everything be set to display: inline... and so long as there's enough width in the form they will line up nicely. I usually wrap a div around the final input simply to keep styling the same cross-browser (esp IE vs FF) but not this time...

ech, bedtime, I should be back tomorrow.

 

Actually yours was pretty close to what I was going to do, Stomme. I'd have used input type="image" instead of submit though just so I could use an image for the submit button, and wrapped a DIV around the fieldset and a SPAN around the legend text (yes, I'd have used them anyway - for accessibility reasons), but other than that, your take was pretty much spot on.

 

Hi guys. Thanks for your input. I'm just doing a short post now because I have to run.

The background search image is this: http://hostingfrenzy.com/temp/images/header-search.jpg

You couldn't see this because it was hidden in my faulty layout

This could be used as a background image in class "searchbar".

Although i'm a newbie with this layout stuff in css i've spent a lot of time perfecting input boxes in css. I can get the input box to display the text in *almost* exactly the same way in the top browsers

 

I have played around with it a bit. It looks alright in FF, Opera, Safari. Netscape. But not IE7 (surprise surprise). I haven't tested in IE6 yet.

The main problem is the input search text. IE is displaying it in a different position compared to the other browsers. I'm sure there's a simple fix but I haven't had much luck yet.

The secondary problem is the menu links. IE is displaying them slightly lower compared to say Firefox. Once again some type of positioning problem. I had hoped IE7 would have improved its css support somewhat. If only all browsers had the same css interpretations.

Please let me know what you think might be the problem and feel free to pick on my css. Thanks.