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

Problem mit ausrichten der div's ...

I

_iChris_

Neues Mitglied
Hi Leute,

bin leider wieder auf ein Problem auf meiner Seite gestoßen ... Mein main-div richtet sich anscheinend falsch aus ... An was könnte das liegen? Aber seht selbst: TSV Hartberg

Hoffe ihr könnt mir weiterhelfen. Danke schonmal im Vorraus! :D

Hier der HTML-Code: Den für die Leiste bzw. den Top-Teil ist unnötig, deshalb behalte ich mir den vor ...

Code: 
<!--<div class="sub">-->


            <div class="box3">
              <div class="Abstand"></div>
            <a href="http://www.so-stmk.volksbank.at/"><img src="img/VogelVolksbank.jpg"border=0></a>




            <script language='javascript' src='JavaScript/small_slide1.js'></script>
            <script language='javascript' src='JavaScript/slide_small_2.js'></script>




            <div class="ipzaehler">
            <?php
	      include "php/Besucherzaehler/ipcounter.php";
            ?>
            </div>
            </div>
            <div class="strich">
            <img src="img/Arschloch copy.jpg">
            </div>


            <div class="box4">
            <h1>Galerie des TSV Hartberg Volksbank Tennis</h1>
            <div class="strichhoriz">
            <img src="img/strichhorizontal.jpg">
            </div>
            <script language='javascript' src='spgm.js'></script>
            <script language='javascript' src='contrib/overlib410/overlib.js'></script>
              <table class="wrapper">
     		<tr>
       			<td id="topleft">&nbsp;</td>
       			<td id="top">&nbsp;</td>
       			<td id="topright">&nbsp;</td>
     		</tr>
     		<tr>
       			<td id="left">&nbsp;</td>
       			<td id="center">
       			<p><span id="title"></p>


			<?php require("spgm.php"); ?>


       		</td>
       			<td id="right">&nbsp;</td>
     		</tr>
     		<tr>
       			<td id="bottomleft">&nbsp;</td>
       			<td id="bottom">&nbsp;</td>
       			<td id="bottomright">&nbsp;</td>
     		</tr>
   	      </table>


            <!--</div>-->


            </div>




            <div class="verbaende">
            <div class="fuell">
            </div>
            <div class="verbaende1">
            <a href="http://www.asvoe.at/de"><img src="img/ASVoeweis.jpg"border=0></a>
            </div>
            <div class="verbaende2">
            <a href="http://www.oetv.at/"><img src="img/owtvweis.jpg"border=0></a>
            </div>
            <div class="verbaende3">
            <a href="http://www.tennissteiermark.at/"><img src="img/STTVweis.jpg"border=0></a>
            </div>
            </div>
        	   </div>
            <div class="box5">
            </div>
            <div class="box6">
            <div align="left" style="width:375px;float:left"><a href="login.php">Login</a></div><div align="center" style="width:376px;float:left">&copy;2012 by Christian Allmer & Christian Pichler</div><div align="right" style="width:375px;float:left">TSV Hartberg Volksbank Tennis</div>
            </div>


    </body>
</html>

Und natürlich der CSS-Code:
Code: 
body{
margin: 7% auto;
padding:0px;
width:1126px;
background-image:url(img/background.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
}


h1{
font-family:Calibri,Arial,Helvetica,sans-serif;
font-size:32px;
font-weight:bold;
font-style:italic;
margin-bottom:10px;
margin-left:60px;
margin-top:50px;
color:#888888;
}


#main{
background:white;
height:auto;/*1934*/
width:1126px;


-moz-border-radius-bottomright: 10px;
border-bottom-right-radius: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-left-radius: 10px;
}




.box1{
background-image:url(img/top.jpg);
height:250px;
width:100%;


}


/* CSS für das Menü */
.menu_container {
    margin: 0 auto 20px auto;
    position: relative;
    width: 1126px;
    height: 20px;
    z-index: 100;


}
.menu, .menu ul {
    padding: 0;
    margin: 0;
    list-style: none;
    position: absolute;


}
.menu ul {
    left: -9999px;
    width: 125px;
    padding: 0 20px 20px 20px;


}


.menu ul ul {
    padding: 20px 20px 20px 0;


}


.menu a {
    display: block;
    width: 124px;
    padding-left: 0px;
    text-align: center;
    font: normal bold 14px/40px arial, sans-serif;
    color: #fff;
    text-decoration: none;
    margin: 0 -1px -1px 0;
    background-color: #283daf;
    color: white;
    border-right: 1px solid grey;
    border-left: 1px solid grey;


}
.menu li ul a {
    font-weight: bold;
    height:29px;
    padding-top 0px;
    border-bottom: 1px solid grey;
    border-top: 1px solid grey;
    border-right: 1px solid grey;
    border-left: 1px solid grey;
    background-color: white;
    color: grey;
}
.menu li {
    float: left;
    border-right:1px




}


.menu li a {


}


