Diese Anzeige ist nur für
Nicht-Mitglieder sichtbar!

Jetzt kostenlos registrieren

Webseite mittig ausrichten

Fragen zum Thema HTML und CSS können hier gestellt werden

Moderatoren: Basti, Guillermo, Ingo

Webseite mittig ausrichten

Beitragvon Janiene am 02.12.2011, 17:13

Hallo.

Ich habe eigentlich zwei Probleme und hoffe, dass mir jemand helfen kann.

Zuerst einmal möchte ich meine Internetseite in der Mitte ausrichten.
Habe nun die Befehle margin-left genommen, aber auf breiteren Bildschirmen (benutze Laptop) wird die Seite eher links ausgerichtet. Auf "margin: auto;" reagiert Internetexplorer nicht und dann ist es wieder links.

Hat jemand Ideen?

Fast das gleiche Problem habe ich mit dem Inhalt, wie bekomme ich es hin, dass ich den Footer auch wirklich immer unten habe und so viel Text schreiben kann wie ich möchte (Jetzt ist auch hier das Ganze mit margin-top eingerichtet) ohne dass etwas vom Bildschirm verdeckt wird bzw. automatisch weiter nach unten geht? (Hoffentlich versteht ihr, was ich meine...)

Hier erst der Stylesheet:

Code: Alles auswählen
body {
background-color: #ccb895;
text-align:center;
}

.ausgefuchst_kopf {
text-align: center;
background-image:url(ausgefuchst_kopf.jpg);
width: 700px;
height: 88px;
margin-left: 100px;
}

.ausgefuchst_inhalt {
text-align: center;
float:left;
width: 700px;
margin-left: 100px;
}

.ausgefuchst_footer {
text-align: center;
background-image:url(bg.png);
background-repeat:no-repeat;
width: 700px;
height: 50px;
margin-left: 130px;
repeat: none-repeat;
margin-top: 330px;
}

p {
font-face: "Verdana";
font-size: 13px;
}

h1 {
font-family: Ribeye Marrow;
font-size: 35px;
}

h2 {
font-family: Give You Glory;
font-size: 25px;
color: #382f1f;
}

hr {
border-bottom: 1px dotted #382f1f;
text-deoration: none;
}



Und dann eine Beispielseite:


Code: Alles auswählen
<html>
<head>
<title> AUSGEFUCHST - Aus dem Leben der bizarren Ebby-Lynn. </title>
<link media="screen" href="ausgefuchst_style.css" type="text/css" rel="stylesheet" />
<link media="screen" href="links_style.css" type="text/css" rel="stylesheet" />
<link href='http://fonts.googleapis.com/css?family=Ribeye+Marrow' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Give+You+Glory' rel='stylesheet' type='text/css'>
</head>

<body>
<div class="ausgefuchst_kopf">
</div>

<div class="ausgefuchst_inhalt">
<br />
<a href="start.html" class="navigation">Hauptseite</a>   |  <a href="news.html" class="news">News</a>     |     <a href="artistin.html" class="navigation">Artistin</a>     |    <a href="Artworks.html" class="navigation">Artworks</a>


<h1> AUSGEFUCHST - </h1>
<h2> das Leben der bizarren Ebby-Lynn. </h2>
<p>
<i> <b>
Augen.
<br />
<br />
Gelbe Augen.
<br />
<br />
Fuchsaugen.
</i>
</b>
</p>
</div>

<div class="ausgefuchst_footer"></div>

<a href="impressum.html" class="rechtliches_zeugs">Impressum</a>   |  <a href="kontakt.html" class="rechtliches_zeugs">Kontakt</a>

</body>
</html>


lg,
Janiene
Benutzeravatar
Janiene
Mitglied
 
Beiträge: 10
Registriert: 01.12.2010, 14:35
Diese Anzeige ist nur für
Nicht-Mitglieder sichtbar!
 
Jetzt kostenlos registrieren

Re: Webseite mittig ausrichten

Beitragvon Guillermo am 02.12.2011, 22:13

Hi Janiene,

die Zentrierung der Seite eines DIV-Elements kannst du z.B. so erreichen:
Code: Alles auswählen
position:relative;
width:1000px;
left:50%;
margin-left:-500px;


"left:50%" bewirkt dass der linke Rand deines Containers immer genau in der Mitte ist, wenn du den Container jetzt um die Hälfte nach links verschiebst ist er immer in der Mitte, egal bei welcher Auflösung :)

Eine Möglichkeit den Fußbereich immer ganz unten zu platzieren, auch wenn nur wenig Inhalt auf der Seite ist ist eine Mindesthöhe von einem Container anzugeben in dem deine Inhalte stehen.
Code: Alles auswählen
#content {
    min-height:400px;
}

Der HTML Quelltext könnte z.B. so aussehen:
Code: Alles auswählen
<div id="header">...</div>
<div id="content">...</div>
<div id="footer"></div>


Viele Grüße,
Guillermo

P.s. Ich hab mir erlaubt deine Quelltexte in "Code" Bereiche zu setzten, dann brauchen sie weniger Platz und sind leserlicher :)
Gebildet ist der, der weiß, wo er findet, was er nicht weiß.
Benutzeravatar
Guillermo
Moderator
 
Beiträge: 1093
Registriert: 01.10.2007, 18:18
Wohnort: Bayern

Re: Webseite mittig ausrichten

Beitragvon Janiene am 02.12.2011, 22:27

Danke für die schnelle Hilfe. Das hat mir wirklich Kopfzerbrechen bereitet :)

lg,
Janiene
Benutzeravatar
Janiene
Mitglied
 
Beiträge: 10
Registriert: 01.12.2010, 14:35

Re: Webseite mittig ausrichten

Beitragvon ThatMSG am 03.12.2011, 08:14

wieso verwendest du nicht einfach margin:auto; ?
Webklex.com
Webdesign, Templating & more
Url: www.webklex.com
Blog: http://thatmsg.wordpress.com/
Twitter: @ThatMSG
Projekte: www.webklex.com/components/blog/
Benutzeravatar
ThatMSG
Mitglied
 
Beiträge: 209
Registriert: 08.10.2011, 20:01
Wohnort: Hamburg

Re: Webseite mittig ausrichten

Beitragvon Guillermo am 03.12.2011, 16:31

Janiene hat geschrieben:Auf "margin: auto;" reagiert Internetexplorer nicht und dann ist es wieder links.
Gebildet ist der, der weiß, wo er findet, was er nicht weiß.
Benutzeravatar
Guillermo
Moderator
 
Beiträge: 1093
Registriert: 01.10.2007, 18:18
Wohnort: Bayern

Re: Webseite mittig ausrichten

Beitragvon ThatMSG am 03.12.2011, 16:31

sry hatte ich nicht gesehen... :oops:
Webklex.com
Webdesign, Templating & more
Url: www.webklex.com
Blog: http://thatmsg.wordpress.com/
Twitter: @ThatMSG
Projekte: www.webklex.com/components/blog/
Benutzeravatar
ThatMSG
Mitglied
 
Beiträge: 209
Registriert: 08.10.2011, 20:01
Wohnort: Hamburg

Re: Webseite mittig ausrichten

Beitragvon Patchie am 11.12.2011, 15:56

Ich mache es immer so

Code: Alles auswählen
#wrapper {
   width: 1024px;
   height: 800px;
   margin: 0 auto;
   background: #f00; /* zum testen ;) */
}


sollte so klappen. ABER kein float einsetzen. Dann "fliegt" das Ding wieder in die Linke Ecke des Webbrowsers...
Hat mich mehrere Lebensjahre gekostet und Nerven, dieser float mist... :xx:
Patchie
Mitglied
 
Beiträge: 263
Registriert: 18.06.2008, 17:22

Re: Webseite mittig ausrichten

Beitragvon Guillermo am 11.12.2011, 17:54

Patchie, es wurde oben schon mehrmals angemerkt dass "margin:auto;" beim Internetexplorer nicht funktioniert ;)
Gebildet ist der, der weiß, wo er findet, was er nicht weiß.
Benutzeravatar
Guillermo
Moderator
 
Beiträge: 1093
Registriert: 01.10.2007, 18:18
Wohnort: Bayern

Re: Webseite mittig ausrichten

Beitragvon Patchie am 12.12.2011, 09:27

Guillermo hat geschrieben:Patchie, es wurde oben schon mehrmals angemerkt dass "margin:auto;" beim Internetexplorer nicht funktioniert ;)


Aber es geht doch im IE... :o0: :roll:
http://www.mal-anders-webdesign.de/frage/mittig.jpg <--- alles MIttig.
Patchie
Mitglied
 
Beiträge: 263
Registriert: 18.06.2008, 17:22

Re: Webseite mittig ausrichten

Beitragvon Griefshire am 12.12.2011, 12:17

Patchie hat geschrieben:
Guillermo hat geschrieben:Patchie, es wurde oben schon mehrmals angemerkt dass "margin:auto;" beim Internetexplorer nicht funktioniert ;)


Aber es geht doch im IE... :o0: :roll:
http://www.mal-anders-webdesign.de/frage/mittig.jpg <--- alles MIttig.


Kann ich nur bestätigen, habs bei mir auch mittels margin:0 auto; gemacht, und IE hat keine Probleme damit die Seite Mittig darzustellen
Griefshire
Mitglied
 
Beiträge: 28
Registriert: 30.11.2011, 14:11

Re: Webseite mittig ausrichten

Beitragvon Ingo am 12.12.2011, 17:38

Man sollte da unterscheiden: Der IE versteht margin:auto, aber nur wenn er nicht im Quirksmode ist.
D.h. insbesondere sollte man auf eine gültige DTD achten. - Der IE reagiert überhaupt auf Fehler im
Quelltext recht deutlich - was nicht unbedingt schlecht sein muss.
Die beste Browserweiche ... sitzt zwischen den Ohren ;o]
Wer glaubt etwas zu sein, hat aufgehört etwas zu werden.
Benutzeravatar
Ingo
Web Moderator
 
Beiträge: 1722
Registriert: 01.04.2007, 23:21
Wohnort: Neuss/NRW

Re: Webseite mittig ausrichten

Beitragvon Guillermo am 12.12.2011, 20:29

Ich habs ehrlich gesagt nicht selbst ausprobiert, hab einfach mal auf die Aussage des Threaderstellers vertraut, entschuldigt :)
Gebildet ist der, der weiß, wo er findet, was er nicht weiß.
Benutzeravatar
Guillermo
Moderator
 
Beiträge: 1093
Registriert: 01.10.2007, 18:18
Wohnort: Bayern


Zurück zu HTML/CSS

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 2 Gäste