Archief - CSS: text/positioning prob

Zeppelin · 3 aug 2005

Hello

Ben dus eindelek es begonne aan div layout (valt nog goe mee vin k), ma eerste probleem heeft al de kop opgestoke :angry:

Warsch dikke beginnersfout ma kom

Probleem

Zoals ge ziet komt die tekst ni goe, waar t probleem precies ligt wee k ni just. K dacht eerst positioning prob, daarna padding en margins geprobeerd, dan me overflow zitte prulle...enfin t wilt dus ni lukke

CSS file

Worden zo divs juist gebruikt, of moe k anders beginne eigelek?

Alvast bedankt

verdeye · 3 aug 2005

probeer in uw class text eens vaste width in te geven en

margin-left: auto; margin-right:auto;

DarkBone · 3 aug 2005

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<!-- <link rel="stylesheet" type="text/css" href="style.css" /> -->
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<title>Untitled Document</title>
	<style type="text/css">
		body
		{
			color: #000; /* verkorte schrijfwijze */
			font-family: Tahoma, Verdana, Arial, Sans-Serif;

			background-color: #fff;
			background-image: url(images/gradient.png);
			background-repeat: repeat-x;
		
			margin: 0;
			padding: 0;
		}
			
		#container
		{
			width: 700px;
			position: absolute;
			left: 50%;
			margin-left: -350px;
		}
		
		#header
		{
			height: 198px;
		}
		
		#nav
		{
			height: 50px;
		}
		
		#content
		{
			background-color: #fff;
			text-align: justify;
			
			padding: 10px;
		}
		
		#content p
		{
			font-size: 12px;
			line-height: 18px;
		}
		
		.border
		{
			border: 1px solid #b0b0b0; /* verkorte schrijfwijze */
		}
		
		h1
		{
			color: #a14242;
			font-size: 20px;

		
			margin-left: 10px 20px 20px 13px; /* verkorte schrijfwijze: top right bottom left ,  kloksgewijs dus */
		}
		
		h2
		{
			color: #a14242;
			font-size: 17px;
			font-style: italic;
			
			margin-left: 10px 20px 20px 13px;
		}
						
		a
		{
			text-decoration: none;
		}
			
		a:link, a:active
		{
			color: #4299a1;
		}
		
		a:visited
		{
			color: #666666;
		}
		
		a:hover
		{
			color: #999999;
			text-decoration: underline;
		}
	</style>
</head>
<body>


<div id="container">

	<div id="header">
		<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="700" height="198">
			<param name="movie" value="flash/header.swf">
			<param name="quality" value="high"><param name="LOOP" value="false">
			<embed src="flash/header.swf" loop="false" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="700" height="198"></embed>
		</object>
	</div>

	
	<div id="nav">
		<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="700" height="50">
			<param name="movie" value="flash/nav.swf">
			<param name="quality" value="high">
			<embed src="flash/nav.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="700" height="50"></embed>
		</object>
  	</div>

	<div id="content">
		<h1>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</h1>
		<h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</h2>
	
		<p>Proin at eros non eros adipiscing mollis. Donec semper turpis sed diam. Sed consequat ligula nec tortor. Integer eget sem. Ut vitae enim eu est vehicula gravida. Morbi ipsum ipsum, porta nec, tempor id, auctor vitae, purus. Pellentesque neque. Nulla luctus erat vitae libero. Integer nec enim. Phasellus aliquam enim et tortor. Quisque aliquet, quam elementum condimentum feugiat, tellus odio consectetuer wisi, vel nonummy sem neque in elit. <a href="#" title="klik mij!">Curabitur eleifend</a> wisi iaculis ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In non velit non ligula laoreet ultrices. Praesent ultricies facilisis nisl. Vivamus luctus elit sit amet mi. Phasellus pellentesque, erat eget elementum volutpat, dolor nisl porta neque, vitae sodales ipsum nibh in ligula. Maecenas mattis pulvinar diam. Curabitur sed leo.</p>
	</div>
	
</div>

</body>
</html>

Nen kleine refactoring

Merk op dat ik de border class NIET gebruik... je moet namelijk even voor jezelf uitmaken of je de border nu in je flash steekt of niet. Je aanpak op dat vlak is namelijk verschillende voor de header en de navigatie. Header heeft geen border in de flash zelf, de navigatie wel. Als ik dus een border rond alles toevoeg, dan zorgt dit voor een dubbele border bij uw navigatie. Een border toevoegen rond de header is geen optie aangezien een border buitenom wordt toegevoegd en dus een pixel zou uitsteken. Wees dus consequent en maak de border via CSS of maak ze in flash zelf voor beide flash movies

Ohja, trouwens, je hoeft maar 1 maal je font enzo te specifiëren op het niveau van de body. Alle andere elementen nemen dat over (behalve tabellen in IE, maar die gebruik je dus niet). De klasse text was ook overbodig trouwens, tekst steek je in paragrafen, en bijgevolg kun je die zo benaderen om specifiek die paragrafen in de content op te maken:

#content p
{
/* opmaak */
}

Verder is men grootste opmerking dat absolute positionering nergens nodig was/is behalve voor het de container DIV. Hoewel dat ook op een andere manier, zonder positionering, kan opgelost worden

*edit*
Heb ook ff bovenstaande code upgeload:
http://lode.webcoder.be/zeppelin.html

Archief - CSS: text/positioning prob

Zeppelin

Legacy Member

verdeye

Legacy Member

DarkBone

Legacy Member