Seitenzentrierung

Akwa · 28.01.2009

Hallo,
Meine Seite ist eig. fertig programmiert.
Aber das einzigste was mich stört ist das meine Seite bei größeren Auflösungen (Größer als 1024) rechts ein riesiger Rand entsteht.
Kann man nicht in CSS die Seite so programmieren das sie sich mit der Auflösung anpasst?

cebito · 28.01.2009

AW: Seitenzentrierung

Akwa schrieb:
Kann man nicht in CSS die Seite so programmieren das sie sich mit der Auflösung anpasst?

Kann man, sofern das Design es zuläßt, aber was willst du jetzt - zentieren (Threadtitel) oder flexibles Design (Zitat)?

Akwa · 28.01.2009

AW: Seitenzentrierung

Na die komplette Seite.
Damit die Seite genau in der mitte des Fensters ist.

tai · 28.01.2009

AW: Seitenzentrierung

Also wenn die Seite eine feste Breite hat und diese nur zentriert werden soll, dann geht das mit margin: 0 auto; (etwas runter scrollen)

Akwa · 28.01.2009

AW: Seitenzentrierung

Ich hab das jetzt so gemacht:
.zentrierung
{
margin-left:0 auto;
margin-bottom:0 auto;
margin-right:0 auto;
margin-top:0 auto;
} .zentrierung
{
margin-left:0 auto;
margin-bottom:0 auto;
margin-right:0 auto;
margin-top:0 auto;
}

und dann in ein <p> gesetzt aber es funktioniert nicht

tai · 28.01.2009

AW: Seitenzentrierung

Ich weiß jetzt natürlich nicht wie deine Seite bzw. dein Quelltext aussieht, aber es sollte ungefähr so aussehen:

Code:

#Site {
    width:750px;
    margin:0 auto;
    background-color: black;
}

muellerheinz · 28.01.2009

AW: Seitenzentrierung

eine optimale zentrierung ist mit blindframes zu erreichen

wuschu · 28.01.2009

AW: Seitenzentrierung

Du musst ihm schon noch sagen mit was er die "Null" verbinden soll. Also hau mal noch überall ein "0px auto" anstatt ein "0 auto" rein...

sokie · 28.01.2009

AW: Seitenzentrierung

muellerheinz schrieb:
eine optimale zentrierung ist mit blindframes zu erreichen

ich hab schon lange nicht mehr so etwas interessantes gelesen... was genau heisst das?

wuschu schrieb:
Du musst ihm schon noch sagen mit was er die "Null" verbinden soll. Also hau mal noch überall ein "0px auto" anstatt ein "0 auto" rein...

und was genau ist der Unterschied zwischen 0px, 0pt, 0px, 0%, 0em und 0 in der höhe?
und wieso überall? einmal am äusseren container reicht eigentlich

cebito · 28.01.2009

AW: Seitenzentrierung

muellerheinz schrieb:
eine optimale zentrierung ist mit blindframes zu erreichen

mit WATT?

@Akwa - ziemlich umständlich, mach mal so wie tai vorgeschlagen...

Edit: @ wuschu - das "px" brauchst nur, wenn der Wert ungleich 0 ist.

Akwa · 28.01.2009

AW: Seitenzentrierung

wuschu schrieb:
Du musst ihm schon noch sagen mit was er die "Null" verbinden soll. Also hau mal noch überall ein "0px auto" anstatt ein "0 auto" rein...

Hab ich gemacht funktioniert immer noch nicht.

cebito · 28.01.2009

AW: Seitenzentrierung

Akwa schrieb:
Hab ich gemacht funktioniert immer noch nicht.

Zeig mal die css....

Akwa · 28.01.2009

/* Akwa Design & Graphik CSS */
/* Farbe Grau: #dedede */
/* Farbe Blau: #22a1c8 */

/* ---- Beginn der Einstellungen für Body ---- */
body
{
font-family: "Arial", Helvetica, sans-serif;
font-size: 14px;
background-color: #dedede;
}

/* ---- Beginn der Einstellungen für den Text ---- */
.text
{
position: absolute;
z-index: 8;
overflow: auto;
top: 247px;
left: 393px;
width: 426px;
height: 401px;
}

/* ---- Beginn der Einstellungen für Zentrierung ---- */
.zentrierung
{
margin-left:0px auto;
margin-right:0px auto;
}

/* ---- Beginn der Einstellungen für den Foothertext ---- */
.foothertext
{
position: absolute;
z-index: 7;
top: 670px;
left: 326px;
width: 372px;
height: 34px;
font-size: 11px;
}

/* ---- Beginn der Einstellungen für den Button unter dem Links Bild ---- */
.linkbutton
{
position: absolute;
z-index: 5;
top: 515px;
left: 211px;
}

/* ---- Beginn der Einstellungen für den Spoilerinhalt ---- */
.spoilerinhalt
{
position: absolute;
z-index: 5;
top: 568px;
left: 211px;
}

/* ---- Beginn der Textlinks ----*/
a
{
color: #22a1c8;
text-decoration: none;
}

a:hover
{
text-decoration: underline;
}

a.extern
{
color: #22a1c8;
text-decoration: none;
}

a.extern:hover
{
text-decoration: underline;
}

a.intern
{
color: #22a1c8;
text-decoration: none;
}

a.intern:hover
{
text-decoration: underline;
}

/* ----- Beginn der Einstellungen für die Bilder ----- */
/* ----- Beginn der Einstellungen für Header ----- */
img.header
{
position: absolute;
z-index: 3;
top: 46px;
left: 211px;
}

/* ---- Beginn der Einstellungen für Content ---- */
img.content
{
position: absolute;
z-index: 2;
top: 25px;
left: 189px;
}

/* ---- Beginn der Einstellungen für Foother ---- */
img.foother
{
position: absolute;
z-index: 6;
top: 664px;
left: 211px;
}

/* ---- Beginn der Einstellungen für die Buttons ---- */
/* ---- Beginn der Einstellungen für Button Home ---- */
img.home
{
position: absolute;
z-index: 4;
top: 209px;
left: 230px;
}

/* ---- Beginn der Einstellungen für Button Leistungen ---- */
img.leistungen
{
position: absolute;
z-index: 4;
top: 209px;
left: 323px;
}

/* ---- Beginn der Einstellungen für Button Downloads ---- */
img.downloads
{
position: absolute;
z-index: 4;
top: 209px;
left: 416px;
}

/* ---- Beginn der Einstellung für Button Partner ---- */
img.partner
{
position: absolute;
z-index: 4;
top: 209px;
left: 509px;
}

/* ---- Beginn der Einstellung für Button Kontakt ---- */
img.kontakt
{
position: absolute;
z-index: 4;
top: 209px;
left: 602px;
}

/* ---- Beginn der Einstellung für Button Impressum ---- */
img.impressum
{
position: absolute;
z-index: 4;
top: 209px;
left: 695px;
}

/* ---- Einstellungen für die Boxen ---- */
/* ---- Beginn der Einstellung für Galeriebox ---- */
img.galeriebox
{
position: absolute;
z-index: 6;
top: 247px;
left: 211px;
}

/* ---- Beginn der Einstellungen für Galeriebox_Titel ---- */
img.galerieboxtitel
{
position: absolute;
z-index: 8;
top: 343px;
left: 231px;
}

/* ---- Beginn der Einstellung für Newsbox ---- */
img.newsbox
{
position: absolute;
z-index: 6;
top: 381px;
left: 211px;
}

/* ---- Beginn der Einstellung für Newsbox_Titel ---- */
img.newsboxtitel
{
position: absolute;
z-index: 8;
top: 479px;
left: 230px;
}

/* ---- Beginn der Einstellung für Linkstreifen ---- */
img.links
{
position: absolute;
z-index: 6;
top: 515px;
left: 211px;
}

/* ---- Beginn der Einstellungen für Galerieboxinhalt ---- */
.galerieboxinhalt
{
position: absolute;
z-index: 7;
top: 261px;
left: 223px;
width: 135px;
height: 86px;
}

/* ---- Beginn der Einstellung für Newsboxinhalt ---- */
.newsboxinhalt
{
position: absolute;
z-index: 7;
top: 392px;
left: 222px;
width: 135px;
height: 86px;
overflow: auto;
font-size: 10px;
}

Hier ist mal ein Screenshot: (das rote markiert was zuviel ist)

tai · 28.01.2009

AW: Seitenzentrierung

Code:

.zentrierung
{
margin-left:0px auto;
margin-right:0px auto;
}

So gehts schonmal gar nicht, hier kann nur ein Wert stehen. Mach mal das 0px weg.

