On the page at http://www.fitbirth.com/wireframe/index.php there are a bordered box (a UL) and a grey-filled box (a span) on the left side of the page. I want them side-by-side (which they currently are) and I want them flush against one another and vertically-aligned (which they currently are not).
VERTICALLY: The span with the grey image is at the desired vertical position. I have no idea why the benefits list is pushed down but it needs to come up to the span’s level. Of course, I could probably set the list’s position to relative and add a negative margin-bottom but surely there’s a “cleaner” way to do this.
HORIZONTALLY: The span with the grey image should be 4px wider so that it and the ul to its left completely fill the width of the parent div (#page-body) and the span is flush against the ul; however, when the span’s width is increased by even 1px it drops down to a new line. how do I eliminate that 4px space between the ul and the span, increase the span’s width by 4px, and keep them on the same line?
(i’ve tried setting left and right margins to 0 for both the ul and the span but no change in the display was affected.)
The way I look at it is that if the image adds meaning to the content then it should be an image in the html.
If you decide it is content then the image can go in whatever element is suitable at that point and makes the most semantic sense.
For example if the image qualifies some text you have used then it can go directly next to it.
<p>The text goes here and here is the image that qualifies it <img src=....etc> </p>
If you decide that the images is just decoration then it can go in the background. If you need to add an extra element for this then in the above context you would use a span.
<p>The text goes here .... <span></span></p>
If you the empty element needs to go outside of the container then you would use a block element instead. As it is decoration then a p element shouldn’t be used and a neutral element used.
<p>The text goes here ....</p>
<div></div>
A div is really a division of content but can also be used when there is nothing better.
If on the other hand you were doing image replacement for an important image then I would have used a p element as a picture tells a 1000 words and words go in paragraphs
I hadn’t thought about the semanticity of block- vs. inline-level elements but it makes sense now that I think about it.
To tell the truth, I struggled with the semanticity of this. Since it’s just an illustration (not a diagram or example or anything) it really doesn’t even need a mention in the markup. It’s just decorative so it has no real semantic content. However, I was hesitant to make the image the background of the <ul> since it’s a whole-page illustration and not directly related to the content of the list. On the other hand, I tend to think of divs as demarcating major document divisions (header, intro, body, footer, etc.) and an illustration hardly seemed like it should be on the same level as these. And as for <p>, well, it’s just not a paragraph (again, no semantic content).
What do you think is the best way to treat an illustration?
Set the vertical-alignment to top as you are using inline-block which has a vertical-alignment of baseline in some browsers.
because you are using inline-block then whitespace in the html is treated the same as gaps between words and that’s the space you see. Close the gaps in the html.
<li>set a fit and healthy example for baby</li>
</ul><span id="illustration"></span><p>In addition to providing personal training services, FitBirth offers several packages that include doula services
As an aside a span is not the correct semantic element to be using at that position because there are block level elements on either side. The browser will internally create a block level box to surround the inline element but it’s better if you did it yourself. It makes n difference what you change with css as the html structure should still be semantic although it is still valid how you have it - it’s just not semantically correct. It should be a div (or even a p element instead) but not a span.
