HTML <DIV> Container Aufbau

[gstarr]

Hallo liebe Community,

bin grad dabei meine Seite zu realisieren, allerdings habe ich vor Jahren mit Tabellen gearbeitet, was aktuell zeimlich out ist und nur Schönheitsfehler bei verschiedenen Browsern verursacht.

Die Grundkentnisse CSS/HTML/PHP habe ich soweit drauf, allerdings blicke ich da nicht so durch wie ich am besten das umsetzen soll.

Kann mir da wer helfen? habe soweit alles in der Skizze erwähnt.

Danke =)



GELB = Content der sich mit dem Inhalt variert und der höhe skaliert.
GRAU = Content der immer gleich bleibt.

 

[mclovin01]

2-spaltige Layouts mit CSS sind nicht ganz einfach.
Oft muss man etwas basteln, bzw. probieren bis es passt.

Vielleicht hilft dir das Stichwort "float" womit du bsp. den rechten Div über den anderen schweben lassen kannst.

 

[GabbaHansn]

http://www.css4you.de/float.html

musst du dich spielen ich pack das auch nie aufs erste mal^^

warum machst du 6 und 4 nicht gleichbreit wie 2? bzw ziehst 3 und 4 bis zum boden? das hereinrücken kannst du ja genau so mit padding dann machen.

 

[gstarr]

Die Page steht bereits, allerdings noch teilweise mit Tabellen und <DIV> Container gemischt... Es tretten halt enorme schönheitsfehler unter IE.. mit Firefox oder Opera ist es kein Problem.

Hier www.gxpc.de könnt euch mal anschauen.

 

[hurga_gonzales]

Hallo,

zuerst: das ist überhaupt nicht schlecht, was Du da schon mal gebaut hast.

CSS4You wurde ja bereits erwähnt. Da diese Seite aber einen sehr guten Artikel zum Thema "Layout ohne Tabellen" bietet, möchte ich Dir diesen nochmal explizit ans Herz legen:
http://www.css4you.de/wslayout1/index.html

Einige Dinge fallen mir bereits bei der Betrachtung des Quellcodes auf:
- Deine Credits im Head der Seite sollten entfernt werden; bau diese als Inhalt ein oder als nicht angezeigten Kommentar in <!--- ... --->; Suchmaschinen danken es Dir, denn je früher verwertbarer Inhalt kommt, kann die Suchmaschinen zu indizieren beginnen (Suchmaschinen indizieren nur bis zu einer gewissen Code-Länge)
- diverse MetaTags kannst Du einfach weglassen, weil sie von den modernen Suchmaschinen nicht mehr ausgelesen werden: Keywords, Revisit, Content-Language, author, copyright, distribution

Wichtig sind: Title (zwar kein Metatag, aber eines der wichtigsten Elemente), Description, content-type (mit charset), robots (wenn nötig), base href (auch kein Metatag, aber ein guter Schutz gegen Content-Diebe)

Ordne Deinen Header, indem Du erst Title, dann content-type, gefolgt von Description und robots aufführst, damit die Suchmaschinen gleich wissen woran sie sind. Erst dann die Links und Script-Einbindungen, derer so wenig wie möglich.
Dein Sitemap-Link kann dann auch bei den Links stehen. Sofern Du eine hast (so wie es aussieht JA), muss dieser Link sogar enthalten sein. Verlasse Dich aber nicht allein auf deine sitemap.xml, um Deine Seiten suchmaschinentechnisch zu optimieren.

Zum "Robots" noch kurz:
Standardmäßig wird alles indiziert und wenn nicht anders angegeben ins odp aufgenommen (falls das jemand tut). Nur, wenn Du auf einer Seite einen Eintrag mit führendem "no..." im metatag Robots machst, wird das für dieses entsprechende Dokument nicht gemacht. Du kannst Dir also im Grunde den robots Tag komplett sparen, wenn du willst, dass ein Inhalt komplett indiziert wird, bzw. ins odp übertragen werden kann. Weniger Angaben bringen oft mehr als viele Angaben.

Zu Code:
Deine Navigation solltest Du dringend in eine Liste <ul><li>...</li></ul> packen. Die Listenelemente kannst Du per float:left; im Stylesheet nebeneinander anordnen. Suchmaschinen erwarten die Navigation in Listenform und können so leichter zwischen Navigation und Inhalt unterscheiden. Ein einfacher Grund dafür, dass es in der Regel einen Navigationsblock auf der Webseite geben sollte und nicht mehrere.
Du kannst Suchmaschinen (jedenfalls Google, Yahoo und Bing) davon abhalten Links zu verfolgen, wenn Du in Deinem <a href....> den Parameter rel="nofollow" verwendest. Dies ist gerade auch hilfreich, wenn ein Klick auf die Kommentarfunktion von Inhalten und so weiter, im Grunde den gleichen Inhalt zurück liefert wie der eigentliche Seitenaufruf (nur, dass er halt das Kommentarformular unter dem Inhalt anzeigt).
Vermeide reinen Javascript-Code innerhalb des Inhaltes.

Ansonsten kannst Du mit der Sache wachsen und bei näherem Hinsehen in Verbindung mit den entsprechenden Hilfeseiten wirst Du sehr schnell zu einem guten Ergebnis kommen.

Übrigens:
Manchmal macht es auch Sinn, etwas in Tabellen zu packen. Vermeide dabei langen HTML Code, um das Aussehen der Tabelle zu gestalten, sondern versuche es immer mit CSS. Je weniger HTML Code eine Suchmaschine durchforsten muss, desto mehr sinnvollen Inhalt kann sie von Deinen Seiten indizieren.

Mehr Details würden nur den Post sprengen, ich hoffe, das hilft Dir etwas weiter.

 

[gstarr]

@hurga_gonzales

Vielen Dank für dein Feedback!! Sehr informativ und hilfreich.

Ich habe die neue Website praktisch auf der alten aufgebaut, da ist ein enormer Codeüberfluss generell.

Ich wollte wirklich von vorne anfangen und alles optimieren, die Suchmaschienen haben damals gut mitgemacht, meine gewünschte Suchwörter brachten die Page bei Google auf Rank #1.

Das mit dem Menu ist ein sehr guter Gedanke, ich weiss, so macht man das auch normalerweise, bin halt noch nicht dazu gekommen, da ich generell mit dem Aufbau der Seite bzw. Codierung sehr unzufrieden war.

Ich habe leider nur einen Notepad zur Verfügung, deswegen komme ich sehr schleppend voran.

Habe grad angefangen die Skizze um zu setzen und mein Ergebniss sieht folgender Maßen aus:

<head>
<style type="text/css">
body {margin: 0 0 0 0;text-align:center;}
div#lineal{margin-top:0px;width:100%;height:44px;background-Color:#990000;}
div#seite{margin-bottom:0px;margin-top:0px;width:1000px;height:100%;background-color:#770000;}
div#header{margin-top:0px;height:175px;width:100%;background-color:#440000;}
div#menu{margin-left:0px;margin-top:0px; height:38px; width:765px;background-color:#220000;}
div#partner{width:235px;margin-top:0px;height:100%;background-color:#110000;float:left;}
div#content{width:765px;margin-top:0px;height:100%;background-color:#660000;float:left;}
div#include{width:765px;margin-top:0px;background-color:#880000;height:100%;}
div#footer{width:100%px;margin-bottom:0px;height:150px;background-color:112233;margin-top:77px;}
</style>
</head>

<body>
<div id="lineal"></div>

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

<div id="content">
<div id="menu"></div>
<div id="include"></div>
</div>

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

Die Background-Color sind nur zur Übersicht da, damit ich überhaupt klarkomme, aber irgendwie scheint das nicht ganz zu funktionieren, das Merk ich am <div id="partner"> ist nicht 100% height... und der footer auch nicht so wie ich mir das vorgestellt habe, sonst müsste ich die Abstände doch nicht mit komischen Zahlen wie (margin-top:77px manuell anpassen.

Ich bin für jeden Tip sehr Dankbar!!

 

[mustermen]

Hey hier mal der code den ich so bis jetzt habe

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>gxpc</title>
<!--<link href="css.css" rel="stylesheet" type="text/css" />
-->
<style type="text/css">
* {
	padding: 0;
	margin: 0;	
}
body {
	background: #0F0;
}
#lineal{
	width:100%;
	height:44px;
	background-Color:#990000;
}
#seite{
	margin: 0 auto 0 auto;
	width:1000px;
	background-color:#00F;
}
#header{
	height:175px;
	width:100%;
	background-color:#440000;
}
#content {
	width:100%;
	min-height: 500px; /*ACHTUNG die min-height muss genau die gleiche größe wie partner haben, also wenn du alle grafiken in partner eingefügt hast rechne die größe von partner aus und trag sie hier nochmal ein!*/
	height:100%;
	background-color:#CCC;
	padding: 0 0 50px 0;
}
#menu{
	padding-left: 50px;
	height: 38px; 
	width: 950px;
	background-color:#333;
}
#menu ul{
	list-style: none;
}
#menu ul li { /*Hier kannst du die roten striche verändern!*/
	float: left;
	font-size: 24px;
	color: #F00;
	line-height: 38px;
	font-weight: bolder;
}
#menu ul li a { /*Hier kannst du die Schrift des menu verändern!*/
	margin: 4px 0 0 0;
	width: 70px;
	height: 32px;
	display: block;
	background:#333;
	text-align: center;
	text-decoration: none;
	font: bold 14px/36px Arial, Helvetica, sans-serif;
	color: #FFF;
}
#menu ul li a:hover {
	background: #F00;
}
#partner{
	margin-top: -38px;
	width:235px;
	height: 500px; /*Achtung trag die höhe wen du sie ausgerechnet hast auch in content ein!*/
	background-color:#0FF;
	float: right;
}
#include{
	width:600px;
	height: 462px;
	margin: 0 0 0 82.5px;
	background-color:#880000;
}
#footer{
	width:100%;
	margin-bottom:0px;
	height:150px;
	background-color: #F0F;
	border-top: 10px solid #333;
}
</style>
<!--Erstelle ein Stylesheet dokument und lege alle css regeln dort rein, nenne das dokument css.css!-->
<!--<link href="css.css" rel="stylesheet" type="text/css" />-->

</head>

<body>
	<div id="lineal"> 
		LINEAL!
	</div>
	<div id="seite">
		<div id="header">
        	HEADER!
        </div>
		<div id="content">
			<div id="menu">
           	  <ul>
            	  <li><a href="#">index</a></li>
                <li>|</li>
                  <li><a href="#">projects</a></li>
                <li>|</li>
                  <li><a href="#">gallery</a></li>
                  <li>|</li>
          	  </ul>
		  </div>
            <div id="partner">
    			PARTNER!
    		</div>
			<div id="include">
            	INCLUDE!
            </div>
		</div>
	<div id="footer">
    	FOOTER!
    </div>
</div>
</body>
</html>

Wen du noch immer Probleme bekommst oder Fragen hast sag bescheid!

 

[gstarr]

@mustermen

einfach genial!! hehe, die Navi ist auch sehr kreativ gelungen, habe bisscher Grafiken verwendet, aber deine Lösung finde ich sehr sympatisch.

Leider habe ich in der Zeit selber mal gebastelt und zwar nicht so saubere, aber ähnliche Lösung gefunden.

Die Testpage sieht aktuell so aus, und da macht IE, Opera und FF noch mit^_

Schau dir mal an http://gxpc.de/page.html

Danke!!

 

[mustermen]

Bei dem DIV "Partner" kommt es zu einer ladeverzögerung wen man über ein Bild geht, dass kannst du verhindern indem du z.B. das Bild "aqua tuning" einmal den normalen zustand und den hover zustand in einem Bild machst.
1. Öffne Photoshop und mache ein neues Dokument Breite: 235px Höhe: 180px!
Die höhe 180px deswegen weil wir 2 Bilder reinmachen. Ein Bild hat die höhe von 90px.
2. Auf die erste Ebene kommt das Schwarz Weiß Bild von Aqua tuning ganz oben platziert.
3. Auf die zweite Ebene kommt das farbige Bild von Aqua tuning das platzierst du ganz unten!
4. Speicher das Bild ab.

5. Nun mache die Links im DIV "Partner" in eine unsotierte Liste

<div id="partner">
	  		  <ul>
		  		  <li><a href="#" class="agua_tuning">aqua tuning</a></li>
                                  <li><a href="#" class="razer">razer</a></li>
                                  <li><a href="#" class="icy-box">icy box</a></li>
                                  <li><a href="#" class="enermax">enermax</a></li>
	  		  </ul>
 	   </div>

6. Nun kommt das CSS

#partner ul li {
	list-style: none; 	
}
#partner ul li a {
	display: block;
	height: 90px;
	width: 235px;
	text-indent: -9999px; 
	overflow: hidden;	
}
.agua_tuning {
	background: url(ltuning.png); 
}
.agua_tuning:hover {
	background: url(tuning.png) 0px -90px;
}
.razer {
	background: url(razer.png);
}
.razer:hover {
	background: url(razer.png) 0px -90px; 
}

Dadurch kommt es zu keiner Ladeverzögerung und du brauchst nicht soviele Divs!

 

[gstarr]

Ich bin wirklich einfach nur sprachlos.... wieso bin ich nicht selber drauf gekommen...
Habe bisscher die Bilder mit nem Java-Script vorgeladen gehabt, aber es geht auch viel einfacher mit deiner Lösung.

Bin aktuell dabei deine Version aus zu bauen, habe diese hier schonmal hoch geladen

http://www.gxpc.de/test.html

Danke!

*EDIT*

Ich wollte eventuell noch eine Submenu einbauen, wie kann ich da am besten vorgehen? Die Grafik mit den Punkten etc. werde ich halt als Hintergrund legen.

 

[mustermen]

Sieht doch schon gut aus. Freu mich schon die fertige Seite zusehen, sag bescheid wen du fertig bist! Ach ja beim Footer kannst du auch wieder mit einer Ungeordneten Liste arbeiten und um die Roten überschriften zu machen leg eine h3 also eine überschrift 3 ordnung oder 4.
Also so etwa:

<ul>
<h3>RECHTLICHES</h3>
     <li><a href="#">Impressum</a></li>
     <li><a href="#">Kontakt</a></li>
</ul>

<ul>
<h3>WORKLOGS</h3>
     <li><a href="#">pcgameshardware.de</a></li>
     <li><a href="#">computerbase.de</a></li>
</ul>
und so weiter ...

Im CSS musst du bloß schreiben das er alles im Footer nach links floaten soll und gib dem UL ne feste breite und höhe und sag ihm display: block;. Und um alle h3 rot zumachen sag im das #footer ul h3 so spricht er nur die h3 im footer an.

Ergänzung (19. Januar 2011)

Für die Subnavigation gehe auf selfhtml
http://de.selfhtml.org/css/layouts/anzeige/nav_modern.htm
das ist ein beispiel wie es aussehen könnte, um den queltext zusehen geh auf den Button unter der navigation auf "zurück".

 

[gstarr]

@mustermen

Ok werde mich mal gleich ran setzen und alles genauer anschauen, das mit den Partnern scheint nicht korrekt zu funktionieren, schaues dir an http://www.gxpc.de/test.html

Habe auch schon versucht die Höhe um zu stellen, klappt irgendwie nicht richtig.

 

[mustermen]

Entferne alle meine komentare im CSS, ich habe sie nämlich nicht korrekt ausgeklammert! und vergiss nicht wieder height. 90px; reinzumachen!

 

[gstarr]

Habe nun den Code etwas angepasst und auf geräumt.

Den Link für die Subnavi habe ich mir auch angeschaut, aber irgendwie passt das doch nicht, also es sollte ein Subnavi horizintal werden und die aus dem Link ist Dropdown.

Ich wollte es eigentlich so einbauen wie auf dem Link, bzw Bild

 

[mustermen]

Sorry sowas bekomm ich heute nicht mehr hin ich versuchs morgen nochmal.

 

[gstarr]

Wäre dir sehr verbunden, wenn du mir da weiter helfen könntest

 

[mustermen]

Moinsen ok habe es hin bekommen! Im Internet habe ich bisher nichts zu diesem Theme gefunden eine Horizontale navi mit einer horizontalen subnavi zu machen, deswegen habe ich extra für dich eine gebastelt! Tut mir leid das ich nicht das komplette CSS richtig formatiert habe aber ich hatte einfach zu viel zu tun deswegen hoffe ich das du dich um die restlichen CSS regeln kümmerst wie Schriftfarbe und größe und die Abstände.

