[Erledigt] ul zentrieren (margin: 0 auto;)

hts · 14.03.2011, 15:04

Hi Leute,

ich probiere gerade ein bisschen mit dem ZF und der Formulargenerierung. Dabei habe ich ein kleines CSS-Problem.

CSS:

PHP-Code:

     .form-errors {

    width: 400px;

    margin: 0 auto;

    padding: 10px;

    margin: 0;

    border: 2px solid red;

    color: red;

    background-color: white;

   }

 
   .form-errors li {

    list-style: none;

    background-color: white;

   }

HTML:

PHP-Code:

    <ul class="form-errors">

   <li>

    <ul class="errors">

     <li>Der Benutzername existiert nicht oder das Passwort ist falsch!</li>

    </ul>

   </li>

  </ul>

Die Liste mit der Fehlermeldung wollte ich auf der Seite horizontal zentriert haben, was doch mit margin: 0 auto; passieren sollte.
Aber IE und FF stellen die Liste linksbündig dar. Weiß jemand, warum?

Das Formular selbst wird mit dieser Angabe (margin: 0 auto;) zentriert dargestellt. Hier nochmal die komplette Seite, falls wer Lust hat drüberzuschauen oder zu testen.

PHP-Code:

  <?xml version="1.0" ?><!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">

 <head>

  <title>Test</title>

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

  <style type="text/css">

   /* Zend Form Styling */

   .zend_form {

    width: 400px;

    margin: 5px auto;

    padding: 10px;

    overflow: auto;

    border: 1px solid #d18b47;

    background-color: #ffce9e;

   }

 
   .zend_form dt {

    padding: 0;

    clear: both;

    width: 150px;

    float: left;

    text-align: left;

    margin: 5px 5px 5px 0;

   }

 
   .zend_form dd {

    padding: 0;

    float: left;

    margin: 5px 2px 5px 0;

   }

 
   .zend_form p {

    padding: 0;

    margin: 0;

   }

 
   dl.zend_form dd ul.errors {

    list-style: none;

    padding: 0;

    margin: 0;

   }

 
   dl.zend_form dd ul.errors li {

    float: left;

    margin: 0 0.15em;

    font-size: 12px;

    color: red;

    width: 180px;

   }

 
   .zend_form input, .zend_form textarea {

    margin: 0 0 2px 0;

    padding: 0;

   }

 
   .zend_form #username, .zend_form #password {

    width: 180px;

   }

 
   .zend_form #submit {

    width: 100px;

    border: 1px solid black;

    background-color: #d18b47;

    color: white;

    font-weight: bold;

    padding: 2px;

   }

 
   .form-errors {

    width: 400px;

    margin: 0 auto;

    padding: 10px;

    margin: 0;

    border: 2px solid red;

    color: red;

    background-color: white;

   }

 
   .form-errors li {

    list-style: none;

    background-color: white;

   }

  </style>

 </head>

 <body>

  <form id="login_form" enctype="application/x-www-form-urlencoded" accept-charset="UTF-8" action="/login" method="post">

   <dl class="zend_form">

    <dt id="username-label">

     <label for="username" class="required">Benutzername</label>

    </dt>

    <dd id="username-element">

     <input type="text" name="username" id="username" value="" />

    </dd>

    <dt id="password-label">

     <label for="password" class="required">Passwort</label>

    </dt>

    <dd id="password-element">

     <input type="password" name="password" id="password" value="" />

    </dd>

    <dt id="submit-label"> </dt>

    <dd id="submit-element">

     <input type="submit" name="submit" id="submit" value="Anmelden" />

    </dd>

   </dl>

  </form>

 
  <ul class="form-errors">

   <li>

    <ul class="errors">

     <li>Der Benutzername existiert nicht oder das Passwort ist falsch!</li>

    </ul>

   </li>

  </ul>

 
 </body>

</html>

eagle275 · 14.03.2011, 15:10

wenn ich nicht ganz schief gucke und du nicht 'nen klassischen Copy-Waste Fehler gebaut hast, dann überschreibst du dein margin: 0 auto; mit einem margin: 0; wieder ...

Asipak · 14.03.2011, 15:11

Code:

.form-errors {
    width: 400px;
    margin: 0 auto;
    padding: 10px;
    margin: 0;
    border: 2px solid red;
    color: red;
    background-color: white;
   }

Du überschreibst die Angabe für den Außenabstand.

hts · 14.03.2011, 15:15

Ich danke dir! Ich habe jetzt stundenlang an allen möglichen Stellen nach dem Fehler gesucht nur das habe ich nicht gesehen.

Wo ist der Kopf-gegen-Wand-hau-Smilie?

PS: Euch beiden danke ich natürlich. Alle sehen's sofort

lstegelitz · 15.03.2011, 11:58

Zitat:

Zitat von hts

Wo ist der Kopf-gegen-Wand-hau-Smilie?

Da haste einen

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Erledigt] IE zeigt die Seite nicht richtig an	Nikon	HTML, Usability und Barrierefreiheit	4	28.01.2011 23:05
heute hatte ich einen filmreifen Traum	coola	Off-Topic Diskussionen	5	13.01.2011 17:23
[Erledigt] margin: auto für input (type submit) wird im IE8 ignoriert	Squall	HTML, Usability und Barrierefreiheit	16	11.10.2010 18:59
[Erledigt] css menü zentrieren	Green_of_Dutch	HTML, Usability und Barrierefreiheit	9	11.06.2010 13:34
Inhalt von Div zentrieren:	Paul.Schramenko	HTML, Usability und Barrierefreiheit	11	26.04.2010 14:51
Googlemaps und IE8	leder	JavaScript, Ajax und mehr	0	17.03.2010 15:18
CSS Layout mit 4 Buttons nebeneinander!!	Rambo02	HTML, Usability und Barrierefreiheit	7	27.07.2009 15:33
Kirchenwebsite - Wie Header & Footer includieren	Stretch30	PHP Tipps 2009	11	13.06.2009 14:05
[Erledigt] Zentrieren von a Blocks im DIV Container	Daniel	HTML, Usability und Barrierefreiheit	21	24.09.2008 09:37
CSS problem	gandalf	HTML, Usability und Barrierefreiheit	6	03.09.2008 23:46
2 Div's zentrieren	pfump	HTML, Usability und Barrierefreiheit	7	24.04.2008 10:57
Wordpress Template		HTML, Usability und Barrierefreiheit	8	22.08.2005 11:21
Das [alte] Auto ist rot .... Das _____ Auto ist rot.	janni	PHP Tipps 2005	8	17.05.2005 08:37

14.03.2011, 15:04
hts Erfahrener Benutzer Registriert seit: 07.09.2010 Beiträge: 722 PHP-Kenntnisse: Fortgeschritten	[Erledigt] ul zentrieren (margin: 0 auto;) Hi Leute, ich probiere gerade ein bisschen mit dem ZF und der Formulargenerierung. Dabei habe ich ein kleines CSS-Problem. CSS: PHP-Code: `.form-errors { width: 400px; margin: 0 auto; padding: 10px; margin: 0; border: 2px solid red; color: red; background-color: white; } .form-errors li { list-style: none; background-color: white; }` HTML: PHP-Code: `<ul class="form-errors"> <li> <ul class="errors"> <li>Der Benutzername existiert nicht oder das Passwort ist falsch!</li> </ul> </li> </ul>` Die Liste mit der Fehlermeldung wollte ich auf der Seite horizontal zentriert haben, was doch mit margin: 0 auto; passieren sollte. Aber IE und FF stellen die Liste linksbündig dar. Weiß jemand, warum? Das Formular selbst wird mit dieser Angabe (margin: 0 auto;) zentriert dargestellt. Hier nochmal die komplette Seite, falls wer Lust hat drüberzuschauen oder zu testen. PHP-Code: <?xml version="1.0" ?><!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"> <head> <title>Test</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style type="text/css"> /* Zend Form Styling / .zend_form { width: 400px; margin: 5px auto; padding: 10px; overflow: auto; border: 1px solid #d18b47; background-color: #ffce9e; } .zend_form dt { padding: 0; clear: both; width: 150px; float: left; text-align: left; margin: 5px 5px 5px 0; } .zend_form dd { padding: 0; float: left; margin: 5px 2px 5px 0; } .zend_form p { padding: 0; margin: 0; } dl.zend_form dd ul.errors { list-style: none; padding: 0; margin: 0; } dl.zend_form dd ul.errors li { float: left; margin: 0 0.15em; font-size: 12px; color: red; width: 180px; } .zend_form input, .zend_form textarea { margin: 0 0 2px 0; padding: 0; } .zend_form #username, .zend_form #password { width: 180px; } .zend_form #submit { width: 100px; border: 1px solid black; background-color: #d18b47; color: white; font-weight: bold; padding: 2px; } .form-errors { width: 400px; margin: 0 auto; padding: 10px; margin: 0; border: 2px solid red; color: red; background-color: white; } .form-errors li { list-style: none; background-color: white; } </style> </head> <body> <form id="login_form" enctype="application/x-www-form-urlencoded" accept-charset="UTF-8" action="/login" method="post"> <dl class="zend_form"> <dt id="username-label"> <label for="username" class="required">Benutzername</label> </dt> <dd id="username-element"> <input type="text" name="username" id="username" value="" /> </dd> <dt id="password-label"> <label for="password" class="required">Passwort</label> </dt> <dd id="password-element"> <input type="password" name="password" id="password" value="" /> </dd> <dt id="submit-label"> </dt> <dd id="submit-element"> <input type="submit" name="submit" id="submit" value="Anmelden" /> </dd> </dl> </form> <ul class="form-errors"> <li> <ul class="errors"> <li>Der Benutzername existiert nicht oder das Passwort ist falsch!</li> </ul> </li> </ul> </body> </html> Geändert von hts (14.03.2011 um 15:09 Uhr).*


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

14.03.2011, 15:10
eagle275 Erfahrener Benutzer Registriert seit: 01.09.2010 Beiträge: 4.561 PHP-Kenntnisse: Fortgeschritten	wenn ich nicht ganz schief gucke und du nicht 'nen klassischen Copy-Waste Fehler gebaut hast, dann überschreibst du dein margin: 0 auto; mit einem margin: 0; wieder ... __________________ "Irren ist männlich", sprach der Igel und stieg von der Drahtbürste

14.03.2011, 15:11
Asipak Moderator Registriert seit: 18.07.2005 Beiträge: 4.072	Code: .form-errors { width: 400px; margin: 0 auto; padding: 10px; margin: 0; border: 2px solid red; color: red; background-color: white; } Du überschreibst die Angabe für den Außenabstand.

14.03.2011, 15:15
hts Erfahrener Benutzer Registriert seit: 07.09.2010 Beiträge: 722 PHP-Kenntnisse: Fortgeschritten	Ich danke dir! Ich habe jetzt stundenlang an allen möglichen Stellen nach dem Fehler gesucht nur das habe ich nicht gesehen. Wo ist der Kopf-gegen-Wand-hau-Smilie? PS: Euch beiden danke ich natürlich. Alle sehen's sofort Geändert von hts (14.03.2011 um 15:20 Uhr).