✔ Content-Box mit Reitern und nur CSS

M

MrTodd

Grünschnabel
Hi Forum,

ich versuch gerade ne Content-Box nur mit CSS zu bauen. Ich hab gedacht, sowas gibts sicher schon, hab aber nichts passendes gefunden. Leider halten sich meine CSS-Kenntnisse in Grenzen, deswegen such ich hier mal Rat.

Das hab ich bisher:
Dynamische CSS Box
Problem ist, dass die Buttons immer mitverschoben werden :(

Wenn ich den das content-div auf position:absolute setze, dann verschiebt es die buttons nicht mehr.
http://xxx.pytalhost.com/cssbox2.htm
Aber das würde ich gerne vermeiden, weil ich nicht weiss, ob die box immer an der selben stelle in der Website steht. Gibts nicht eine Möglichkeit, das div INNERHALB eines anderen divs absolut zu positionieren?

Oder gibts sonst eine Möglichkeit, dieses verschieben der Buttons zu verhindern?

Und was haltet ihr generell von meiner "CSS-Kunst"?
Konstruktive Kritik erwünscht, danke!
 
Hi,

nimm mal für "cssbox1.htm" diese Regeln im Stylesheet auf:
CSS: 
.dynamic_box {
position:relative;
}
.btn1 {
position:absolute;
left:0;
}
.btn2 {
position:absolute;
left:82px;
}
.btn3 {
position:absolute;
left:164px;
}


mfg Maik
 
Merke: Absolute Positionsangaben innerhalb eines relativ positionierten Blocks, verhalten sich darin relativ.

Sprichst du vom aktuellen IE (7 + 8)?

Das liegt daran, dass du das HTML-Dokument ohne jegliche Doctype-Deklaration den Browsern nicht im standardkonformen Modus übergibst, und im derzeitigen Darstellungsmodus "Quirks Mode" sich die aktuellen IEs wie ihr Vorgänger IE6 verhalten, der die :hover-Pseudoklasse auschliesslich für das a-Element unterstützt.

Lösung:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <title>Dynamische CSS Box</title>

    <style type="text/css">
        body, li, ul {margin:0;padding:0;}

        .dynamic_box {
                position:absolute;
                left:100px;
                top: 200px;

        }

    .dynamic_box ul {
            list-style: none;
    }

    .dynamic_box * li {
            float:left;
    }

        .boxcontent {
        height:140px;
        width:240px;
    }
    .dynamic_box ul li .boxcontent {
            display: none;
    }
    .dynamic_box ul li:hover .boxcontent {
            display: block;
    }

    .boxcontent1 {
            background-color:gray;
    }

    .dynamic_box ul li .boxcontent2 {
            background-color:blue;
            position:absolute;
                 left:0px; top:0px;
    }

    .dynamic_box ul li .boxcontent3 {
            background-color:green;
            position:absolute;
                 left:0px; top:0px;
    }

    .dynamic_box * li a {
            text-align:center;
            color:white;
            height:50px;
            width: 80px;
            background-color:red;
            display: block;
        text-decoration:none;
    }

    .dynamic_box * li a:hover {
            background-color:blue;
    }

    </style>

<!-- Für IE6 -->
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->

<body>

        <div class="dynamic_box">
             <div class="boxcontent boxcontent1">
                          Content 1
                </div>
                <ul>
                        <li class="btn"><a href="#">btn1</a>

                        </li>
                        <li class="btn btn2"><a href="#">btn2</a>
                                <div class="boxcontent boxcontent2">
                                        Content 2
                                </div>
                        </li>
                        <li class="btn btn3"><a href="#">btn3</a>
                                <div class="boxcontent boxcontent3">
                                        Content 3
                                </div>
                        </li>
                </ul>
        </div>


</body>

</html>


mfg Maik
 
sehr cool, danke!
diese doctypes sind mir immer irgendwie zu theoretisch ;)
Wieder was dazugelernt.

und dieses IE7.js ist hievt praktisch den IE6 auf IE7-Niveau?

Du scheinst ja Ahnung zu haben, ist das halbwegs vernünftig, was ich mir da zusammengeschustert hab, oder sind da noch irgendwelche Schnitzer drin?
 
Sorry, hab vorhin doch glatt vergessen, die Quelle zu nennen: http://code.google.com/p/ie7-js/ :)

Diesen Schnitzer hab ich dir im Stylesheet korrigiert, damit der IE die Hintergrundfarbe anzeigt:
CSS: 
    .boxcontent1 {
            background-color:grey; /* Der Farbname wird mit einem "a" geschrieben */
    }

Was es mit dem Universalselektor * an den gesetzten Stellen auf sich hat, kann ich jetzt zwar nicht nachvollziehen, aber als Schnitzer geht er deshalb noch lange nicht durch ;-)

Einsetzen würde ich ihn auf jeden Fall zu Beginn des Stylesheets:
CSS: 
/* aus */
body, li, ul {margin:0;padding:0;}

/* wird */
* {margin:0;padding:0;}

mfg Maik
 
ok, danke nochmal, dachte html richtet sich eher an der ami-schreibweise von gr(e|a)y ;)

Das mit dem Stern hab ich irgendwo anders gesehn und dachte ich probier das mal, aber hast recht, macht in dem fall wohl mehr sinn das zu ersetzen.

:)
 
OK, neues kleines Problemchen.
Ich hab da jetzt Bilder eingebaut.

http://xxx.pytalhost.com/cssBox7.htm
Leider ergibt sich da ein Abstand von jeweils 2 Pixeln zwischen den Buttons unten.
Versteh nicht, wo der abstand herkommt, hab ja alles auf margin:0 und padding:0

Hab versucht das so zu beheben:
HTML: 
    .dBox ul li a img {
    	margin:-2px 0 0 -2px;
    }
nach oben hin schliesst sich der Abstand, nach links geht nur der erste Button komplett.

http://xxx.pytalhost.com/cssBox8.htm

DENKDENK: Gerade fällt mir ein, dass ich dann für den 2. Button wohl -4px machen müsste und so weiter ... vielleicht würds so gehen.
Aber trotzdem bleibts ein sehr unschöner hack, und wenns auch anders geehn würde wärs besser.
Jemand ne Idee ?
 
Zeichne mal die Grafikelemente mit display:block aus, damit die Browser nicht die "Whitespaces" (Zeilenumbrüche, Tab-Einrückungen) im HTML-Code vor und hinter den <img>-Elementen interpretieren, die eine vertikale Verschiebung der nachfolgenden Elemente nach unten zur Folge hat.

mfg Maik
 
Maik hat gesagt.:
Zeichne mal die Grafikelemente mit display:block aus, damit die Browser nicht die "Whitespaces" (Zeilenumbrüche, Tab-Einrückungen) im HTML-Code vor und hinter den <img>-Elementen interpretieren, die eine vertikale Verschiebung der nachfolgenden Elemente nach unten zur Folge hat.

mfg Maik
Zum Vergrößern anklicken....

Wo genau muss ich das display:block einfügen?
Habs jetzt eigentlich überall eingefügt, aber kein Unterschied festzustellen :(
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück