473,397 Members | 2,077 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,397 software developers and data experts.

Q: about CSS

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
3 1417
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
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
by: William C. White | last post by:
Does anyone know of a way to use PHP /w Authorize.net AIM without using cURL? Our website is hosted on a shared drive and the webhost company doesn't installed additional software (such as cURL)...
2
by: Albert Ahtenberg | last post by:
Hello, I don't know if it is only me but I was sure that header("Location:url") redirects the browser instantly to URL, or at least stops the execution of the code. But appearantely it continues...
3
by: James | last post by:
Hi, I have a form with 2 fields. 'A' 'B' The user completes one of the fields and the form is submitted. On the results page I want to run a query, but this will change subject to which...
0
by: Ollivier Robert | last post by:
Hello, I'm trying to link PHP with Oracle 9.2.0/OCI8 with gcc 3.2.3 on a Solaris9 system. The link succeeds but everytime I try to run php, I get a SEGV from inside the libcnltsh.so library. ...
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
0
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.