Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > div with nested links has no height?

Reply
Thread Tools

div with nested links has no height?

 
 
Kyle James Matthews
Guest
Posts: n/a
 
      06-04-2004
Hello all,

I am nesting a set of links within a div with a background color and a
width of 100%. Opera 7.5 and IE 6.0 display the design I am attempting
to achieve, no doubt quite incorrectly. FireFox and Netscape assume
that the div has a height of 0. How can I get the div to stretch to the
height of the text without setting that height manually?

Example page if needed: http://www.digitalovertone.com/new/index2.php.

Many thanks,

Kyle
 
Reply With Quote
 
 
 
 
Disco Octopus
Guest
Posts: n/a
 
      06-04-2004
Kyle James Matthews wrote:
> Hello all,
>
> I am nesting.....


That is great news.


 
Reply With Quote
 
 
 
 
Toby A Inkster
Guest
Posts: n/a
 
      06-04-2004
Kyle James Matthews wrote:

> Example page if needed: http://www.digitalovertone.com/new/index2.php.


Not tested, but after this bit:

<a href="pro.php">Professional</a>

Try adding:

<br style="clear:right;">

--
Toby A Inkster BSc (Hons) ARCS
Contact Me - http://www.goddamn.co.uk/tobyink/?page=132

 
Reply With Quote
 
Steve Pugh
Guest
Posts: n/a
 
      06-04-2004
Kyle James Matthews <(E-Mail Removed)> wrote:

>I am nesting a set of links within a div with a background color and a
>width of 100%. Opera 7.5 and IE 6.0 display the design I am attempting
>to achieve, no doubt quite incorrectly. FireFox and Netscape assume
>that the div has a height of 0. How can I get the div to stretch to the
>height of the text without setting that height manually?
>
>Example page if needed: http://www.digitalovertone.com/new/index2.php.


#navbar a {
display:block;
float:right;
}

As the links are floated they are taken outside of the context of
their parent. Hence their parent has no content and thus has no
height.

You need to include an element with clear: right; after the last of
the links but before the end of the parent element.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <(E-Mail Removed)> <http://steve.pugh.net/>
 
Reply With Quote
 
rf
Guest
Posts: n/a
 
      06-04-2004

"Steve Pugh" <(E-Mail Removed)> wrote in message
news(E-Mail Removed)...
> Kyle James Matthews <(E-Mail Removed)> wrote:
>
> >Example page if needed: http://www.digitalovertone.com/new/index2.php.

>
> #navbar a {
> display:block;
> float:right;
> }
>
> As the links are floated they are taken outside of the context of
> their parent. Hence their parent has no content and thus has no
> height.
>
> You need to include an element with clear: right; after the last of
> the links but before the end of the parent element.


Or even better, firmly keeping the KISS principle in mind:

Remove float: right;
Then of course - remove display: block:
Then, to put it all back together, suggest text-align: right for the parent
div.

The more CSS (and to a certain extent HTML) you throw at browsers the more
likelihood one of them will barf.

Hmmm... just glanced at the rest of the CSS file. Veritable overkill. Kyle:
Rewrite it from the ground up, considering very carefully each thing you put
in there.

Cheers
Richard.


 
Reply With Quote
 
Kyle James Matthews
Guest
Posts: n/a
 
      06-05-2004
rf wrote:
> The more CSS (and to a certain extent HTML) you throw at browsers the more
> likelihood one of them will barf.


Actually, I'm going for projectile vomiting. Do you think I have a shot?

> Hmmm... just glanced at the rest of the CSS file. Veritable overkill. Kyle:
> Rewrite it from the ground up, considering very carefully each thing you put
> in there.


Thank you for that advice, but I have a follow-up question. When you
refer to my CSS as "veritable overkill," are you suggesting that the
design I am trying to achieve is too complicated and I should simplify,
or that the CSS I am using to achieve my design is too complicated and
can be achieved more concisely? If it is the former, I am content to
have a complicated and potentially barf-inducing CSS, as my intent for
now is to learn what I can do and how I can do it. If it is the latter,
can you please be more specific? I am always hoping to learn from the
people in this group.

The only caveat is that the background images have to stay in the CSS.
I would like to be able to design multiple styles without having to
change my HTML markup. Perhaps that is why the CSS is a little bloated?

Thanks,

Kyle
 
Reply With Quote
 
Kyle James Matthews
Guest
Posts: n/a
 
      06-05-2004
Steve Pugh wrote:

> As the links are floated they are taken outside of the context of
> their parent. Hence their parent has no content and thus has no
> height.
>
> You need to include an element with clear: right; after the last of
> the links but before the end of the parent element.


Of course. Thank you. This worked perfectly.
 
Reply With Quote
 
rf
Guest
Posts: n/a
 
      06-05-2004

"Kyle James Matthews" <(E-Mail Removed)> wrote in message
news:r_9wc.3424$HG.726@attbi_s53...
> rf wrote:
> > The more CSS (and to a certain extent HTML) you throw at browsers the

more
> > likelihood one of them will barf.

>
> Actually, I'm going for projectile vomiting. Do you think I have a shot?
>
> > Hmmm... just glanced at the rest of the CSS file. Veritable overkill.

Kyle:
> > Rewrite it from the ground up, considering very carefully each thing you

put
> > in there.

>
> Thank you for that advice, but I have a follow-up question. When you
> refer to my CSS as "veritable overkill," are you suggesting that the
> design I am trying to achieve is too complicated and I should simplify,
> or that the CSS I am using to achieve my design is too complicated and
> can be achieved more concisely?


The latter. The design *is* too complicated for what it does but that is how
you wrote it so that's OK. My problem is with the CSS.

You seem to be using a seperate CSS rule to describe each element on the
page. This is reinforced by the fact that you select based on id, not class
(*). This makes it tricky to change one single CSS rule and have the entire
page or site change.

You compound this by having a body.index rule, replicating most of what is
in the body rule anyway. Do you intend to have your index.html with <body
class="index"> and your arts.html with <body class="arts">? Confusing and
needless replication.

CSS is meant to describe the whole site, not each individual page or each
individual bit of a page. That is, change one single rule and your entire
site changes from dark purple to shocking pink.

(*) It is better to use class as then you can have several elements on the
page with the same class.

Keep inheritance in mind. For example, only specify font once, in the body
rule and let it inherit down to the child elements. Don't replicate it all
over the place, this just makes it harder to change.

Don't have rules like .hidden, .center, .left etc. You end up with (in your
HTML) something like
<div class="center">
which is exactly the same as
<div style="text-align: center">
A style rule should not describe just a single property. It should describe
the entire visual appearance of the element it selects.

Hmmm. A bit rambly How to end...

Don't write your HTML in anticipation of how it will look on the page. HTML
is for content. Get that content in there first. Things like your header
block, your navigation block, your content block.

Only once that is done think about how each block should look and create a
CSS rule, selecting that block, that describes how it should look.

Conversly, don't write the CSS rules in anticipation of what the content
will be (your .center rules). You might just as well include all the CSS in
a style attribute.

Finally, KISS principle. If you can remove something without affecting the
look of the page then do so.

Cheers
Richard.


 
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
<div ... /> and <div ...></div> K Viltersten ASP .Net 4 03-31-2009 07:33 PM
Adding float makes nested div tags go out of parent div. Jimmy HTML 7 11-21-2008 10:44 AM
aligning a nested div to the bottom of the parent div Chris HTML 2 09-28-2006 08:48 PM
NS/FF don't change div offsetWidth when div innerHTML is added toand div becomes wider mscir Javascript 3 06-26-2005 04:04 PM
Q: Div A inside Div B is larger than Div B Dwayne Madsen Javascript 1 06-01-2005 03:02 PM



Advertisments