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

(Anfänger) Ausrichtungsproblem/Layout

P

Pasde

Neues Mitglied
Hallo,

mein erster Beitrag hier, ich hoffe ihr könnt mir helfen.

Ich mach es kurz und schnell, ich habe ein Problem mit meinem Layout.

Wenn ich mir eine Vorschau meiner Seite im Browser angucke, dann zerschiesst er mir meine Elemente wenn das Fenster maximiert ist
Siehe Bild

Das ganze passiert nur auf meinem größeren Monitor wenn der Browser maximiert ist, wenn das Fenster "kleiner gezogen" ist oder auf meinem zweiten kleineren Monitor geschieht es nicht.
Kann jemand auf Anhieb sehen, woran das liegen könnte?

Tut mir Leid für die wirren Erklärungen, ich bin totaler Anfänger und erst wieder seit ein paar Tagen am Basteln.
Beste Grüße!

Mein HTML bisher
HTML: 
!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home</title>
<link href="stylesheettest.css" rel="stylesheet" type="text/css" />
</head>

<body>
        <div class="navi">
        <ul id="navigation">
<li><a href="/Startseite">Startseite</a></li>
<li><a href="/Beispiele">Leistungen</a></li>
<li><a href="/Kontakt">Kontakt</a></li>
</ul>
        </div>
        <div class="wrapper">
         <div class="left1">
         </div>
         <div class="left2">
         </div>
         <div class="left3">
         </div>
         <div class="left4">
         </div>
         <div class="left5">
         </div>
         <div class="left6">
         </div>
     </div> 
    <div class="wrapper">
         <div class="left1">
         </div>
         <div class="left2">
         </div>
         <div class="left3">
         </div>
         <div class="left4">
         </div>
         <div class="left5">
         </div>
         <div class="left6">
         </div>
     </div> 
</body>
</html>

Mein CSS bisher:

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

.navi{
   position: inherit;
   float: left;
   top: 50px;
   left: 50px;
   width: 938px;
   height: 58px;
   margin-bottom: 20px;
   background-color: #fff;
   border: 1px solid;
}

.wrapper{
   position: relative;
   float: left;
   top: 50px;
   left: 50px;
   width: 928px;
   margin-bottom: 20px;
   background-color: #fff
}
.left1{
   position: relative;
   float: left;
   left: 0px;
   width: 138px;
   height: 138px;
   background-color: #fff;
   border: 1px solid;
}
.left2{
   position: relative;
   float: left;
   left: 20px;
   width: 138px;
   height: 138px;
   background-color: #fff;
   border: 1px solid;
}
.left3{
   position: relative;
   float: left;
   left: 40px;
   width: 138px;
   height: 138px;
   background-color: #fff;
   border: 1px solid;
}
.left4{
   position: relative;
   float: left;
   left: 60px;
   width: 138px;
   height: 138px;
   background-color: #fff;
   border: 1px solid;
}
.left5{
   position: relative;
   float: left;
   left: 80px;
   width: 138px;
   height: 138px;
   background-color: #fff;
   border: 1px solid;
}
.left6{
   position: relative;
   float: left;
   left: 100px;
   width: 138px;
   height: 138px;
   background-color: #fff;
   border: 1px solid;
}
body {
   border-width: 0px;
   padding: 0px;
   margin: 0px;
   font-size: 90%;
   background-color: #fff
}

ul#navigation{
list-style-type:none;
margin-left:10px;
padding-left:50;
}
ul#navigation li{
    float: left;
    padding-right: 75px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    color:#000;
    }
ul#navigation li a{
    background-color:#fff;
    padding:0.2em;
    text-decoration: none;
    text-underline: none;
}
ul#navigation li a:link{
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    color:#000;
    }
ul#navigation li a:visited{
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    color:#000;
    }
ul#navigation li a:hover{
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    color:#396;
    }
ul#navigation li a:active{
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    color:#000;
    }
 
Ohne zu wissen, wie es "richtig" aussehen soll, ist eine Antwort schwierig. Ich versuche trotzdem mal einen Schuss ins Blaue:

Ich nehme an, die beiden .wrapper sollen untereinander stehen? Dann ist es verkehrt, die beiden zu floaten.
 
Tronjer schrieb:
Wo werden die floats eigentlich gecleared?
Zum Vergrößern anklicken....

Oh, gar nicht... das ist mir gar nicht bewusst gewesen. Ich habe dieses Grid im Internet gefunden und direkt so übernommen, da es genau das zu erreichen scheinte was ich vorhatte.

Banana_Jones schrieb:
Ohne zu wissen, wie es "richtig" aussehen soll, ist eine Antwort schwierig. Ich versuche trotzdem mal einen Schuss ins Blaue:

Ich nehme an, die beiden .wrapper sollen untereinander stehen? Dann ist es verkehrt, die beiden zu floaten.
Zum Vergrößern anklicken....

Ja genau, die sollen untereinander stehen. Was wie gesagt auch super funktioniert, wenn der Browser nicht maximiert ist.


EDIT: Ich habe beim .wrapper im CSS nun clear:left hinzugefügt und siehe da es scheint zu funktionieren.... kann das alleine das Problem gewesen sein ?
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben