✔ Probleme mit Darstellung (Text soll mittig ausgerichtet sein)

[eco4ever]

Hallo,

ich habe ein Projekt im Studium und es läuft alles soweit. Außer das Design lässt zu wünschen übrig

Ich bekomme es nicht hin das die gesamten Inhalte Mittig dargestellt werden und je nach browsergröße auch mittig bleiben.

hierzu die Css und php Dateien.

CSS Style Datei:

.grossebox {
             width: 100%;
             height: 400px;
             background-color: #81BEF7;
             border-radius: 50px;
             margin-left: auto;
             margin-right: auto;
             margin-top: -21px;
             margin-bottom: -21px;
    text-align: center;

}
table {
    margin-left: auto;
    margin-right: auto;
}
/* css für navigation */

#navigation {
    width: 100%;
    height: 100px;
    background-color: white;
    border-radius: 50px;
    text-align: center;

}
body {
    margin: 0;
    padding: 0;
}
#logo {
    width: 100px;
    height: 100px;
    float: left;
    margin-left: 50px;
}

/* */

li {
    float: left;
    margin-left: 10px;
    list-style: none;
    text-align: center;

}
ul {
    padding-top: 45px;
    text-align: center;

}

.hinzufuegen{
    background:#81BEF7 ;
    width:100% ;
    border-radius: 50px ;
    text-align: center;
    margin-top: -21px;
    margin-bottom: -21px;
}
#footer {
    width: 100%;
    height: 100px;
    background-color: white;
    border-radius: 50px ;
    margin-left: auto;
    margin-right: auto;
}

Navigation

<div id="navigation">
    <div id="table">
    <img id = "logo" src = "../images/logo.png"/>
    <ul >
        <li> <a href = "../index.php">Home</a></li>
        <?php if (isset ($_SESSION ["login"]) && $_SESSION ["login"] == 1){?>
             <li> <a href = "../seiten/liste.php">Einkaufsliste</a></li>
        <?php } ?>
        <?php if (isset ($_SESSION ["login"]) && $_SESSION ["login"] == 1){?>
            <li> <a href = "../seiten/logout.php">Abmelden</a></li>
        <?php }?>
    </ul>
    </div>
</div>

Footer

<div id="footer">
    <ul>
        <li> <a href = "../seiten/ueber.php">&Uuml;ber uns</a></li>
        <li> <a href = "../seiten/impressum.php">Impressum</a></li>
    </ul>
</div>

zurzeit sieht es so aus

 

[alxy]

Ich kann das Bild wegen Proxyeinstellungen nicht öffnen, aber um etwas zu zentrieren (einen div fester Breite) nutzt man normalerweise margin: 0 auto;

Bei layoutproblemen ist es zudem meistens gut, sein Problem mal übersichtlich auf http://jsfiddle.net/ darzustellen.

 

[eco4ever]

jsfiddle habe ich noch nie benutzt was soll ich da denn eintragen?
margin: 0 auto; hilft leider nicht wirklich da passiert nichts.

hab eigentlich alles soweit am laufen mit php und mysql . nur mit dem css Krams komm ich nicht wirklich klar.
Mussten uns das dieses Semester relativ alles selber beibringen

 

[alxy]

Auf jsfiddle kannst du dein Problem demonstrieren. Eigentlich musst du da nur den generierten HTML und CSS (und evt JS) Code reinkopieren (Also den, den du siehst wenn du im Browser Strg + U drückst und nicht den Code, wo noch die ganzen PHP-Codes drinn sind).

 

[eco4ever]

ich probiere es mal
kann ich das denn speichern und hier rein posten?

Edit:

http://jsfiddle.net/5LH3v/

da ist es

 

[alxy]

Jop, oben findest du die Links "Save" und "Share"

 

[eco4ever]

http://jsfiddle.net/5LH3v/

 

[alxy]

Habe den Footer mal zentriert. Das problem ist, dass du keine feste Breitnangabe hast, dann ist es immer etwas tricky: http://jsfiddle.net/5LH3v/2/

Und nochwas: Wenn du eifnach schnell ein Ergebniss haben möchtest, nimm lieber http://getbootstrap.com/ . Da musst du dir um das CSS keine Gedanken mehr machen. Parr Beispiele die man direkt Copy &Pasten kann gibbet auch: http://getbootstrap.com/getting-started/#examples

 

[eco4ever]

das stimmt mit getbootstrap , aber mein Dozent will das wir alle selber schreiben.
mit dem footer haut das hin . sehr geil danke.

hast du noch ne Idee wie ich die Navigation und das logo mittig bekomme?

grüße

 

[alxy]

Bor ist das immer ein gefummel. Deine Klassen und IDs sind auch manchmal etwas unglücklich gewählt. Ich würde dem Dozenten jetzt mal sofort ne Mail schreiben und fragen, ob du nicht Bootstrap verwenden darfst. Ich meine, erstens funktioniert das dann auch in jedem Browser (Ich denke mal, du testest derzeit auf einem bis max zwei browsern. Schau es dir mal auf den hundert anderen Browsern, betreibssystemen und Endgeräten (Smartphones, Tablets, SmartTVs, 4k-Monitoren, Laptops, ...) an - das wirst du dann spätestens anfangen zu heulen. Desweiteren sind Funktionalität und Aussehen bei Bootstrap einfach tausendmal besser/schöner sowie eine gewisse "Einheit" gegeben (gleiche Abstände, Farben, Buttons, Inputs, ...). Außerdem geht es bei dem projekt doch sehr wahrscheinlich vielmehr um die Programmierung (in PHP) und das Design der Datenbank (vermutlich MySQL). Das Layout (HTML) musst du bei Bootstrap ja auch selber schreiben, es ist lediglich so, dass eben mit gewissen Klassen/IDs schon Styles verknüpft sind.

Hier mal mein Gehacke für die Hauptnavigation: http://jsfiddle.net/5LH3v/4/
Wobei ich auch da sagen muss, dass ich links-gerichtete Navigationen natürlicher finde. Zentriert sieht gerade mit dem Logo davor kacke aus (meine Meinung).