Hallo an allen hier.
Ich bin recht neu hier und suche Hilfe für mein Problem. Und zwar habe ich den Auftrag bekommen, eine Homepage zu einem Projekt zu bauen. Diese soll aber ein 5 Spaltiges Layout besitzt. Und ich komme einfach nicht auf den richtigen Weg.
Aussehen soll das ganz klassisch so:
Mein Problem ist, sobald ich die Hauptteilbox mit Text füttere zieht sie sich Senkrechte in die Länge, aber alle anderen Boxen reihen sich dann ganz rechts an. Wie bekomme ich das richtig angeordnet?
Währe echt super wenn jemand mir das erklären oder meinen Fehler raus hebeln könnte.
mit Freundlichen Grüßen
Mondkind
Ich bin recht neu hier und suche Hilfe für mein Problem. Und zwar habe ich den Auftrag bekommen, eine Homepage zu einem Projekt zu bauen. Diese soll aber ein 5 Spaltiges Layout besitzt. Und ich komme einfach nicht auf den richtigen Weg.
Aussehen soll das ganz klassisch so:
Mein Problem ist, sobald ich die Hauptteilbox mit Text füttere zieht sie sich Senkrechte in die Länge, aber alle anderen Boxen reihen sich dann ganz rechts an. Wie bekomme ich das richtig angeordnet?
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>---</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="description" content="">
<meta name="author" content="">
<meta name="keywords" content="">
<meta name="generator" content="Webocton - Scriptly (www.scriptly.de)">
<link href="style.css" type="text/css" rel="stylesheet">
<link href="Bilderordner.ico" type="image/x-icon" rel="shortcut icon">
</head>
<body>
<header> <!-- Hier ist das Bild unter gebracht -->
<img src="ng_its_fresh_dk_headimg_dk_k----_Bild_S---_Bearbeitet.jpg" alt="---" title="--" width="1010" height="260" border="2;" /> <!-- Abrunden (border-radius="20px;" oder so) -->
<nav> <!-- Hier ist die Navigationsliste untergebracht -->
<ul>
<a href=""><li>Startseite</li></a> <!-- Später Link einsetzen!!!!!!!!!! -->
<a href=""><li>Aktionen</li></a> <!-- Später Link einsetzen!!!!!!!!!! -->
<a href=""><li>Das sind wir</li></a> <!-- Später Link einsetzen!!!!!!!!!! -->
<a href=""><li>Kontakt</li></a> <!-- Später Link einsetzen!!!!!!!!!! -->
<a href=""><li>Impressum</li></a> <!-- Später Link einsetzen!!!!!!!!!! -->
</ul>
</nav>
</header>
<section>
<div id="navi"> <!-- Sorgt dafür das mehrere Boxen Problemlos angeordnet sein können --> <!-- Menübox links oben (Navigation)!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
<h3>Navi</h2>
<p>testtest</p>
</div> <!-- Später Text einsetzen!!!!!!!!!! (Video 6/8) -->
</section>
<aside>
<div id="haupteil">
<h3>Hauptteil</h3> <!-- Mitte also Hauptteil -->
<p>testtesttest</p>
</aside>
</div>
<aside>
<div id="Newsbox"> <!-- Newsbox rechts oben -->
<h3>Newsbox</h3>
<p>testtest</p>
</aside>
</div>
<aside>
<div id="kontakt"> <!-- Kontakt Daten Links unten -->
<h3>Kontakt</h3>
<p>testtest</p>
</aside>
</div>
<aside>
<div id="partner"> <!-- Partner Links rechts unten -->
<h3>Partnerlinks</h3>
<p>testtest</p>
</aside>
</div>
</body>
</html>
Code:
header { /* Beeinhaltet die Header Größe */
height: 100px;
}
body { /* Beeinhaltet den Inhalt und somit auch die breite des Randes an den Seiten */
width: 1010px;
background-color: #870300; /* Später Farbe besser anpassen!!!!!!!!!! */
margin: 50px auto;
}
nav ul { /* Bestimmt die Funktionen in der Liste (lu)) */
list-style-type: none;
}
nav li {
display: inline; /* Bestimmt die Funktionen in der Liste (li)) */
margin: 40px;
}
nav { /* Bestimmt wo es auf der Webseite sitzt */
margin: -300px;
text-align: center;
}
nav a { /* Bestimmt das Aussehen der Links */
text-decoration: none;
color: white; /* Später Farbe besser anpassen!!!!!!!!!! */
cursor: default;
}
nav li:hover { /* Bestimmt den Rahmen wenn der Link angefahren wird */
}
nav a:hover { /* Bestimmt das Aussehen wenn der Link angefahren wird */
color: #FFFF00; /* Später Farbe besser anpassen!!!!!!!!!! */
}
section { /* Bestimmt wo die Section genau steht und wie breit sie ist */
width: 330px; /* Später Größe besser anpassen!!!!!!!!!!!!!!!!!!!!! */
margin-top: 200px;
float: left;
}
article {
border: black 4px groove;
padding: 20px;
text-align: left;
margin-right: 20px; /* Breite später genauer anpassen!!!!!!!!!!! */
}
aside { /* Bestimmt wo die Section genau steht und wie breit sie ist */
width: 330px; /* Später Größe besser anpassen!!!!!!!!!!!!!!!!!!!!! */
margin-top: 200px;
float: left;
}
div#navi {
border: black 4px groove;
padding: 20px;
text-align: left;
margin-right: 20px;
}
div#haupteil {
border: black 4px groove;
padding: 20px;
text-align: left;
margin-right: 20px;
}
div#Newsbox {
border: black 4px groove;
padding: 20px;
text-align: left;
margin-right: 20px;
}
div#kontakt {
border: black 4px groove;
padding: 20px;
text-align: left;
margin-right: 20px;
}
div#partner {
border: black 4px groove;
padding: 20px;
text-align: left;
margin-right: 20px;
}Währe echt super wenn jemand mir das erklären oder meinen Fehler raus hebeln könnte.
mit Freundlichen Grüßen
Mondkind
