zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Layout Frage von Anfänger

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 22.04.2009, 12:49
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.04.2009
Beiträge: 8
Ramira befindet sich auf einem aufstrebenden Ast
Standard Layout Frage von Anfänger

Hallo,

ich bin absoluter css-Laie, müsste aber dringend wissen, wie man das Layout so definiert, das der eigentliche Homepageinhalt mittig steht und links und rechts der gleiche Abstand ist.
Also das soll dann so aussehen wie zum Beispiel hier

Danke für jeden Tipp
Ramira

Geändert von Ramira (22.04.2009 um 13:18 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 22.04.2009, 15:41
Neuer Benutzer
neuer user
 
Registriert seit: 22.04.2009
Ort: Berlin
Beiträge: 14
Gideon befindet sich auf einem aufstrebenden Ast
Standard

Einfach um den gesamten Inhalt der Seite einen div legen und als id den Namen inhalt vergeben.
Im body der Seite also:

<div id="inhalt>

Hier kommt der gesamte Inhalt der Seite rein.

</div>

Im CSS Bereich folgendes notieren:

div#inhalt
{
margin: 0 auto;
}

Wenn die Breite eingeschränkt werden soll der Inhalt wieder an der linken Seite beginnen soll folgendes notieren:

div#inhalt
{
margin: 0 auto;
width:800px;
text-align: left;
}
Hier wurde der Anzeigebereich auf eine Breite von 800 Pixeln reduziert.

Hoffe es hilft.

Gideon
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 22.04.2009, 19:57
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.04.2009
Beiträge: 8
Ramira befindet sich auf einem aufstrebenden Ast
Standard

Hallo Gideon,

ja genau das meinte ich, aber leider klappt es nicht.
Komischer Weise wird die Seite im Firefox so angezeigt, im IE aber nicht, sondern linksbündig.

Hier mal meine css............vielleicht beißt sich da ja etwas

* {
margin: 0;
padding: 0;
}

body {
background: #2a3742 url(images/bg.jpg) repeat-x top center;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 20px;
color: #eee;
}

a {
text-decoration: none;
color: #c0ffff;
}
a:hover {
text-decoration: underline;
color: #A3D74F;
}

#wrap {
margin: 0 auto;
width: 800px;
}

#header {
height: 200px;
background: #2a3742 url(images/bgtest2.jpg) no-repeat;

}
#header h1 {
font-size: 28px;
letter-spacing: -1px;
padding: 35px 0 0 20px;
color: #fff;
}
#header h1 a {
color: #fff;
text-decoration: none;
font-weight: 100;
letter-spacing: -2px;
}
#header h1 a:hover {
color: #A3D74F;
}
#header h2 {
font-size: 19px;
color: #e30000;
padding: 5px 0 0 20px;
letter-spacing: -1px;
font-weight: 100;
}

h2 {
color: #f2d376;
}

#content {
padding: 0 20px;
}

.right {
float: right;
width: 530px;
text-align: justify;
padding-top: 20px;
font-size: 14px;
}
.right h2 {
font-size: 18px;
font-weight: 100;
height: 30px;
line-height: 30px;
}
.right h2 a {
text-decoration: none;
color: #f2d376;
}
.right h2 a:hover {
color: #fff;
}

.left {
float: left;
width: 260px;
padding-top: 10px;
}
.left h2 {
margin: 10px 0 0 0;
padding-left: 10px;
height: 30px;
line-height: 30px;
color: #fff;
font-size: 13px;
}
.left ul {
padding: 10px 0 15px 3px;
list-style-type: none;
}
.left ul li a {
text-decoration: none;
font-weight: 600;
font-size: 13px;
}
.left ul li a:hover {

}

#footer {
text-align: center;
font-size: 11px;
color: #eee;
margin-top: 40px;
border-top: 1px dotted #A2D84C;
padding-top: 10px;
padding-bottom: 10px;
}
#footer a { color: #eee; }
#footer a:hover { color: #aaa; }

Wie man sieht ist es ein free css template, welches ich gern an meine Bedürfnisse anpassen möchte. (wrap ist bei mir der Inhalt
Mit Zitat antworten
  #4 (permalink)  
Alt 22.04.2009, 20:22
Neuer Benutzer
neuer user
 
Registriert seit: 24.03.2009
Beiträge: 14
uwehamburg befindet sich auf einem aufstrebenden Ast
Standard

für IE musst du den #wrap {text-align: center} mit um es zu zentrieren.
Mit Zitat antworten
  #5 (permalink)  
Alt 22.04.2009, 20:41
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.04.2009
Beiträge: 8
Ramira befindet sich auf einem aufstrebenden Ast
Standard

Nein, das funktioniert nicht, dann zentriert er mir den Text, aber die Bilder bleiben links stehen.
Mit Zitat antworten
  #6 (permalink)  
Alt 22.04.2009, 20:47
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 14.03.2007
Ort: Bad Schmiedeberg
Beiträge: 1.395
regloh wird schon bald berühmt werden
Standard

Sorry. War zu voreilig

(Beitrag leer editiert)

Edit2: Hmm - was ist denn nun genau falsch. Ich kann nichts falsches erkennen. Außer, dass es im IE6 etwas verrutscht.

Geändert von regloh (22.04.2009 um 20:50 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 22.04.2009, 21:48
Neuer Benutzer
neuer user
 
Registriert seit: 22.04.2009
Ort: Berlin
Beiträge: 14
Gideon befindet sich auf einem aufstrebenden Ast
Standard

Der gute alte IE spinnt also wieder, ergänze deine Formatierung für den body:

body {
background: #2a3742 url(images/bg.jpg) repeat-x top center;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 20px;
color: #eee;
}

wie folgt:

body {
background: #2a3742 url(images/bg.jpg) repeat-x top center;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 20px;
color: #eee;
padding: 0;
text-align: center;
}

Dadurch wird der IE gezwungen alles was sich im body befindet zentriert darzustellen.

Den wrap:

#wrap {
margin: 0 auto;
width: 800px;
}

ergänzt du wie folgt:

#wrap {
margin: 0 auto;
width: 800px;
text-align: left;
}

Alles was im wrap steht wird linksbündig ausgerichtet.

Gideon
Mit Zitat antworten
  #8 (permalink)  
Alt 22.04.2009, 22:03
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.04.2009
Beiträge: 8
Ramira befindet sich auf einem aufstrebenden Ast
Beitrag

Genau! das wars

padding: 0;
text-align: center;

im body und schon ging es........
puuuh schwere Geburt für mich

DANKE !!!!!!

nur komisch das ich bereits eine ähnliche Seite erstellt habe, bei der ich díesen Zusatz im body nicht brauchte
Mit Zitat antworten
  #9 (permalink)  
Alt 22.04.2009, 22:12
Neuer Benutzer
neuer user
 
Registriert seit: 22.04.2009
Ort: Berlin
Beiträge: 14
Gideon befindet sich auf einem aufstrebenden Ast
Standard

Gern geschehen! Ich hab auch mal angefangen und weiß wie schwer es ist.

Gideon
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 22.04.2009, 22:24
Neuer Benutzer
neuer user
 
Registriert seit: 22.04.2009
Ort: Berlin
Beiträge: 14
Gideon befindet sich auf einem aufstrebenden Ast
Standard

@uwehamburg
Zitat:
Zitat von uwehamburg Beitrag anzeigen
für IE musst du den #wrap {text-align: center} mit um es zu zentrieren.
Wenn du das #wrap {text-align: center} so geschrieben hättest #wrap {text-align: center;}, hätte der wrap zumindest den Inhalt zentriert dargestellt. Ohne ; macht er null.

Gideon
Mit Zitat antworten
Sponsored Links
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
Layout selbst coden - Hilfe ! kgsbm CSS 3 25.03.2008 20:25
Layout matwic CSS 2 12.03.2008 11:58
Kleine Anfänger Frage - Links zu weit unten bzw. Farbwechsel -jeseiX- CSS 4 03.06.2007 13:53
Probleme mit Layout kruemelchen26 CSS 0 15.05.2007 23:40
Frage zu CSS Layout ignore CSS 1 07.05.2007 18:02


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:58 Uhr.