• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Anfängerfragen zum wrapper und container

T

Tarantella

Neues Mitglied
Heute habe zum ersten mal CSS ausprobiert und die groben strukturen erkannt. Nun aber eine Frage ich habe eine Vorlage heruntergeladen mit 5 Bereichen und im Body erscheint mir nun eben der "container" und der "wrapper", was muss man bei diesen Elementen beachten?

Hier noch der Quelltext:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="HAPedit 3.1">
<style type="text/css">
html,body{margin:0;padding:0}
body{font: 76% arial,sans-serif}
p{margin:0 10px 10px}
a{display:block;color: #981793;padding:10px}
div#header h1{height:80px;line-height:80px;margin:0;
padding-left:10px;background: #EEE;color: #79B30B}
div#content p{line-height:1.4}
div#navigation{background:#B9CAFF}
div#extra{background:#FF8539}
div#footer{background: #333;color: #FFF}
div#footer p{margin:0;padding:5px 10px}

div#wrapper{float:left;width:100%}
div#content{margin: 0 25%}
div#navigation{float:left;width:25%;margin-left:-100%}
div#extra{float:left;width:25%;margin-left:-25%}
div#footer{clear:left;width:100%}
</style>
</head>
<body>
<div id="container">

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

<div id="wrapper">

<div id="content">
<p><strong>1) Content here.</strong> </p>
</div>

</div>
<div id="navigation">
<p><strong>2) Navigation here.</strong>
</div>

<div id="extra">
<p><strong>3) More stuff here.</strong>
</div>

<div id="footer"><p>Here it goes the footer</p></div>
</div>

</body>
</html>

Dazu noch Fragen:
Wieso müssen der container und der wrapper genau an dieser Stelle sein?Ich habe sie verschoben und hatte eine entstellte Seite^^

Wenn ich im Navigationsbereich einen Link einfügen will und dieser sich im "content" öffnen soll, ginge da auch der target befehl aus dem Html?

Grüsse Tarantella
 
Hi Tarantella,

grundsätzlich gilt: Solche Vorlagen sind nicht immer richtig.

Besser ist es immer, wenn man selbst vernünftig HTML und CSS lernt. Dabei können einem natürlich solche Vorlagen helfen - in diesem Fall aber eher als schlechtes Beispiel.
HTML: 
<div id="wrapper">
 
<div id="content">
<p><strong>1) Content here.</strong> </p>
</div>
 
</div>

Du hast hier zwei divs, die ineinander liegen. Bringt zwar vielleicht das gewünschte Ergebnis, ist aber eigentlich nicht korrekt; divs sind eigentlich dazu gedacht, Elemente zu gruppieren.

Solche Fehler gibts noch mehrere in deiner Vorlage - lass die also lieber weg.

Zu deinen Fragen:
Wieso müssen der container und der wrapper genau an dieser Stelle sein?Ich habe sie verschoben und hatte eine entstellte Seite^^
Zum Vergrößern anklicken....

Ist meistens so. HTML ist für den logischen Aufbau der Seite gedacht (was hier jedoch nicht so heraustritt)- wenn man da was verändert, sieht die Seite gleich wieder anders aus.
Wenn ich im Navigationsbereich einen Link einfügen will und dieser sich im "content" öffnen soll, ginge da auch der target befehl aus dem Html?
Zum Vergrößern anklicken....

"target" ist hierfür:
_blank, um den Verweis in einem neuen Fenster zu öffnen,
_self, um den Verweis im aktuellen Fenster zu öffnen,
_parent, um bei verschachtelten Framesets das aktuelle Frameset zu sprengen,
_top, um bei verschachtelten Framesets alle Framesets zu sprengen.
Zum Vergrößern anklicken....
(Quelle: selfhtml)

Der normale Vorgang ist, für jeden content eine neue Seite zu schreiben, in die jedes Mal der Grundaufbau eingefügt wird.
Andere Möglichkeiten, nur Teile einer Webseite neu zu laden sind Frames (NICHT zu empfehlen, da veraltet) oder PHP, aber dazu sollte man erstmal HTML und CSS beherrschen.

Die Frage wäre da, wie deine Kenntnisse dort sind.

Gruß
Toast
 
Toastbrot schrieb:
Andere Möglichkeiten, nur Teile einer Webseite neu zu laden sind Frames (NICHT zu empfehlen, da veraltet) oder PHP, aber dazu sollte man erstmal HTML und CSS beherrschen.
Zum Vergrößern anklicken....

...
Frames bitte nicht verwenden!
Wie der Name schon sagt: Bei deinem Link ist PHP im Spiel, sieht man auch im Code:

Code: 
<li><a href="[URL="http://www.html.de/view-source:http://www.contrexx.com/de/index.php?section=access"]index.php?section=access[/URL]" title="Community">Community</a>|&nbsp;</li>

Gruß
Toast
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben