CSS help needed

liunx

Guest
My website and the CSS are copied below.

How can I get the words to not scroll onto the orange on the right? Thank you in advance. Your help is greatly appreciated.




<!-- m --><a class="postlink" href="http://members.fortunecity.com/bobbyrags2003/">http://members.fortunecity.com/bobbyrags2003/</a><!-- m -->

A:link {color:orange;}
A:visited {color:black;}
A:active {color:red;}
A:hover {color:yellow;}
.navbar {position:absolute;top:10px;left:10px;}
BODY {margin: 10px 10px 10px 20%;}
BODY {background-image: url("http://members.fortunecity.com/bobbyrags2003/images/curve_goodies.gif"); background-repeat: repeat-y; font-family:verdana;}
p.margin {margin-left: 20%;}
p.margin {margin-right: 20%;}
UL LI {list-style-type: disc; margin-left: 100px;}put a div with an id around your page content that's to go on the white.
Take away the margins on the body part.
Use position: absolute, set the top value to 0 and the left value to clear the navbar.
Then set the width of the content to go on the white bit.

Or

Use two divs around the content to go on the white.
Set left margin on the first to clear the navbar.
Set the width on the second.Thank you Dave I'll try that as soon as I can hopefully tomorrow.

Though I'm confident that I'll mess it up. I think I follow your drift.

Again, thanks! :)I'm sorry Dave and everyone else I'm kinda confused. Can someone help me out?

I've listed my HTML below.

Thanks in advance!



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

<HTML>
<HEAD>
<TITLE>BobbyRags Personal Homepage</TITLE>

<meta name="Keywords" Content="homepage, personal homepage, bobbyrags, rags, bobby, photos, links, Robert, Daniel, Christine, family, tips">
<meta name="Description" Content="The BobbyRags personal homepage. A homepage featuring family photos.">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Generator" CONTENT="Notepad">

<LINK REL=stylesheet HREF=http://www.webdeveloper.com/forum/archive/index.php/"BobbyRags_Fortune.CSS" TYPE="text/css">

</HEAD>

<div class="navbar">
<P><a href=http://www.webdeveloper.com/forum/archive/index.php/"robert.htm">Robert</a></p>
<P><a href=http://www.webdeveloper.com/forum/archive/index.php/"daniel.htm">Daniel</a></p>
<P><a href=http://www.webdeveloper.com/forum/archive/index.php/"photos.htm">Photos</a></p>
<P><a href=http://www.webdeveloper.com/forum/archive/index.php/"tips.htm">Computer Tips</a></p>
<P><a href=http://www.webdeveloper.com/forum/archive/index.php/"mailto:[email protected]">Email Me</a></p>
</div>

<p align="center"><IMG SRC=http://www.webdeveloper.com/forum/archive/index.php/"images/BobbyRags2.gif" height="112" width="300" alt="logo"></p>


<p class="margin">
Welcome to my personal homepage! My very own piece of real estate on the internet.
The World Wide Web truly is a fascinating place. Please enjoy the photos and the content.
By no means is this site in its final version, it is solely in an introductory stage.
I will be adding links and updating the content as frequently as possible.</p>

<p class="margin">
If you enjoy the site, tell everyone. Maybe we can exchange links.
In the meantime, if you have any comments, critiques, questions,
or suggestions, please feel free to <a href=http://www.webdeveloper.com/forum/archive/index.php/"mailto:[email protected]">contact me.</a>
Just leave my mother out of it!<IMG SRC=http://www.webdeveloper.com/forum/archive/index.php/"Images/smile.gif" alt="smile"></p>


<p align="center"><!-- Copyright 2001, BobbyRags, All rights Reserved.-->
©Copyright 2001, BobbyRags, All Rights Reserved.</p>

<p align="center"><font color="#ff0000">
Site Last Updated July 20, 2004.</font></p>

<SCRIPT LANGUAGE="JavaScript">

//This script posts the exact day and time you arrived

RightNow = new Date();
document.write("Today's date is " + (RightNow.getMonth()+1) + "-" + RightNow.getDate() + "-" + RightNow.getFullYear() + ". You entered this Web Page at exactly: " + RightNow.getHours() + ":" + RightNow.getMinutes() + " and " + RightNow.getSeconds() + " seconds")

</SCRIPT>

</BODY>You have a div for your navbar. You need a div to wrap the content, too.So use divs and take out the <p class="margin"> in the HTML and the p.margin in the CSS.I did it!!

Thanks so much DaveSW and ray326!!!!

I appreciate your help!!!!

:)
:)np and congratulations! :D

It's a good habit to wrap every section of the page in different divs, as it makes it easy to control large areas of your page.
 
Back
Top