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

Div Boxen springen

B

Bischop

Neues Mitglied
Guten Tag ihr lieben,

ich komme einfach nicht auf einen grünen Zweig. Daher habe ich mich Entschlossen mir bei euch Hilfe zu suchen.

Hier habe ich mal ein Link zu Fiddle Edit this Fiddle - jsFiddle das ihr mein grausames Werk anschauen könnt.

Ich bekomme es einfach nicht hin das ich die ersten 3 Boxen auf eine Ebene belasse. Also das nur immer 3 Boxen in einer Ebene sind egal wie sehr ich die Auflösung veränder.

Auch bekomme ich es nicht hin das die Ausklappbaren Texte ( wenn man auf Beschreibung ) klickt, das die nicht immer alles um sich herum verschieben sondern einfach darüber legen. Ich habe das schon mit z-index versucht, aber damit komme ich nicht so richtig klar.

Ich wäre super dankbar über ein paar Infos und Gedankenanstöße.
icon_smile.gif


Liebe Grüße,
Bischop
 
<ueber> ist kein gültiger HTML-Tag.

Abgesehen davon kann ich momentan nicht wirklich erahnen wie das eigentlich aussehen soll?! Bei dieser fiddl-Seite irrigiert auch, dass für die Boxen nicht genügend horizontaler Platz ist. Und wieso sollen nur die ersten 3 Boxen nebeneinander stehen?

Btw. hat das was Du willst mit Auflösung nichts zu tun. Die Webseite wird im Viewport des Browsers dargestellt, was nie der Auflösung eines Bildschirms entspricht.
 
Guten Abend Threadi,

Ich habe mir mal dein Text zu Herzen genommen und habe es versucht so aufzubauen wie ich das meine. Vom Prinzip her müssen die 3 Boxen nicht nebeneinander sein, dass war wohl nicht so gut überlegt. Da hast du wohl recht. :) Danke hierfür.

Ich habe es nun soweit hinbekommen wie ich es mir vorgestellt habe. Hier mal das Ergebnis.

Leider habe ich nun noch das Problem das wenn zum Beispiel die "Alkoholmeter-Box" über der "Anemometer-Box" sich befindet kann ich den Link der Anemometer Box nicht mehr klicken, ich nehme stark an das dies mit der Zuweisung des Z-Index zu tun hat und er sich "darüber legt", was natürlich etwas unpraktisch ist. Da ja genau die Boxen Informieren und Weiterlinken sollen.
Kann man dies Hrefs doch noch zum Linken bringen oder ist das dank dem Z-Index nicht mehr möglich?


index.html

HTML: 
<body>
    
<div id="eins">  
    
    
   <a href="http://www.thermometer-direkt.de/A/Alkoholmeter/"><h2>  Alkoholmeter </h2></a> 
    
<div class="box box1">
    <a href="#">INFOBOX<span>
Auch Aräometer genannt, ist ein Messgerät zur Bestimmung der Dichte und de spezifischen Gewichts von Flüssigkeiten, oder bei Alkohol zur Bestimmung des Ethanolgehaltes eines Wasser/Ethanolgemischs. 
    </span></a></div>
 </div>
     
    
    
    
<div id="zwei">
    
        <a href="http://www.thermometer-direkt.de/A/Alkoholtester/"><h2>  Alkoholtester </h2></a> 
    
<div class="box box2">
    <a href="#">INFOBOX<span>
Informationen folgen.
        </span></a></div>  
</div>
    
    
    
    
    
<div id="drei">
    
        <a href="http://www.thermometer-direkt.de/A/Allgebrauchsthermometer/"><h2>   Allgebrauchsthermometer </h2></a>
    
<div class="box box3">
    <a href="#">INFOBOX<span>
Zuverlässige Glasthermometer in unterschiedlichsten Bauarten zur Messung in Flüssigkeiten und pulvrigen Stoffen, in Labor, Industrie, Forschung und Unterricht, und für den privaten Gebrauch.  
</span></a></div>
    </div>
    
    
   
    
    
<div id="vier">
    
         <a href="http://www.thermometer-direkt.de/A/Anemometer/"><h2>  Anemometer </h2></a>
    
    
<div class="box box4">
    <a href="#">INFOBOX<span>
zu Deutsch Windmesser, werden Messinstrumente bezeichnet zur lokalen Messung der Windgeschwindigkeit oder eines Strömungsfeldes.
</span></a></div>  
    </div>        
    
    
    
<div id="fünf">
    
    <a href="http://www.thermometer-direkt.de/A/Aquarium-Thermometer/"><h2>  Aquarium-Thermometer</h2></a>
    
<div class="box box4">
    <a href="#">INFOBOX<span>
Informationen folgen.
</span></a></div>  
    </div>     




<div id="sechs">
    
 
        <a href="http://www.thermometer-direkt.de/A/Außenthermometer/"><h2>  Außenthermometer </h2></a>
    
<div class="box box4">
    <a href="#">INFOBOX<span>
Informationen folgen.
</span></a></div>  
    </div>             

</body>
​

CSS

HTML: 
/* Graue allgemeine Box */

div 
{
float: left;
font-weight: bold;
width: 200px;
height: 180px;
padding: 20px;
margin: 10px;
font-family: Arial, Helvetica,sans-serif;    
color: #333333;                       
}

#eins
{
background-color: #ffffff;
border:1px solid black;        
}

#zwei
{
background-color: #ffffff;
border:1px solid black;
}

#drei 
{
background-color: #ffffff;
border:1px solid black;
}

#vier 
{
background-color: #ffffff;
border:1px solid black;
}

#fünf
{
background-color: #ffffff;
border:1px solid black;
}

#sechs
{
background-color: #ffffff;
border:1px solid black;
}

#sieben
{
background-color: #ffffff;
border:1px solid black;
}

#acht 
{
background-color: #ffffff;
border:1px solid black;
}

#neun 
{
background-color: #ffffff;
border:1px solid black;
}

#zehn 
{
background-color: #ffffff;
border:1px solid black;
}

/* Informationstextbox*/

.box 
{
position:relative; 
top: 122px;
left: -51px;
}

.box1
{
z-index:199;
}        

.box2
{
z-index:198;
}

.box3
{
z-index:197;
}

.box4
{
z-index:196;
}

.box5
{
z-index:195;
}

.box6
{
z-index:194;
}

.box7
{
z-index:193;
}

.box8
{
z-index:192;
}

.box9
{
z-index:191;
}

.box10
{
z-index:190;
}


.box a 
{
color:#ffffff;
background:#67B8DE;
font:bold 16px  Arial, Helvetica,sans-serif;
text-decoration:none;
display:block;
padding:4px;
border:1px solid black;
}

.box a:hover 
{
color:#333333;
background:#67B8DE;
width:300px;
}

.box a span 
{
display:none;
}

.box a:hover span 
{
color:#333333;
background:#ffffff;
font:16px  Arial, Helvetica,sans-serif;
border:1px solid black;
display:block;
padding:10px;
}
​

Liebe Grüße,
Bischop
 
Was hat das überhaupt für einen Grund, dass Du diese Box mit relativer Positionierung verschiebst? Ich kann dafür ohne ein Layout zu sehen keinen Grund erkennen?! Und ja, das ist der Grund dafür - denn die Ebenen überlagern sich dann, so dass der Link nicht erreichbar ist.

Tipp: Mit der Erweiterung Firebug kannst Du schnell selbst erkennen, welches Element über welchem liegt. Die Erweiterung gibt es für Firefox und Chrome. In anderen Browsern gibt es ähnliches. Und du kannst jeweils direkt selbst austesten, welche Eigenschaften besser sind für das was Du erreichen willst.
 
Guten Abend Threadi,

ok, nun bin ich schon mal wieder ein Stück weiter. :) Danke dir!
Zum Layout, diese Boxen die du gesehen hast sollen diese Links hier ersetzen. Also im Prinzip nichts anderes als eine Weiterleitung. Das Problem ist nur wenn ich zu viele dieser Texte nicht einklappbar habe wird die Seite sehr lange und das widerspricht einer "schnellen" Weiterleitung. Hier mal der Link dazu. thermometer-direkt - A
So war das eigentlich gedacht. Bzw. mir ist dazu nichts anderes eingefallen um dies zu lösen.


Liebe Grüße
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben