1. #1
    Avatar von exception
    Registriert seit
    27.03.2012
    Beiträge
    198
    Thanked 57 Times in 36 Posts

    Standard [CSS] Problem mit text-align

    Hallo,
    habe ein kleines Problem mit der text-positionierung in einer div.
    In der untersten Div(#footer) sollte der Text mittig sein. Im Firefox jedoch ist der Text nur irgendwie
    komisch verschoben.(IE passt)

    Wäre nett wenn sich das kurz wer anschauen kann

    Code:

    Spoiler:


    Quelltext:

    HTML-Code:
    <html>
    <head>
        <title>GEWI-Immobilien</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
    
    <div id="head">
        <div id="logoContainer">
            GEWI<div class="slogan">IMMOBILIEN</div>
        </div>
        <div id="menuContainer">
            <a href="#">&raquo; About GEBI</a><br />
            <a href="#">&raquo; Immobilien</a><br />
            <a href="#">&raquo; Information</a><br />
            <a href="#">&raquo; Partner</a><br />
            <a href="#">&raquo; Kontakt</a><br />
        </div>
        <div id="slider1"></div>
    </div>
    
    <div id="mainContent">
        <div id="txtContent"></div>
    
        <div class="sideBox">
            <p>What's new?</p>
            Mauris volutpat ligula id urna facilisis elementum. Sed eros nisi, faucibus ac semper quis, volutpat sit amet velit.
        </div>
        
        <div class="sideBox">
            <p>Our Team</p>
            Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin lacinia posuere aliquet. Etiam pharetra justo sapien, sit amet interdum neque. 
        </div>
        
        <div class="sideBox">
            <p>Contact us</p>
            Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin lacinia posuere aliquet. Etiam pharetra justo sapien, sit amet interdum neque. 
        </div>
    </div>
    
    <div id="footer">GEWI Immobilien | Teststraße 13 | A-1220 Wien | 01/132874</div>
    
    
    
    
    
    
    
    </body>
    </html>
    Stylesheet:

    Code:
    body {
        background: #FFFFFF;
        text-align: center;
        padding: 0px;
        margin: 0px;
    }
    
    #head {
        width: 800px;
        height: 130px;
        margin: 0 auto;
        border-bottom: 1px solid gray;
        padding-left: 5px;
        padding-right: 5px;
        margin-bottom: 8px;
    }
    
    #logoContainer {
        width: 140px;
        height: auto;
        background: #D1D1D1;
        color: #207ce5;
        font-size: 33px;
        font-family: Verdana;
        font-weight: bold;
        padding-top: 50px;
        padding-bottom: 10px;
        border: 1px solid #AEAFB0;
        border-top: none;
        float: left;
    }
    
    .slogan {
        font-size: 17px;
        font-family: MONOSPACE;
        font-weight: lighter;
        color: #647075;
    }
    
    #menuContainer {
        width: auto;
        height: 115px;
        float: left;
        margin-left: 25px;
        padding-top: 15px;
        text-align: left;
    }
    
    #menuContainer a {
        display: block;
        position: absolute;
        text-decoration: none;
        font-family: LUCIDA CONSOLE;
        font-size: 14px;
        color: #8D8E8F;
    }
    
    #menuContainer a:hover {
        color: #207ce5;
        font-weight: bold;
    }
    
    #slider1 {
        width: 500px;
        height: 100px;
        float: right;
        text-align: left;
        margin-top: 15px;
        border: 1px solid #ACADAD;
        background: url(img/head2.png);
    }
    
    #searchContainer img {
        width: 32px;
        height: 32px;
        float: left;
    }
    
    #mainContent {
        display: block;
        width: 800px;
        height: 443px;
        margin: 0 auto;
    }
    
    #footer {
        width: 800px;
        height: 25px;
        border-top: 1px solid gray;
        margin: 0 auto;
        text-align: center;
        position: relative;
    }
    
    #txtContent {
        display: block;
        float: left;
        width: 610px;
        height: 430px;
    }
    
    .sideBox {
        display: block;
        width: 170px;
        height: auto;
        background: #EBECED;
        float:right;
        clear: right;
        margin-bottom: 15px;
        border: 1px solid #919191;
        font-family: Tahoma;
        font-size: 13px;
        text-align: justify;
        padding: 5px;
    }
    
    .sideBox p {
        width: 172px;
        height: auto;
        margin-top: -5px;
        margin-left: -5px;
        margin-bottom: 3px;
        padding-top: 5px;
        padding-bottom: 5px;
        padding-left: 8px;
        text-align: left;
        background: #31A5D6;
        font-family: Verdana;
        font-size: 15px;
        
        background: rgb(73,155,234); /* Old browsers */
        background: -moz-linear-gradient(top,  rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(73,155,234,1)), color-stop(100%,rgba(32,124,229,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  rgba(73,155,234,1) 0%,rgba(32,124,229,1) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  rgba(73,155,234,1) 0%,rgba(32,124,229,1) 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  rgba(73,155,234,1) 0%,rgba(32,124,229,1) 100%); /* IE10+ */
        background: linear-gradient(to bottom,  rgba(73,155,234,1) 0%,rgba(32,124,229,1) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499bea', endColorstr='#207ce5',GradientType=0 ); /* IE6-9 */
    }


    GEWI-Immobilien

    LG

  2. #2
    Avatar von DMW007
    Registriert seit
    15.11.2011
    Beiträge
    6.081
    Thanked 9.118 Times in 2.995 Posts
    Blog Entries
    5

    Standard AW: [CSS] Problem mit text-align

    Um Container zu zentrieren reicht dem IE text-align:center.
    Für Firefox und soweit ich das im Kopf habe auch noch ein paar andere Browser musst du den außenabstand links/rechts auf auto setzen, also

    Code:
    margin-left:auto;
    margin-right:auto;
    Oder die Kurzschreibform:

    Code:
    margin: 0 auto;
    Bitte in Zukunft nicht nur Seiten verlinken sondern den nötigen Quellcode hier im Thread posten.
    In einem Jahr sieht deine Seite möglicherweise ganz anders aus oder ist nicht mehr online, und andere User die auf diesen Thread stoßen können ggf nichts mehr damit anfangen.


  3. #3
    Avatar von exception
    Registriert seit
    27.03.2012
    Beiträge
    198
    Thanked 57 Times in 36 Posts

    Standard AW: [CSS] Problem mit text-align

    Ich glaube du hast mich falsch verstanden.
    Die div selbst ist ja zentriert aber der Text ist trotz "text-align: center" nicht zentriert. Ich hatte dieses
    Problem schon mal aber ich hab mir leider nicht gemerkt wie ich's damals gelöst habe.

    Und sorry wegen dem verlinken.. Ich ändere das dann gleich!

  4. #4
    Avatar von DMW007
    Registriert seit
    15.11.2011
    Beiträge
    6.081
    Thanked 9.118 Times in 2.995 Posts
    Blog Entries
    5

    Standard AW: [CSS] Problem mit text-align

    Wenn dein Container keine feste Breite hat reicht sogar text-align:center aus.

    Code:
    <div class="container">bla</div>
    Code:
    .container {
        text-align:center;
    }
    Getestet mit FF, Chrome und Opera.
    Wenn dein Container eine feste breite hat musst du mit margin arbeiten wie ich es in meinem letzten Post schon gesagt habe:

    Code:
    .container {
        width:200px;
        margin: 0 auto;
    }


Ähnliche Themen

  1. Knuddels Text Bug's
    Von ZarneXxX im Forum Darstellung
    Antworten: 0
    Letzter Beitrag: 03.10.2012, 20:46
  2. [H] VB Text Senden
    Von AmJano im Forum Knuddels Programmierung
    Antworten: 2
    Letzter Beitrag: 19.08.2012, 17:12
  3. 3D CSS Text Generator
    Von Snees im Forum CSS
    Antworten: 0
    Letzter Beitrag: 03.08.2012, 18:46
  4. 3D Text Dingsbums. :D
    Von Bossgen im Forum Showroom
    Antworten: 11
    Letzter Beitrag: 16.02.2012, 21:25
  5. Textbox1.Text = Textbox7.Text + keys.enter
    Von gcp im Forum Hochsprachen
    Antworten: 20
    Letzter Beitrag: 22.03.2011, 22:13
Diese Seite nutzt Cookies, um das Nutzererlebnis zu verbessern. Klicken Sie hier, um das Cookie-Tracking zu deaktivieren.