HTML/CSS height functie werkt niet

Door Robbert B op 25-01-2015 21:43 gewijzigd op 26-01-2015 19:30

1.500 views

Iemand die snapt wat ik verkeerd doe??

Dit moet het worden

- Tweet vakje moet de tekst en het rode balkje beneden staan
- Vakken moeten gelijk lopen met de lijn van het blauwe vakje met registreren.

http://nl.tinypic.com/r/2lsvda9/8

[code s=1 highlight=yes file=voorbeeld.php]
<html>
<link rel="stylesheet" href="style.css" type="text/css" media="screen"/>
<body>

<div id="content">
<div id="blocks">
<a href="#"><div class="block">
<div class="pica"><img src="verdienen.png"/></div>
<div class="text"><p>Verdienen</p></div>
</div></a>
<a href="#"><div class="block" style="margin-left: 7px";>
<div class="pica"><img src="adverteren.png"/></div>
<div class="text"><p>Adverteren</p></div>
</div></a>
<a href="#"><div class="block">
<div class="pica"><img src="ontvang.png"/></div>
<div class="text"><p>Ontvang</p></div>
</div></a>
<a href="#"><div class="block" style="margin-left: 7px">
<div class="pica"><img src="registreren.png"/></div>
<div class="text"><p>Registreren</p></div>
</div></a>
</div>

<div id="other">
<div id="name"><p>Klantenreacties</p></div>
<div id="comments">
<div class="comment">Bij RBDESIGN kende ik via een verre vriend die mij deze designer aanraden. Een designer die in korte tijd grote stappen heeft gemaakt echt een aanrader! Zoek je nog een designer RBDESIGN is de designer die je zoekt.</div>

<div class="author">Door: Pietsnot lid sinds 10 maart 2010</div>
</div>

<div class="comment">Prima designer die nog steeds grote stappen maakt in positief opzichten. Zijn layout is minimaal 2 one2xs punten waard. Ik heb al een mooie layout van hem ontvangen. Dus bied maar raak.</div>

<div class="author">Door: Vriendje lid sinds 11 maart 2011</div>
</div>

<div id="twitter">
<div class="tweets"></div>
<div class="twpic"><img src="twitter.png"/></div>
<div class="tweet">
<div class="contactname">Verdien</div><div class="from">@verdienen</div>
<div class="message">Wil je ook eenvoudig en snel rijkworden met dan nu aan op verdienen!</div>
</div>

<div class="tweets"></div>
<div class="twpic"><img src="twitter.png"/></div>
<div class="tweet">
<div class="contactname">Verdien</div><div class="from">@verdienen</div>
<div class="message">Wil je ook eenvoudig en snel rijkworden met dan nu aan op verdienen!</div>
</div>

<div class="tweets"></div>
<div class="twpic"><img src="twitter.png"/></div>
<div class="tweet">
<div class="contactname">Verdien</div><div class="from">@verdienen</div>
<div class="message">Wil je ook eenvoudig en snel rijkworden met dan nu aan op verdienen!</div>
</div>

<div class="tweets"></div>
<div class="twpic"><img src="twitter.png"/></div>
<div class="tweet">
<div class="contactname">Verdien</div><div class="from">@verdienen</div>
<div class="message">Wil je ook eenvoudig en snel rijkworden met dan nu aan op verdienen!</div>
</div>

<div id="twittername"><p>Twitter</p></div>

</div>
</div>

<div id="footer"></div>

</body>

</html>[/code]

[code s=1 highlight=yes file=voorbeeld.php]

#body,html {
background-color: cfdae2;
margin: 0;
padding: 0;
}

#content {
margin: 0px auto;
margin-top: 15px;
width: 960px;
height: 675px;
position: relative;
}

#blocks {
margin: 0px auto;
margin-top: 5px;
height: 348px;
width: 395px;
float: left;
}

.block {
background-color: #fcfcfc;
margin-top: 2px;
float: left;
width: 194px;
height: 143px;
position: relative;
display: inline-block;
white-space: normal;
vertical-align: middle;

}

.pica {
width: 194px;
height: 118px;
margin: 0px auto;
}

.pica img {
margin: 0 auto;
display: block;
}
.text {
float: left;
background-color: #428df5;
height: 25px;
width: 194px;
}

.text p{
margin: 5px;
color: fcfcfc;
font-family:Verdana, Geneva, sans-serif;
font-size: 12px;
text-align: center;
font-weight: bold;
text-decoration:none;
}

#right {
background-color: #fcfcfc;
margin: 0px auto;
height: 348px;
width: 560px;
float: right;
}

#other{
background-color: #fcfcfc;
margin: 0px auto;
margin-top: 7px;
margin-left: 5px;
height: 346x;
width: 262px;
float: left;
}

#name {
background-color: #a80d0d;
margin: 0px auto;
height: 29px;
width: 136px;
float: left;
}

#name p{
margin: 5px;
margin-left: 7.5px;
color: fcfcfc;
font-family:Verdana, Geneva, sans-serif;
font-size: 14px;
font-weight: bold;
text-decoration:none;
}

#comments {
float: left;
width: 248px;
}
.comment {
float: left;
width: 228px;
color: 2b2f33;
font-family:Verdana, Geneva, sans-serif;
font-size: 10px;
text-decoration:none;
margin-top: 5px;
margin-left: 5px;
margin-right: 5px;

}

.author {
float: left;
height: auto;
width: 228px;
color: 2b2f33;
font-family:Verdana, Geneva, sans-serif;
font-size: 10px;
text-decoration:none;
margin: 10px;
font-style: italic;
}

#twitter {
background-color: #fcfcfc;
margin: 0px auto;
margin-top: 7px;
margin-left: 5px;
height: 291px;
width: 293px;
float: left;
display: inline-block;
}

.tweets {
float: left;
margin: 0px auto;
margin-top: 5px;
width: 283px;
}

.twpic {
width: 25px;
height: 37px;
float:left;
margin-left: 5px;
}

.twpic img {
margin: 0 auto;
margin-top: 5px;
display: block;
}

.tweet {
float: right;
margin: 5px;
width: 250px;
}

.contactname {
float: left;
font-family:Verdana, Geneva, sans-serif;
font-size: 11px;
text-decoration:none;
font-weight: bold;
color: #2b2f33;
width: 50px;
}

.from {
float: left;
margin-left: 5px;
font-family:Verdana, Geneva, sans-serif;
font-size: 10px;
color: #bdbbcd;
text-decoration:none;
width: 100px;
}

.message {

float: left;
font-family:Verdana, Geneva, sans-serif;
font-size: 9px;
text-decoration:none;
color: #2b2f33;
width: 240px;
}

#twittername {
float: left;
background-color: #a80d0d;
height: 25px;
width: 293px;
}

#twittername p{
margin: 5px;
color: fcfcfc;
font-family:Verdana, Geneva, sans-serif;
font-size: 12px;
text-align: center;
font-weight: bold;
text-decoration:none;
}

#footer {
height: 25px;
width: 960px;
background-color: 2b2f33;
margin: 0px auto;
margin-top: 10px;
}

[/code]