Hilfe, kann nur nach unten scrollen

Daniel59

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]

Gastl

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ß

explanator

Das hier ist zudem unter anderem falsch:

HTML

<table align="center" width="80%" background="webgallerie/InhaltBack.jpg" style="background-size:100%">
    <tr>
    <td style="color:#060">
    <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.

Daniel59

Gastl Danke für den Hinweis --- Hier der Link: http://www.spzg-einigkeit-soest.de//Spielmanszug%…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

explanator

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.

HTML

<!doctype html>
<html>    
    <head>        
        <meta charset="utf-8">        
        <title>Spielmannszug Einigkeit Soest         
        </title>        
        <link rel="stylesheet" type="text/css" href="css/Design.css">    
    </head>    
    <body>                      
        <header>                                  
            <h1> Spielmannszug Einigkeit Soest e.V. </h1>                                              
            <nav>                                                                                                                                                                  
                <ul id="navi_main">                                                                                                              
                    <li class="Startseite"><a href="index.php">Startseite</a></li>                                                                         
                    <li class="Team">Das Team                                                                                  
                        <ul class="dropdown_navi">                                                                                         
                            <li><a href="index.php">Der Vorstand</a></li>                                                                                 
                            <li><a href="index.php">Die Mitglieder</a></li>                                                                           
                        </ul>                                                                       
                    </li>                                                                                                                   
                    <li class="News">News                                                                              
                        <ul class="dropdown_navi">                                                                                     
                            <li><a href="index.php">Kalender</a></li>                                                                             
                            <li><a href="index.php">Üben</a></li>                                                                           
                        </ul>                                                                       
                    </li>                                                                                                              
                    <li class="Galerie">Galerie                                                                              
                        <ul class="dropdown_navi">                                                                                     
                            <li><a href="index.php">Schützenfest 2013</a></li>                                                                             
                            <li><a href="index.php">Schwefe 2013</a></li>                                                                           
                        </ul>                                                                       
                    </li>                                                                                                              
                    <li class="Kontakt">Kontakt                                                                              
                        <ul class="dropdown_navi">                                                                                     
                            <li><a href="kontakt.php">Kontakt</a></li>                                                                             
                            <li><a href="index.php">Impressum</a></li>                                                                           
                        </ul>                                                                       
                    </li>                                                                     
                    <li class="Chronik"><a href="index.php">Chronik</a></li>                                                                     
                    <li class="GBook"><a href="index.php">Gästebuch</a></li>                                                                                                          
                </ul>                                                                                                                                                      
            </nav>                                                 
        </header>                                  
        <section>                                 
            <h2>Chronik</h2>                    
            <p>                        
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet lorem nec eros mollis consectetur. Ut eget felis quis odio eleifend sollicitudin eget eget arcu. Pellentesque non enim laoreet, interdum dui ut, bibendum tellus. Praesent nisi diam, varius sit amet magna et, convallis malesuada nisi. Mauris nec semper mi. Phasellus pharetra augue metus, hendrerit ultrices nisi sollicitudin non. Sed ornare nulla nisi. Aenean sem nulla, dignissim eget pulvinar a, gravida in purus. Nam pellentesque nulla a nulla tristique facilisis. Ut eros velit, congue a condimentum eu, volutpat quis mi. Fusce a velit pretium, vehicula ipsum a, placerat nisl. Nullam auctor lobortis orci non imperdiet. Maecenas condimentum nulla id purus blandit tempor.                  
            </p> 
        </section>                              
        <footer>                                                               
            <ul>                                             
                <li>Copyright © 2014 Spielmannszug Einigkeit Soest e.V.</li>                                                 
                <li class="fussleiste"><a href="impressum.html">Impressum</a></li>                                                 
                <li class="fussleiste"><a href="links.html">Links</a></li>                                                    
                <li class="fussleiste"></li>                                                 
                <li class="fussleiste">
                    <a id="5165151" href="http://www.besucherzaehler-counter.de">Website Counter</a>
                    <script type="text/javascript" src="http://www.besucherzaehler-counter.de/jnsdjfndf.php?234234=5165151&amp;676876=17"></script>                            
                </li>                                       
            </ul>                                                   
        </footer>                 
    </body>
</html>

Alles anzeigen

Daniel59

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

Gastl

Jetzt habe ich mal die blöde Frage, was meinst du denn mit vergrößern? Strg+ etwa?

Daniel59

ja genau, zB

Gastl

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.

Daniel59

Soll also bedeuten, wenn ich in der width anstatt % sonder mit px angaben arbeite, würde sich mein "problem" beantworten ?

explanator

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.

Tags