zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Horizontales Menü design

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 15.02.2009, 20:20
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.05.2008
Beiträge: 19
Optimierer befindet sich auf einem aufstrebenden Ast
Standard 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 15.02.2009, 20:30
Benutzerbild von nevermind
Trollflüsterer
XHTMLforum-Kenner
 
Registriert seit: 29.08.2005
Ort: Bietigheim-Bissingen
Beiträge: 2.215
nevermind ist ein Lichtblicknevermind ist ein Lichtblicknevermind ist ein Lichtblicknevermind ist ein Lichtblicknevermind ist ein Lichtblicknevermind ist ein Lichtblick
Standard

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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 17.02.2009, 01:42
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.12.2005
Ort: Oranienburg
Beiträge: 230
celine@23 ist in Verruf geraten
Standard

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!
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:19 Uhr.