I'm doing my first 'mobile' web site, and I'm having difficulties with
centring text in the header.
I've got a logo floated left, and a header also floated left to come up
beside it and occupy all the remaining space to the right. I want the
header text to be centred within that remaining space (whatever its
width). However, I don't want to set a specific width because I'm trying
to keep the layout fluid.
http://www.holidaymullandiona.com/mobile/templates/hometemplate.html.php
gives an idea of what I'm trying to do (even when viewed on a full-size
monitor). The text 'Holiday Mull and Iona' should be horizontally
centred in the blue area to the right of the logo. I'm viewing in FF6 at
present.
I've tried several combinations such as <h1><span>Heading text
here</span></h1> with 'margin: 0 auto;' set on the span, but so far
obviously not the right one. I've also tried 'text-align: center;',
which worked on the UL below, but these have percentage widths.
Currently I've got:
<body>
<div id='banner'>
<img id='hmilogo' src='../graphics/hmilogo-50.png' alt='HMIlogo' />
<h1><span>Holiday Mull and Iona</span></h1>
<p>link to <a href='http://hmicom'
target='_blank'>main site</a></p>
</div><!-- banner -->
and:
#banner {
position: relative;
width: 100%;
background-color: #369;
display: block;
overflow: auto; /* (ClearFix) */
border-bottom: 1px solid #FFF;
}
#banner #hmilogo {float: left;}
#banner h1 {
float: left;
background-color: #369;
color: #FFC20F;
font-size: 150%;
width: auto;
text-align: center;
}
The 'link to main site' para is absolutely positioned for now.
I've also tried a DIV to enclose the H1 but without success so far.
I'm still working on it, so it may change.
I feel sure this ought not to be difficult, but I'm missing something at
the moment. Any suggestions, please ?
Tim
--
Tim Dawson
Maolbhuidhe
Fionnphort
Isle of Mull PA66 6BP
01681 700718
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
