problemen

HenkRog · 10 okt 2009

Hallo,

als je naar volgende (test-)pagina kijkt dan zie je dat de form en het testvak in de div staan met de rode achtergrond. Als ik de pagina echter gewoon open op mijn harde schijf dan staat de rode achtergrond boven de form en het tekstvak. Ik veronderstel dat er dus iets verkeerd zal zijn maar ik weet niet wat. Eigenlijk zou ik willen dat de form en zo in een witte achtergrond staan = de achtergrond van de div contact. Ik zou ook onderaan een boordje (padding) willen maar dat lukt ook niet.

http://users.telenet.be/HenkR/Kantoor%20Deckers/testtest/test.html

HenkRog · 10 okt 2009

Dit is mijn css

Code:

/*alle marges op 0 zetten*/
* {margin: 0;} 

body {
	font-family: "Trebuchet MS", sans-serif;
	font-size: small;
	color: #666666;
	background-image: url('images/bg zoo.jpg');
	background-color: #9c9c9c;
	background-repeat: repeat-x;
}
h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: large;
	color: #666666;
}
h2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: medium;
	color: #666666;
	font-weight: bold;
}

a {
	color: #666666;
	text-decoration: underline;
}
a:hover {
	text-decoration: none;
}



#container {
	border: 2px solid #8c8c8c;
	width: 900px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	background-color: #FF0000;
}



#masthead {
	background-position: center;
	background-color: #FDED22;
	height: 100px;
	background-image: url('images/6.jpg');
}






form {
	border-style: solid;
	border-width: 1px;
	border-color: #C0C0C0 #808080 #808080 #C0C0C0;
	width: 400px;
	
	/*voor Internet Explorer 6*/
	display: inline;

	float: left;
	margin-top: 50px;
	margin-bottom: 60px;
	margin-left: 40px;
	background-color: #E4E4E4;
}
form h1{
	margin-bottom: 20px;
	margin-left: 35px;
	margin-top: 20px;
}

label {
	/*voor Internet Explorer 6*/
	display: inline;
	
	width: 100px;
	float: left;
	text-align: right;
	display: block;
	margin-top: 5px;
	font-size: 10pt;
}
input.formContact {
	border: 1px solid #666666;
	margin-left: 20px;
	width: 250px;
	margin-top: 5px;
}
.submit input {
	margin-left: 305px;
	margin-top: 10px;
	margin-bottom: 20px;
}
textarea {
	width: 250px;
	margin-left: 20px;
	height: 150px;
	margin-top: 5px;
	border: 1px solid #666666;
}

.submit input:hover {
	cursor: pointer;
}
.tekstNaastForm {
	/*voor Internet Explorer 6*/
	display: inline;
	border-style: solid;
	border-width: 1px;
	border-color: #C0C0C0 #808080 #808080 #C0C0C0;
	float: left;
	width: 320px;
	padding: 20px;
	margin-top: 50px;
	margin-left: 40px;
	text-align: center;
	background-color: #E4E4E4;
}
.tekstNaastForm img {
	vertical-align: middle;
	margin-right: 10px;
	margin-left: 10px;
	border: none;
}
.fotoContact {
	/*voor Internet Explorer 6*/
	display: inline;
	float: left;
	margin-left: 40px;
	text-align: center;
	margin-top: 20px;
}
.fotoContact img{
		border: 1px solid #A0ACC0;
}
.openingsuren {
	/*voor Internet Explorer 6*/
	display: inline;
	border-style: solid;
	border-width: 1px;
	border-color: #C0C0C0 #808080 #808080 #C0C0C0;
	padding: 10px;
	float: left;
	margin-left: 20px;
	margin-top: 20px;
	background-color: #E4E4E4;
	font-size: 10px;
	width: 163px;
}

.openingsuren p{
	margin-bottom: 10px;
}
.openingsuren p strong{
	font-size: 12px;
}


.openingsuren table{
	table-layout: auto;
	border-spacing: 0px;
	border-collapse: collapse;

}

#contact {
	margin-bottom: 20px;
	background-color: #FFFFFF;
}

mijn test html

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">



<head>
<meta http-equiv="Content-Language" content="nl-be" />
<!-- #BeginEditable "doctitle" -->
<title>Kantoor Deckers: Contact</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />

</head>

<body>

<div id="container">

<div id="masthead">
</div>


<div id="contact">

<form method="post" action="">
<h1>Contact</h1>
<p><label id="LblNaam">Naam:</label><input name="realname" type="text" class="formContact"/></p>
<p><label id="LblEmail">Email:</label><input name="email" type="text" class="formContact"/></p>
<p><label id="LblOnderwerp">Onderwerp:</label><input name="subject" type="text" class="formContact"/></p>
<p><label id="LblBericht">Bericht:</label><textarea name="Bericht" rows="50" cols="1"></textarea></p>
<p class="submit"><input name="BtnVerzend" type="submit" value="Verzend" /></p>
</form>

<div class="tekstNaastForm">
<strong>test</strong><br />
</div>

<div class="fotoContact">
<img alt="" src="images/test.jpg" width="155" height="118" />
</div>




</div>



</div>


</body>



</html>

Goeroeboeroe · 10 okt 2009

Ik weet niet zeker of dit is wat je bedoelt, maar anders horen we 't wel.
Die form en zo staan wel in die div, maar ze zijn gefloat. En dan hebben ze geen invloed op de hoogte van die div. Dus wat betreft die div is er gewoon helemaal geen form en zo, dus blijft die rode lijn rustig boven de (niet-bestaande) form e.d. staan.

Om die div te dwingen even hoog te worden als de inhoud, moet je de floats 'clearen'.
Vrijwel onderaan in je html staan onderstaande twee regels. Daaronder moet je nog iets toevoegen.

HTML:

<img alt="" src="images/test.jpg" height="118" width="155">
</div>

<div style="clear: both;"></div>

De css kan natuurlijk in de stylesheet bij de andere css. En als er bijvoorbeeld 'n footer of zo onderaan komt, kan dat clear: both; ook daarin. Als er maar iets met clear:both; onderin die div staat.

HenkRog · 10 okt 2009

ok

daarmee lukt het om de rode achtergrond om de form en zo te krijgen.

En wat moet ik doen om de achtergrond wit te maken ipv rood (wit=de achtergrond van de div contact)?

Goeroeboeroe · 10 okt 2009

Dan zou het helpen als je niet zelf die kleur geeft

Je hebt bij #form als background-color #e4e4e4 opgegeven.
Als je dat verandert in white of #fff, is de hele form wit.
Als je je site in Firefox maakt (wat het beste is, als hij daarin werkt, werkt hij meestal in alle browsers), kun je de extensie Firebug installeren:
https://addons.mozilla.org/en-US/firefox/addon/1843
Daarmee kun je klikken op bijvoorbeeld, in dit geval, de grijze achtergrond van de form, en dan verschijnt de bijbehorende html en css. Dan zie je gelijk waarom dat grijs is. Erg handig! En heeft nog heel veel meer mogelijkheden.

HenkRog · 10 okt 2009

Ik wil niet dat de form wit wordt, maar het rode gedeelte

zie http://users.telenet.be/HenkR/Kantoor%20Deckers/test/test.html

Goeroeboeroe · 10 okt 2009

Ah, misverstandje. Maar 't verhaal is 't zelfde.
Bij #container staat als background-color #FF0000;
Als je dat verandert in white of #fff, wordt 't rood wit.
(FFFFFF is 't zelfde als FFF, 3 x 2 dezelfde mag je afkorten tot 3 stuks)

HenkRog · 10 okt 2009

inderdaad,

maar wat ik niet begrijp is het volgende:

container heeft als kleur rood
masthead heeft als kleur geel
contact heeft als kleur wit

masthead wordt in het geel getoond, MAAR contact wordt niet in het wit getoond

Goeroeboeroe · 10 okt 2009

Dat klopt. De inhoud van #contact is allemaal gefloat. Dat geldt voor de form en de twee andere divs die erin staan.
Normaal genomen zou #contact automatisch precies zo hoog worden, dat de form en de andere twee divs er precies in passen. Maar niet als de form en die twee divs zijn gefloat, dan hebben ze geen invloed op #contact.
#contact heeft dus feitelijk geen inhoud, en dus ook geen hoogte. Dus zie je ook geen achtergrondkleur, want als er geen hoogte is, is er ook geen achtergrond. Die is 0 px hoog.

Om de werking van dat floaten te neutraliseren, moet je ook onderin #contact (helemaal onderin) 'n lege div zetten met als css clear: both;
Die onderste div komt dan ónder de form en zo te staan. En omdat die niet gefloat is, trekt die de onderkant van #contact omlaag tot onder de form en zo. En dan heeft #contact opeens wel hoogte, en dus ook ruimte voor 'n achtergrond.
Dit is 'n bekend lastig punt, maar als je 't eenmaal doorhebt blijkt 't heel erg handig te zijn en kun je er van alles mee doen, veel flexibeler dan 'n tabel en zo.

#masthead heeft 'n hoogte van 100px, daarom zie je daar de achtergrond wel. Als je die hoogte weghaalt, is 't geel ook weg.

Inmiddels is het me niet meer helemaal duidelijk hoe je de kleuren wilt hebben. Klopt het dat bovenaan geel moet zijn, in het midden wit en helemaal onderaan rood?
In dat geval zou dit moeten werken. En anders moet je nog maar even 'n virtuele schreeuw geven.

HenkRog · 10 okt 2009

ok bedankt,

weer iets bijgeleerd

problemen

HenkRog

Gebruiker

HenkRog

Gebruiker

Goeroeboeroe

Terugkerende gebruiker

HenkRog

Gebruiker

Goeroeboeroe

Terugkerende gebruiker

HenkRog

Gebruiker

Goeroeboeroe

Terugkerende gebruiker

HenkRog

Gebruiker

Goeroeboeroe

Terugkerende gebruiker

HenkRog

Gebruiker

Nieuwste berichten

Wij waarderen jouw privacy