• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

browser größe

F

fedon

Neues Mitglied
Hallo ich hab ein kleines problem und zwar wenn ich den browser klein mach dann verschiebt sich der mittelteil meiner homepage mit
ich finde den fehler nicht und dann kommt noch hinzu das mein hintergrund wie gewollt nach der menge des textes anpasst aber von ich
die seite raus scrolle dann sieht man unten auch noch das weisse
kann mir da jemand helfen
hier die html codes und css

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="robots" content="INDEX,FOLLOW">
<meta name="Author" content="wgmedia.de">
<meta name="Keywords" content=", ">
 <meta name="Description" content="">
<meta http-equiv="cache-control" content="no-cache">
<meta name="page-type" content=" homepage">
<title>Startseite | Willkommen bei Gyjrevci</title>
<link rel="stylesheet" href="format.css" type="text/css">
</head>
<body>
<table id="aussen" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">

  <tbody>
    <tr>

      <td align="center" width="100%">

      <table border="0" cellpadding="0" cellspacing="0" width="1062">

        <tbody>
          <tr>

            <td id="top1" height="80" valign="middle" width="1062"><span id="hpname"> </span></td>

          </tr>

          <tr>

            <td id="top2" height="172" valign="middle">
            <table class="menu1" align="center" border="0" cellpadding="0" cellspacing="0" height="176" width="957">

  <tbody>
                <tr>


    <td height="176" width="38%">           </td>

    <td width="10%"><a href="1_index.html">Startseite</a></td>

    <td width="10%"><a href="2_leistungen.html">Leistung</a></td>

    <td width="10%"><a href="3_galerie.html">Galerie</a></td>

    <td width="10%"><a href="4_kontakte.html">Kontakte</a></td>

    <td width="10%"><a href="5_impressum.html">Impressum</a></td>

    <td width="11%"><a href="6_partner.html">Partner</a></td>

    <td width="1%">      </td>

  </tr>

              </tbody>
            </table>
            </td>

          </tr>

          <tr>

            <td id="leiste">      </td>

          </tr>



        </tbody>
      </table>
      <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
     <tbody>
          <tr>

            <td id="main" align="center" height="600" valign="top" width="100%">
            <table id="main2" align="center" border="0" cellpadding="0" cellspacing="0" width="766">

              <tbody>
                <tr>

                  <td style="border-right: 0px solid rgb(255, 255, 255);">          </td>



                  <td style="border-left: 0px solid rgb(255, 255, 255);"></td>

                  <td id="inbox">
           
                  </td>

  <td><img src="http://www.html.de/images/pixelspace.gif" alt="" border="0" height="1" width="30"></td>

                </tr>

              </tbody>
            </table>

            </td>



          </tr>


        </tbody>
      </table>

<!-- fuss-->
      <table border="0" cellpadding="0" cellspacing="0" width="100%">

        <tbody>
          <tr>

            <td id="fussb">
            <br>


            </td>

          </tr>

          <tr>

            <td id="fussb2">



            </td>

          </tr>

        </tbody>
      </table>

<!-- ende fuss-->

      </td>

    </tr>

  </tbody>
</table>




</body>
</html>

HTML: 
body
{         padding:0px;margin-top: 0px; margin-left: 0px; margin-right: 0px;margin-bottom: 0px
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-color: #4D4C48;
    padding: 0px;
    background-image: url(images/bgmain.jpg);
    background-repeat: repeat-y;
    background-position: center bottom;

    
{margin-top: 0px;  margin-left: 0px; margin-right: 0px;margin-bottom: 0px; background-color: #383838; padding:0px;
background-image:url(images/bgmain.jpg);
background-repeat:repeat-y;
background-position:50% 0%;width:100%;}
}



#aussen
{padding:0px;margin-top: 0px; margin-left: 0px; margin-right: 0px;margin-bottom: 0px;
background-image:url(images/lay_inkl.jpg);background-repeat:no-repeat;
background-position:center top;
}


h1{
    color: #17731E;    
}
h2{
    color: #17731E;
    padding-bottom: 4px;
    font-size: 18px;
    font-family: Arial, Helvetica, sans-serif;
}

.logostyle {border:solid 1px #fff;}

.imgstyle {float:left;border:solid 1px #800000;margin-left:0px;margin-top:20px;margin-bottom:20px;margin-right:20px}


#bannertop
{height:80px;text-align:center;
background-image:url(images/hinter.jpg);
background-repeat:repeat;
background-position:center top;
border-bottom:solid 1px #fff;}

#top1 {
    height: 40px;
    vertical-align: bottom;
    text-align: right;
    padding-right: 20px;
    color: #666666;
    font-size: 30px;
}

#top2 {
    height: 54px;
    vertical-align: middle;
    text-align: right;
    padding-right: 20px;
    padding-top: 20px;
    color: #666666;
    font-size: 14px;
}

#leiste {
    vertical-align: middle;
    text-align: left;
    height: 105px;
    border-top: solid 0px #CFCFCF;












background-color:#;
    padding-top: 0px;
    left: 0px;
}


#hpname {
    letter-spacing: -2px;
    font-size: 22px;
    font-family: "arial", helvetica, verdana, tahoma, sans-serif;
    color: #009900;
    font-style: normal;
    width: 700px;
    padding-left: 10px;
    padding-right: 20px;
    border-top: solid 0px #666666;
    padding: 0px;
}


.buleiste {
    vertical-align: middle;
    height: 41px;
    border-bottom: solid 0px #fff;
    background-color:#;
    margin: 0px;
    padding: 0px;

}


.menutrenn {
    border-bottom: solid 0px #fff;
    color: #009900;
    margin: 0px;
    padding: 0px;
    font-size: 20px
}


.menu2 a, .menu2 a:visited , .menu2 a:active {
    display: block;
    color: #fff;
    text-decoration: none;
    font-size: 15px;
    font-family: "arial", helvetica, tahoma, verdana, sans-serif;
    padding-left: 8px;
    padding-right: 8px;
    padding-bottom: 0px;
    padding-top: 0px;
    line-height: 35px;
    height: 35px;
    text-align: center;
    vertical-align: middle;

background-color:#;
    font-variant: small-caps;
    background: transparent;
}

.menu2 a:hover {
    color: #fff;
    background-repeat: repeat;
    background-color: #666666;

}



#main{  height:800px;
background-image:url(images/bgin.jpg);background-repeat:no-repeat;
background-position:center top; background-color:#;
}

#main2{background-image:url(images/xbginbtm.jpg);background-repeat:no-repeat;
background-position:center bottom;
}

#inbox {
    text-align: justify;
    padding-top: 40px;
    padding-bottom: 30px;
    font-size: 15px;
    line-height: 22px;
    color: #666666;




    






 background-color:#;
    text-decoration: none;
    font-weight: normal;
    font-family: Arial, Helvetica, sans-serif;
}


#navbox {color:#fff;font: normal 11px/15px verdana, sans-serif; padding-left: 0px;padding-right:0px;padding-top: 0px;
background-color:#;
border-right:solid 1px #fff;
border-left:solid 0px #fff;
width:120px;
vertical-align:top;
text-align:center;}





#fussb {
    font-family: "arial2", helvetica, tahoma ,verdana, sans-serif;
    font-size: 13px;
    color: #009900;
    height: 100px;
    text-align: center;
    vertical-align: middle;
    padding-bottom: 24px;




background-color:#;
    background-image: url(images/fuss.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    padding-bottom: 10px;
    letter-spacing: 3px;
}

#fussb2 {
    font-family: "comic sans ms",arial, helvetica, tahoma ,verdana, sans-serif;
    font-size: 13px;
    color: #fff;
    height: 92px;
    text-align: center;
    vertical-align: middle;
    font-style: italic;
    background-color: #FFFFFF;
    letter-spacing: 3px;
    background-image: url(images/fuss2.jpg);
    background-repeat: repeat;
    background-position: top center;

}

/* menue vertikal */

.menu1 a , .menu1 a:visited , .menu1 a:active {
    display: block;
    background: transparent;
    color: #ffffff;
    text-align: center;
    width: 94px;
    line-height: 30px;
    height: 50px;
    font-size: 0px;
    font-family: arial, helvetica, tahoma, verdana, sans-serif;
    margin: 0px;
    border: 0px solid #18741F;
    font-style: normal;
    left: 0px;
    padding: 0px;
}

.menu1 a:hover{
    background-repeat: repeat;







_filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);
    background-repeat: repeat;







color:# FFF;
    background-color: #FFF;
    font-family: arial;
    text-decoration: none;
    color: #23781A;
}




/* allgemeine links im text */

a:link, a:visited, a:active{
    font-size: 16px;
    line-height: 22px;
    font-family: "arial", helvetica, tahoma, verdana, sans-serif;
    color: #fff;
background-color:#;                                        background: transparent;

    text-decoration: none;
    font-weight: bold;

}






a:hover{
    background-color: #FFFFFF;
    color: #18741F;
    text-decoration: none;
    font-size: 16px;
}



hier nochmal fotos zum verdeutlichen was ich damit meinbgmain.jpgbgmain2.jpg
 
Nun, dass sich der mittlere Teil verschiebt ist gut. Du verwendest zudem %-Angaben. Diese richten sich nach der Breite des inneren Browserfensters. Mir ist aufgefallen, dass du eine Breite von 1062 Pixel angegeben hast. Das ist für User mit kleinerer Auflösung ein nervendes feature. Stell die Breite doch auf unter 1024 Pixel, dann gibt es keine horizontalen Scrollbalken.

Schau dir deine Padding-, Margin- und Höhenangaben nochmals genauer an. Da irgendwo liegt das Problem in dem Codehaufen versteckt.

Du könntest das ganze einfacher und mit weniger Code hinbekommen (und ohne Fehler und übersichtlicher und und und) wenn du auf die Tabellen verzichtest und stattdessen div Elemente verwendest. Diese wären auch einfacher zu Positionieren.


lascaux
 
Hallo,

also fehler finde ich einige.
Tabellen für das design missbraucht.
Im CSS stimmt mindest am anfang auch was nicht mit den klammern, im body ist eine { zuviel drin.
usw.

mach das mit den Tabellen erstmal weg oder setzt dich in eine Zeitmaschiene, den vor 10Jahren war das ok, jetzt auf keinen fall :o)

Cheffchen
 
hmm und wo sollte ich am besten verändern damit sich das denn nicht verschiebt?

aso ja ich hab das eben mit breite auf 1024 px umgestellt und habe das problem das die seiten jetzt alle unterschiedlich groß sind :S
 
Cheffchen schrieb:
Hallo,

also fehler finde ich einige.
Tabellen für das design missbraucht.
Im CSS stimmt mindest am anfang auch was nicht mit den klammern, im body ist eine { zuviel drin.
usw.

mach das mit den Tabellen erstmal weg oder setzt dich in eine Zeitmaschiene, den vor 10Jahren war das ok, jetzt auf keinen fall :o)

Cheffchen
Zum Vergrößern anklicken....

wieso ist denn so eine tabelle ein tabu??
ich weiss nähmlich nicht so mit div umzugehen
 
Hallo,

die sind Besucher unfreundlich, Suchmaschienen unfreundlich und Design unfreundlich.
(ausser Newsletter da sind sie ein muss, falls jetzt einer reinspringt)

div sind elemente wie eine Zelle einer Tabelle (nicht hauen), die aber frei bearbeiten kannst mit css.
Tabellen sind nur für die anzeige von Tabellarischen Daten nicht mehr und nicht weniger.

Cheffchen
 
Cheffchen schrieb:
Hallo,

die sind Besucher unfreundlich, Suchmaschienen unfreundlich und Design unfreundlich.
(ausser Newsletter da sind sie ein muss, falls jetzt einer reinspringt)

div sind elemente wie eine Zelle einer Tabelle (nicht hauen), die aber frei bearbeiten kannst mit css.
Tabellen sind nur für die anzeige von Tabellarischen Daten nicht mehr und nicht weniger.

Cheffchen
Zum Vergrößern anklicken....

wie könnte ich das denn am bestmöglichsten mit einem div ablösen?
aso und ich habe nach einem tipp die breite auf 1024px umgestellt
und hab nun auf jeder seite unterschiedliche anzeige größen
was hab ich falsch gemacht?
 
Ein <div> ist ein Element, welches man zum Gruppieren von Elementen verwendet. Es ist ebenso wie Tabellen nicht dafür gedacht eine Webseite abzubilden.

Wenn Du eine Webseite kodieren willst, dann verwende HTML-Elemente wofür sie auch gedacht sind. Um bei deinem Beispiel oben zu bleiben: das Menü solltest Du als Aufzählungsliste definieren:

HTML: 
<ul>
 <li><a href="index.html">Startseite</a></li>
 <li><a href="weiter.html">Noch ein Menüpunkt</a></li>
 <li><a href="baeckerei.html">Bäckerei</a></li>
</ul>

Weiteren Überschriften als Überschriften (<h1> etc.), Absätze als Absätze (<p>) etc.pp.

Jedes dieser Elemente kannst Du per CSS stylen - weit freier als es mit Tabellen der Fall wäre. <div> sollte man nur zum Gruppieren von Elementen verwenden, wenn dies aus Design- oder Funktionssicht unbedingt notwendig ist.
 
Die maximale Breite sollte unter 1024px liegen. Mit genau 1024px bist du in einem grenzwertigem Bereich. Wenn ein Vertikaler Scrollbalken hinzu kommt, wars vergeblich. Probier mal 980px aus.

Wieso deine Seiten jetzt unterschiedlich angezeigt werden, liegt wohl an den Tabellen und am Inhalt. Diese solltest du auch anpassen.


lascaux
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben