zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden CSS Floated Layout

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 05.04.2010, 17:37
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.04.2010
Beiträge: 37
didb befindet sich auf einem aufstrebenden Ast
Standard CSS Floated Layout

Ich hab mich mal wieder an ein 3 spaltiges Laout begeben. Leider will es sich nicht so verhalten, wie geplant. Die Seitenspalten positionieren sich links und rechts unterhalb des Contentbereichs.

HTML-Code:
<body> <div id="wrapper"> <div id="header"><div id="header-bottom">
            ...
          </div> <!-- header-bottom --> </div> <!-- header --> <div id="main"> <div id="content"> <div id="mainfeature">
        	...
          </div> <!-- mainfeature --> <div class="inner">
            ...
          </div> </div> <!-- content --> <div id="sidebar"> <div class="inner">
            ...
           </div> <div class="inner">
            ...
           </div> <div class="inner">
            ...
           </div> </div> <!-- sidebar --> <div id="sidebar2"> <div class="inner">
            	...
           </div> </div> <!-- sidebar2 --> </div> <!-- main --> <div id="footer">
       		...
      </div> <!-- footer --> </div> <!-- wrapper --> </body>
HTML-Code:
@charset "UTF-8";
/* CSS Document */

body {
	margin: 0;
	padding: 0;
	background-color: #050845;
	color: white;
	background-image: url(img/bg.jpg);
	background-repeat: repeat-x;
	font: small Arial, Helvetica, Verdana, sans-serif;
}

#wrapper {
	background-color: #fdf8f2;
	color: black;
	margin: 30px 40px 30px 40px;
	padding: 10px;
}

#header-bottom {
	border-top: 1px solid #b9d2e3;
	border-bottom: 1px solid #b9d2e3;
}

#header-bottom ul {
	margin: 0;
	padding: 0 30px 0 0;
	text-align: right;
}
#header-bottom li {
	display: inline;
	background-color: #fdf8f2;
	color: #050845;
}
#header-bottom a, #header-bottom a:visited {
	text-decoration: none;
	background-color: #fdf8f2;
	color: #050845;
}
#tagline {
	font-weight: bold;
	background-color: #fdf8f2;
	color: #050845;
	font-style: italic;
	margin: 0;
	padding: 0 0 0 20px;
	width: 300px;
	float: left;
}

#ball {
	position: absolute;
	top: 110px;
	right: 55px;
}

#main {
	width: 100%;
	margin-top: 10px;
}

#content {
	margin: 0 240px 0 160px;
	border: 1px solid #b9d2e3;
	background-color: white;
	color: black;
}

#mainfeature {
	background-image: url(img/mainimg.jpg);
	background-repeat: no-repeat;
	background-color: #112236;
	color: white;
	padding: 2em 2em 1em 200px;
}
#mainfeature h2 {
	margin: 0;
	font-weight: normal;
	font-size: 140%;
}
#mainfeature p {
	font-size: 110%;
}
#mainfeature p.more {
	margin-top: 0;
	text-align: right;
}
#mainfeature p.more a, #mainfeature p.more a:visited {
	color: white;
	background-image: url(img/more-bullet.gif);
	background-repeat: no-repeat;
	background-position: center left;
	padding-left: 14px;
}

#content .inner {
	margin: 10px 20px 10px 40px;
}
#content .inner h2 {
	color: #245185;
	padding-bottom: 0.2em;
	border-bottom: 1px solid #b9d2e3;
	font-size: 110%;
}
#content .inner ul.features {
	margin: 0;
	padding: 0;
	list-style: none;
}
#content .inner h3 {
	font-size: 130%;
}
#content .inner h3 a, #content .inner h3 a:visited {
	color: #245185;
}
#content .inner p {
	color: #666;
	font-size: 90%;
}

#content .inner .features li img {
	float: left;
	margin: 0 5px 5px 0;
}

#content .inner p.author {
	font-weight: bold;
}

#content .inner p.more {
	margin-top: 0;
	text-align: right;
}
#content .inner p.more a, #content .inner p.more a:visited {
	background-image: url(img/more-bullet.gif);
	background-repeat: no-repeat;
	background-position: center left;
	padding-left: 14px;
	font-size: 90%;
	color: #1e4c82;
}

#sidebar {
	float: right;
	width: 220px;
	background-color: #256290;
	color: white;
	margin: 0;
	padding: 0;
}
#sidebar h3 {
	font-size: 110%;
	background-image: url(img/sidebar-header-bg.jpg);
	background-repeat: no-repeat;
	margin: 0;
	padding: 0.2em 0 0.2em 10px;
	font-weight: normal;
}
#sidebar .inner {
	padding: 10px;
}
#sidebar ul {
	list-style-image: url(img/more-bullet.gif);
	margin-left: 0;
	padding-left: 20px;
}
#sidebar p, #sidebar li {
	font-size: 90%;
	line-height: 1.4em;
}
#sidebar ul a, #sidebar ul a:visited {
	color: white;
}
#sidebar .date {
	font-weight: bold;
}
#searchform .text {
	width: 196px;
	border: 1px solid #45bac0;
}
#searchform .searchbutton {
	text-align: right;
	margin-top: 4px;
}
#searchform .btn {
	border: 1px solid #45bac0;
	background-color: #256290;
	color: white;
}
#sidebar .motm-image {
	float: right;
	margin: 0 30px 0 20px;
}
#sidebar p.more {
	clear: right;
	margin: 0 30px 0 0;
	text-align: right;
}
#sidebar p.more a, #sidebar p.more a:visited {
	color: white;
	background-image: url (img/more-bullet.gif);
	background-repeat: no-repeat;
	background-position: center left;
	padding-left: 14px;
}

#sidebar2 {
	float: left;
	width: 159px;
	border-top: 1px solid #b9d2e3;
	border-left: 1px solid #b9d2e3;
	border-bottom: 1px solid #b9d2e3;
	background-color: white;
	color: black;
	margin: 0;
	padding: 0;
}
#sidebar2 .inner {
	margin: 10px;
}
#sidebar2 p {
	font-size: 90%;
	color: #666;
}
#sidebar2 a, #sidebar2 a:visited {
	color: #245185;
	font-weight: bold;
}
#sidebar2 h3 {
	color: #245185;
	padding-bottom: .2em;
	border-bottom: 1px solid #b9d2e3;
	font-size: 110%;
}
#nav {
	list-style: none;
	margin: 0;
	padding: 0;
}
#nav li {
	border-bottom: 1px solid #b9d2e3;
	padding: 0.4em 0 0.2em 0;
	font-size: 90%;
}
#nav li a, #nav li a:visited {
	text-decoration: none;
	color: #245185;
	font-weight: normal;
}

#bloglatest h4 {
	color: #ff4e00;
	font-size: 100%;
	font-weight: bold;
}
#blog {
	margin: 0;
	padding: 0 0 0 20px;
	list-style: url(img/more-bullet.gif);
}
#blog li {
	font-size: 90%;
	padding-bottom: .5em;
	color: #ff4e00;
	font-weight: bold;
}

#newsletterform .text {
	width: 135px;
	border: 1px solid #45bac0;
}
#newsletterform .searchbutton {
	text-align: right;
	margin-top: 4px;
}
#newsletterform .btn {
	border: 1px solid #45bac0;
	background-color: #256290;
	color: white;
	font-size: 80%;
}

#footer {
	width: 100%;
	border-top: 1px solid #b9d2e3;
	border-bottom: 1px solid #b9d2e3;
	margin-top: 10px;
	clear: both;
}
#footer p {
	font-size: 90%;
	color: #256290;
	margin: 0;
	padding: .2em 0 0.2em 0;
}
Hab im Stylesheet mal alles drin gelassen und aus dem HTML-Teil den Inhalt geloescht (der Übersichtlichkeit halber). Hoffe ihr koennt damit etwas anfangen. Ich komm hier einfach nicht mehr weiter. Schon mal vielen Dank für Eure Hilfe.

Gruesse
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 05.04.2010, 18:13
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.135
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

Bitte lesen: http://xhtmlforum.de/40080-f-r-frage...twortende.html

Dann einen Link zum Problem liefern

Gruß Manfred
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 05.04.2010, 18:25
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.04.2010
Beiträge: 37
didb befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Manfred62 Beitrag anzeigen
Bitte lesen: http://xhtmlforum.de/40080-f-r-frage...twortende.html

Dann einen Link zum Problem liefern

Gruß Manfred
Link zur Seite
Mit Zitat antworten
  #4 (permalink)  
Alt 05.04.2010, 18:39
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Float lässt nachfolgende Inhalte ausweichen, nicht vorhergehende. Bei diesem Aufbau musst du die Reihenfolge ändern.

Welches Buch benutzt du, um CSS zu lernen? Falls es darin nichts zu Float-Layouts gibt, eine Lektüreempfehlung.
Mit Zitat antworten
  #5 (permalink)  
Alt 05.04.2010, 18:45
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.04.2010
Beiträge: 37
didb befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von fricca Beitrag anzeigen
Float lässt nachfolgende Inhalte ausweichen, nicht vorhergehende. Bei diesem Aufbau musst du die Reihenfolge ändern.

Welches Buch benutzt du, um CSS zu lernen? Falls es darin nichts zu Float-Layouts gibt, eine Lektüreempfehlung.
Vielen vielen Dank! War echt zum Verzweifeln.
Mit Zitat antworten
  #6 (permalink)  
Alt 05.04.2010, 18:47
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.135
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

Hallo

Na, das kann nicht funktionieren.

Du gibst #main 100% (relative) Breite, von was? Der #wrapper hat keine Breite?
Die anderen divs haben dann feste Werte (Breite und Abstände).

Ich würd das ganze erstmal mit festen Breiten aufbauen.
Und die drei Spalten nebeneinander floaten.

Danach kannst ja auf flexibles Layout umstellen.

Gruß Manfred
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
Css 3 Seiten Layout will net so :) nova_rs CSS 1 30.03.2010 15:54
Joomla und CSS Layout ohne Tabellen ... MoYo CSS 2 15.02.2007 10:19
CSS Layout - ist das so möglich? berlina CSS 18 12.02.2007 21:55
Layout: Tabelle -> CSS | ohne Schönheitsfehler? Knickedi CSS 20 05.08.2006 02:18
CSS Layout mit abgerundeten Ecken dimension CSS 3 17.04.2005 18:05


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