Archief - CSS: Klein probleempje

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
n

nck2040

Legacy Member
ik was nog eens verder aan het proberen in CSS met waar ik nog steeds over struikel. Ik probeer dus de menu naast men tekstvak te krijgen enzo, maar het lijkt wel of hij mijn margin: 0 auto; command in de container blijft verder doen in IE wat hij dus niet doet in Firefox. Het staat nu momenteel in Firefox aan de zijkant (zo hoort het te zijn) , maar in IE staat dus alles in het midden.

linkje: http://users.telenet.be/elsticky

de CSS
Code: 
body
{
background-color: #FFFFFF;
text-align: center;
margin: 0 auto;
padding: 0;
width: 100%;
height:100%;
font-family:Verdana;
font-size:10pt;
}

.container
{
margin:0 auto;
background-color: #7DE5E1;
width:800px;
}

.tekst
{
background-color:#E96423;
width:500px;
z-index:0;
}

.menulinks
{
background-color:#C96423;
margin:0;
padding:0;
width:150px;
z-index:1;
}

De HTML (tekst even weggedaan)
Code: 
<html>
<head>
<title>Gamersheadquarter</title>
<link rel="stylesheet" type="text/css" href="toujanewebsite.css">
</head>
<body text="#FFFFFF">
<div class="container">
<div class="tekst">
</div>
<div class="menulinks">
</div>
</div>
</body>
</html>

*EDIT*

ik heb al wat aangepast check

http://users.telenet.be/elsticky

CSS:

Code: 
body
{
background-color: #FFFFFF;
text-align: center;
margin:0px auto;
padding: 0;
width: 100%;
height:100%;
font-family:Verdana;
font-size:10pt;
}

.container
{
margin:0px auto;
background-color: #7DE5E1;
width:800px;
}

.tekst
{
background-color:#E96423;
width:500px;
z-index:-1;
float:left;
}

.menulinks
{
background-color:#C96423;
margin:0;
padding:0;
width:150px;
z-index:1;
}

Nu merk ik dat de tekst al links staat ook in IE, maar daar zweeft de menu nu wat rond ^^. Het is dus de bedoeling dat die menu dus links daarnaast moet komen, zodat de tekst in het midden staat, ik hoop dat je begrijpt wat ik moet bedoel
o

omfg

Legacy Member
float: left; op uw menu zetten en float: right; op uw tekstdiv (en die z-index wegdoen want die staat daar maar voor spek en bonen)
X

Xavez

Legacy Member
Code: 
body {
	background: #FFF;
	color: #000;
	margin:0px auto;
	padding: 0;
	margin: 0;
	font-family:'Verdana', sans-serif;
	font-size:10pt;
}

#container {
	margin:0 auto;
	background: #7DE5E1;
	width:800px;
}

#tekst {
	background:#E96423;
	width:500px;
	color: #fff;
}

#menulinks {
	background:#C96423;
	margin:0;
	padding:0;
	width:auto;
	color: #fff;
	float: right;
}

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta content="text/html; charset=UTF-8" http-equiv="content-type" />
	<title>Gamersheadquarter</title>
	<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body>
	<div id="container">
		<div id="menulinks">
			<ul>
				<li>Item1</li>
				<li>Item2</li>
				<li>Item3</li>
				<li>Item4</li>
			</ul>
		</div>
		<div id="tekst"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In non tortor et justo mattis porta. Vivamus ipsum nisi, iaculis ac, molestie ut, lobortis eget, lacus. Cras quis massa. Nullam tristique consequat tortor. Donec tempor. Donec auctor, enim pretium imperdiet ultrices, ipsum sem dictum sem, in rutrum sem nibh vitae ligula. Fusce vel elit id nisl fermentum imperdiet. Praesent mattis posuere est. Nam semper nisi eu metus. Mauris nec mi id metus blandit malesuada. Ut consectetuer ultricies elit. Donec purus quam, vehicula ut, faucibus quis, hendrerit vitae, enim. Quisque leo. Integer justo lectus, placerat sit amet, lobortis sed, gravida et, tellus. Suspendisse pharetra fringilla dui. Maecenas erat velit, congue at, volutpat a, tempor nec, odio. Donec pretium pede. Proin iaculis egestas lectus. Nullam ac eros. Sed justo arcu, consequat a, hendrerit tristique, suscipit vel, turpis. Sed pede pede, ullamcorper ut, sollicitudin lacinia, convallis a, magna. Morbi sollicitudin libero at ante. Nullam tempor, velit a vulputate rhoncus, lectus arcu pretium dui, vitae commodo dui nulla a arcu. Aliquam rhoncus magna quis leo aliquet posuere. Morbi molestie. Nulla posuere. Cras nisl ante, ornare semper, tempor volutpat, posuere vitae, augue. Fusce sit amet risus. Suspendisse fermentum urna sollicitudin elit. Quisque id risus vitae ligula porta pulvinar. Cras varius vehicula odio. Cras dui est, venenatis nec, aliquam vel, pellentesque sit amet, lectus. Quisque ut nisl a tellus ultrices vehicula. Nunc risus. Fusce nisl. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Duis blandit volutpat ante. Nam lacus urna, tristique sed, dapibus sed, mattis non, enim. Donec bibendum sollicitudin dolor. Phasellus hendrerit vulputate arcu. Sed luctus tortor a lacus. Vivamus tristique. Suspendisse potenti. Ut cursus nonummy sem. Mauris rhoncus, leo ut tempus pellentesque, lorem nisi auctor quam, a dapibus dolor leo hendrerit libero. In condimentum diam volutpat nisi. Proin et risus eget dolor imperdiet suscipit. Praesent lacus quam, facilisis pretium, vehicula ut, euismod a, neque. Vestibulum consequat. Nam vulputate, sapien id volutpat feugiat, mauris ipsum bibendum diam, in tempus arcu metus a ipsum. Integer arcu. Duis at ante. Etiam fermentum.</p>
		</div>
	</div>
</body>
</html>

De rest moet je zelf maar stylen naar behoren :)
n

nck2040

Legacy Member
Ik heb het dus uitgeprobeerd en het heet me wel wat geholpen denk ik, maar het is niet helemaal juist... als je vergelijkt in IE en FF is het toch wel een stukje anders... in FF staat de menu bv gewoon bovenop het tekstvak en in IE staat de menu naast het tekstvak (met een streepje tussen wat ik ook weg wil).
Code: 
Mijn CSS is nu als volgt:
body
{
background-color:#FFF;
color:#000;
margin:0px auto;
padding:0;
margin:0;
font-family:Verdana;
font-size:10pt;
}

#container
{
margin:0px auto;
background-color: #7DE5E1;
width:800px;
}

#tekst
{
background-color:#E96423;
width:500px;
color:#FFF;
}

#menulinks
{
width:150px;
background-color:#C96423;
margin:0;
padding:0;
color:#FFF;
float:left;
}

de HTML is normaal exact hetzelfde als Xavez me aanrade
[

[Scratch]

Legacy Member
Het probleem is hier dat je beide containers moet floaten, dus zowel je #menulinks als #tekst moeten de float: left; style krijgen.

Maar dan zit je weer met een probleem wat het clearen van je floats betreft. Je zal zien in IE en FF dat de container zal samenklappen tot 0 pixels hoogte als je float: left; op de twee binnenste divs zet. Daarom zal je een extra style rule moeten toevoegen maar dat gaat een beetje te ver om hier uit te leggen. Ik stel voor dat je eens een artikel leest over floats dan weet je wat floats doen en hoe je ook je container elementen moet clearen na een float om je layout niet te breken.

Een goed artikel wat IMHO de beste manier omschrijft om floats te clearen vind je op http://www.quirksmode.org/css/clearing.html
X

Xavez

Legacy Member
Heb je als CSS ook mijn CSS file gebruikt? :)... Die rendert in IE en Firefox nogthans bijna volledig hetzelfde hier (op wat onvolkomendheden die niet echt een CSS-probleem vormen na - ik ga niet alles voorkauwen he ;))
n

nck2040

Legacy Member
Hey allemaal,
ik ben nog eens bezig met wat te prutsen, maar ik heb wat foutjes... de website kan je bekijken op http://users.telenet.be/elsticky , de menu's en het tekstvak staan al goed, maar het tekstvak lijkt wat te verschillen in grote in FF tov IE en in FF doet de border het ook niet goed.

