Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Basic question. Centre text in the remaining space to right of image?

Reply
Thread Tools

Basic question. Centre text in the remaining space to right of image?

 
 
Mike Barnard
Guest
Posts: n/a
 
      05-02-2007
Hi.

This is such a basic question, I know. I can't seem to get my thick
head around the way browsers lay out blocks and elements.

In a pages 'branding' area I want a logo on the left and a textual
title centred in the remaining clear space to its right. At the
moment the text displays as if centred, ie it stretches over two lines
and the smaller text centres under the larger, but the whole text
butts against the image. There is no space to its left and a lot to
its right.

Does that make sense?

I have a div called branding within a div called mainwrapper. It has
an id'd heading which is text centred. I've tried putting another div
in at *** this point and centring the text within that but it then
dropped down below the image.

I know its simple, it usually is, but how can I centre the text
*within the remaining clear space* to one side of the image?

Thanks in advance.




<div id=mainwrapper>

<div id="branding">

<img src="alogo.gif" width="253" height="100" align="left">
***
<h1 id="toptitle">
Some text to be centred
</h1>
***
</div><!-- end of div branding -->

</div><!-- end of div mainwrapper -->


#mainwrapper{
width: 760px;
margin: 0 auto;
background-color: #F2FAFF;
text-align: left;
}

#branding{
float: left;
height: 100px;
}

#toptitle{
text-align: center;
color: #fd834b;
font-size: 200%;
}


 
Reply With Quote
 
 
 
 
dorayme
Guest
Posts: n/a
 
      05-03-2007
In article <(E-Mail Removed)>,
Mike Barnard <(E-Mail Removed)> wrote:


> In a pages 'branding' area I want a logo on the left and a textual
> title centred in the remaining clear space to its right. At the
> moment the text displays as if centred, ie it stretches over two lines
> and the smaller text centres under the larger, but the whole text
> butts against the image. There is no space to its left and a lot to
> its right.
>
> Does that make sense?
>
> I have a div called brandin


'''
> <div id=mainwrapper>
>
> <div id="branding">
>

etc

Not quite sure what you want? Will this sort of thing do?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<title>Stacked Layers</title>
<style type="text/css">

#mainwrapper{
width: 760px;
height: 500px;
margin: 0 auto;
background-color: #F2FAFF;
text-align: left;
border: 1px red solid;
}

#branding img {float: left;}

#toptitle{
text-align: center;
color: #fd834b;
font-size: 200%;
margin-left:260px;
}

</style>

</head>
<body>

<div id="mainwrapper">
<div id="branding">
<img src="cope-003.jpg" width="253" height="100" alt="a demo
image">
<h1 id="toptitle">Some text to be centred</h1>
</div>
</div>

</body>
</html>

--
dorayme
 
Reply With Quote
 
 
 
 
Ben C
Guest
Posts: n/a
 
      05-03-2007
On 2007-05-02, Mike Barnard <(E-Mail Removed)> wrote:
> Hi.
>
> This is such a basic question, I know. I can't seem to get my thick
> head around the way browsers lay out blocks and elements.
>
> In a pages 'branding' area I want a logo on the left and a textual
> title centred in the remaining clear space to its right. At the
> moment the text displays as if centred, ie it stretches over two lines
> and the smaller text centres under the larger, but the whole text
> butts against the image. There is no space to its left and a lot to
> its right.
>
> Does that make sense?
>
> I have a div called branding within a div called mainwrapper. It has
> an id'd heading which is text centred. I've tried putting another div
> in at *** this point and centring the text within that but it then
> dropped down below the image.
>
> I know its simple, it usually is, but how can I centre the text
> *within the remaining clear space* to one side of the image?


The problem is that #branding is a float with auto-width. It therefore
gets its shrink-to-fit width, which is just wide enough for the image
and the text. The text is "centered" in that space, but since the space
is only just big enough for the text anyway, the effect is negligible.

The problem can be solved by adding width: 100% or with: 760px to the
selector for #branding.

But dorayme's suggestion is better. Why make #branding a float at all?
 
Reply With Quote
 
Mike Barnard
Guest
Posts: n/a
 
      05-03-2007
On Thu, 03 May 2007 10:52:49 +1000, dorayme
<(E-Mail Removed)> wrote:

Hi Do.

>> In a pages 'branding' area I want a logo on the left and a textual
>> title centred in the remaining clear space to its right. At the


>Not quite sure what you want? Will this sort of thing do?


>#toptitle{
>text-align: center;
>color: #fd834b;
>font-size: 200%;


>margin-left:260px;


>}


Yes, it's what I want to do. I was hoping there was a way that I
could centre the text within a div which was next to the image rather
than laying out with padding/margins etc.

As I can't include binaries in this group...

www.thunderin.co.uk/examplepic

This is where my basic knowledge is no good. I need to learn (again)
about block level elements and the document flow. Know any good
tutorials?

Thanks for replying.

 
Reply With Quote
 
Mike Barnard
Guest
Posts: n/a
 
      05-03-2007
On Thu, 03 May 2007 02:16:05 -0500, Ben C <(E-Mail Removed)> wrote:

>On 2007-05-02, Mike Barnard <(E-Mail Removed)> wrote:
>> Hi.
>>
>> This is such a basic question, I know. I can't seem to get my thick
>> head around the way browsers lay out blocks and elements.


I've been researching!

>The problem is that #branding is a float with auto-width. It therefore
>gets its shrink-to-fit width, which is just wide enough for the image
>and the text. The text is "centered" in that space, but since the space
>is only just big enough for the text anyway, the effect is negligible.


>The problem can be solved by adding width: 100% or with: 760px to the
>selector for #branding.


>But dorayme's suggestion is better. Why make #branding a float at all?


Good questions and all is now changed. I had been cut and pasting
without really understanding what was happening, but I have spent most
of today reading about the normal flow of an HTML document. I believe
I now have a handle on it.

I hope.

Thanks for taking the time to reply.
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Liteon LVW5045 How to check HD disc space remaining? Muskrat DVD Video 4 02-14-2006 11:58 AM
[OT] Space remaining on ISP's free webspace Rhino Java 1 12-21-2005 08:54 PM
Can center row in three row table take up remaining space? Anon HTML 2 03-18-2005 08:35 AM
Windows XP Pro SP2 RC1 reports low disc space when 15GB remaining teh big gazzy¬g Computer Support 12 08-15-2004 05:09 AM
Make TR/TD fill remaining vertical space? M Hedges HTML 2 02-14-2004 05:40 PM



Advertisments