Hilfe, kann nur nach unten scrollen

  • Hallo zusammen, ich habe das Problem, dass wenn ich meine Webseite und einer kleineren Auflösung betrachte, und dann ggf. auch noch vergrößere, dass Bild nur nach unten scrollen kann und sich das
    ganze somit ziehmlich staucht, würde gerne es so haben, dass es sich auch nach rechts ausdehnt beim vergrößern.


    Kann mir da wer helfen ?



    [TABLE='class: outer_border, width: 800, align: center']

    [tr]


    [td][/td][/tr][td]


    [/td]


    [/TR]
    [/TABLE]



    [TABLE='class: outer_border, width: 800, align: center']

    [tr]


    [td]

    @charset "utf-8";
    /* CSS Document */



    @import url(Dropdown_Main_Navi.css);



    html, body
    {
    text-align:center;
    }





    #webseite
    {
    width:90%;
    margin:0 auto;
    }



    #kopf
    {
    position:fixed;
    width:90%;
    height:160px;
    background:url(../webgallerie/header_back.jpg);
    background-size:100% 100%, auto;
    color:silver;
    text-align:center;
    top:0;
    margin-bottom:10px
    border-radius:30px;
    -moz-border-radius:30px;
    -webkit-border-radius:30px;
    -o-border-radius:30px;
    }



    #hidden-kopf
    {
    width:90%;
    height:160px;
    border-radius:30px;
    margin-bottom:10px;
    -moz-border-radius:30px;
    -webkit-border-radius:30px;
    -o-border-radius:30px;
    }



    #kopf h1
    {

    font-size:45px;
    font-weight:bold;
    color:yellow;
    font-family:Lucida Calligraphy;
    }



    #main
    {
    width:100%;

    }



    /*
    #menue
    {
    background-color:#333;
    width:15%;
    float:left
    }



    #inhalt
    {
    width:65%;
    float:right;
    }
    */



    #fussleiste
    {
    width:100%;
    height:150px;
    margin-top:30px;
    border-radius:30px;
    -moz-border-radius:30px;
    -webkit-border-radius:30px;
    -o-border-radius:30px;
    }



    .fussleiste
    {
    font-size:20px;
    font-weight:bold;
    color:yellow;
    }



    .fussleiste a
    {
    font-size:20px;
    font-weight:bold;
    text-decoration:none;
    text-decoration:underline;
    color:yellow;
    }



    .fussleiste a:hover
    {
    font-size:30px;
    font-style:italic;
    letter-spacing:2px;
    }




















    [/td]


    [/tr]


    [/TABLE]

  • Hallo,
    erwartest du allen Ernstes, dass sich der geneigte Helfer erst Dateien erstellt, deinen Inhalt reinpackt und dann testet? Ein Link zur Seite wäre der richtige Weg.


    Abgesehen davon; beim überfliegen ist Murks zu erkennen. Warum packst du nicht alle Stylesheetangaben in die Design.css rein, sondern verteilst auch noch was davon in den HTML-Quelltext?


    Mit freundlichem Gruß

    Gegen Mods kommt man nicht an, die haben immer Recht. Sind scheinbar nicht kritikfähig.

  • Das hier ist zudem unter anderem falsch:

    HTML
    1. <table align="center" width="80%" background="webgallerie/InhaltBack.jpg" style="background-size:100%">
    2. <tr>
    3. <td style="color:#060">
    4. <h1 `><u><em><strong>Chronik</strong></em></u></h1><br><br>


    • Tabelle für nicht tabellarische Daten verwendet.
    • align="center" ist falsch, Verwende CSS dafür
    • background="webgallerie/InhaltBack.jpg" ist falsch, gehört ebenso ins CSS
    • <h1 `><u><em><strong>Chronik</strong></em></u></h1> ist falsch. H1 kann mit CSS formatiert werden U-Element ist überflüssig, Em-Element ist überflüssig, Strong-Element ist überflüssig.
    • BR-Elemente als Abstandshalter zu missbrauchen ist falsch. Verwende margin oder padding im CSS für Abstände.


    Das war nur mal ein kurzer Ausflug, da liegt noch viel viel mehr im argen.


    Bitte verwende den Validator zum testen auf Fehler.
    Die Semantik musst du selbst erlernen.

  • Gastl Danke für den Hinweis --- Hier der Link: http://www.spzg-einigkeit-soes…t%20Soest%202.0/index.php



    explanator Danke auch dir, ich habe den Validator ausgeführt und alle Fehler behoben, laut Validator habe ich keine Fehler in der index.php


    Hier nochmal der überarbeitete code:


    [TABLE='class: outer_border, width: 800, align: center']

    [tr]


    [td][/td][/tr][td]


    [/td]


    [/TR]
    [/TABLE]


    und die css


    [TABLE='class: outer_border, width: 800, align: center']

    [tr]


    [td]

    @charset "utf-8";
    /* CSS Document */



    @import url(Dropdown_Main_Navi.css);
    @import url(kontaktformular.css);



    body
    {
    text-align:center;
    background: url(../webgallerie/BodyBack.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover
    }





    #webseite
    {
    width:90%;
    margin:0 auto;
    }



    #kopf
    {
    position:fixed;
    width:90%;
    height:160px;
    background:url(../webgallerie/header_back.jpg);
    background-size:100% 100%, auto;
    color:silver;
    text-align:center;
    top:0;
    margin-bottom:10px
    border-radius:30px;
    -moz-border-radius:30px;
    -webkit-border-radius:30px;
    -o-border-radius:30px;
    }



    #hidden-kopf
    {
    width:90%;
    height:160px;
    border-radius:30px;
    margin-bottom:10px;
    -moz-border-radius:30px;
    -webkit-border-radius:30px;
    -o-border-radius:30px;
    }



    #kopf h1
    {

    font-size:45px;
    font-weight:bold;
    color:yellow;
    font-family:Lucida Calligraphy;
    }







    #main
    {
    width:100%;
    }



    #inhaltstartseite h1
    {
    text-align:center;
    padding-bottom:15px;
    text-decoration:underline;
    font-weight:bold;
    font-style:italic;
    }





    .inhalttable
    {
    background:url(../webgallerie/InhaltBack.jpg);
    background-size:100%;
    width:80%;
    margin-right:10%;
    margin-left:10%;
    }





    /*
    #menue
    {
    background-color:#333;
    width:15%;
    float:left
    }
    */
    #inhalt
    {
    width:60%;
    float:right;
    }





    #fussleiste
    {
    width:100%;
    height:150px;
    margin-top:30px;
    border-radius:30px;
    -moz-border-radius:30px;
    -webkit-border-radius:30px;
    -o-border-radius:30px;
    }



    #fussleiste table
    {
    width:100%;
    border:0;
    }



    .fussleiste
    {
    width:10%;
    font-size:20px;
    font-weight:bold;
    color:yellow;
    }



    .fussleistecopy
    {
    width:60%;
    font-size:20px;
    font-weight:bold;
    color:yellow;
    text-align:left;
    }



    .fussleiste a
    {
    font-size:20px;
    font-weight:bold;
    text-decoration:none;
    text-decoration:underline;
    color:yellow;
    }



    .fussleiste a:hover
    {
    font-size:30px;
    font-style:italic;
    letter-spacing:2px;
    }



    .clearfloat
    {
    clear:both
    }

















    [/td]


    [/tr]


    [/TABLE]



    Vielleicht kann mir jetzt bei meinem Problem geholfen werden ?
    Wäre sehr toll, danke im Voraus !


    LG Daniel

  • Ich habe dir mal dein HTML-Code aufgeräumt und korrigiert..
    So sollte es aussehen.


    Das CSS passt du jetzt einfach selber an. Das passt dann schon.


  • Hallo explanator, vielen Dank fuer deine Antwort, jedoch hilft mir das nicht bei meinem Problem, dass ich nur nach unten scrollen kann. ich moechte dass beim vergrößern, sich das bild auch nach rechts ausdehnt und man nach rechts scrollen kann :)

  • Naja, solange der Content sich dynamisch an das Fenster anpasst, werden halt keine waagerechten Scrollbalken angezeigt. Ab einer bestimmten Größe allerding, zerschießt es dein Layout.

    Gegen Mods kommt man nicht an, die haben immer Recht. Sind scheinbar nicht kritikfähig.

  • nein, aber mit em eventuell. Da ist aber Sache von CSS. Html-Code hat du ja schon erhalten.


    Wenn du die Schrift vergrösserst mit STRG + dann ändert sich manchmal, also je nach Einstellung nur die Schriftgrösse, und alles was als width oder height in em vereinbart ist ändert sich mit, der Rest nicht.


    - - - Aktualisiert - - -


    nein, aber mit em eventuell. Da ist aber Sache von CSS. Html-Code hat du ja schon erhalten.


    Wenn du die Schrift vergrösserst mit STRG + dann ändert sich manchmal, also je nach Einstellung nur die Schriftgrösse, und alles was als width oder height in em vereinbart ist ändert sich mit, der Rest nicht.