De CSS-file:
Code: 
body {
	background-color:#FFFFFF;
	margin:0px auto;
	padding: 0;
	margin: 0;
	font-family:Verdana;
	font-size:10pt;
        overflow:-moz-scrollbars-vertical;
}

#container {
        padding:0;
	margin:0 auto;
	width:800px;
        border: 1px double #000000;
}

#tekst {
	background:#E96423;
	width:500px;
	color:#FFF;
        float:right;
}

#menulinks {
	background:#C96423;
        margin:0;
        padding:0;
        width:150px;
	color:#FFF;
	float:left;
}

#menurechts{
	background:#C96423;
        margin:0;
        padding:0;
        width:150px;
	color:#FFF;
	float:right;
}

#banner {
        background-color:#1C5P6R;
        width:800px;
        hight:200px;
}

HTML-file:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 <head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type" />
 <title>Gamersheadquarter</title>
 <link rel="stylesheet" type="text/css" href="toujanewebsite.css" />
</head>
 <body>
 <div id="container">
<div id="banner">
 <div id="menulinks">
  <ul>
  <li>Item1</li>
  <li>Item2</li>
  <li>Item3</li>
  <li>Item4</li>
  </ul>
  </div>
  <div id="menurechts">
  <ul>
  <li>Item1</li>
  <li>Item2</li>
  <li>Item3</li>
  <li>Item4</li>
  </ul>
  </div>
  <div id="tekst">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In non tortor et justo mattis porta. Vivamus ipsum nisi, iaculis ac, molestie ut, lobortis eget, lacus. Cras quis massa. Nullam tristique consequat tortor. Donec tempor. Donec auctor, enim pretium imperdiet ultrices, ipsum sem dictum sem, in rutrum sem nibh vitae ligula. Fusce vel elit id nisl fermentum imperdiet. Praesent mattis posuere est. Nam semper nisi eu metus. Mauris nec mi id metus blandit malesuada. Ut consectetuer ultricies elit. Donec purus quam, vehicula ut, faucibus quis, hendrerit vitae, enim. Quisque leo. Integer justo lectus, placerat sit amet, lobortis sed, gravida et, tellus. Suspendisse pharetra fringilla dui. Maecenas erat velit, congue at, volutpat a, tempor nec, odio. Donec pretium pede. Proin iaculis egestas lectus. Nullam ac eros. Sed justo arcu, consequat a, hendrerit tristique, suscipit vel, turpis. Sed pede pede, ullamcorper ut, sollicitudin lacinia, convallis a, magna. Morbi sollicitudin libero at ante. Nullam tempor, velit a vulputate rhoncus, lectus arcu pretium dui, vitae commodo dui nulla a arcu. Aliquam rhoncus magna quis leo aliquet posuere. Morbi molestie. Nulla posuere. Cras nisl ante, ornare semper, tempor volutpat, posuere vitae, augue. Fusce sit amet risus. Suspendisse fermentum urna sollicitudin elit. Quisque id risus vitae ligula porta pulvinar. Cras varius vehicula odio. Cras dui est, venenatis nec, aliquam vel, pellentesque sit amet, lectus. Quisque ut nisl a tellus ultrices vehicula. Nunc risus. Fusce nisl. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Duis blandit volutpat ante. Nam lacus urna, tristique sed, dapibus sed, mattis non, enim. Donec bibendum sollicitudin dolor. Phasellus hendrerit vulputate arcu. Sed luctus tortor a lacus. Vivamus tristique. Suspendisse potenti. Ut cursus nonummy sem. Mauris rhoncus, leo ut tempus pellentesque, lorem nisi auctor quam, a dapibus dolor leo hendrerit libero. In condimentum diam volutpat nisi. Proin et risus eget dolor imperdiet suscipit. Praesent lacus quam, facilisis pretium, vehicula ut, euismod a, neque. Vestibulum consequat. Nam vulputate, sapien id volutpat feugiat, mauris ipsum bibendum diam, in tempus arcu metus a ipsum. Integer arcu. Duis at ante. Etiam fermentum.
</p>
  </div>
  </div>
  </div>
 </body>
 </html>

En zoals je misschien wel merkt wil ik ook een banner plaatsen, maar die lijkt mij niet echt te verschijnen en moet dus boven de content enzo komen, iemand die weet hoe deze probleempjes op te lossen?
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan