Barrierefreies Design zentrieren

Pillendreher · Beitrag von **Pillendreher** » Di 7. Jun 2005, 13:51

ja aber wie bekomm ich es denn hin, dass die boxen dann genau an der stelle sind wo ich sie haben will?

Pillendreher · Beitrag von **Pillendreher** » Di 7. Jun 2005, 14:36

Craxx wunderbesten dank...

www.zeimke.com/hoebrink/hoebrink.html

aber zwei fragen habe ich noch....
wie regel ich es, dass ich von der Navigation z.B. direkt in den <div id="inhalt"> verlinke, so dass die seite nciht immer neu geladen werden muss, sondern nur der "frame" ?

und irgendwie wird die seite zu lang..... nach unten hin, obwohl dort gar kein inhalt mehr sein sollte.... wie kann ich das hinbekommen?

Code: Alles auswählen

html,body {
 text-align:center;
 margin: 0;
 padding: 0;
}
#redstripe {
   	width:100%;
         margin:30px,0px,0px,0px;
         padding:0px;
         position:relative;
         height:70px;
         background-color:#F79393;
}

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

#oben {
   background-color: #CD0000;
	margin:0px,0px,0px,0px;
	width: 780px;
         height:88px;
         position:relative;
         text-align:left;
         color:#E9DDDD;
         font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
         font-size:25px;

}
#grau {
	background-color: #E9DDDD;
         bottom:0px;
         right:0px;
	width:622px;
	height:20px;
         position:absolute;
         text-align:right;
         font-size:14px;
         font-weight:bold;
	color:#CD0000;
         font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}
#bgcontent{
	background-color: #CD0000;
	bottom:0px;
         height:83%;
	width: 780px;
         position:relative;
}
#left {
   background-color: #E9DDDD;
         top:0px;
         left: 0px;
	width: 158px;
	height:470px;
         position:absolute;
         text-align:left;
         font-size:12px;
   color:#CD0000;
         font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

#inhalt {
   background-color: #ffffff;
         top:0px;
         left: 158px;
	width:460px;
	height:470px;
	position:absolute;
         text-align:left;
         padding:5px;
         overflow:auto;
   	font-weight:bold;
         font-size:12px;
   	color:#CD0000;
         font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

#rightwhite {
	background-color: #ffffff;
	position:absolute;
         top:0px;
         left:618px;
   	width: 162px;
   	height:20px;
         text-align:left;
         font-weight:bold;
   	color:#CD0000;
         font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

#right {
	background-color: #E9DDDD;
	position:absolute;
	top:40px;
	left: 618px;
	width: 162px;
	height:430px;
	text-align:left;
	font-weight:bold;
	color:#CD0000;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

dangge schon im voraus

i-fekt · Beitrag von **i-fekt** » Di 7. Jun 2005, 15:24

Dein Topic heißt ja "barrierefrei...". Da musst du die Seite immer neu laden, Frames sind nicht Barrierefrei. Ausserdem reicht es, die font-family 1x in html, body im CSS anzugeben. Die Schriftgröße darf nicht mit px angegeben werden, sondern mit % oder em.

Mach mal ein DIV um alles! Also nach <body> und vor </body>. Diesem richten wir dann zentriert aus.

Pillendreher · Beitrag von **Pillendreher** » Di 7. Jun 2005, 21:54

Craxx vielen Dank! Du hast mir die augen quasi geöffnet.

zu sehen ist mein persönliches Meisterwerk nun unter www.hoebrink.zeimke.com

Vielen dank nochmal, du hast mir sehr geholfen!

i-fekt · Beitrag von **i-fekt** » Di 7. Jun 2005, 23:50

Immer wieder gerne.

Pillendreher · Beitrag von **Pillendreher** » Mi 8. Jun 2005, 15:09

eine sache hätt ich da noch, hast du evtl eine gute CSS Referenz?!? Also SelfHTML hatte mir jetzt bei dem Problem mit CSS nciht so besonders geholfen?!?!

andrej · Beitrag von **andrej** » Mi 8. Jun 2005, 23:53

@Pillendreher
Googeln hilft

www.css4you.de <- das sollte eigentlich reichen

Aixtraweb · Beitrag von **Aixtraweb** » Mo 8. Aug 2005, 20:41

[error]

Aixtraweb · Beitrag von **Aixtraweb** » Mo 8. Aug 2005, 20:43

Hallo,

ich habe jetzt mal meine Seite mit diesem Thread versucht zu zentrieren, aber leider ohne Erfolg! Ziel: Der weisse Rand soll wie ein Passepartout um das Layout liegen. Bei einer Auflösung von 800x600 sollte das Layout formatfüllend sein und bei größeren Auflösungen z.B. bei 1024x768 sollte das Layout "browserfenstermittig" sein. Und beim scrollen sollte das Menue und der Butler eigentlich stehen bleiben und nicht mit nach oben wegscrollen.

Erstmal der Link: http://www.derreisebutler.de/cms/front_ ... hp?idcat=1

Hier der Code meiner CSS Datei:

Code: Alles auswählen

html,body {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	height: 100%;
	margin: 0px;
	overflow-y: hidden;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 0px;
}

#butler {
	position:absolute; 
	width:250px; 
	height:451px;
	top:0px;
	left: 0px;
}

#menue {
	position:absolute; 
	width:175px; 
	height:324px; 
	left: 103px; 
	top: 11px; 
	bottom:0
}

#inhalt {
	position:absolute; 
	width:464px; 
	height:451px; 
	left: 294px; 
	top: 11px; 
	overflow: auto
	padding:5px;
}


#center {
	text-align: left;
	width: 780px;
	margin: 0px
	overflow: auto;
}

#main {
	height: 100%;
	overflow: auto;
	width: 100%;
}

Und nun noch die index.html bzw. meine Layout-Datei dazu:

Code: Alles auswählen

<html>

<head>
<title>Der Reisebutler</title>
<link rel="stylesheet" type="text/css" href="css/format.css">
</head>

<body>

<div id="main">
  <div id="center">
    <div id="butler">
      <img border="0" src="images/butler_menue.jpg" width="250" height="451"></div>
    <div id="menue">
      <table border="0" width="100%" height="100%">
        <tr>
          <td valign="bottom">CMS_CONTAINER[4]</td>
        </tr>
      </table>
    </div>
    <div id="inhalt">
      <table border="0" width="100%" cellspacing="0" cellpadding="5" height="100%">
        <tr>
          <td align="left" valign="top">
          <p style="margin-top: 0; margin-bottom: 2px" align="left">
          <span class="headline">CMS_CONTAINER[5]</span></p>
          <p style="margin-top: 0; margin-bottom: 2px" align="left">
          <span class="subheadline">CMS_CONTAINER[6]</span></p>
          <p style="margin-top: 0; margin-bottom: 2px" align="left">
          <span class="text">CMS_CONTAINER[7]</span></p>
          </td>
        </tr>
      </table>
    </div>
  </div>
</div>

</body>

</html>

Was mache ich denn falsch!?
Ich habe schon versucht DIV's hinzuzufügen oder wegzulassen und und und....

Wer kann mir denn helfen?

CONTENIDO Forum

Barrierefreies Design zentrieren

Barrierefrei Zentriert

Barrierefrei Zentriert