div container feste höhe

pauledd

Hallo

Ich baue gerade eine Homepage für ein Familienmitglied. (LINK)
Dabei habe ich ein (eher kosmetisches) Problem.

Ich verwende einen div Tag im body als Container um dessen Inhalt
gut zu zentrieren.

Das Problem ist jeh mehr Inhalt ich dem div container hinzufüge desto höher
wird er, obwohl alle Elemente darin mit position:relative angeordnet garnicht so weit nach unten
reichen. Das ist zwar nicht wirklich störend aber die Browser zeigen nun einen langen Scrollbalken
nach unten an obwohl dort gar kein Content mehr vorhanden ist.

Hat jemand eine Idee wie ich trotzdem den Container in der Höhe beschränken oder gar auf den Content schrumpfen lassen kann?

Der style des Containers ist:

HTML

#container {
            border: solid #ff0000;
            display: table;
            margin: 0 auto;
            overflow: hidden;
            max-width: 60em;
        }

Der Container kommt als erstes im body und dann folgen weiter div tags der inhaltlichen Elemente wie Menü
und Text und Bilder:

HTML

<body>
    <div id="container">
        <!-- Haupthintergrund -->
        <img src="bilder/start_hintergrund.jpg" alt="Hintergrundbild">


        <!-- Menü -->
        <div id="menu">
            <a href="index.html">START</a> &nbsp;
            <a href="konzept.html">KONZEPT</a> &nbsp;
            <a href="buchung.html">BUCHUNG</a> &nbsp;
            <a href="bastvorl.html">BASTELVORLAGEN</a> &nbsp;
            <a href="links-und-tipps.html">LINKS&TIPPS</a> &nbsp;
            <a href="kontakt.html">KONTAKT</a>
        </div>
...

Alles anzeigen

wobei ich dann die anderen div tags so formatiere und positioniere:

HTML

#menu {
            display: table;
            border: solid green;
            margin: 0 auto;
            position: relative;
            top: -68.6em;
            font-weight: bold;
            font-size: 1.1em;
            word-spacing: 0.1em;


        }

Alles anzeigen

Hat jemand eine Idee?

Bandit

Zuerst einmal aufräumen und dann weitersehen, siehe http://validator.w3.org/check?verbose=…rk%2Fstart.html

pauledd

Danke für den Link! Jetzt sollte alles Fehlerfrei sein.

MrMurphy

Hallo

Abreißen und mit korrektem HTML und CSS neu erstellen.

Verwende HTML-Elemente nur so, wie die HTML-Regeln es vorsehen. Wenn der HTML-Quelltext unsinnig oder gar falsch erstellt wurde sind CSS-Angaben nur schwer oder gar nicht umzusetzen.

Vermeide unnötige HTML-Elemente.

Füge Hintergrundbilder als Hintergrundbild ein.

Verzichte auf position-Angaben. (Außer eventuell ganz zum Schluß für die schräggestellte Grafik.)

Verzichte auf top-Angaben.

Verzichte auf display: table.

Verwende aktuelles HTML5 und CSS3.

Gruss

MrMurphy

pauledd

Ja danke für den Hinweis. Ich glaube das wird zu umfangreich. Ich hab fast 2 Wochen gebraucht um diesen Müll zu erstellen. Meine HTML Kenntnisse stammen von 2003 und jetzt nochmal komplett die Seite umzugestalten, die ja an sich äusserlich funktioniert ... nee ich glaube da soll sich mein Bruder an jemand wenden der seine Brötchen damit verdient und das ganze aus dem ff. macht.

pauledd

Aber eine Frage hätte ich dann doch noch... Angenommen ich würde das Hintergrundbild als body background-image einbinden, wie
söllte ich dann zum Bsp. die Navigationsleite auf die stelle im Hintergrundbild festnageln ohne irgendwelche "position" angaben?

MrMurphy

Hallo

Am sinnvollsten erstellst du einen Container, zum Beispiel mit dem main-Element, in den der ganze Inhalt kommt.

Dem gibst du dann das Hintergrundbild und eine feste Größe.

Die Abstände werden dann hauptsächlich mit margin, aber auch mit padding, erstellt.

Wobei die Navigation aktuell kaum sichtbar ist. Die würde ich über das main-Element stellen.

Gruss

MrMurphy

pauledd

Okay, also ich habe jetzt ein main mit background image und der Höhe des Hintergrundbildes.

HTML

main {
            background-image: url(bilder/start_hintergrund.jpg);
            background-repeat: no-repeat;
            background-position: center;
            height: 1408px;
            border: solid;
        }
ul {
            list-style-type: none;
        }
        li {
            display: inline;
        }
        nav {
            text-align: center;
            border: solid;
        }

Alles anzeigen

Und naja, die Navigation sollte schon in den Holzrahmen. Kann ich ein nav-Element über das main Element positionieren? Ich habe es jetzt
vor das main-Element geschrieben und es drückt jetzt natürlich das main-Element nach unten.

HTML

<body>
    <nav>
        <ul>
            <li><a href="index.html">LINK1</a></li>
            <li><a href="index.html">LINK2</a></li>
            <li><a href="index.html">LINK3</a></li>
            <li><a href="index.html">LINK4</a></li>
            <li><a href="index.html">LINK5</a></li>
        </ul>
    </nav>
    <main>
    </main>
</body>

Alles anzeigen

- - - Aktualisiert - - -

Ich habe jetzt einfach mal das nav-Element nach dem main geschrieben und dann mit "margin-top: -73em"
nach oben verschoben. Das scheint zu funktionieren.

pauledd

okay, ich glaube ich habe jetzt das Grundlayout hinbekommen, zentriert, mit background-image,ohne position, top, display:table und lässt sich zoomen ohne aus dem Rahmen zu platzen, ohne div tags und alle Abstände über padding und margin. Der Validator zeigt auch keine Fehler mehr an.

Wenn niemand weiter etwas auszusetzten hat (außer über schreckliche Navigation,Farben oder Bilder) würde ich evtl. auf der Seite aufbauen.

HTML

<!DOCTYPE html>
<html lang="de">


<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Testseite</title>
    <style>
        body {
            background-color: #f9c68f;
        }


        main {
            height: 1410px;
            width: 1000px;
            background-image: url(bilder/start_hintergrund.jpg);
            background-repeat: no-repeat;
            background-position: center top;
            margin: 0 auto;


        }


        article {
            padding: 330px 120px 0px 120px;
        }


        nav {
            width: 1000px;
            text-align: center;
            font-size: 1.7em;
            margin: -1180px auto;


        }


        ul {
            list-style-type: none;
            margin-right: 30px;
        }


        nav li {
            display: inline;
            padding: 0px 18px 0px 18px;
            border: solid;
        }


        figure {
            text-align: center;
            border: solid;
            width: 260px;
            float: right
        }


    </style>
</head>


<body>
    <main>
        <article>
            <figure>
                <img src="bilder/testbild-250x360.png">
                <figcaption>Testbild, PNG 250x360</figcaption>
            </figure>
            <h1>Lorem ipsum</h1>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
        </article>
    </main>
    <nav>
        <ul>
            <li><a href="start.html">LINK1</a> </li>
            <li><a href="start.html">LINK2</a> </li>
            <li><a href="start.html">LINK3</a> </li>
            <li><a href="start.html">LINK4</a> </li>
            <li><a href="start.html">LINK5</a> </li>
            <li><a href="start.html">LINK6</a> </li>
        </ul>
    </nav>


</body>


</html>

Alles anzeigen

Tags