• Locked
4 replies [Last post]
Mon, 2004-08-09 03:58
ts10
Offline
newbie
Last seen: 16 years 17 weeks ago
Joined: 2004-08-09
Posts: 4
Points: 0

Hey, I have a floating image - floating on the right. However, I NEVER want the image to go closer to the left than 680px from the left. Is there a way I can float an image yet give it a margin that it can't go past? Once it gets to 680px I want it to lock and let the bottom browser scrollbar to appear.

Any ideas?

Thanks!

Top
Tags:
Mon, 2004-08-09 07:54
#1
co2
co2's picture
Offline
Leader
UK
Last seen: 12 years 33 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

Float left margin

Can't you use margiin-left: 680px; ?

The next sentence is true. The previous sentence is false. Discuss...

Top
Mon, 2004-08-09 10:32
#2
ts10
Offline
newbie
Last seen: 16 years 17 weeks ago
Joined: 2004-08-09
Posts: 4
Points: 0

Float left margin

Hey - nope. That disables the float and just always stays at 680.

Thanks!

Top
Mon, 2004-08-09 12:02
#3
co2
co2's picture
Offline
Leader
UK
Last seen: 12 years 33 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

Float left margin

That doesn't sound right. :?

Do you have the html and css?

The next sentence is true. The previous sentence is false. Discuss...

Top
Thu, 2004-08-12 17:04
#4
ts10
Offline
newbie
Last seen: 16 years 17 weeks ago
Joined: 2004-08-09
Posts: 4
Points: 0

Float left margin

You can see the problem at: http://www.flattrackillustrated.com

And when you look, you'll see how the right float needs to stop at 680px!

Code below - thanks!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Welcome to Flat Track Illustrated Online!</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
<? include("inc/map.php"); ?>
<div id="top_right"></div>
<div id="Layer1"></div>
<div id="Layer3"><? include("inc/links.php"); ?></div>
<div id="Layer4"><p><img src="images/head_pics.jpg" width="480" height="64"></p>
	<p><img src="images/title.jpg" width="480" height="28"></p>
	<div class="text">
	  <p><strong>Welcome to the Flat Track Illustrated (FTI) website!</strong></p>
	  <p>  <u>FTI is a monthly publication sold by subscription and is for racers and enthusiasts:</u>        </p>
	  <p><em>- AMA Grand National Series</em></p>
	  <p><em>- AMA Hot Shoe Series</em></p>
	  <p><em>- AHRMA National &amp; Regional Events</em></p>
	  <p><em>- VDTRA National &amp; Regional Events</em></p>
	  <p><em>- CoolKyd of the Month Plus a specialized Kid&rsquo;s Column!</em></p>
	  <p><em>- Local Racing from Coast-to-Coast</em></p>
	  <p><em>- Featured Vintage &amp; Modern Bikes</em></p>
	  <p><em>- Interviews and Human Interest Stories </em></p>
	  <p><em>- Blast From The Past (Stories about events gone by)</em></p>
	  <p><em>- Classified advertisements</em></p>
	  <p><em>- The most comprehensive flat track calendar of events</em></p>
	  <p><em>- plus much more!</em></p>
	  <p>&nbsp;</p>
	  <p> </p>
	  <p><u>From our site you can:</u></p>
	  <p><em>- Request a FREE Sample issue</em></p>
	  <p><em>- Subscribe online</em></p>
	  <p><em>- View &amp; Purchase Event Photos online</em></p>
	  <p><em>- Paid Subscribers can view the latest issue on-line and check their expiration date!</em></p>
	  <p><em>- Find out how you can Contribute articles </em></p>
	  <p> </p>
	  <p>&nbsp;</p>
	  <p><strong>Flat Track Illustrated&hellip;We're everything flat track!</strong></p>
	</div></div>
	
<div id="Layer5"><img src="images/magazine.jpg" width="188" height="125">
      <div class="copyright">
        <p>Copyright &copy; <?=date("Y");?></p>
        <p>Flat Track Illustrated </p>
        <p>All Rights Reserved</p>
		<p></p>
		<a href="http://www.newheartdesign.com" target="_blank"><img src="http://www.newheartdesign.com/logos/nhd.jpg" border="0"></a><br>
		<a href="http://www.newheartdesign.com" target="_blank" class="copyright">Designed by New Heart Design</a>
    </div>
</div>
<center>

</center>
</body>
</html>

STYLE 

p {
	margin: 0px;
	padding: 0px;
}
.text {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	text-align: left;
	margin-left: 18px;
	color: #004D91;
}
body {
    background-image: url(images/header_extend.jpg); background-repeat: repeat-x;
	margin: 0px;
	padding: 0px;
}

#nav_extend {background-image: url(images/nav_extend.jpg); background-repeat: repeat-y}

#top_right {
	background-image: url(images/top_right.jpg); 
	background-repeat: no-repeat; 
	float: right; 
	height: 73px;
	width: 101px; 
	margin-right: 0px; 
	margin-left: 680px; 
	z-index: 1
}

#Layer1 {
	background-image: url(images/header.jpg);
	background-repeat: no-repeat;
	position: absolute; 
	left: 0px; 
	top: 0px; 
	width: 668px; 
	height: 73px; 
	z-index: -2
}

#Layer3 {
	position: absolute; 
	left: 0px; 
	top: 73px; 
	width: 188px; 
	z-index: 3
}

#Layer4 {
	position: absolute; 
	left: 188px; 
	top: 73px; 
	width: 480px; 
	height: 414px; 
	z-index: 4
}

#Layer5 {
	background-image: url(images/nav_extend.jpg);
	position: absolute; 
	left: 0px; 
	top: 273px; 
	width: 188px; 
	height: 300px; 
	z-index: 5
}

.copyright {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #FFFFFF;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 15px;
	margin-right: 0px;
}

Top
  • Locked