• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Problem mit zentrieren der Website, habe alles ausprobiert

M

malaki

Neues Mitglied
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:
<div id="wrapper" style="margin-left:auto; margin-right:auto; text-align:center;">

(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
 
Werbung:
HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="XHTML namespace">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Gattas Berlin &bull; Weine</title>
<meta name="keywords" content="Weine, Cafe, Berlin, " />
<meta name="description" content="Gattas Wein Café . Die einzigartige Café in Berlin" />
<link href="default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<!-- start header -->
<div id="header">
<div id="menu">
<ul>
<li class="current_page_itema box1 box9"><a class="ling2" href="weine.html"></a></li>
<li class="box2 box10"><a class="ling2" href="speisen.html"></a></li>
<li class="box3 box11"><a class="ling2" href="feiern.html"></a></li>
<li class="box4 box12"><a class="ling3" href="kunst.html"></a></li>
<li class="box5 box13"><a class="ling3" href="aktuelles.html"></a></li>
<li class="box6 box14"><a class="ling3" href="geschenke.html"></a></li>
<li class="box7 box15"><a class="ling3" href="einblicke.html"></a></li>
<li class="box8 box16"><a class="ling" href="kontakt.html"></a></li>
</ul>
</div>
</div>
<!-- end header -->
<!-- start page -->
<div id="page">
<!-- start content -->
<!-- start sidebar -->
<div id="sidebar">
<ul>
<p><br>Wir führen ausgesuchte deutsche, spanische, italienische, französische und südafrikanische Weine.<br><br>
Unser ständiges Angebot 12 Flaschen zum Preis von 11.</p>
</ul>
</div>
<div id="content">
<p><img src="filme/bilder/B_Wein/01_wein.jpg" alt="" width="400" height="400" class="left" /></p>&nbsp;
<p><img src="filme/bilder/B_Wein/02_wein.jpg" alt="" width="400" height="400" class="left" /></p>&nbsp;
<p><img src="filme/bilder/B_Wein/03_wein.jpg" alt="" width="400" height="400" class="left" /></p>&nbsp;
<p><img src="filme/bilder/B_Wein/04_wein.jpg" alt="" width="400" height="400" class="left" /></p>&nbsp;
<p><img src="filme/bilder/B_Wein/Weinprobe.jpg" alt="" width="400" height="400" class="left" /></p>
</div>
<!-- end sidebar -->

<!-- start footer -->
<div id="footer">
<div id="footer-wrap">
<p id="legal">Gattas Wein-Café &nbsp;<a href="index.html"><img src="bilder/katzekl.gif" alt="" width="70" height="50" /></a>&nbsp; Michaela Baier | Maria Herrlich &middot; Grainauer Str.11, 10777 Berlin, Tel 213 24 11 &middot; <a href="mailto:[email protected]">[email protected]</a></p>
</div>
</div>
<!-- end footer -->
</div>
<!-- end page -->
</div>
</body>
</html>

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
 
Werbung:
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).
 
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
 
Werbung:
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
 
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:

<html xmlns="XHTML namespace">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Gattas</title>
<meta name="keywords" content="..." />
<meta name="description" content="..." />
<link href="default2.css" rel="stylesheet" type="text/css" />
<script language="JavaScript">
function aufruf(theURL,winName,features) {
window.open(theURL,winName,features);
}
</script>
</HEAD>
<BODY bgcolor="#EBE9E4">
<A HREF=javascript:aufruf("Einladung.pdf","zzz"></A>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
width="900" height="600" id="gattas" align="top">
<param name=movie value="Gattas.swf">
<param name=quality value=high>
<param name=bgcolor value=#EBE9E4>
<embed src="Gattas.swf" quality=high bgcolor=#EBE9E4 width="868px" height="532px" name="Gattas" align="top"
type="application/x-shockwave-flash" pluginspage="Adobe - Error page>
</object>
</BODY>
</HTML>

Wie kann ich diese Seite Scrollen?

Zum anschauen:

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

Danke
 
Werbung:
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
 
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
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben