[CSS] Problem mit text-align

**exception** · 05.11.2012, 16:09

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

**DMW007** · 05.11.2012, 16:21

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.

**exception** · 05.11.2012, 16:45

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!

**DMW007** · 07.11.2012, 15:18

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;
}

U-Labs

Account-Boerse

U-IMG

Thema: [CSS] Problem mit text-align

[CSS] Problem mit text-align

AW: [CSS] Problem mit text-align

AW: [CSS] Problem mit text-align

AW: [CSS] Problem mit text-align

Ähnliche Themen

Knuddels Text Bug's

[H] VB Text Senden

3D CSS Text Generator

3D Text Dingsbums. :D

Textbox1.Text = Textbox7.Text + keys.enter