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

margin:0 auto

X

xXxPeterPanxXx

Neues Mitglied
Hi,
ich habe schon lange recherchiert, aber Leider noch nichts herausgefunden. Ich habe meinen Text (<p>) mit "margin 0 auto" zentriert. Nun habe ich aber das Problem das ich kein margin-top oder margin-bottom machen kann oder doch? Wisst ihr ob es funktioniert und wenn ja wie?

MfG xXxPeterPanxXx
 
Werbung:
Ich glaube ne Möglichkeit da jetz noch margin reinzubringen is nen <span> oder <div> mit margin dumzulegen. Aber soweit ich weiß geht es auch so.
 
Werbung:
Werbung:
p nimmt soviel Platz in Anspruch, wie zur Verfügung steht.

Aus meiner Sicht gibt es zwei Lösungsvarianten:

... du kannst p eine bestimmt Breite geben und dann zentrieren. Wenn oben und unten noch etwas Platz sein soll, z.B. so:
Code: 
margin: 20px auto;
oder

Code: 
margin: 20px auto 10px auto;

... zweite Möglichkeit:
Du verzichtest auf die Zentrieung und gibst p entsprechende padding-left und padding-right Werte. Wenn die identisch sind, dann führt das auch zu einer Zentrierung, ohne dass du p eine Breite geben musst.
 
Werbung:
xXxPeterPanxXx schrieb:
Im FF3 löst sich der p Tag nicht vom oberen Rand.
siehe hier:Home | little-webdesigner.de
Zum Vergrößern anklicken....

Hallo Peter,

woran das liegt, konnte ich jetzt nicht erkennen, aber mit padding geht es:

Code: 
#content p {
font-size:1em;
margin:0 auto 4em;
padding:230px 1em 0 1em;
max-width:600px;
line-height:1.5em;}
(außerdem hab ich Dir noch eine line-height eingebaut, weil das m.E. lesefreundlicher ist...)

Grüße
Bernhard
 
Danke Bernhard,
ich habe mir das Addon Web Developer für FF3 geholt und sehe das der Wrapper den Header umschliesst, daraufhin habe ich das so gemacht das der Header nicht im Wrapper ist.

Dann hat die Sidebar gestreikt, darum habe ich die Hintergrunfgrafik im div sidebar direkt anzeigen lassen ohne Erfolg. Kann das sein das die Faux Columns falsch sind, da sie ja schon am Anfang der Website angezigt werden?

Ich habe zur verdeutlichung eine Grafik erstellt. Um die drei Elemente soll der Wrapper.
 

Anhänge

  • html.jpg
    html.jpg
    21,1 KB · Aufrufe: 17
Zuletzt bearbeitet:
Ich habe immernoch zwei Probleme.

1. Der Wrapper schliesst den Header (h1) mit ein, obwohl ich das nicht will.

2. Das background-image von der sidebar wird nicht angezeigt.

Da bplaced leider Probleme macht kann ich die website nicht hochladen, aber hier ist der Code:

Html:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Home | little-webdesigner.de</title>
<link rel="stylesheet" type="text/css" href="css/styles.css" />

</head>
<body>


<h1><img src="images/header-banner.jpg" alt="little-webdesigner" /></h1>
<div id="wrapper">
<div class="sidebar">Sidebar rechts</div>
<div id="left">
<ul>
<li class="active"><a href="#" class="active">Home</a></li>
<li><a href="#">Webdesign</a></li>
<li><a href="#">Html</a></li>
<li><a href="#">Css</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Projekte</a></li>

<li><a href="#">&Uuml;ber mich</a></li>
</ul>
</div><!--Ende #left-->

<div id="content">
<p>
Willkommen auf little-webdesigner.de. Hier kannst du etwas &uuml;ber meine aktuellen Projekte erfahren oder ein paar Codes in den Rubriken
<a href="#" class="rubrik">Html</a>, <a href="#" class="rubrik">Css</a> und <a href="#" class="rubrik">PHP</a> anschauen.<br />

<strong>Viel Spass w&uuml;nscht little-webdesigner.de</strong>

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.   


</p>



</div><!--Ende #content-->


</div><!--Ende #wrapper-->


<div id="footer">
<p>
&copy; 2009 little-webdesigner.de
</p>
<ul>
<li>

<a href="#" class="left">Kontakt</a>

</li>
<li>
<a href="#" class="right">Impressum</a>
</li>
</ul>
</div><!--Ende #footer-->

</body>
</html>

Css:
Code: 
* {
margin: 0;
padding: 0;
}

html {height: 100%; background: url(../images/links.png) repeat-y top left;}

body {height: 100%;font-family: Verdana; font-size: 100%; margin:0;padding:0;}

h1 {display:block; width:100%; height:200px; margin:0; padding:0; border:0; background-color:#4D4D4D;float:left;}


#wrapper {
position: relative;
min-height: 100%;
height: auto !important;
height: 100%;
width:100%;
margin:0;
padding:0;
border:none;
}

div.sidebar {float:right;height:100%;background: url(../images/rechts.png) repeat-y top right;}

#left ul {float:left;}
#left li {list-style:none; width:200px;height:1.875em;text-align:center;border-bottom:2px solid #4D4D4D;}
#left li.active {background-color:#4D4D4D;}
#left li:hover {background-color:#4D4D4D;color:#FF9600;}
#left li a {text-decoration:none;color:#000;font-size:1.2em;display:block;padding:5px 0 5px 0;}
#left li a.active {color:#FF9600;}
#left li a:hover {color:#FF9600;}

#content {margin:0 220px 20px 12.5em;}
#content p {font-size:1em;margin:0 auto 4em;max-width:600px;}
#content a {font-size:1em;color:#0000ff;}

#footer {clear: both; width: 100%;height:75px;background-color:#4D4D4D;padding:0;bottom: 0;}

#footer ul {list-style:none;float:right;margin: 3px 20px 0 0;}
#footer ul li {display:inline;}
#footer ul li a {color:#000;font-size:1em;}
#footer p {text-align:center;}

MfG xXxPeterPanxXx
[/code]
 
Werbung:
xXxPeterPanxXx schrieb:
1. Der Wrapper schliesst den Header (h1) mit ein, obwohl ich das nicht will.
Zum Vergrößern anklicken....
Nicht in Deinem Code.

2. Das background-image von der sidebar wird nicht angezeigt.
Zum Vergrößern anklicken....
Schau mal nach, wie hoch div.sidebar ist. Ob es evtl. mit float + height in Prozent Probleme gibt. Das ist in so nem Fall eigentlich immer das erste. Firebug starten und Element analysieren, wie groß es ist. Wenn es 0px hoch ist, siehst Du natürlich das Hintergrundbild nicht, obwohl es selbstverständlich da ist.
 
Zu1. Eben das ist ja das komische, im Code umschliesst Wrapper nicht h1, aber im Browser schon. Ich sehe das durch das FF3 Addon WebDeveloper. Ich habe ein Screenschot gemacht.(siehe Anhang)

Zu2. Hmm. Dann werde ich noch einmal ein bisschen mit dem Code rumspielen.

Edit: Screenshot ist sehr klein, aber wenn man ganz genau hinschaut sieht man eine rote Linie die bis zum Webseitenanfang geht.

Danke für dein Hilfe!
 

Anhänge

  • website2.0.jpg
    website2.0.jpg
    20,2 KB · Aufrufe: 10
Werbung:
Code: 
#wrapper {
position: relative;
min-height: 100%;
height: auto !important;
height: 100%;
...
}
height: auto !important; macht height: 100%; unwirksam.
 
Zuletzt bearbeitet:
neuroleptika schrieb:
Code: 
#wrapper {
position: relative;
min-height: 100%;
height: auto !important;
height: 100%;
...
}
height: auto !important; macht height: 100%; unwirksam.
Zum Vergrößern anklicken....

Hallo Neuroleptika,

ja, dann ist aber min-height noch da.
height:100% ist für den IE6, da der height so interpretiert, wie er eigentlich
min-height interpretieren sollte...

Grüße
Bernhard
 
Zuletzt bearbeitet:
Werbung:
thuemmy schrieb:
Und da die meisten User hier dasselbe oder ähnliche Tools nutzen, ist ein Link zur Seite wesentlich besser als ein viel zu kleines Bildchen.

Gruß thuemmy
Zum Vergrößern anklicken....
So Entschuldigung das ich mich erst jetzt melden kann. Die Grafik wird nun angezeigt, aber leider wiederholt sie sich nicht.

Mhh die Grafik von der navi wird auch nicht angezeigt.

Das Problem mit dem p Tag besteht immernoch.

@thuemmy leider hatte bplaced vorhin Probleme, so dass ich die Website nicht hochladen konnte jetzt gehts:Home | little-webdesigner.de
 
Zuletzt bearbeitet:
Zum Problem mit dem p-Tag:

HTML: 
#content {margin:0 220px 20px 12.5em;}
#content p {font-size:1em;margin:0 auto 4em;max-width:600px;}


Bei den Angaben kann sich der Absatz auch nicht vom oberen Rand lösen.
durch margin: 0 auto (was die 4em da noch tun ist mir schleierhaft)
hast du einen oberen Abstand von 0.
Dem Content gibst du ein padding von 0 mit - wie soll sich der p-Tag denn da bitte lösen, wenn du gar keinen Abstand definierst?

Zum anderen Problem:

Ordne mal vorher deinen Code. Der div mit der id="left" ist überflüssig, da er nur ein ul enthält, was aber selbst schon Blockelement ist.
Wenn du dann ul deinen Hintergrund zuweist, sollte er auch angezeigt werden.
Da ich mit über die Struktur der Verzeichnisse nicht klar bin, versuchs auch mal mit einer absoluten Pfadangabe.

LG
Laura
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben