Bildschirmgrösse, Tabelle passt sich nicht an

  • Guten Abend
    Ich habe HTML und CSS mit dem Seminar gelernt und eine Web-Seite nur mit dem Webocton scriptly geschrieben. Eigentlich bin ich recht zufrieden, aber wenn ich die Seite auf verschiedenen Bildschirmgrössen teste, verschiebt und verszerrt sich die Steuerleiste, die ich mit Hilfe einer Tabelle erstellt habe, total. Dies, obwohl ich alle Angaben in % gemacht habe. Ich weiss einfach nicht mehr, was ich ändern soll. Auch den Rand zieht es nicht ganz heraus.
    Die Seite ist www.meggiana11.it . der Code sieht so aus:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
    <head>
    <title>Italien, Meggiana 11, Familie Thalmann,</title>
    <meta http-equiv="content-type" content="text/html; charset=us-ascii" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />
    <meta name="generator" content="Webocton - Scriptly (www.scriptly.de)" />
    <link href="styles/style_index.css" type="text/css" rel="stylesheet" />
    </head>


    <body>
    <div id="steuerung">
    <table border="2em" width="100%" summary="Steuerelement" cellpadding="10%" style="background-color: rgb(163, 9, 9);"
    >
    <tr>
    <td class="weite">Startseite</td>


    <td class="weite"><a href="lageplan.html">Lageplan</a></td>


    <td class="weite"><a href="grundriss.html">Grundriss Haus</a></td>


    <td class="weite"><a href="fotos.html">Photos</a></td>


    <td class="weite"><a href="ziele.html">Ziele in der Umgebung</a></td>


    <td class="weite"><a href="termine.html">Termine</a></td>


    <td class="weite"><a href="kontakt.html">Kontakt</a></td>
    </tr>
    </table>
    </div>


    <div id="inhalt">
    <img src="images/IMG_0522.jpg" border="0" alt="Haus" width="100%" /> <br /> <br /> <br /> <br />


    <h1>Willkommen in Meggiana!</h1>
    </div>


    </body>
    </html>


    und das ausgelagerte Css-Element:
    body {
    background-color:#E3AEE3;
    margin-left:3%;
    width:92%;


    }


    #steuerung {
    background-color:#A30909;
    height:10%;
    margin-top:2%;
    padding:1%;
    width:auto
    }


    .weite {
    background-color:#A30909;
    border-color:#A30909;
    color:#E1E1E1;
    font:Verdana serif;
    font-size:x-large;
    font-variant:small-caps;
    margin:20% 5% 20% 10%;
    text-align:center;
    width:15%
    }


    p {
    color:#000;
    font:verdana serif;
    margin:0 5% 1% 3%;
    text-align:center
    }


    h1 {
    color:#600;
    font:bolder;
    font-size:300%;
    left:25%;
    position:absolute;
    text-align:center;
    top:50%
    }


    a:link {
    color:#F8E7EE
    }


    a:visited {
    color:#ACB5F1
    }


    a:focus {
    color:green
    }


    a:hover {
    color:#FFF
    }


    a:active {
    color:orange
    }








    #inhalt {
    margin:5% 0% 20% 0%;
    position:absolute;
    text-align:center;
    height: 100%;
    width: 92%;
    }



    Was mache ich falsch????

  • Guten Abend,

    Zitat

    verschiebt und verszerrt sich die Steuerleiste

    was meinst du damit ?? weil wenn ich die Seite öffne und die Fenstergröße variiere (Firefox) dann ist bis zu einer Fensterbreite von ca 990px alles OK danach bleibt die Tabellen breite fest - das ist auch korrekt so da der Inhalt diese Größe benötigt.
    Wo ist jetzt dein Problem ??

  • Danke für die rasche Antwort. Ich bin nicht so gut mit beschreiben, habe einen Printscreen gemacht:


    Das Problem erscheint bei einer Grösse von 800x1280 und wird dann extremer. Gut sieht mans auch beim Menuepunkt "Kontakte".

  • Was da passiert ist vollkommen korrekt, weil wie gesagt dein Inhalt benötigt diesen Platz.


    Der Text in den Zellen braucht mind. diese - ich glaube knapp 1000px oder so - daher können die Zellen nicht weiter verkleinert werden.


    Zwing ihm mal nicht deine Schriftgröße (font-size) auf und gucke dann was passiert wenn du die Größe deines Browserfensters änderst ;)

  • Aha, ja, das werde ich versuchen. Danke! Ich kann gerade nicht schauen, eines der Kinder weint, aber morgen finde ich sicher Zeit! Darf ich mich wieder melden?

  • Nei dir entsteht dieses Problem weil du bei einigen Elemtenen Abstände z.B.

    CSS
    margin-left: 10em;

    verwendest... das verhält sich nicht sowei dein

    CSS
    margin: auto;

    ...
    Vermute ich zumindest...



    EDIT: ok nicht nur margin sondern auch padding... (siehe #beschreibung)...


    EDIT2: nimm die ganzen padding-left aus den elementen im #main div und versuch es mal mit

    CSS
    #main { margin:auto; }
    #main > div { margin-left: 50px; }


    Das müsste dein Problem lösen...


    Kanu

  • ich habe jetzt bei der id partner margin-left: 10em; durch margin: auto; ersetzt aber jetzt ist das ganz links am bildschirm rand, aber ich möchte gerne das es noch weiter drinne im bild ist. Doof gesagt, so wie es auf meiner auflösung ist, möchte ich es für jeder auflösung haben.


    im footer passt das ganze ja

  • das sitzt dan alles an der linken seite am rand.


    hier ist mal meine css datei


  • Rhhhhh :cursing: :cursing:


    Ich verweigere gleich die antworten... -.-


    Nimm bitte die margin-left und die padding-left raus und versuche das was ich jetzt dreimal gesagt habe oder nutze zumindest nicht diese em Werte.

  • Was, bei mir die T abelle? Ok, aber wie kann ich dann die Leiste oben machen?
    Übrigens, wenn ich font-style ändere, dann klappts tatsächlich, aber die Schrift ist so klein. Und warum kommt die Färbung der Tabelle nicht bis an den Schluss? Und warum passt sich das Bild nicht bei der Grössenänderung an?

  • Ok, das habe ich nochmals versucht, ich machte das schon mal, habe dann aber nicht rausgefunden, was ich tun muss, wenn ich eben die aufgezählten Punkte nicht übereinander, sondern nebeneinander will.
    Also etwas so: Index Photos Wegbeschreibung Kontakt etc .

  • muus


    versuchs mal mit float: left ;)


    Code
    css :
    #yourdiv ul li {   float:left;   //werden jetzt nebeneinander angezeigt   margin-left:2%;  //sonst kleben sie direkt nebeneinander an    list-style:none; //nervige punkte verschwinden 	
    	}



    denke mal das meinst du oder ? ^^

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!