Hier der CSS code für das menu. Vergiss nicht von deiner kompletten Seite alle Stylesheets von "menu zu löschen", also alles CSS was was mit dem "menu" zu tun hat.

* {
	padding: 0;
	margin: 0;	
}
#menu{
	padding-left: 50px;
	height: 38px; 
	width: 722px;
	background-color:#0F0;
}
#menu ul{
	list-style: none;
}
#menu ul li { /*Hier kannst du die roten striche verändern!*/
	float: left;
	position: relative;
	font-size: 24px;
	color: #F00;
	line-height: 38px;
	font-weight: bolder;
}
#menu ul li a { /*Hier kannst du die Schrift des menu verändern!*/
	margin: 4px 0 0 0;
	width: 70px;
	height: 32px;
	display: block;
	background:#333;
	text-align: center;
	text-decoration: none;
	font: bold 14px/36px Arial, Helvetica, sans-serif;
	color: #FFF;
}
#menu ul li a:hover {
	background: #F00;
}
ul#Navigation li ul {
	width: 722px;
	height: 38px;
    margin: 0; 
	padding: 0;
    position: absolute;
    top: 40px; 
    display: none;  /* Unternavigation ausblenden */
  }
 
  ul#Navigation li:hover ul {
    display: block;  /* Unternavigation in modernen Browsern einblenden */
  }
  ul#Navigation li ul li {
    float: left;
    display: block;
    margin-bottom: 0.2em;
  }

  ul#Navigation a, ul#Navigation span {
    display: block;
    width: 70px;  /* Breite den in li enthaltenen Elementen zuweisen */
    padding: 0.2em 1em;
    text-decoration: none; 
    color: maroon; 
	background-color: #ccc;
  }
  li a#aktuell {  /* aktuelle Rubrik kennzeichnen */
    color: maroon; background-color: silver;
  }
  ul#Navigation li ul span {  /* aktuelle Unterseite kennzeichnen */
    background-color: maroon;
  }

Hier die komplette html Code für die Navigation:

<div id="menu">
    	<ul id="Navigation">
        	<li><a href="#">index</a>
            	<ul>
                	<li><a href="#">start</a></li>
                </ul>
          	</li> <!--dieses schließende li enthällt eine subnavigation die wieder mit ul begiint!-->
           	<li>|</li>
            <!--Hier fängt projects an-->
         	<li><a href="#">projects</a>
            	<ul>
                	<li><a href="#">cases</a></li>
                    <li>|</li>
                    <li><a href="#">waku</a></li>
                    <li>|</li>
                    <li><a href="#">mainboard</a></li>
                    <li>|</li>
                    <li><a href="#">netzteil</a></li>
                </ul>
     		</li>
            <!--und hier ist schluss mit projects! Achte genau auf die ul und die li!-->
         	<li>|</li>
        	<li><a href="#">gallery</a>
            	<ul>
                	<li><a href="#">Fotos</a></li>
                </ul>
       		</li>
          	<li>|</li>
            <li><a href="#">toturials</a></li>
            <li>|</li>
            <li><a href="#">reviews</a></li>
            <li>|</li>
            <li><a href="#">partner</a></li>
            <li>|</li>
            <li><a href="#">contact</a></li>
   	  </ul>
	</div>

Sag bescheid wen du Hilfe brauchst!

 

[gstarr]

Hi mustermen,

sieht schonmal sehr gut aus, allerdings ist die Navi durch

#menu ul li a { /*Hier kannst du die Schrift des menu verändern!*/
margin: 4px 0 0 0;

etwas verschoben und die Sub ist ja komplett eine andere als ich mir vorstellte, sollte eigentlich nur text sein bzw wie auf dem Bild aus dem Post #10.

Weisst du wie ich das meine?

 

[mustermen]

Soll die sub navi im DIV menu oder im DIV include sein?

 

[gstarr]

Denke im DIV menu!

Weil im include Bereich werden per PHP GET inhalte abgerufen.