selfhtml.de - Alles für den Webmaster!

 

Empfehlung:

wix.com

Kostenlose Homepage

Besuchen Sie auch:

Re: Mehrere untereinander stehende DIVs gleich hoch machen

Autor: Chimera16 [Beiträge: 5]
Datum: 22.08.2013 14:54:51

> Bitte jage Dein MarkUp (HTML) durch einen
> Validator[1] und korrigiere ggfs. die Fehler.

Hallo Freddy,

vielen Dank für deine Antwort! Ich habe mich nun mit dem Validator auseinandergesetzt und diverses korrigiert!

Hier nun also nocheinmal die "finale" Testseite + css

Laut Validator ist sie nun fehlerfrei.

HTML:
--------------------------------



<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="design.css">
<meta charset="utf-8">
<title>Testseite</title>
</head>
<body>
<div id="main">

<div id="header">
</div>

<div id="menue">

<table class="navi">

<tr><td>
<a href="Seite1.html">Menu 1</a>
</td><td>
<a href="Seite2.html">Menu 2</a>
</td><td>
<a href="Seite3.html">Menu 3</a>
</td><td>
<a href="Seite4.html">Menu 4</a>
</td><td>
<a href="Seite5.html">Menu 5</a>
</td></tr>

</table>

</div>


<div id="Spalte1">
<div id="inhalt1">

<H1>DIV1:</H1>

</div>

<div id="inhalt2" style="height:695px;">

<H1>DIV2:</H1>
Beispieltext Hallo Hallo


</div>
</div>


<div id="Spalte2">
<div id="inhalt3" style="height:295px;">

<H1>DIV3:</H1>

</div>
</div>


<div id="footer"> <p>DIV Text Impressum etc</p></div>
</div>

</body>
</html>



------------------------------------------
css:



table.navi{
height:100%;
width:100%;
border-spacing:0;
}


.navi td {
height:100%;  
width: 14%;
vertical-align: middle;
text-align: center;
line-height:38px;
}


.navi td:hover {
height:100%;  
width: 14%;
vertical-align: middle;
text-align: center;
border-bottom: 0px;
border-top: 0px;
border-left: 1px;
border-right: 1px;
border-style:solid;
border-color:#000000;
}


#header {
width:980px;
height:400px;
}


#menue a:link {display:block; color:#000000; text-decoration:none; font-weight: bold; width:100%; height:100%; align: center; valign: middle}
#menue a:visited {color:#000000; text-decoration:none; font-weight: bold;}
#menue a:hover {color:#FFD700; text-decoration:none; font-weight: bold;}
#menue a:active {color:#FFD700; text-decoration:none; font-weight: bold; background: rgba(255, 215, 0, 0.2);}
#menue {
width:980px;
height:40px;
background-size: 100% auto;
margin-top:10px;
padding: 0;
}


#main {
width:980px;
margin:0 auto;
}


#Spalte1 {
float:left;
width:680px;
align:left;
}


#Spalte2 {
float:right;
width:250px;
align:right;
}


#inhalt1, #inhalt2, #inhalt3 {
background-color:#e2dede;
margin-top:7px;
margin-bottom:7px;
padding: 10px;
}


#footer {
width:980px;
height:90px;
background-color:#0066FF;
margin-top:20px;
clear:both;
text-align:center;
vertical-align:middle;
display:table-cell
align:center;
}



Vielen Dank für deine Mühe!


Beiträge

Antwort schreiben

Username: Usernamen registrieren
Passwort: Passwort vergessen?
Thema:
  Bitte benutze für deinen Beitrag die Groß-/Kleinschreibung!
Beitrag:
Link (URL):
Titel für Link:
Grafik (URL):
  Die Breite der Grafik darf 468 Pixel nicht überschreiten.
 
E-Mail-Benachrichtigung:



Zum Abschicken deines Beitrags bitte die Schaltfläche "Abschicken" nur einmal anklicken und warten. Der Server braucht manchmal einige Zeit, bis er den Beitrag in die Datenbank übernommen hat. Wenn du die Schaltfläche mehrmals drückst, erscheint dein Beitrag auch mehrmals im Forum.

Bewerten Sie Ihren Webhosting-Provider

Webhosting Provider bewerten und Apple iPad gewinnenWie zufrieden sind Sie mit Ihrem Webhosting-Provider? Gibt es Probleme beim Service, mit der Performance oder der Abrechnung?

Teilen Sie jetzt Ihre Erfahrungen mit anderen Webmastern und schreiben Sie eine Provider-Bewertung. Mit etwas Glück können Sie ein Apple iPad gewinnen!

Weitere Informationen und Teilnahme...