13.12.2010, 13:27
|
|||
|
|||
div layout zentrieren
hi,
ich habe mehrer seiten gebaut in denen ich mit negativen div margin die seite zentriert hatte... klappt zwar ganz gut nur bei kleinen monitoren ist dann halt auch mal die seite unbrauchbar weil die navigation aus dem bild verschwindet und auch kein scroll balken auftaucht... ich habe mich jetzt mal mit dem befehl margin-left: auto; margin-right: auto; befast... klappt soweit zwar das mein #main div zentriert ist... nur halten sich die inneren layer nicht an den befehl... wie kann ich die denn jetzt daran binden? wenn ich den befehl auf alle div layer anwende dann tauch die divs nur unter einander auf... derzeitige situation mit negativen divs zu finden unter: webseite Code:
#Main {
position:absolute;
left:50%;
margin-left:-455px;
top:50%;
margin-top:-280px;
width:910px;
height:560px;
z-index:2;
}
#left{
position:absolute;
left:0px;
top:151px;
width:149px;
height:380px;
border:none;
z-index:2;
overflow: none;
}
#top{
position:absolute;
left:0px;
top:0px;
width:910px;
height:151px;
border:none;
z-index:2;
overflow: none;
}
#inhalt {
background-color: #FFFFFF;
position:absolute;
left:149px;
top:151px;
width:714px;
height:375px;
z-index:3;
padding-left: 10px;
padding-top: 5px;
overflow: auto;
}
#right{
position:absolute;
left:875px;
top:151px;
width:35px;
height:409px;
border:none;
z-index:2;
overflow: none;
}
#bottem{
position:absolute;
left:0px;
top:531px;
width:875px;
height:29px;
border:none;
z-index:2;
overflow: none;
}
|
| Sponsored Links |
|
13.12.2010, 13:37
|
||||
|
||||
|
Hm, es wäre interessant einen Zustand zu sehen, der zeigt wie es ist, wenn Du es wie beschrieben machst.
Mit Negativmargins zu arbeiten ist so nicht wirklich sinnvoll. Möglichkeiten und Ansätze: CSS vertical center using float and clear Centering (horizontally and vertically) an image in a box
|
| Sponsored Links |
|
13.12.2010, 13:38
|
|||
|
|||
|
Du machst einen typischen Anfängerfehler: Du glaubst, alles mit absoluter Positionierung und festen Maßen festnageln zu müssen.
Lesetipp: Teil 1 kostenlos online lesen - Little Boxes - Webseiten gestalten mit HTML und CSS (von Peter Müller) Dort erfährst du auch, die du absolut positionierte Elemente an anderen Elementen ausrichten kannst. Aber glaub mir, du wirst die abs. Pos. gar nicht brauchen.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken
|
|
13.12.2010, 14:03
|
|||
|
|||
|
hemmm...
das ist leider schlecht da diese seite auch die variante ist die der kunde sieht.... also wenn ich das jetzt zerschieße ist das blöde... also mein problem besteht darin das wenn ich den ersten div mit :auto zentriere, und dem zweiten inneren div mit festen wert angebe orientiert dieser sich nicht mehr am #main div sonder eben ohne abhänigkeit des darüberliegendem frame.... heist im klartext das die seite links oben ist aber der main frame zentriert ohne inhalte...
|
|
13.12.2010, 14:06
|
|||
|
|||
|
Zitat:
Zitat:
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken
|
|
13.12.2010, 15:05
|
||||
|
||||
|
Zitat:
 Du "verkaufst" Dinge, die Du nicht verstehst?
__________________
XHTML-Valid-Websites.com | CookielessDomain.com | Stop-Supporting-IE6.com if (browser == IE) { sucks(big); } else { nice(site); }
|
|
13.12.2010, 15:39
|
||||
|
||||
|
Ach so
 Na auf jeden Fall bist Du bei fricca in guten Händen  Viel Erfolg.
__________________
XHTML-Valid-Websites.com | CookielessDomain.com | Stop-Supporting-IE6.com if (browser == IE) { sucks(big); } else { nice(site); }
|
| Sponsored Links |
|
13.12.2010, 15:43
|
|||
|
|||
|
Hm.
Eigentlich wollte ich nicht mehr dazu schreiben, weil ich hoffte, der Little-Boxes-Link trägt zur Erleuchtung bei. Leider hast du noch nicht verstanden, wie modernes Webdesign funktioniert. Du klebst ein paar Div-Elemente abs. positioniert aneinander und übereinander. Das reicht nicht. Was du zuerst (wieder) lernen musst, ist sinnvolles HTML zu schreiben. Sinnvoll heißt, die Elemente ihrer Bedeutung gemäß zu verwenden. Da gibt es dann Überschriften, Textabsätze, Listen (Navigation!) u.v.m. Nichts davon findet sich in deinem Code. Lesestoff: Vorsprung durch Webstandards | Retro-Coding: Semantischer Code ist der Anfang von gutem Design Erst wenn der Inhalt korrekt ausgezeichnet ist hat es Sinn, mit einem Layout zu beginnen. Grafische Elemente werden dann als Hintergrundbilder in die Elemente eingebunden, die man bereits für die Auszeichnung seines Inhalts im Code stehen hat. Ins HTML gehören nur Bilder als img-Elemente, die inhaltlich relevant sind. Niemals Ziergrafiken. (Absolute) Positionierung braucht man für ein Layout nur sehr selten. Zunächst sollen Elemente normal fließen. Dann gibt es Float, um sie nebeneinander zu stellen. Was man ebenfalls nicht braucht, sind feste Höhen für Elemente, die Text enthalten. Diese festgezimmerten Größen gab's früher bei Frame-Layouts. Nicht mehr zeitgemäß. All das kannst du in Little Boxes lernen. Glaub mir, es lohnt sich. [Ja, ich weiß, dass das alles hart klingt. Aber so ist das manchmal mit der Wahrheit ...]
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken
|
| Sponsored Links |
 |
| Themen-Optionen | |
| Ansicht | |
|
|
Ä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 13:11 |
| div zentrieren in div... | kostonstyle | CSS | 4 | 25.02.2011 13:44 |
| DIV Text vertikal zentrieren | andrej75 | CSS | 0 | 12.08.2009 14:14 |
| ul in div zentrieren | MrMister | CSS | 8 | 05.07.2009 22:52 |
| Untermenü im IE | nici | CSS | 10 | 22.06.2009 21:19 |
Linear-Darstellung