Der Quelltext der Seite sollte dann ungefähr so aussehen:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>
    <title></title>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <link href="style.css" type="text/css" rel="stylesheet" />
</head>

<body>
 <div id="zentrierung">
 [COLOR="Silver"]...restlicher Quelltext[/COLOR]
 </div>
</body>
</html>

cebito · 28.01.2009

AW: Seitenzentrierung

Überflogen und ohne testen:

- gib mal dem body margin:0; und padding:0; (vorsorglich

)
- mach mal aus .zentrierung ein #zentrierung(div) - auch im html ändern - da ich weiter unten gesehn, daß du Buttons usw. "absolute" positionierst. Die richten sich aber am Browserfenster aus. Wenn du ein umschließendes div hast, richten sie sich an dessen Dimensionen aus. Für dieses div notierst dann in der css margin:auto; == mittig...

Akwa · 28.01.2009

AW: Seitenzentrierung

Also soll ich für alle Buttons usw. ein Umschließendes Div machen?

wuschu · 28.01.2009

AW: Seitenzentrierung

Ich habe keine Ahnung wie es mit CSS aussieht. Aber kann man denn nicht um alles eine Tabelle machen und dann den eingeschlossenen Inhalt so zentrieren? Wäre halt eine HTML-Lösung und nix mit CSS.

<table border="0" height="100%" width="100%">
<tr><td valign="middle" align="center">

deine ganzen Seiteninhalte

</td></tr>
</table>

nur so eine Idee. Bin auch nicht so versiert was Codes angeht, aber nimmt mich selbst auch ein bisschen wunder.

cebito · 28.01.2009

AW: Seitenzentrierung

Akwa schrieb:
Also soll ich für alle Buttons usw. ein Umschließendes Div machen?

Ich mach mal ein Beispiel... sek :rolleyes:

Akwa · 28.01.2009

AW: Seitenzentrierung

wuschu schrieb:
Ich habe keine Ahnung wie es mit CSS aussieht. Aber kann man denn nicht um alles eine Tabelle machen und dann den eingeschlossenen Inhalt so zentrieren? Wäre halt eine HTML-Lösung und nix mit CSS.

<table border="0" height="100%" width="100%">
<tr><td valign="middle" align="center">

deine ganzen Seiteninhalte

</td></tr>
</table>

nur so eine Idee. Bin auch nicht so versiert was Codes angeht, aber nimmt mich selbst auch ein bisschen wunder.

habs mal ausprobiert funktioniert nicht.

cebito · 28.01.2009

AW: Seitenzentrierung

Code:

BODY {
        PADDING-RIGHT: 0px; 
        PADDING-LEFT: 0px; 
        BACKGROUND: #FFFFFF; 
        PADDING-BOTTOM: 0px; 
        MARGIN: 0px; 
        WIDTH: 100%; 
        PADDING-TOP: 0px; 
        FONT-FAMILY: VERDANA,ARIAL,HELVETICA; 
        HEIGHT: 100%; 
        FONT-SIZE: 11px; 
        COLOR: #303030; 
        TEXT-ALIGN: center;
}

#container {
        PADDING-RIGHT: 0px; 
        PADDING-LEFT: 0px; 
        PADDING-BOTTOM: 0px; 
        MARGIN: 0px auto; 
        WIDTH: 800px; 
        HEIGHT: 800px; 
        PADDING-TOP: 0px; 
        POSITION: relative; 
        BACKGROUND: #000000; 
        BORDER: 3px; 
        TEXT-ALIGN: left;
}

#tab1 {
        Z-INDEX: 3; 
        LEFT: 582px; 
        POSITION: absolute; 
        TOP: 360px; 
        HEIGHT: 50px; 
        WIDTH: 100px; 
        BACKGROUND: #FF0000;
}


#tab2 {
        Z-INDEX: 3; 
        LEFT: 32px;
        POSITION: absolute; 
        TOP: 220px; 
        HEIGHT: 120px; 
        WIDTH: 250px; 
        BACKGROUND: #FFFF00;
}

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<link href="mitteabsolut.css" type=text/css rel=stylesheet>

</head>


<body>

<div id=container><!--in der (Browserfenster-)Mitte -->


<div id=tab1>ein Button hier</div>

<div id=tab2>ein Button woanders</div>



</div>

</body>

</html>

teste mal und versuch zu verstehn... Ließe sich alles sicher auch noch anders positionieren, wo du aber schon mal soweit bist