Problem mit zentrieren der Website, habe alles ausprobiert

html.de-Forum HTML, XHTML & CSS
1

Hallo ihr,

ich bin nur Hobbybastler und habe schon Tage lang gegooglet und alles ausprobiert, aber nichts richtet meine Site mittig aus. Horizontal ist sie mittig aber vertikal nicht, sie bleibt immer oben.

Ich habe ausprobiert:
im css:

position: relativ;
margin-left: auto;
margin-right: auto;
Margin-top: auto;
margin-bottom: auto;

oder eben einfach nur margin: auto; und auch ohne position.

denn:

width: …px;
height: …px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -…px;
margin-top: -…px;

im HTML:

(Wrapper ist bei mir aussen)

denn auch ohne style, also leftmargin=„auto“ u.s.w.

Naja aber wenn ich Zahlen statt auto eingegeben habe, wurde die Seite wiederum versetzt, aber eben nicht bei auto und die Seite soll bei allen Monitoren Mittig zentriert sein.

Ich kann die hier auch veröffendlichen.

Danke

2

Das sollte man wenn möglich immer machen, denn eigentlich sollte margin:auto; funktionieren, anhand der Seite lässt sich das Problem sicher schnell finden.

MfG

3

HTML:

Gattas Berlin • Weine


    Wir führen ausgesuchte deutsche, spanische, italienische, französische und südafrikanische Weine.

    Unser ständiges Angebot 12 Flaschen zum Preis von 11.

 

 

 

 

Gattas Wein-Café    Michaela Baier | Maria Herrlich · Grainauer Str.11, 10777 Berlin, Tel 213 24 11 · gattas@berlin.degattas@berlin.de

CSS:

body {
margin:auto;
padding: 0;
background: #EBE9E4;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
p, ul, ol {
margin: 0 0 2em 0;
text-align: left;
line-height: 19px;
font: 17px „Myriad Pro Cond“;
font-weight:bold;
}
a:link {
text-decoration:none;
color: #842124;
}
a:hover, a:active {
text-decoration: none;
color: #963;
}
a:visited {
text-decoration:none;
color: #842124;
}
img {
border: none;
}
/* Header /
#header {
margin:auto;
clear: both;
width: 962px;
height: 55px;
background-color:#EBE9E4;
}
/ Menu /
#menu {
margin:auto;
padding-left:53px;
width: 880px;
height: 48px;
background-color:#EBE9E4;
}
#menu ul {
margin: 0;
padding: 0px 0 0 0px;
list-style: none;
line-height: normal;
}
#menu li {
display: block;
float: left;
}
.ling {
display:block;
float: left;
width: 95px;
height: 40px;
}
.ling2 {
display: block;
float: left;
width: 75px;
height: 40px;
}
.ling3 {
display:block;
float: left;
width: 112px;
height: 40px;
}
.ling4 {
display:block;
float: left;
width: 95px;
height: 40px;
}
#menu .current_page_itema {
background-image:url(bilder/weinebutton2.jpg);
background-repeat:no-repeat;
}
#menu .current_page_itemb {
background-image:url(bilder/speisenbutton2.jpg);
background-repeat:no-repeat;
}
#menu .current_page_itemc {
background-image:url(bilder/feiernbutton2.jpg);
background-repeat:no-repeat;
}
#menu .current_page_itemd {
background-image:url(bilder/kunstbutton2.jpg);
background-repeat:no-repeat;
}
#menu .current_page_iteme {
background-image:url(bilder/aktuellesbutton2.jpg);
background-repeat:no-repeat;
}
#menu .current_page_itemf {
background-image:url(bilder/geschenkebutton2.jpg);
background-repeat:no-repeat;
}
#menu .current_page_itemg {
background-image:url(bilder/einblickebutton2.jpg);
background-repeat:no-repeat;
}
#menu .current_page_itemh {
background-image:url(bilder/kontaktbutton2.jpg);
background-repeat:no-repeat;
}
#menu .current_page_itemi {
background-image:url(bilder/speisenbutton2.jpg);
background-repeat:no-repeat;
}
#wrapper {
width: 970px;
height: 400px;
margin: auto;
background-color:#EBE9E4;
}
/ Page /
#page {
width: 890px;
height:300px;
margin: auto;
margin-top:5px;
padding-top: 10px;
}
/ Content /
#content {
float: right;
width: 400px;
height: 200px;
overflow:scroll;
}
/ Sidebar /
#sidebar {
float: left;
width: 400px;
padding-left: 10px;
}
#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
/ Boxes /
.box1 {
width: 80px;
height: 40px;
background-image:url(bilder/weinebutton.jpg);
background-repeat:no-repeat;
margin-right: 3px;
}
.box2 {
width: 80px;
height: 40px;
background-image:url(bilder/speisenbutton.jpg);
background-repeat:no-repeat;
margin-right: 12px;
}
.box3 {
width: 80px;
height: 40px;
background-image:url(bilder/feiernbutton.jpg);
background-repeat:no-repeat;
margin-right: 7px;
}
.box4 {
width: 120px;
height: 40px;
background-image:url(bilder/kunstbutton.jpg);
background-repeat:no-repeat;
margin-right: 5px;
}
.box5 {
width: 115px;
height: 40px;
background-image:url(bilder/aktuellesbutton.jpg);
background-repeat:no-repeat;
margin-right: 3px;
}
.box6 {
width: 113px;
height: 40px;
background-image:url(bilder/geschenkebutton.jpg);
background-repeat:no-repeat;
margin-right: 2px;
}
.box7 {
width: 115px;
height: 40px;
background-image:url(bilder/einblickebutton.jpg);
background-repeat:no-repeat;
margin-right: 3px;
}
.box8 {
width: 100px;
height: 40px;
background-image:url(bilder/kontaktbutton.jpg);
background-repeat:no-repeat;
margin-right: 5px;
}
.box9 a:hover {
background-image:url(bilder/weinebutton2.jpg);
background-repeat:no-repeat;
}
.box10 a:hover {
background-image:url(bilder/speisenbutton2.jpg);
background-repeat:no-repeat;
}
.box11 a:hover {
background-image:url(bilder/feiernbutton2.jpg);
background-repeat:no-repeat;
}
.box12 a:hover {
background-image:url(bilder/kunstbutton2.jpg);
background-repeat:no-repeat;
}
.box13 a:hover {
background-image:url(bilder/aktuellesbutton2.jpg);
background-repeat:no-repeat;
}
.box14 a:hover {
background-image:url(bilder/geschenkebutton2.jpg);
background-repeat:no-repeat;
}
.box15 a:hover {
background-image:url(bilder/einblickebutton2.jpg);
background-repeat:no-repeat;
}
.box16 a:hover {
background-image:url(bilder/kontaktbutton2.jpg);
background-repeat:no-repeat;
}
/ Footer */
#footer-wrap {
width: 890px;
height: 64px;
margin: auto;
}
#footer {
margin: 0 0;
height: 64px;
padding: 0;
font: 10pt „Myriad Pro“;
float:left;
}
#legal {
clear: both;
padding-top: 10px;
padding-left: 30px;
text-align: center;
color: #842124;
float:left;
font: 12px Georgia, „Times New Roman“, Times, serif;
font-weight: bolder;
}

Die komplette Site seht ihr unter:

GATTAS

Aber Achtung, nur die „weine-Html“ ist soweit fertig, die anderen nicht. Und ich habe das hier oben kopierte verkleinert um zu sehen ob sich es mittig ausrichtet.

Hoffe das ist verständlich.

Danke

4

Gibt es auch einen Link auf die Seite? Da ist nur ein Frameset und viel grau. :???:

5

Der Link ist:

GATTAS

Wenn man auf Weine geht, kommt man auf die HTML Seite, die ausgerichtet werden soll. Und diese soll auf allen Bildschirmen mit der Karo-Seite übereinstimmen (also die Buttons oben meine ich).

6

Die Website war mal komplett aus Flash und meine Bekannte wollte sie aus HTML haben, damit Sie die Texte zum Beispiel leicher selber verändern kann und damit sie einzelne Seiten hat. Naja und ich wollte die Katze und die 2. Seite so lassen und die anderen in HTML nachbauen.

Die original Site ist Gattas.de

7

Schon mal versucht position wegzulassen? Denn mit margin auto und padding auto gibst du dem container ja schon eine position und zwar macht er dann immer den grösst möglichen abstand den er machen kann, sei das jetzt innerhalb eines weiteren containers oder innerhalb des viewports. Oder lieg ich da nun falsch?

Mfg devilseye

8

Mangelns Flash konnte ich das Problem nicht nachvollziehen. Aber folgende Methoden finde ich sehr hilfreich (auch wenn sie nicht immer der „reinen“ Lehre entsprechen): CSS vertical center using float and clear Vertical align div | StylizedWeb.com Vertical Centering in CSS gibt für die Methoden jeweils für und wieder, wobei mir persönlich bisher immer der erste am besten gefallen hat.

9

Das geht irgendwie nicht, naja ich kann ja auch die HTML-Site (z.B. Weine) oben lassen und die Flash-Site (die mit den Vierecken) oben ausrichten, dann sind diese auf gleicher höhe, nur eben oben und nicht mittig. Dann, oder auch so hätte ich noch ein weiteres problem:

Die Flash-Site ist in die Index-site eingebettet worden, naja aber man kann die Index Seite nicht scrollen, d.h. wenn das Flash-Bild mit den Vierecken größer als das Viewport ist, geht dieses über den Rand hinaus. Mein Vorgänger hat das sehr merkwürdig aufgebaut.

Es gibt eine Rand-HTML, eine Index.HTML und eine main.HTML . Ich denke der Scrollbalken wird ausserhalb des sichtbereiches verschoben. Das hier ist die main.HTML:

Gattas

Wie kann ich diese Seite Scrollen?

Zum anschauen:

http://www.alice-dsl.net/malaki85/gattas/index.html

Danke

10

Ich weiss nicht wie elegant das diese lösung ist sollte aber funktionieren.
Css mit
body {overflow:auto} erweitern oder overflow:scroll sollte das gleiche bewirken.

Mfg devilseye

11

Ich danke euch auf jeden Fall erstmal für die ganzen positiven Antworten. Ich werde eure Vorschläge ausprobieren und dann sehen wir weiter.

Danke