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

[ERLEDIGT] Probleme mit Div und Text Position

Developer_X

Neues Mitglied
Hallo Leute, ich habe folgende zwei Probleme:
1. Ich möchte gerne ein Div am untersten Ende meiner Seite darstellen lassen,
aktuell ist er immer nur am unteren Ende des Bildschirmes, und scrollt mit.
2. Ich möchte, dass der Text in dieser Div vertikal zentriert wird, was leider nicht geschieht.

Hier mein HTML Code:
HTML:
<!doctype html>
<html>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link href="stylesheets/style.css" type="text/css" rel="stylesheet" />
    </head>
    <body>
        <div class="mainPanel">
            <div class="titlePanel">
                <div class="logoPanel">
                </div>
            </div>
           
            <div class="menuBarPanel">
                Test
            </div>
        </div>
        <div class="southBarPanel">
            <div>
                <p class="center">Impressum</p>
            </div>
        </div>       
    </body>
</html>

Und hier mein CSS Code:
Code:
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-image: url("../images/background.png");
    background-repeat: repeat;
}

.mainPanel {
    width: 100%;
    height: 100px;
    position: fixed;
    top: 10px;
}

.titlePanel {
    width: 100%;
    height: 100%;
    background: #EDF2F2; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#EDF2F2, white); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#EDF2F2, white); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#EDF2F2, white); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#EDF2F2, white); /* Standard syntax */
}

.logoPanel {
    background: url("../images/logo_de.svg") no-repeat center center;
    width: 100%;
    height: 100%;
}

.menuBarPanel {
    width: 100%;
    height: 30px;
    position: fixed;
    top: 110px;
   
    color:white;
   
    background: blue; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#0033cc, blue); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#0033cc, blue); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#0033cc, blue); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#0033cc, blue); /* Standard syntax */
}

.southBarPanel {
    width: 100%;
    height: 30px;
    position: fixed;
    bottom: 0px;
   
    background: blue; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(blue, #0033cc); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(blue, #0033cc); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(blue, #0033cc); /* For Firefox 3.6 to 15 */
    background: linear-gradient(blue, #0033cc); /* Standard syntax */
       
    color:white;
}

.center {
    text-align: center;
}

Ich danke euch vielmalst für eure Hilfe,
m.f.G.: Developer_X
 
Werbung:
Hey,
den Text vertikal als auch horizontal zentrieren kannst du mit
CSS:
display: flex;
justify-content: center;
align-items: center;
das habe Ich hier mal gemacht: https://jsfiddle.net/yrtv0dr2/
Wenn du nicht willst, dass die Leiste am Ende des Bildschirms klebt, muss du einfach das
CSS:
position: fixed
rausnehmen.
 
Hallo

Ich verstehe dein Problem leider nicht. Du hast jede Menge div und schreibst dann, dass irgendwelche von den div sich nicht so verhalten wie du es wünscht.

Auch bringe ich deinen Quellcode nicht zum scrollen, egal wie klein ich das Fenster ziehe.

Gruss

MrMurphy
 
Werbung:
@LeCub Vielen Dank für dene Antwort!

@MrMurphy:
Oh sry, ja, ich habe im body teil noch einigen Text,
damit man die Seite scrollen kann, hab ihn aber rausgenommen.

Danke sehr für eure Antworten,
m.f.G: Developer_X
 
Zurück
Oben