zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Divs mittig in Browser zentrieren

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 11.02.2008, 18:23
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.02.2008
Beiträge: 23
doublemc befindet sich auf einem aufstrebenden Ast
Standard Divs mittig in Browser zentrieren

Hallo zusammen,

mein Prob. ist das ich nicht weiß wie man ein Layout, unabhängig der Monitor Größe zentriert.

Ich arbeite mit Dreamweaver, ich füge z.B. ein div von 800*600px ein und dort noch andere divs, für navi, header, text, ect..

Den ersten Div zu zentrieren ist kein prob., aber die anderen divs!?

Den ersten div zentriere ich so:

#apDiv1 {
position:absolute;
left:50%;
top:50px;
width:800px;
height:600px;
visibility:visible;
margin-left:-400px;
z-index:1;
background-color: #CCCCCC;
}

Wie mache ich das jetzt, das die anderen "apDiv2,..3,..4ect. in dem ersten div drin bleiben?

Vielen Dank im voraus.

Gruß Olli
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 11.02.2008, 18:27
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Nie per pos. zentrieren (siehe schmaler Viewport)! Lege ein div um alle übrigen Elemente und zentriere es mit margin: 0 auto; (bzw. text-align für Quirks-IE).
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 11.02.2008, 18:43
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.02.2008
Beiträge: 23
doublemc befindet sich auf einem aufstrebenden Ast
Standard

Sorry, aber verstehe das nicht so ganz.

- nicht an Position, woran dann?
- einen Div um die anderen? Habe ein div um die anderen herumgezogen und wenn ich den zentriere, bleiben die anderen auf positon!?

Sorrx, aber bin anfänger, bitte um simple erklärungen...Danke.
Mit Zitat antworten
  #4 (permalink)  
Alt 11.02.2008, 18:52
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.02.2008
Beiträge: 23
doublemc befindet sich auf einem aufstrebenden Ast
Standard

aha, mit den divs glaube habe ich verstanden, meinst du das so:

<div id="apDiv4">

<div id="apDiv1"></div>
<div id="apDiv2"></div>
<div id="apDiv3"></div>

</div>

aber mit der Position ect....
Mit Zitat antworten
  #5 (permalink)  
Alt 11.02.2008, 19:14
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Genau, und das äußere div bekommt jetzt seine Breite sowie margin: 0 auto;. Und falls der IE nicht mitspielt (z.B. im Quirksmode durch Doctype, siehe FAQ, oder durch XML-Deklaration vor dem Doctype), bekommt body noch text-align: center;.
Mit Zitat antworten
  #6 (permalink)  
Alt 11.02.2008, 19:32
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.02.2008
Beiträge: 23
doublemc befindet sich auf einem aufstrebenden Ast
Standard

Danke für deine schnelle hilfe.

Ich hoffe ich bekomme das hin.

Weiss zwar nicht genau wie du das mit dem margin ect. meinst, aber ich probier mal.

Probieren geht ja bekanntlich über Studieren
Mit Zitat antworten
  #7 (permalink)  
Alt 12.02.2008, 07:47
Benutzerbild von Rupper
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 16.01.2008
Ort: Obersöchering
Beiträge: 183
Rupper wird schon bald berühmt werden
Standard

hi...

das erste div könnte zum beispiel der content sein... diesen zentrierst du, indem du margin die werte 0 auto gibst. --> mit margin legst du den aussenabstand deines content fest.
je nachdem, wie viele werte du angibst, ändert sich die reihen folge:

margin: 0 auto; (oben und unten + rechts und links)
margin: 0 auto 0; (oben + rechts und links + unten)
margin: 0 auto 0 auto; (oben + rechts + unten + links)

gibst du nun margin: 0 auto; gibst du dem entsprechendem div element einen "automatischen aussenabstand links und rechts und zentrierst somit"...

der code für den content, in dem deine anderen divs enthalten sind, könnte dann z.b. so aussehen:


#content{
width: 800px;
height: 950px;
margin: 0 auto;
backgraound-color: #808080;
}

...hoffe ich konnte dir weiter helfen.
denke das meinte auch heiko.

lg
der rupper
__________________
Alles was man weiß, wird nur dann wertvoll wenn man es mit anderen teilt ...

Geändert von Rupper (12.02.2008 um 07:51 Uhr)
Mit Zitat antworten
  #8 (permalink)  
Alt 12.02.2008, 10:47
Benutzerbild von pmmueller
Autor von "Little Boxes"
XHTMLforum-Mitglied
 
Registriert seit: 18.01.2005
Ort: Groningen (Niederlande)
Beiträge: 292
pmmueller sorgt für eine eindrucksvolle Atmosphärepmmueller sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von doublemc Beitrag anzeigen
Ich arbeite mit Dreamweaver, ich füge z.B. ein div von 800*600px ein und dort noch andere divs, für navi, header, text, ect..
Ich nehme mal an, dass du in Dreamweaver in der "Entwurfsansicht" ohne Quelltext arbeitest und "Ebenen" einfügst?

Das ist zwar anfangs verlockend einfach, bringt dich aber nicht wirklich weiter, denn Dreamweaver fügt für jede "Ebene" ungefragt eine absolute Positionierung ein.

Zitat:
Zitat von doublemc Beitrag anzeigen
Wie mache ich das jetzt, das die anderen "apDiv2,..3,..4ect. in dem ersten div drin bleiben?
Da wirst du um zwei Dinge auf Dauer nicht drumrum kommen:

1. Verstehen, wie CSS funktioniert, insbesondere so Begriffe wie Float, Positionierung, und (Document) Flow sind dabei wichtig.

2. Im Quelltext ("Code-Ansicht") arbeiten tut danach nicht mehr weh
__________________
HTML & CSS lernen: »Einstieg in CSS« + »Flexible Boxes« | CMS lernen: »Websites erstellen mit Contao«
Mit Zitat antworten
  #9 (permalink)  
Alt 13.02.2008, 10:45
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.02.2008
Beiträge: 23
doublemc befindet sich auf einem aufstrebenden Ast
Standard

Danke für eure Hilfe,

werde es probieren.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 13.02.2008, 22:26
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.02.2008
Beiträge: 23
doublemc befindet sich auf einem aufstrebenden Ast
Standard

Danke, hat alles geklappt!


ps.: ein bisschen mach ich schon im code, nicht alles über die oberfläche

bin noch am lernen ...


Vielen Dank für alle Beiträge
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
DIV Layout mit CSS: Zentrieren eines Divs und links und rechts auffüllen. darkwave CSS 5 07.04.2011 14:11
n Div's in eine Zeile Mustangore CSS 9 20.08.2009 16:19
Divs zentrieren Seraid (X)HTML 12 11.10.2007 12:46
div in tabele mittig zentrieren blue_devil86 CSS 4 28.07.2007 13:12
In einem div, 2 divs mittig ausrichten heohni CSS 1 20.07.2007 15:51


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