|
|||
Horizontales Menü design
Hallo,
ich möchte meine Seite www.turkischechat.de nun ganz auf CSS umrüsten und mit div boxen arbeiten. Da mir die professionellen CSS kenntniesse fehlen, wollte ich fragen ob jemand ein Boxenmodell wie auf meiner seite kennt, sodass ich mich daran wenden kann und darauf aufbauen kann. lg |
Sponsored Links |
|
||||
wo ist das problem ?
<div> (bekommt den header als hintergrundbild) <ul><li></li></ul> (menü) <hx></hx> (überschrift) <p></p> (text) <hx></hx> <p></p> </div> usw... Für das Menü: http://xhtmlforum.de/40267-faq-h-ufi...tml#post296439
__________________
Gruß Roman // ngkreativ.de - Webdesign & Motorradumbau |
Sponsored Links |
|
|||
Das ist vielleicht das was du suchst?
Code:
<!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>Unbenanntes Dokument</title> <style type="text/css"> <!-- body { font: 100% Verdana, Arial, Helvetica, sans-serif; background: #666666; margin: 0; /* Es empfiehlt sich, margin (Rand) und padding (Auffüllung) des Body-Elements auf 0 einzustellen, um unterschiedlichen Browser-Standardeinstellungen Rechnung zu tragen. */ padding: 0; text-align: center; /* Hierdurch wird der Container in IE 5*-Browsern zentriert. Dem Text wird dann im #container-Selektor die Standardausrichtung left (links) zugewiesen. */ color: #000000; } /* Tipps für elastische Layouts: 1. Da die Gesamtgröße elastischer Layouts von der Standardschriftgröße des Benutzers abhängt, sind diese Layouts weniger berechenbar. Bei korrekter Verwendung haben sie außerdem für Personen, die größere Schriften benötigen, einen höheren Nutzwert, weil die Zeilenlänge proportional bleibt. 2. Die Größe der divs in diesem Layout basiert auf der Originalschriftgröße (100%) im Body-Element. Wenn Sie die Textgröße durch eine Einstellung wie font-size: 80% im Body-Element oder im #container global verringern, wird das gesamte Layout proportional verkleinert. Sie sollten die Breiten der verschiedenen divs vergrößern, um hierfür einen Ausgleich zu schaffen. 3. Wenn Sie in den einzelnen divs unterschiedliche Werte für die Schriftgröße angegeben, anstatt die Schriftgröße im Design global zu ändern (z. B. wenn #sidebar1 die Schriftgröße 70% zugewiesen wird und #mainContent die Größe 85%), so wird die Gesamtgröße der einzelnen divs proportional geändert. Sie sollten anhand der endgültig gewählten Schriftgröße entsprechende Anpassungen vornehmen. */ .oneColElsCtrHdr #container { width: 46em; /* Mit dieser Breite wird ein Container erstellt, der in ein 800 Pixel breites Browserfenster passt, sofern für den Text die Standardschriftgröße des Browsers übernommen wird. */ background: #FFFFFF; margin: 0 auto; /* Durch automatische Ränder (in Verbindung mit einer Breite) wird die Seite zentriert. */ border: 1px solid #000000; text-align: left; /* Hierdurch wird die Einstellung text-align: center im Body-Element überschrieben. */ } .oneColElsCtrHdr #header { background: #DDDDDD; padding: 0 10px 0 20px; /* Diese Auffüllung entspricht der linksbündigen Ausrichtung der Elemente in den divs, die darunter erscheinen. Wenn im #header anstelle von Text ein Bild eingesetzt wird, sollten Sie die Auffüllung entfernen. */ } .oneColElsCtrHdr #header h1 { margin: 0; /* Wenn Sie den Rand des letzten Elements im #header-div auf 0 einstellen, können Sie das Auftreten unerwarteter Abstände zwischen divs vermeiden. Wenn das div einen Rahmen hat, ist dies unnötig, weil dieser Rahmen die gleiche Wirkung hat. */ padding: 10px 0; /* Durch die Verwendung der Auffüllung anstelle von Rändern lässt sich gewährleisten, dass das Element die Kanten des div nicht berührt. */ } .oneColElsCtrHdr #mainContent { padding: 0 20px; /* padding (Auffüllung) bezeichnet den Innenabstand und margin (Rand) den Außenabstand der div -Box. */ background: #FFFFFF; } .oneColElsCtrHdr #footer { padding: 0 10px; /* Diese Auffüllung entspricht der linksbündigen Ausrichtung der Elemente in den divs, die darunter erscheinen. */ background:#DDDDDD; } .oneColElsCtrHdr #footer p { margin: 0; /* Wenn Sie die Ränder des ersten Elements in der Fußzeile auf 0 einstellen, können Sie unerwartete Abstände zwischen divs vermeiden. */ padding: 10px 0; /* Durch die Verwendung der Auffüllung bei diesem Element entsteht genau wie bei einem Rand ein Leerraum, aber ohne die potenziellen Abstandsprobleme. */ } --> </style></head> <body class="oneColElsCtrHdr"> <div id="container"> <div id="header"> <h1>Kopfzeile</h1> <!-- end #header --></div> <div id="mainContent"> <h1> Hauptinhalt </h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p> <h2>H2-Überschrift </h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p> <!-- end #mainContent --></div> <div id="footer"> <p>Fußzeile</p> <!-- end #footer --></div> <!-- end #container --></div> </body> </html>
__________________
Das Leben ist ein scheiss Spiel, aber die Grafik ist geil! |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Darstellungsproblem | flohpapa | CSS | 3 | 16.12.2009 09:55 |
horizontales Menü | sarahg | CSS | 9 | 10.02.2009 15:25 |
Horizontales Menü, Zeilenumbruch verhindern? | basti0071 | CSS | 10 | 01.12.2008 16:29 |
In horizontales Menü dropdown einbinden | Star_Scream | CSS | 1 | 14.10.2008 14:45 |
Horizontales Menü - zweizeilig | franc | CSS | 11 | 13.10.2008 13:35 |