Forum Moderators: not2easy
I am not sure if anybody can help me with above issue. I was designing a web page header using purely CSS without tables as follows:
On the top of the page I create an outer box with image background with a size of 114px height and 100% width. I divide this header bar into two parts, one left and one right:
1. Left side will contain a Logo Text
2. Right side will contain 4 pictures with the same size
I would like to centre the logo text in the box left after placing all images, and place all four pics on the left side of the bar. I have no problem with placing pictures on the right as their widths are known. I create a style for the right side of the box like this:
#right-header {
float: right;
display: table-cell;
width: auto; /* to fit the size of images */
text-align: right;
}
With a HTML table, the above elements can be easily put in one row by placing these 4 images in one single table cell <td></td> with defining a size, and leave the left side with undefined width. And the logo text can also be centred easily like this:
<table width="100%" border="1">
<tr>
<td align="center">Logo Text</td>
<td align="right" width="350px">images go here</td>
</tr>
</td>
In this case, the left table cell size is defined automatically after giving the width size of the right size.
How can I do that with CSS similar to the above HTML table by also horizontally centering the logo text in the left box?
I appreciate all advice from every expert here.
Cheers
just have one big box all the way along. make it stretch to 100%. and then center the logo in the middle of it.
then introduce the div with the 4 righthand pictures in it. put do it with {position:absolute;top:0;right:0}, so it doesn't affect the big box underneath.
then all you have to do is shift the logo to the left by sticking a margin-right on it. and according to my lousy maths skills, you can work out the distance by dividing the total width of the righthand box by two. (although that might be wrong! you might have to fiddle with the number)
First of all... display:table-cell isn't supported by IE6 so you'll have problems there. Secondly, you can't be using display:table-cell with float. Whenever you float something, display will automatically be set to block (well at least that's what the browser is supposed to do).
Lastly, you don't need to specify width:100% on a div unless it's floated or positioned, because it's essentially automatic.
Just so both of you know, londrum's method will not work (unless improperly explained).
here's a way to get that method... ignore the background colors though, Since you especially wouldn't want it on the right div (so it doesn't cover the background image)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<head>
<title>title of page</title>
<meta http-equiv="content-type" content="text-html; charset=utf-8">
<style type="text/css">
#header{text-align:center}
#header img{float:right}
</style>
</head>
<BODY>
<div id="header"><img/><img/><img/><img/>testing.....weeeeeeeeee</div>
</body>
</html>
The one problem with this over tables is that if the page is shrunk too small, the label will be pushed under the float. You'd need to set a fixed-value min-width which will always be larger than the text if you don't want that to happen (MAKE SURE YOU SET IT IN EMS!).
As shown..you don't even need a container for the images. Just plop the images down in front of your logo text, and set the style #header img{float:right}, and they'll automatically be pushed to the right, with the left text being centered on the remaining space.
[edited by: Xapti at 12:48 am (utc) on July 29, 2007]
Thank for your replay on the use of absolute position. But it does not answer my question. I have no problem with placing images using absolute position or not (see my code above). The problem I would like to sort out is I want CSS to sort the left handside of the box which is used for the logo text/image automatically after giving the width size of the right hand side of the box, then CSS should be sort out the horizontal and vertical alignment within the space left after placing all images. With HTML tables this can be sorted out very conveniently (please see the idea as I show in the table above), but CSS creates lots of head aches, in particular with alignments of elements - problem with compatibility with browsers, etc. I am not sure how they would improve the next generation CSS; otherwise, people prefer to use HTML tables instead unless they may want to put images using absolute position features.
Could you please anyone can help?
Cheers
I want CSS to sort the left handside of the box which ... should be changed to:
I want CSS to sort the size of the left handside of the box which ...
Cheers
Just so you know: the way to get a div take up remaining space is to just use a normal div, unstyled, and put a float beside it. The float takes up it's necessary space, and the div uses the rest of the space.
For your situation, you don't even need to have separate divs when you use CSS, like you had to do when using table cells.
If you want a border around the two sections though, to show a solid distinction between sides, you can still put the text in a div, and the images in the other div. Just make sure the right div is floated.
also, ikeen... Realize that many people use tables, because they have a narrow fixed mindset on website styling. They don't necessarily care about semantic code, easy customization, bloated code, useless tag nesting, depreciated tags, W3C validation, or possibly even accessibility. All they often want, is some fancy pixel perfect art exhibit which looks pretty and has silly effects, such as your example of requiring centered text in remaining space; Why not just have the text left aligned, with some padding?
CSS cannot do SOME things very well (without javascript. With JS it can do anything) especially cross browser (mostly due to IE), but if it can't do something you should ask yourself:
Do I really need this feature, or is there a more simple option? Is the feature user-friendly and accessible?, etc.
[edited by: Xapti at 8:17 pm (utc) on July 29, 2007]
he wants five images in total. four of the images will take up a fixed width (for example, 100 pixels) on the righthand side of the header.
the remaining image needs to sit in the middle of whatever is left.
but he doesn't know how wide the screen is in pixels. that is the rub.
the remaining image needs to sit in the middle of 100% minus 100 pixels.
i can't see how your method will work. but then, mine probably doesn't either. it's a toughie!
I appreciate all advice.
Cheers
Did you actually try Xapti's code example?
It works perfectly for what you described...
And londrum, he never said there were 5 images, or that "logo text" was an image. Absolute positioning doesn't solve the problem (unless you use JS) because it doesn't take up any flow.
If it is an image, no problem, since images are inline anyways, just replace the text with the image.
Sorry, I did not try your codes. How can I vertically centre the logo text in the left handside?
Cheers
How can I vertically centre the logo text in the left handside?
If you make the line-height the same as the height (114px) the text will be vertically centered. (as long as there is only one line of text)
Thank for the great technique you gave me. But if I have more than one lines of text, how is the vertical centering be done?
Cheers
Why in the world do you need vertical centering for the text?
Why do you even need the horizontal centering?
There's really no point to be doing that.
There is a way to get the text vertically centered too, but since IE doesn't support it, it needs to take advantage of a quirksmode bug for it. If you're fine with that, then you can google search this site and/or the web for the method, since I don't remember the specifics (or somone else will show it).
You can also use javascript for IE instead.
I have seen someone posted most stuff about vertical centering at this link:
[webmasterworld.com...]
It is very helpful. But some are very long and complex to understand?
Can anyone pick up a simple example for horizontal centering?
Cheers
the way I see it both londrums and Xapti's methods will work fine as long as horizontal centering is the only requirement. When I originally looked at this topic before I went away for the weekend, I thought I would approach it using londrums method purely because it retained the same source order as the table style code, i.e. logo First then images/frill following - Xapti's means the floated content, the right side images, will need to come first in the source
Both methods do work, I've tested both, and the choice between them might only be dependant or your choice of source code order.
However both methods also fall flat with regards vertical centering, and as the thread you linked to shows that's not always easy because of IE's lack of support for the CSS Table Display properties.
Both methods can however be made to work with the "exact same" vertical centering trick and the one I would be tempted to choose for this would be based on example#2 from that link - use the table display properties for browsers that support them and positioning for IE
..box which is used for the logo text/image..
If, for text, you are using the vertical centering trick mentioned above you will need an extra div nested inside the left logo div {shouldn't be a major problem as this is how it should be anyway, it is the equivalent of the outer div being the table and the inner div being the table cell}. This method will vertically center both images and text so it may be suitable for your needs?
anyway have a bash at some code then post it here with any more questions you might have it would help us all if we could see which angle you are coming at this from, all this theory about what might or won't work is great but practice will refine it ;)
[edited by: SuzyUK at 4:24 pm (utc) on Aug. 1, 2007]
Sorry I mean vertial centering that can be used universally regardless of one lined or multi-lined texts inside.
SuzyUK,
I have tried your Example 2, but it does not let me horizontally center as Xapti's method which is perfect for one-lined text. I never thought about this method before, in which the elements which are floated right are on the left on the actual codes - brilliant method!
Any method that can vertically center element/text universally in my case above?
Thanks for all help.
Regards
Thon
