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

Problem bei div Wachstum - clear

M

mote

Mitglied
Hallo,

versuche das Problem jetzt seit einigen Stunden zu lösen aber ich komme einfach nicht drauf :(
Es hat natürlich etwas mit den floats zu tun und dem nicht vorhandenen oder falsch vorhandenen clear aber ich finde den Fehler leider nicht.

Anbei mein Code (Farben ect. einfach ignorieren, war nur zum Testen)

Anforderung:

Die Komponente besteht aus drei Teilen.

Rechts ist ein Foto, dass ich bei kleineren Bildschirmen einfach ausblende.
Oben ist eine Beschreibung, die sich auch wie gewünscht verschiebt bei kleineren Browsern.

Das Problem ist das Tabmenü, dass ich auch schon in einem anderen Thread erwähnt habe.
Hier habe ich gleich mehrere Probleme.

1.) Ich weis nicht wie ich mit den Tabs bei kleinerer Auflösung umgehen soll, damit sie nicht übereinander angeordnet werden. Hat hier jemand eine Idee?

2.) Der ganze div wird nach unten rausgeschoben. Hier finde ich einfach keine Einstellung dem entgegenzuwirken.

Ich hoffe mir kann hier jemand helfen :)

Hier noch der Code.

HTML
Code: 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
   
    <link rel="stylesheet" media="screen" href="styleTab.css">
   
    <link href="media-queries.css" rel="stylesheet" type="text/css">

    <script>
<!--
function keepLocation(oldOffset) {
  if (window.pageYOffset!= null){
    st=oldOffset;
  }
  if (document.body.scrollWidth!= null){
    st=oldOffset;
  }
  setTimeout('window.scrollTo(0,st)',1);
}
//-->
    </script>
</head>
<body>
<div id="wrapper">
   <div id="content" class="clearfix">
      <div id="topColumn">
        <h1>Lorem ipsum dolor sit</h1>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>
      </div>
      <div id="rightColumn">
         <!--hier ist ein Foto, dass bei einem kleineren Bildschirm ausgeblendet wird.-->
      </div>

      <div id="downColumn">
                <div class="tabbed-area adjacent">
                    <div id="box-four">
                        <p>Bitte gib die richtige Game Nummmer ein</p>
                        <input type="text" class="inputA" id="zwei" name="test2" placeholder="000000" maxlength="6" />
                        <input type="submit" class="submit" id="zwei" name="test2" />
                    </div>

                    <div id="box-three">
                        <p>Bitte gib die richtige Game2 Nummmer ein</p>
                        <input type="text" class="inputA" id="zwei" name="test2" placeholder="000000" maxlength="6" />
                        <input type="submit" class="submit" id="zwei" name="test2" />
                    </div>

                    <div id="box-other">
                        <p>Bitte gib die richtige Game3 Nummmer ein</p>
                        <input type="text" class="inputA" id="zwei" name="test2" placeholder="000000" maxlength="6" />
                        <input type="submit" class="submit" id="zwei" name="test2" />
                    </div>

                    <ul class="tabs group">
                        <li><a href="#box-four" onclick="keepLocation(window.pageYOffset);">game1 Nummer <span>Shop</span></a></li>
                        <li><a href="#box-three" onclick="keepLocation(window.pageYOffset);">game2 Nummer</a></li>
                        <li><a href="#box-other" onclick="keepLocation(window.pageYOffset);">game3 Nummer</a></li>
                       
                    </ul>

                </div>
      </div>
   </div>
</div>

</body>
</html>


CSS
Code: 
/* basic elements */
*, html, body { margin: 0; padding: 0; }
body { font-size: 90%; line-height: 1.2; color: #1a1a1a;  background-color:#FFF; margin-bottom: 100px; }

p { font-size: 1em ; line-height: 1.4;}
h1 { font-size: 1.5em ; color: blue;}




#wrapper {
width: 680px;
margin:0 auto;
}

#content {
background:#f8f8ff;
border:1px solid #000;
min-height:360px;
height:auto !important;
height:360px;
padding-top:10px;
padding-left:22px;
}




#topColumn {
width:72%;
float:left;

}

#downColumn {
float:left;
width:72%;
margin-top:10px;

}

#rightColumn{
float:right; width:28%; height:100%; background-color:blue; margin-top:20px;
}



.clearfix:after {
content:".";
display:block;
height:0;
font-size:0;
clear:both;
visibility:hidden;
}

.clearfix {display:inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* End hide from IE-mac */





/*tabmenue*/
        .group:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
   
        .tabs { list-style: none;}
        .tabs li { display: inline; }
        .tabs li a { padding: 12px 22px; font-size: 0.85em ; float: left; display: block;  margin-left: -1px; position: relative; left: 1px; text-decoration: none; border-bottom: 1px solid #000;}
        .tabs li a:hover { background: blue; color:#FFF; }
        .adjacent { position: relative; float:left; width:100%; margin-top:23.5%; }
        .adjacent .tabs { position: absolute; bottom: 100%; left: 0; z-index: 2;margin-left:6.276150627615%;}
        .adjacent .tabs li a { background: -moz-linear-gradient(top, white, #eee); }
        #box-four:target,
        #box-three:target,
        #box-fifteen:target { z-index: 1; }
        #box-four:target ~ .tabs a[href='#box-four'],
        #box-three:target ~ .tabs a[href='#box-three'],
        #box-other:target ~ .tabs a[href='#box-other'] { background:  #eee; color:#FFF;}
        .adjacent div { background:#FFF;  padding-top:10px; padding-left:6.276150627615%; width:93.723849372385%; min-height: 90px; position: absolute; top: -1px;   border-top: 1px solid #eee;}
       
        input { border:none;background: #000 ; color:#FFF; margin-left:10px;height:40px; text-align: center; font-size:1.3em;} 
        input .A{width:350px;}/*350*/

@media only screen and (max-width: 680px) { 
#wrapper{width:100%;}

#rightColumn img {display: none;}
#topColumn{width:100%;}
#downColumn{width:100%;}

}
 
Werbung:
Ich hatte dir die Lösung bereits genannt: binde Bootstrap ein. Aber du bist ja beratungsresistent.

Das Konstrukt taugt schon deshalb nichts, weil es Inline JS beinhaltet, IDs als CSS Selektoren verwendet, und wieso setzt du einen Breakpoint bei 680px? Das entspricht keiner gängigen Auflösung. Außerdem gehört ein Script nicht hinter das öffnende Body-Tag.

Ach ja, wo setzt man eigentlich das .clearfix an?
 
Werbung:
Gut dann werde ich das Bootstramp einbauen. Dachte ich kann es mit dem JavaScript versuchen, da ich Bootstramp noch nie verwendet habe. Würde mich freuen wenn du mir dann im anderen Thread helfen könntest, sollte ich Fragen haben ;)



Ach ja, wo setzt man eigentlich das .clearfix an?
Zum Vergrößern anklicken....



Ja diese Antwort, wäre wohl auch die Antwort auf meine Frage :) Denn hier stehe ich einwenig an.. dachte es reicht, wenn ich ein clear immer nach den gefloateten Elementen machen..?

Mein Problem ist, dass alles funktioniert wenn ich das clear vor dem div "adpass-image" setze. Allerdings verschwindet dann mein rechter Block. Wie funktioniert das nun wenn ich nicht nur zwei divs untereinander habe, sondern einen dritten rechts?

Der Breakpoint bei 680 war rein für einen Test gedacht.


Ein Link zur Seite wäre hilfreich wenn man dir helfen sollte.
Zum Vergrößern anklicken....


Ok werde ich nachbringen. Dachte es reicht wenn ich eh schon den ganzen SourceCode poste und man das in ner Minute in zwei oder eine Datei kopiert :)





LG und Danke schonmal
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben