DIV vertical-align problem

[adamnichols45]

I have a div heres the code:

<div class="bar">
adam
<img src="images/menu_split.gif" width="2" height="31" />
</div>

css

.bar {
float: left;
vertical-align:middle;
width: 950px;
height: 31px;
margin-top:20px;
background-image:url('images/menu_background.gif');
outline: 1px solid red;

}

I want the text vertically in the middle but cant get this to work no matter what I try?

time to pull my hair out..

[adamnichols45]

putting the adam and <image> inside of another div or span does the trick and setting the top padding.

I cant imagine this is the best way of doing this though. surely I should only use one div tag here?

[adamnichols45]

right putting an <image> on the same line breaks it

<div class="bar">
<div class="middle">
<A href="#">Home</A><img src="images/menu_split.gif" width="2" height="28" />
</div>
</div>


arrrrrrrrrr

[adamnichols45]

I added this class to the <image> tag

.pr21 { vertical-align: middle; }

this solved the problem but is this the correct way? can anybody explain or direct me some to ready about this problem with images sitting next to text?

thanks...

[Major_Payne]

Vertical Centering 1 [wpdfd.com]

Vertical Centering 2 [nopeople.com]

Those should help.

[alt131]

Hi Adam, good to see you back ;)

A typical reaction when starting is to add more elements and classes. Rather than trying to take more and more control, let the elements work as designed - that's hard, but you end up with more hair ;)

General comments:
The img tells me you are using xhtml. Unless you have really good reason to do so, I suggest use html. Also, I wonder if you are using a transitional doctype as well. If so, I would suggest strict. There are lots of excellent articles I can point you to if wanted, but validated html strict should allow you to do most of what you want, plus teaches you to code neat and tidy, and avoids having to deal with quirks behaviour when you are starting.

Back to the problem, you have some text, an image and a link.

HTML
<p class="bar">
adam <a href="#" title="Home Page">Home</a><img src="myimage.jpg" width="2" height="31" alt="A description of the picture">
</p>

css:
.bar {
float: left;
width: 950px;
margin-top:20px;
background-image:url(background.jpg');
outline: 1px solid red;
}

.bar img {vertical-align:middle}

Note:

• No height on .bar - the height was the same as the height of the image, and the image will force the parent to expand to contain the contents.
  
• No class on the image because you can select it using the class for the parent container
  
• Tested in Ie 5-8, winsafari, opera, firefox
  
• Another way to get a single line of text to centre vertically is to use line-height rather than height.
  

Keep at it ;)

[adamnichols45]

thanks alt131!

Its 4am and im still coding away :)

Your right im using the transitional doctype that would be brilliant if you could point me in the direction of them articles.

many thanks.

[alt131]

... coding at 4am? You're hooked ;)
Fortunately somewhere in the world it isn't 4am - so someone is always around to make a post

This was harder than expected (too many good articles), but hopefully this is a useful mixture of styles and technical levels. Many articles are older, but so is the issue, and the reasoning is still good. They also mix three issues - whether to code strict or loose, what doctypes to use to produce standards compliant, quirks (and almost quirks), and finally, whether xhtml or html.

An emerging body of coders are already using the HTML5 doctype as well - but that's a different thread

World famous in WebmasterWorld:
why most of us should not be using xhtml [webmasterworld.com]
Some help choosing doctypes:
What's Your Doctype? [webmasterworld.com]
FAQ: Choosing the best doctype for your site [webmasterworld.com]
A readable summary of the key points:
HTML Versus XHTML [reference.sitepoint.com]
The master himself - Ian Hixie Sending XHTML as text/html Considered Harmful [hixie.ch] (very long, very technical, but everything you could possibly want to know ;) )

[adamnichols45]

thanks pal I will read through them.

I actually never went to bed. It all went wrong when I tried placing the footer as the last job it went totally wrong lol.

would you mind pointing me in the right direction.

I basically have a header then 3 columns below and then a footer.

but I also need a div that spans the whole page top to bottom both left and right (its a shadow for the edge of the design)

| header |
| l m r |
| footer |

its had me up all night :(

[SuzyUK]

Adam, I think "faux columns" [alistapart.com] would be the technique you're looking for..

basically if it's just a shadow "decoration" you shouldn't really be adding divs/<img> elements just to show a decoration image (presentation and content is separate), you should think about how you can use the background-image CSS property. now if the width is fixed you can use one background-image on the containing div (which I think that older article does?), but if it's fluid you will need to use 2 containing divs (sorry about adding a div, but until we can reliably put 2 x background images on a div 'tis best ;))

put the left shadow repeating down left side of one div and the right on the other - make sure the actual background-color of the divs holding the repeating images is set to transparent. Because these are containing divs they will stretch to hold the whole document structure (if floats are used inside remember to clear them), and the repeating images show down both sides once the actual internal content structure is spaced from the sides

put the internal header, content and footer divs inside these containers and space it away from the pretty edges using left/right margin on the internal divs or left/right padding on the outer containers

might sound a step too much, but remember once the "double container" structure is there you can use it, or not, into the future as your design changes just via the CSS, no need to touch the HTML again. The double container structure enables you to use background images in a giant sliding door technique - many uses really ;)

[alt131]

@Adam, Suzy and I are in opposite time-zones, so ask away - and try to stay off the coffee ;)

@Suzy, good to see you ;) I'm up trying to write a simple answer to Adam's earlier question:

this solved the problem but is this the correct way? can anybody explain or direct me some to ready about this problem with images sitting next to text?

I see this in terms of the visual formatting model, and the combination of vertical-align and calculated height and line-height as it affects each of the anonymous, replaced and non-replaced inline boxes. Put simply, without a font-size or line-height the text and link have an calculated height of auto/zero, line-height of normal (correctly reported by winsafari, not by firebug), so vertical-align is rendered meaningless. The issue can be resolved by setting a font-size, line-height (good practise anyway) or putting in an image (as was desired) and aligning that, as I suggested.

Part way through the first sentence I decided explaining that in understandable terms was a job best left to you ;) Can you oblige?

[SuzyUK]

Hi alt :) good to see you too!.. yep I'll have a go at the earlier question if you don't manage first, but it will have to be a bit later.. am off to work for now.

[adamnichols45]

I was using <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

^^^ thats what dreamweaver defaulted to

Upon changing to html 4 the code fell to pieces and there was gaps everyway so just changed back.

[SuzyUK]

<div class="bar">
adam
<img src="images/menu_split.gif" width="2" height="31" />
</div>

Hi Adam, the answer to the earlier question is to use the same thought process used in the "faux colums/sliding doors" reply earlier about the layout problem.

.. adding a class to the image would be one way to do it, but my preference would be to remove the image from the HTML altogether - it's decorative presentation as opposed to actual page content.. no?

then add a span around the word Adam or Home or whatever ;).. CMSes often do this just for the purpose of adding these menu bar separators - it's a common requirement. Again if you approach it from this angle it can have multiple uses in the future without needing to change the HTML source. What you often see is the "menubar" div (why use a div ;)) holding the main background.. which is what you have, then the text is actually a link, an <a> element might exist too, then there is a <span> around the link text too, this is the "double container" method I mention in previous post regarding layout and is widely used to make flexible width tabs on menus as you can put one background image on the <a> element and another on the <span> element..

so to the code, you don't need actual class names on all the links/spans though often times people program the "first" and "last links in the bar to have classes - as these may need a slightly different background-image..

One other way, but virtually the same code required, is if that text in your top menu bar is a LIST of LINKS, then use the element for the job - the <ul> element, then you can use the <li> elements and the <a> elements instead of adding the span.. below is some sample markup.. it uses all 3 - list items, anchors and spans, which is probably how I would mark it up anyway - it allows for any future changes and displays as a nice semantic list when there's no CSS.. also I would mark it up this way even if I didn't yet know what it was going to look like, or that every item in the top bar was going to be a link as this gives the most flexibility to change, tweak design ;)

HTML:

<ul class="bar">
<li class="first"><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>About</span></a></li>
<li><a href="#"><span>Blog</span></a></li>
<li class="last"><a href="#"><span>Contact</span></a></li>
</ul>

then possible CSS:(with notes)

.bar { /* remove the defaults off the ul so it looks and acts like a plain div */
padding: 0;
margin: 0;
list-style: none;

width: 100%;
height: 31px;
overflow: hidden; /* this to contain the floated child links */

background: #dad;
line-height: 31px; /* this makes the text center vertical, without needing to use padding on the li element but only works if the text will always be on one line */
}

.bar li {
float: left;
height: 100%;
background: #eee url(separator.gif) repeat-y top right;/* background image here e.g repeating down the right hand side to make it look like separator */
padding: 0 10px; /* adjust this to make sure the separator "appears" to be in the middle of your list items */
}

/* either one of the two elements below could be used to hold another image, often both are used for rounded corner, fluid effects */
.bar li a, .bar li span {
display: block;
}

/* use the li classes to target the li, a or span - e.g. to remove the image from a singular list item */
.bar li.last {
background: transparent;
}

/* only the ul, or wrapper div, needs a class or ID as all the elements can be targettted via that */
/* e.g.
.bar li {}
.bar li a {}
.bar li span {}
*/

edit: forgot to close the span tags.. bad me.. done now ;)

[alt131]

@adam

Upon changing to html 4 the code fell to pieces and there was gaps everyway so just changed back

Ouch ;) But now you appreciate the relevance of doctype!
It also sounds as if your css is based around making transitional "work". That will cause headaches later on. I can understand why, right now, you're loathe to "start over", but when you have a moment, do consider going strict.

@Suzy. Nice post (as usual), but I wasn't referring to the "how" so much as the "why". I still haven't found a really good article on the vertical-align aspect of visual formatting, and I thought this was a useful and reasonably common scenario because it demonstrates block/inline, anonymous boxes, replaced/non-replaced plus the difference between the calculated height and how browsers helpfully drawing text on screen can sometimes be quite misleading ... and how to implement vertical align ;)
The chapter in the recommendations is quite difficult to work through - a nice explanation would be a fantastic addition to the library.
... if you feel inclined ;)

[adamnichols45]

I bought my self a book on css and have been reading through.

Should following this be good enough to go with strict? its from the missing manual series?