Druckbare Version
Whiz-zarD hat vorhin im IRC einen Entwurf für ein Design mit halbtransparenten Boxen mit abgerundeten Ecken gepostet und wollte wissen, ob das so umsetzbar ist. Ich hab das mal zum Anlass genommen, einen kurzen Artikel zu schreiben, wie man das realisieren kann. Leider mit Tabellen.
Wäre nett, wenn ihr euch das anschauen und ggf. Verbesserungsvorschläge vorbringen könntet. Oder einfach allgemein Lob und Kritik.
Es geht auch mit divs, allerdings nur nach dem Classes-Ansatz mit mehreren Klassen fuer jede Ecke.
Awesome!
Hatte das früher immer etwas komplizierter gelöst.
TY!
Yay, danach hab ich immer gestrebt, es selbst aber nur unschön hinbekommen. Danke! :3
Das ist aber nur von der Breite her "flüssig".
Die bessere Variante sieht so aus (mit ein paar Tricks, damits auch in allen Browsern passt):
Css Beispiel:HTML-Code:<div class="style1">
<div class="headLeft">
<div class="headRight">
<div class="headMiddle">
<img src="spacer.gif" class="spacer" alt="" />
</div>
</div>
</div>
<div class="bodyLeft">
<div class="bodyRight">
<div class="bodyMiddle">
Content
</div>
</div>
</div>
<div class="baseLeft">
<div class="baseRight">
<div class="baseMiddle">
<img src="spacer.gif" class="spacer" alt="" />
</div>
</div>
</div>
</div>
Wobei das <img> eigentlich nicht nötig ist und man könnte die Höhe direkt headMiddle etc. zuweisen, jedoch falls man dann die Box über DOM erzeugt breiten sich die mittlerene Teile im IE nicht mehr aus.Code:.style1 .headLeft {
background: url('top_left.gif') top left no-repeat;
padding-left: 9px;
}
.style1 .headRight {
background: url('top_right.gif') top right no-repeat;
padding-right: 9px;
}
.style1 .headMiddle {
background: url('top_mid.gif') top repeat-x;
}
.style1 .headMiddle .spacer {
height: 23px;
}
.style1 .bodyLeft {
padding-left: 1px;
background: url('center_left.gif') top left repeat-y;
}
.style1 .bodyRight {
padding-right: 1px;
background: url('center_right.gif') top right repeat-y;
}
.style1 .bodyMiddle {
overflow: auto;
background: transparent;
}
.style1 .baseLeft {
background: url('bottom_left.gif') top left no-repeat;
padding-left: 9px;
}
.style1 .baseRight {
background: url('bottom_right.gif') top right no-repeat;
padding-right: 9px;
}
.style1 .baseMiddle {
background: url('bottom_mid.gif') top repeat-x;
}
.style1 .baseMiddle .spacer {
height: 19px;
}
BTW. sieht man das ganze bei meinem neuen Projekt in Aktion.
schön, dass man nichts sieht :PZitat:
Zitat von Drakes
Das mit dem Werbung wegklicken und dann reloaden giltet immernoch. :( (blöder Server)Zitat:
Zitat von Whiz-zarD
Vernünftige Leute haben, Adblock Plus installiert :p.Zitat:
Zitat von Drakes
Trotzdem sieht man nur ein nicht funktionierendes Loginformular :D.
Vernünftige Leute benutzen keine Datenschleuder :pZitat:
Zitat von Xardas der Dunkle
klappt nicht (benutze Opera)Zitat:
Zitat von Drakes
Vernünftige Leute nutzen nicht den Opfabrowser.Zitat:
Zitat von Whiz-zarD
Lol soll das Opfer heissen? Opera? Ich wuerd ma sagen der Webspace ist einfach mal ziemlich behindert. Oder aber das Skript das bedingt durch Werbung nicht mehr funktioniert.Zitat:
Zitat von Desmulator
Bei mir klappts, und ich teste mit IE 7, Firefox, Safari und Opera.Zitat:
Zitat von Whiz-zarD
es muss auch einen gesagt werden, dass man für den scheiss Webspace auch cookies benötigt -.-
Die hab ich grundsätzlich deaktiviert.