CSS Homepage Layout

Daaron · 19. April 2012

Kausalat schrieb:
<br> solltest du vermeiden, da ein Zeilenumbruch im Grunde keinen wirklichen Nutzen darstellt. Dafür gibt's <p>.

Nö, es kann durchaus stilistisch Sinn machen, einen Umbruch zu erzwingen. Das beste Beispiel ist wohl ein Gedicht oder Songtext. Die einzelnen Zeilen sind keine Liste, sie sind auch keine Absätze, sie sind einfach nur an bestimmten Stellen umgebrochene Zeilen.

Kausalat · 19. April 2012

@ Daaron:

Ich habe mich wohl etwas unklar ausgedrückt

. Man sollte auf <br>s als Abstandshalter verzichten wie hier:

HTML:

<p>Text
<br><br><br>
</p>
<br><br>
<h3>Überschrift</h3>

Bei Sonderfällen wie Gedichten sind diese Tags natürlich legitim.

Daaron · 19. April 2012

In dem speziellen Fall ist aber wiederum das <p> nicht allein seelig machend. Da brauchts ein anständiges margin oder padding.
Wobei: In einem CMS ist es für einen technologiefremden Redakteur viel einfacher, seine Abstände per Enter-Spam zu erzielen, als einzelnen Absätzen gezielt Abstände mitzugeben. So gesehen... es ist nicht hübsch, aber andererseits nicht selten oder ungewöhnlich, dass Abstände mit <br> erzeugt werden.

Kausalat · 19. April 2012

Natürlich braucht man padding und margin, um das Layout zu optimieren, keine Frage.

Den "bösen" <br>-Einsatz sollte man aber vor allem als Neuling vermeiden, um die Möglichkeiten von CSS erst richtig wahrzunehmen. Struktur und Layout konsequent zu trennen, verschafft Überblick.

pineapplefreak · 19. April 2012

Wenn aber das ist doch...
Ich will ja schließlich die Aufzählung mit in dem Block und nicht außerhalb haben.
Wie kann ich das realisieren? Gibts da eine Möglichkeit?

Kausalat · 19. April 2012

Welchen Block meinst du genau?

Poste bitte am besten den kompletten Quellcode der Seite.

Daaron · 19. April 2012

Wie schon gesagt, in <p>-Elemente darfst du nicht jedes beliebige andere Element rein klatschen. Nur einige wenige Inline-Elemente sind legitim, z.B. <time>,<a> und <span>. Auf keinen Fall darfst du Blockelemente wie <ul> da rein packen.
Wie du die einzelnen Blöcke dann zueinander ausrichtest, ist nur deinem CSS-Geschick geschuldet. Use the styles, Luke!

pineapplefreak · 22. April 2012

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
         <title>Homepage</title>
<meta name="author" content="me">
<style type="text/css">
body {background-color: #9ADFEB;}
p {
margin: 50px 20px 50px 20px;
padding: 30px 30px 30px 30px;
border: 5px solid black;
border-radius: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
background-color: #EBF0BC
}
</style>
</head>
<body>

<p>
<b><font size="+2"><table width="100%" border="0" cellpadding="0" cellspacing="2">
 <tr>
  <td>a</td>
  <td>b</td>
  <td>c</td>
  <td>d</td>
  <td>e</td>
  <td>f</td>
  <td>g</td>
 </tr>
</table></font></b></p>


<p>
<font size="+3"><b>Home</b> </font>
<br>
<br>
<br>

<font size="+1">Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt <br>
Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt<br>
Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt <br>
<br>
Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt 
<br>
<br>
<br>
<br>
Inhalt Inhalt Inhalt Inhalt Inhalt 
<br>

<ul>
<li>Inhalt </li>
<li>Inhalt </li>
<li>Inhalt </li>
<li>Inhalt </li>
<li>Inhalt </li>
<li>Inhalt </li>
<li>Inhalt </li>
<li>Inhalt </li>
</ul>
</font>
</p>
<footer>
<center>
<b>Impressum</b>
<br>
Copyright 2012 by me </center>
</footer>

</body>
</html>

Kausalat · 22. April 2012

Autsch. Nimm's nicht persönlich. Lass den Quelltext durch einen Validator laufen. Und noch eine Bitte: Lies dich bitte in entsprechende Literatur ein. Diese gibt es zuhauf kostenlos und in allen möglichen Schwierigkeitsgraden im Netz.

Alternativ darfst du dich gerne meines Quelltextes bedienen

.

Anstatt alles mit den längst ausgedienten <font>- und <center>-Tags — dazu noch falsch eingesetzt um ganze Blockelemente — zu gestalten, solltest du einmal wirklich Gebrauch von CSS und korrektem HTML machen.

pineapplefreak · 22. April 2012

Tja, sowas wird heutzutage an deutschen Schulen gelehrt...

3 Fehler im Validator.

Unbekanntes Element `footer`.
ul ist an dieser Stelle nicht erlaubt.
Es befindet sich evtl. ein Block-Element innerhalb eines Inline-Elements.
table ist an dieser Stelle nicht erlaubt.
Es befindet sich evtl. ein Block-Element innerhalb eines Inline-Elements.

Das Problem ist, dass ich mit veralteten Standarts arbeite, oder? Ich hab bisher mit dem HTML Editor Phase 5 gearbeitet...

Kausalat · 22. April 2012

Zum einen das, denn zu Beginn des Quelltextes steht eine HTML-4-Transitional-Deklaration, aber im Quelltext benutzt du HTML-5-Elemente wie den <footer>. Zum anderen hast du leider noch keinen Überblick über Block- und Inline-Elemente und den Einsatz dieser (standardunabhängig).

pineapplefreak · 22. April 2012

Gut. Ich seh schon... da stehen wieder einige nächte CSS und HTML lernen auf dem Plan....
Ein paar Fragen noch. Kann ich diese "HTML-4-Transitional-Deklaration" Zeile einfach löschen?

Allgemein müssten die meisten Befehle aber doch noch gültig sein, oder?

Zu den Blockelementen: Ich habe <p> ja einfach einen bestimmten Block zugeordnet. Kann man theorethisch am Anfang vom Dokument auch eigene "Variablen" deklarieren, also z.B. <block1></block1> und dem dann die Blockfunktion übergeben?

Kausalat · 22. April 2012

Übernimm einfach die erste Zeile aus meinem Quelltext. Diese ist, auch wenn man es nicht auf den ersten Blick erkennt, eine HTML-5-Deklaration.

"Allgemein" ist zu allgemein gefasst

. Ja, die Elemente existieren, sind aber inkorrekt verschachtelt.

<p> benutzt man für einzelne Textparagraphen, keineswegs für ganze Layoutabschnitte. Dafür gibt es in HTML 5 <section id="beliebige-id">, <article>, <nav>, <footer> und weitere Strukturtags. Zum letzten Mal verweise ich auf meinen Quelltext, an dem du dir den beispielhaften Einsatz dieser anschauen kannst.

Tumbleweed · 22. April 2012

Zu dem <br>-Spam wurde ja auch schon was gesagt hier. Das hast du aber anscheinend gekonnt überlesen.

pineapplefreak · 22. April 2012

Tumbleweed schrieb:
Zu dem <br>-Spam wurde ja auch schon was gesagt hier. Das hast du aber anscheinend gekonnt überlesen.

Tut mir leid

Ich hab das 2 Jahre lang so in der Schule gelernt... schwierig, sich sowas wieder abzugewöhnen

Ich probier jetzt einfach mal meine jetzige Arbeit umzuschreiben und poste sie dann mal hier. Vielleicht wirds ja dann langsam besser

Also:

HTML:

<!DOCTYPE html>
 
<html lang="de-DE">
 
<head>
 
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Meine Website</title>
	<style type="text/css">
		body {background-color: #9ADFEB;}
		nav, article {
			margin: 50px 20px 50px 20px;
			padding: 30px 30px 30px 30px;
			border: 5px solid black;
			border-radius: 5px;
			border-top-left-radius: 5px;
			border-top-right-radius: 5px;
			border-bottom-right-radius: 5px;
			border-bottom-left-radius: 5px;
			background-color: #EBF0BC
		}
</style>
</head>
 
<body>
 
   <header>
      <h1><a href="#">Home</a></h1>
   </header>
 
   <nav>
		<table width="100%" border="0" cellpadding="0" cellspacing="2">
		<tr>
			<td>Inhalt</td>
			<td>Inhalt</td>
			<td>Inhalt</td>
			<td>Inhalt</td>
			<td>Inhalt</td>
			<td>Inhalt</td>
			<td>Inhalt</td>
		</tr>
		</table>
   </nav>
 
   <article>
		<h2>Home</h2>
		<p>InhaltInhaltInhaltInhaltInhalt</p>
		<p>InhaltInhaltInhaltInhaltInhalt</p>
		<p>InhaltInhaltInhaltInhaltInhaltInhaltInhaltInhalt</p>
    
		<ul>
			<li>Inhalt</li>
			<li>Inhalt</li>
			<li>Inhalt</li>
			<li>Inhalt</li>
			<li>Inhalt</li>
			<li>Inhalt</li>	
		</ul>
   </article>
 
   <footer>
      <p>Copyright 2012</p>
      <p><a href="#">Impressum</a></p>
   </footer>
 
</body>
</html>

So, ich denk jetzt sieht es immerhin nach was aus.
Es funktioniert zwar noch nicht und Überschriften und Schriftarten habe ich auch noch nicht eingebaut, aber naja...

Daaron · 22. April 2012

Jetzt musst du dir nur noch überlegen, warum du eine Tabelle als Navigation verwendest, und nicht ein semantisch eher korrektes Element wie eine Unordered List (<ul>)...
Tabellen dienen NIE NIE NIE NIE NIIIIIEEEEE dem Layout, sondern nur um tabellarische Daten darzustellen. Das ist dasselbe, als würdest du Zeilenabstände zwischen Absätzen mit <br>'s machen statt über entsprechende margins an den <p>'s.

Wenn du dich fragst, ob du halbwegs was sinnvolles geschrieben hast, dann besorg dir einen textbasierten Browser wie Lynx. Wenn du deine Seite dort nicht absolut intuitiv navigieren kannst, dann baue sie um.

Nächster Aspekt:
CSS-Deklarationen haben, von Kleinigkeiten abgesehen, im HTML-Code nichts zu suchen. Dasselbe gilt für JavaScript. CSS und JS sollten nach Möglichkeit immer in externe Dateien ausgelagert werden. Außerdem sollten alle einzelnen Styles sowie alle einzelnen JS-Quelldateien falls möglich zu jeweils einer Datei zusammengefasst und komprimiert werden.

Ach ja, und schieß deinem Lehrer mal in den Fuß für seine beschissene Arbeit. Jeder, der lehrt, dass man <table> für was anderes als tabellarische Daten verwendet, den sollte man kielholen.

pineapplefreak · 22. April 2012

Aber wie soll ich die Punkte in einer Liste nebeneinander darstellen?

Den CSS Teil nehm ich dann raus. Aber jetzt lass ichs erstmal zur Übersicht halber drin.

Bloß, warum nimmt er das Design, dass ich nav und article zugewiesen habe nicht an? D.h. Warum wird es nicht dargestellt?

Daaron · 22. April 2012

Gibt viele Varianten, Blockelemente (wie <li>'s) nebeneinander darzustellen. Die einfachste ist float:left, die elegantere ist display:inline-block;

Und jeder MODERNE Browser hat gar kein Problem mit HTML5-Elementen wie nav, article,... Wenn du mit nem IE6-8 oder nem FF2 testest, dann wundert mich nix. Aber anders gefragt: Was genau erwartest du, dass passiert? Das sind ganz einfach Blockelemente. Die tun sonst GAR NICHTS. Die werden nicht von selbst bunt, animiert oder sonstwas. Dafür gibts CSS.

Kausalat · 22. April 2012

Listenpunkte kann man mit einfachen CSS-Attributen horizontal anordnen. Dafür gibt es unzählige Tutorials ("CSS-Menü").

Was genau wird "nicht dargestellt"? Mit welchem Browser testest du deine Seite?

pineapplefreak · 23. April 2012

Also, ich habs heute nochmal getestet. Es lag daran, dass ich als Browser den IE8 genommen hatte. Mit Firefox klappt es super...
Aber ich bin sicher es werden noch mehr fragen kommen

Trotzdem erstmal vielen Dank, dass ihr immer geantwortet habt, auch wenn die Frage noch so blöd war!

CSS Homepage Layout

Fleet Admiral

Kausalat

Gast

Fleet Admiral

Kausalat

Gast

Lieutenant

Kausalat

Gast

Fleet Admiral

Lieutenant

Kausalat

Gast

Lieutenant

Kausalat

Gast

Lieutenant

Kausalat

Gast

Captain

Lieutenant

Fleet Admiral

Lieutenant

Fleet Admiral

Kausalat

Gast

Lieutenant

Ähnliche Themen