By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,384 Members | 1,886 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,384 IT Pros & Developers. It's quick & easy.

Q: about CSS

P: n/a
hi,
i'm doing some tutorial with CSS and have a little problem...i've posted the
source as well so you could see what i'm talking about...when i roll with
mouse over link >>The Bio<< text get's bold and that is what i wan't to do
in the first place...but, if you notice the other 2 paragraphs beeneath that
link move downwards...the Q: is, how can i correct this so everything stays
in place?
thanks.

source: there are 2 gifs but they are not important

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!--
body{
background: url(emma.gif) no-repeat
}
h1{
font-family: arial;
font-style: italic;
font-weight: bold;
font-size: 26pt;
color: #EECC44;
margin: 80pt 0 0 100pt;
}
.beyond{
font-family: verdana;
font-weight: bold;
font-size: 14px;
color: #FFDD44;
text-align: right;
margin-bottom: 30px;
}
.brack{
font-size: 16pt;
}
.body{
font-family: arial;
font-size: 12pt;
margin: 15pt 100pt 0 50pt;
padding-bottom: 60pt;
background: url(streak.gif) no-repeat #003333
}
b{
background: url(streak.gif) no-repeat #003333
}
A:link { text-decoration: none;
background: #000000;
color: #FFFFFF }
A:active { text-decoration: none;
background: #003333;
color: #FFFFFF }
A:visited { text-decoration: none;
background: #000000;
color: #FFFFFF }
A:hover { text-decoration: none;
background: #003333;
color: #FFFFFF;
font-weight: bold;
margin-left: -2px;}
-->
</style>
</head>

<BODY BGCOLOR="#003333" TEXT="#FFFFFF">
<H1>Emma Thompson</H1>
<P CLASS="beyond">
<SPAN CLASS="brack">[</SPAN> beyond acting <SPAN CLASS="brack">]</SPAN>
</P>
<P CLASS="body">
<B>Meet</B> Emma Thompson: divine actress, witty comedian, inspired writer,
unmatched beauty, down-to-earth human being. <A HREF="#1">The Bio.</A>
</P>
<P CLASS="body">
<B>Visit</B> the Gallery you'll never want to leave:
photographs, film stills, sounds, and video. <A HREF="#2">The Gallery.</A>
</P>
<P CLASS="body">
<B>Discover</B> Emma sites all across the webbed world.
<A HREF="#3">The Links.</A>
</P>
</body>

</html>

Jul 20 '05 #1
Share this Question
Share on Google+
3 Replies


P: n/a
riki hu kiteb:
hi,
i'm doing some tutorial with CSS and have a little problem...i've
posted the source as well so you could see what i'm talking
about...when i roll with mouse over link >>The Bio<< text get's bold
and that is what i wan't to do in the first place...but, if you
notice the other 2 paragraphs beeneath that link move downwards...the
Q: is, how can i correct this so everything stays in place?
thanks.


You can't. When you make text bold, it becomes bigger, and this affects
the flow of the document. Possible workarounds are:

- use images instead of text, so you can control the dimensions
precisely.
- make the link appear by itself on a single line so the text won't
reflow too obviously
- use a different effect to highlight your links
--
--
Fabian
Visit my website often and for long periods!
http://www.lajzar.co.uk

Jul 20 '05 #2

P: n/a
riki wrote on 05 Dec 2003:
i'm doing some tutorial with CSS and have a little
problem...i've posted the source as well so you could see what
i'm talking about...when i roll with mouse over link >>The Bio<<
text get's bold and that is what i wan't to do in the first
place...but, if you notice the other 2 paragraphs beeneath that
link move downwards...the Q: is, how can i correct this so
everything stays in place?


<snipped source>

You should be asking this in the CSS newsgroup
(comp.infosystems.www.authoring.stylesheets) not here, but here goes.

The reason is simple: you're changing the dimensions of the text, so
the browser is realigning everything to compensate. The solution?
Don't do it. It's bad style. There are many ways of changing the
appearance of a link, but none of them should involve changing the
dimensions, whether it be the style (italic/oblique), weight, size,
or font face. Keep it to the normal forms: text decoration (over- or
underline), or colour changes (but make sure you choose the colours
properly).

Be aware that your HTML is malformed. With a proper Transitional DTD
(below) you page doesn't render properly. I believe that it's due to
a conflict between the bgcolor and color attributes in the BODY
element, and the BODY style (in your style sheet), but I could be
wrong. You use the shorthand background property, but only specify an
image (no colours).

Transitional DTD (as defined in the specification):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

This all raises an interesting question, though: if you are using
style sheets, why are you using Transitional HTML? Specifically, why
use the bgcolor and color properties when they can be defined easily
in the style sheet with the BODY selector? Why use bold (B), when
STRONG does the same thing (certainly if you define it to with the
style sheet)? Finally, why declare each paragraph to use a 'body'
class? Just define that style using the BODY selector and remove the
class attributes from the paragraphs.

Mike

--
Michael Winter
M.******@blueyonder.co.invalid (replace ".invalid" with ".uk")
Jul 20 '05 #3

P: n/a
first of all, thank you both for answers...
a will try once more at CSS newsgroup. i didn't know it exists :)
i know that i could make hover link differently but i would like to do it
this way if it is posible.
secondly (this is for mike only)
the reason for making this page this way is becouse it is in some
tutorial...three times same paragraph and other stuff like <B> instead of
<STRONG> etc.
it's not my personal design.
Jul 20 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.