kostenloser Webspace werbefrei: lima-city


Div's zentrieren

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    browsergame-entwickler

    Kostenloser Webspace von browsergame-entwickler, auf Homepage erstellen warten

    browsergame-entwickler hat kostenlosen Webspace.

    Ich habe ein login feld erstellt und es sah recht einfach aus, nun wollte ich es mit runden ecken und tag/farbe">farbe aufpeppen und sieht auch gut aus aber ich kriege den div container nicht in die mitte meines bildschirmes!

    der code:

    <body>
    	<div id="content_rund">
    		<h2>Chat Zugang</h2>
    		<p>Bitte f&uuml;llen sie das Formular aus und senden sie es ab.<br />
    		Wenn der Benutzername und das Passwort richtig waren, werden sie automatisch zum Chat weitergeleitet.</p>
    
    		<form action="auswerten.php" method="post">
    			<p>Benutzer: <input name="ben"/></p>
    			<p>Passwort: <input type="password" name="pw"/></p>
    			<p><input type="submit" value="Einloggen"/></p>
    		</form>
    	</div>
    </body>


    und das stylesheet dazu:

    html,
    body{
    	text-align: center;
    }
    
    
    #content_rund{
    	height: 500px;
    	width: 500px;
    	background-color: #800000;
    	color: #FFFFFF;
    
    	moz-border-radius: 25px;
    	border-radius: 25px;
    }


    brauche mal eure hilfe, danke!


    EDIT:

    ich habe jetz das ganze mit
    margin-left: 400px;

    gelöst aber ich denke dann ist es nur für mich zentriert, da andere einen größeren desktop haben.
    Kennt wer eine andere lösung?

    Beitrag zuletzt geändert: 26.8.2012 16:16:41 von browsergame-entwickler
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. g****e

    HTML Tag:
    <center><div> blahblah </div></center>


    Liebe Grüße
  4. Autor dieses Themas

    browsergame-entwickler

    Kostenloser Webspace von browsergame-entwickler, auf Homepage erstellen warten

    browsergame-entwickler hat kostenlosen Webspace.

    ggamee schrieb:
    HTML Tag:
    <center><div> blahblah </div></center>


    Liebe Grüße


    das einfachste auf der welt :D
    danke hab garnet dran gedacht :D
  5. g****e

    Ich glaub viele haun mich auch dafür, dass ich das Tag empfehle bzw benutze, weil viele es nicht mögen. Sowas macht man mit CSS, aber ich weiß nicht warum. Das ist einfach und schnell, und genau das, was man oft braucht.
    Vergiss im CSS den text-align:left; nicht ;-) sonst ist dein Text bzw inhalt auch Zentriert.

    Liebe Grüße
  6. Autor dieses Themas

    browsergame-entwickler

    Kostenloser Webspace von browsergame-entwickler, auf Homepage erstellen warten

    browsergame-entwickler hat kostenlosen Webspace.

    der soll ja zentriert werden!
  7. #content-rund {margin: 0 auto;}

    zentriert ebenfalls und niemand meckert, auch niccht der Validator. :wink:
    <center> ist seit HTML4 ein deprecated Tag

    Beitrag zuletzt geändert: 26.8.2012 17:13:30 von fatfreddy
  8. Hallo

    setze einfach um das div noch ein div (wrapper) mit text-align:center;
    und mach in der CSS dazu margin: 0 auto; in Deinem content_rund


    HTML:
    <body>
       <div id="wrapper">
    	<div id="content_rund">
    		<h2>Chat Zugang</h2>
    		...
    	</div>
       </div>
    </body>


    CSS:

    #wrapper {
    	text-align: center;
    }
    
    #content_rund {
    	margin: 0 auto; 
    	height: 500px;
    	width: 500px;
    	background-color: #800000;
    	color: #FFFFFF;
    
    	moz-border-radius: 25px;
    	border-radius: 25px;
    }



    das
    margin: 0 auto;
    ist wichtig, vorallem das "auto" darin,
    damit der Außen-Abstand automatisch angepasst wird und somit Dein content_rund in der Mitte steht

    also nochmal ein Beispiel mit direkter CSS-Style Definition:

    <div style="text-align:center;">
    	<div style="margin: 0 auto; padding:8px; width:550px; height:230px; background:#003366; color:#FFFFFF;">
    		
    		<h3>Titel</h3>
    		<p style="text-align:left;">Text bla bla </p>
    		<p>weiterers <strong>HTML</strong> in der Box </p>
    		
    	</div>
    </div>



    wie fatfreddy schon schrieb: das margin: 0 auto; ist wichtig
    wenn mann eine Box (DIV) innerhalb einer anderen Ebene (body oder div) zentrieren will ...

    Du kannst also auch den "wrapper" DIV weglassen und im body das text-align:center; machen
    das klappt auch, solange du für Dein "content_rund " das
    margin: 0 auto;
    im CSS hast
    :)


    Beitrag zuletzt geändert: 26.8.2012 17:27:20 von tela
  9. Autor dieses Themas

    browsergame-entwickler

    Kostenloser Webspace von browsergame-entwickler, auf Homepage erstellen warten

    browsergame-entwickler hat kostenlosen Webspace.

    okey danke für die antwort mache es aber einfach mit dem center befhel ;)
  10. browsergame-entwickler schrieb:
    okey danke für die antwort mache es aber einfach mit dem center befhel ;)

    Warum nicht sofort richtig? Sich veraltete Lösungen anzugewöhnen, ist keine gute Idee. :wink:

    tela schrieb:
    Du kannst also auch den "wrapper" DIV weglassen und im body das text-align:center; machen
    das klappt auch, solange du für Dein "content_rund " das
    margin: 0 auto;
    im CSS hast

    Weder der Wrapper noch das text-align sind notwendig. text-align:center ist sogar nachteilig, da sich diese Eigenschaft verwerbt und die Inhalte aller Kindelemente auch zentriert würden.

    Beitrag zuletzt geändert: 26.8.2012 19:04:20 von fatfreddy
  11. h**s

    eins noch...

    wenn du etwas sowohl horizontal als aus vertikal relativ zur fenster- bzw. elternelemt-größe zentrieren willst und das möglichst valide, semantisch nicht inkorrekt, suchmaschinenoptimiert, browserkonform und ohne auf aktiviertes javascript angewiesen zu sein, empfehle ich den einsatz eines html-div-konstrukts das eine tabellenstruktur nachahmt z.B.:
    <div class="mittig">
          <div>
                <div>
                                        
                      zu_zentrierender_inhalt
    
                </div>
          </div>
    </div>

    zusammen mit dem css
    .mittig {
          display:table;
          width:100%;
          height:100%;
    }
    .mittig > div {
          display:table-row;
    }
    .mittig > div > div {
          display:table-cell;
          vertical-align:middle;
          text-align:center;
    }

    ergiebt das ein element dessen weiterer inhalt horizontal und vertikal zentriert ist und das du wie eine html-tabelle auszeichnen kannst, also auch mit beliebigem text-align und vertical-align einer tabellenzelle (s.o.).
  12. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!