.menu li:hover {
    position: relative;
    z-index: 100;




}
.menu li:hover > a {
    background-color: #000080;
    color: white;






}
.menu li:hover > ul {
    top: 40px;
    left: -20px;
    z-index: -1;




}
.menu li:hover li:hover > a {
    background-color:#e4e4e4;
    color: #000080;
    border: 2px solid grey;






}
.menu li:hover li:hover > ul {
    left: 145px;
    top: -20px;
    z-index: 100;
}
.menu li.right:hover li:hover > ul {
    left: -165px;
    top: -20px;
    z-index: 100;
    padding: 20px 0 20px 20px;
}


.Abstand{
width: 214px;
height: 40px;
}


.sub{
width:auto;
height:auto;
}


.box3{
background-color: white;
float:left;
padding:0px;
width:214px;
height:autopx;
margin:0px;
text-align:center;
}


.flashclass{ /*sample CSS class added to image slideshow container*/
width: 200px; /*a width should be defined for transition to work*/
margin: 50px auto;
}


.flashclass img{
border-width: 0;
}


.animclass{ /*sample CSS class added to image slideshow container*/
width: 200px; /*a width should be defined for transition to work*/
margin: 5px auto;
}


.animclass img{
border-width: 0;
}


.ipzaehler{
width:200px;
height:25px;
font-family: lucida sans, calibri, arial;
font-weight: bold;
margin-left: 5px;
margin-top: 20px;
font-size:10pt;




}


.strich{
float:left;
width: 1px;
height: auto;
}


/* .................................................................................... */


.box4{
/*background-image:url(img/transition2.jpg);*/


margin-left:214px;
padding:0px;
width:911px;
height:auto;
color: blue;
font-family: verdana, arial, "sans-serif";
}




.wrapper {
margin-left: auto;
margin-right: auto;
margin-top: 15px;
border-collapse: collapse;
}


#title {
padding-top: 0px;
padding-bottom: 20px;
font-family: verdana, arial;
font-size: 30px;
font-weight: bold;
color: black;
text-align: center;
}






#center {
background-color: white;
width: 912px;
}


/* ....................................................................................*/


.strichhoriz{
margin-left:60px;
}


.verbaende{
height:140px;
width:1126px;
float:left;
background:white;


}


.fuell{
height:140px;
width:214px;
float:left;
-moz-border-radius-bottomleft: 10px;
border-bottom-left-radius: 10px;
}


.verbaende1{
height:140px;
width:304px;
background:white;
float:left;
}


.verbaende2{
height:140px;
width:304px;
background:white;
float:left;
}


.verbaende3{
height:140px;
width:254px;
background:white;
float:left;
}




.box5{
height:5px;
float:left;
width:1126px;
}


.box6{
float:left;
width:1126px;


font-family: Calibri, Arial, Helvetica;
font-size:12px;
font-weight: normal;
margin-left:0px;
color: #4E4E4E;


}
 
Ok, danke für den Tipp, werde die Fehler gleich mal beheben gehen. Vielleicht ist die Seite bei mir deshalb falsch ausgerichtet.
 
Irgendwie sind die Errors die dort angezeigt werden nicht wirklich relevant und ändern auch nichts an der Seite ... Und das Problem mit der Galerie besteht noch immer ... Getestet mit verschiedenen Bildschirmauflösungen und Browsern (1920x1200 & 1600x900 in Google Chrome, Firefox und Internet Explorer)

EDIT: Hier ein Bild wie die Seite bei mir aussieht:

Unbenannt.jpg
 
Auflösungen spielen für Webseiten keine Rolle. Der Viewport des Browsers ist entscheidend.

Mir fällt bei deinem Screenshot eigentlich nur auf, dass das Hintergrundbild offenbar etwas weiter oben sitzt als bei mir. Ist es das was Du meinst? Ansonsten sehe ich immer noch dein Problem nicht.
 
Geh mal auf die Startseite ... Dort kann man gut erkennen das das main-div viel zu weit oben sitzt. Eigentlich sollte es wie auf allen anderen Seiten die Verbände unten mit einbetten ...
 
Jetzt verstehe ich was Du meinst.

Der Unterschied beruht darin, dass Du auf jeder Seite andere CSS-Dateien verwendest und diese auch sehr uneinheitlich geschrieben sind. Bei der Startseite hat .box4 z.B. eine feste Höhe und ist gefloatet. Bei der Galerie-Seite fehlen diese Angaben.

Tipp:
Neben den o.g. HTML-Fehlern solltest Du auch dein CSS-Management überdenken. Sinn und Zweck von CSS-Dateien ist es, eine zentrale CSS-Datei für die gesamte Webseite zu haben. Dadurch muss der Browser eines Besuchers die CSS-Datei nur 1 Mal laden und kann sie auf allen HTML-Dateien der Webseite verwenden. In deinem Fall lädt der Browser immer eine neue CSS-Datei, was a) bei großen CSS-Dateien zu Ladeverzögerungen führen kann und b) bei dir den Traffic erhöht.
 
Schon klar ... aber aus bestimmten Gründen konnte ich nicht anders ... Bei Gelegenheit werd ich's optimieren, aber jetzt sollt ich das Problem trotzdem irgendwie beheben ...
 
Auch dazu habe ich dir etwas geschrieben. Hast Du es schon probiert die CSS-Daten anzugleichen?
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben