Barrierefreies Design zentrieren

Pillendreher · Beitrag von **Pillendreher** » Di 7. Jun 2005, 09:06

Hallöchen,

also beim schreiben der einer seite bin ich auf ein Problem gestoßen..

Und zwar soll das layout barrierefrei, also über css gestaltet werden.

Im Grunde ist das ganze fertig, die "boxen" sind alle mit den richtigen abständen zueinander. nun würde ich das ganze gerne zentrieren. ich dachte mir, dass könne ich ganz gut machen indem ich einen style

Code: Alles auswählen

#center_me{align:center;}

anlege und dann im layout die "boxen" mit

Code: Alles auswählen

<div id="center_me>boxen</div>

einrahme...

aber pustekuchen funzt net.

Woran kann es liegen? Kann es an der absoluten positionierung der styles liegen?!?

HELP I NEED SOMEBODY HELP....

moshpart · Beitrag von **moshpart** » Di 7. Jun 2005, 09:13

Hallo,

vielleicht hilft Dir das:

.inhalt {
width:713px;/*nur ein Beispiel*/
margin:0px auto;
}

Die Boxen baust du dann in <div class="inhalt"> ein.

Grüße
Tim

Beitrag von **Halchteranerin** » Di 7. Jun 2005, 09:19

wozu ist das "#" vor dem center_me gut?

Pillendreher · Beitrag von **Pillendreher** » Di 7. Jun 2005, 09:20

Code: Alles auswählen

#redstripe {
	width:100%;/*hier gibt es auch ein problem, denn links ist der rote streifen bündig, aber rechts bleibt ein abstand zum rand*/
         top:10px;
         left:0px;
         margin:0px;
         padding:0px;
         height:70px;
         background-color:#F79393;
         position:absolute;
	z-index:-1;
}
#center{
width:798px;/*nur ein Beispiel*/
margin:0px auto;
}
#center_me {
	align:center;
         width:798px;
         height:492px;
}

#oben {
	background-color: #CD0000;
         align:center;
         top:10px;
         left: 70px;
	width: 798px;
         height:70px;
	position:absolute;
	z-index:1;
         text-align:left;
         color:#E9DDDD;
         font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
         font-size:25px;

}
#grau {
	background-color: #E9DDDD;
         align:center;
         top:60px;
         left: 227px;
	width: 641px;
         height:20px;
	position:absolute;
         text-align:right;
         font-weight:bold;
	color:#CD0000;
	z-index:2;
         font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}
#left {
	background-color: #E9DDDD;
         align:center;
         top:80px;
         left: 70px;
	width: 157px;
	height:100%;
	position:absolute;
         text-align:left;
         font-size:12px;
	color:#CD0000;
	z-index:1;
         font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

#inhalt {
	background-color: #ffffff;
         align:center;
         top:92px;
         left: 235px;
	width:470px;
	height:100%;
	position:absolute;
         text-align:left;
	font-weight:bold;
         font-size:12px;
	color:#CD0000;
	z-index:1;
         font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

#rightred {
	background-color: #CD0000;
         align:center;
         top:90px;
         left: 711px;
	width: 157px;
	height:20px;
	position:absolute;
         text-align:left;
         font-weight:bold;
	color:#CD0000;
	z-index:1;
         font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

#right {
	background-color: #E9DDDD;
         align:center;
         top:110px;
         left: 711px;
	width: 157px;
	height:100%;
	position:absolute;
         text-align:left;
         font-weight:bold;
	color:#CD0000;
	z-index:1;
         font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

So sieht der CSS-Style aus...... ist bisher nur zum austesten gewesen, aber auch mit deinem vorschlag funktioniert es nicht

moshpart · Beitrag von **moshpart** » Di 7. Jun 2005, 09:26

Überschreib nochmal den Body-Tag

body {
text-align:center;
font-size:1em;
/*font-family: sans-serif,Verdana,Helvetica;*/
}

Ich würde aus abosoulte=relative machen. Normalerweise(war zumindest bei mir der Fall) zerstören die Browser dein Layout wenn du das ganze Fenster zentrierst.

@Halchteranerin mit dem "#" kannst du dein Style in deine html-Tags einbinden. Also z.B.: #erstes wäre dann in html <div id="erstes">. Mit .erstes erzeugst du eine Klasse also <div class="erstes">

Pillendreher · Beitrag von **Pillendreher** » Di 7. Jun 2005, 09:42

ja gut mit relative wird es dann zentriet.

nur bekomm ich das nicht so ganz hin

www.zeimke.com/hoebrink/hoebrink.html

so soll es aussehen, nur zentriert. und wenn ich realtive nutze schaff ich es nciht, dass z.B. der grau balken mit der domain über dem roten balken liegt..

Beitrag von **Halchteranerin** » Di 7. Jun 2005, 09:46

moshpart hat geschrieben: @Halchteranerin mit dem "#" kannst du dein Style in deine html-Tags einbinden. Also z.B.: #erstes wäre dann in html <div id="erstes">. Mit .erstes erzeugst du eine Klasse also <div class="erstes">

Aha, danke fuer die "Aufklaerung". Das mit dem Punkt wusste ich, das mit # noch nicht.

moshpart · Beitrag von **moshpart** » Di 7. Jun 2005, 10:10

Versuch die Graueleiste mit diesem Befehl zu positionieren:

#grau { position:relative; top:-99px; left:329px; width:86px; height:24px; z-index:0; }

Die Werte mußt du noch anpassen.

i-fekt · Beitrag von **i-fekt** » Di 7. Jun 2005, 10:39

Um Himmels Willen, lass bloß an solchen Stellen position-Angaben weg. Die sind ziemlicher Mist und völlig unnötig. Oben steht doch wie es geht.

Code: Alles auswählen

html,body {
 text-align:center;
 margin: 0;
 padding: 0;
}

Code: Alles auswählen

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

Deine position-Angaben und die z-index-Teile schmeisst du am besten sofort raus. Ach ja, es gibt in CSS kein Element "align".

Zum zentrieren brauchst du keinerlei Positionsangaben, bei Fragen kann ich da auf jeden Fall helfen.

Pillendreher · Beitrag von **Pillendreher** » Di 7. Jun 2005, 10:40

danke für den tipp, das zentrieren funktionier,

nur verschieben sich die frames, wenn man z.B. das Browserfenster ändert

Pillendreher · Beitrag von **Pillendreher** » Di 7. Jun 2005, 10:45

Craxx hat geschrieben:Um Himmels Willen, lass bloß an solchen Stellen position-Angaben weg. Die sind ziemlicher Mist und völlig unnötig. Oben steht doch wie es geht.
Code: Alles auswählen
html,body {
 text-align:center;
 margin: 0;
 padding: 0;
}
Code: Alles auswählen
div#center_me {
 text-align: left;
 width: 800px;
 margin: 0 auto;
}
Deine position-Angaben und die z-index-Teile schmeisst du am besten sofort raus. Ach ja, es gibt in CSS kein Element "align".

Zum zentrieren brauchst du keinerlei Positionsangaben, bei Fragen kann ich da auf jeden Fall helfen.

ok, ich bin ja xhtml neuling

und die Positionierung der einzelnen boxen dann über top: , left: oder über margin?

Pillendreher · Beitrag von **Pillendreher** » Di 7. Jun 2005, 10:53

und wieso den z-index raus? wie kann ich die boxen denn dann überlappen lassen?

i-fekt · Beitrag von **i-fekt** » Di 7. Jun 2005, 11:04

Du musst eigentlich nur ein DIV aussenrum machen welches zentriert ist, darin musst du nichts mehr zentrieren.

Dein Problem sind die ganzen Positionierungen, die würde ich alle rausschmeissen und wenn das http://www.zeimke.com/hoebrink/hoebrink.html deine Seite ist brauchst du die auch absolut gar nicht. Die z-index brauchst du eigentlich ebenfalls nicht, das soll denn überlappen?

Pillendreher · Beitrag von **Pillendreher** » Di 7. Jun 2005, 11:09

zum bleistift muss der graue balken wo "www.warum-hoebrink.de" drinsteht über dem roten balken liegen (mit dem Text "Warum Höbrink!?")

ebenso muss der hellrote balken, der über die gesamte breite verläuft im hintergrund sein.

verstehst du?

Die Positionierung der einzelnen Divs mach ich dann z.B. mit
#inhalt{margin:-50px,30px,100px,33px;} nur als beispiel

i-fekt · Beitrag von **i-fekt** » Di 7. Jun 2005, 11:30

Die einzige Positionierung die du brauchst (wenn du dir 1 DIV sparen willst) ist der Header. Da machst du ein DIV mit dunkelrotem hintergrund und position: relative. Dann darin ein DIV mit Position: absolte und bottom: 0 und right: 0. mehr nicht.

Alle anderen fongenden DIVs auf deiner Seite bruachen keine Positionierung mehr.

Ich würde alles ohne Positionierungen machen.