nicht angemeldet
divs mit Grafik-Rahmen
Hi!
Ich bin dabei ein CSS Layout zu erstellen. Da ich noch nicht ganz genau weiss wie es werden soll, habe ich mir erstmal als Ziel gesetzt, die Seite http://movix.sourceforge.net sozusagen als CSS-Seite zu machen, da mir diese Kaesten an den Seiten sehr gefallen, so etwas aehnliches habe ich spaeter auch vor.
Also zum Ueben: Erstmal einen div-Container bauen der einem der Seitenkaesten gleicht. Ich schaetze mal wenn das komplett geschafft ist, ist das auch die halbe Miete.
Ich habe auch unverschaemter Weise zum Testen die Bilder von der Seite genommen, das wird natuerlich noch geaendert, nur dann sehe ich am ehesten wie es vergleichsweise aussieht.
Nun zu meinen Problemen, vorab einfach etwas Code:
Der HTML-Teil
<div id="container">
<div class="topleft"></div>
<div class="topmiddle"> </div>
<div class="topright"></div>
</div>
Der id=container soll den gesammten Kasten irgendwo hinsetzen, im ersten Testfalle wollte ich ihn 20% von jeder Seite weg haben und top einfach 50% erstmal, sieht dann so aus:
#container {
position: absolute;
top: 50%;
left: 20%;
right: 20%;
}
Dann sollen die beiden Boegen an der Seite am Rand sitzen, sind also fest 17x17 gross. Dazwischen soll dann "der Rest" dynamsich gefuellt werden. Da bin ich auf 3-Spaltiges Layout mit 2 fixen und einer Variablen Breite aufmerksam geworden auf http://www.glish.com/css/7.asp .
Allerdings is das mittlere div ein arges Problem bei mir.
Code dazu erstmal so:
.topright {
background-image: url(up-right.gif);
background-repeat: no-repeat;
height: 17px;
width: 17px;
position: absolute;
top: 0px;
right: 0px;
}
.topleft {
background-image: url(up-left.gif);
background-repeat: no-repeat;
position: absolute;
height: 17px;
width: 17px;
top: 0px;
left: 0px;
}
.topmiddle {
background-image: url(up.gif);
background-repeat: repeat-x;
margin-left: 17px;
margin-right: 17px;
}
Die Darstellung von .topmiddle wie gesagt klappt nicht bis unterschiedlich, besonders wenn kein Buchstabe darinsteht.
Wie ich nun weitere divs mache um Links Rand, Mitte Text, Rechts Rand zu haben da fehlt mir gerade jeglicher Ansatzpunkt.
Vielleicht mache ich ja ber auch Grundsaetzlich schon einen Denkfehler? Ich hoffe ich hab alles wichtige geschrieben, vielleicht weiss ja wer Rat, aber wie gesagt, es soll mit divs gehen, Bei Tabellen braeuchte ich ja nur kopieren, dass soll aber nicht das Ziel sein.
Vielen Dank schonmal, beste Gruesse
Nico
-
Ich bin dabei ein CSS Layout zu erstellen. Da ich noch nicht ganz genau weiss wie es werden soll, habe ich mir erstmal als Ziel gesetzt, die Seite http://movix.sourceforge.net sozusagen als CSS-Seite zu machen, da mir diese Kaesten an den Seiten sehr gefallen, so etwas aehnliches habe ich spaeter auch vor.
Also zum Ueben: Erstmal einen div-Container bauen der einem der Seitenkaesten gleicht. Ich schaetze mal wenn das komplett geschafft ist, ist das auch die halbe Miete.Das ist der falsche erste Schritt.
Diese Kästchen wirst du so nicht ohne Verrenkungen mit CSS hinbekommen (irgendwo bei den selfhtml Features oder bei den Artikeln gibt es einen über runde Ecken mit CSS, ich persönlich halte das für zuviel Aufwand, da die ganze Eleganz von HTML/ CSS design verloren geht).
Also soweit ich das sehe, würde ich sagen vergiß es, mach ein Tabellenlayout und versuch halt soviel wie möglich mit CSS zu gestalten, aber dieses Design wirst du nicht sauber (oder nur mit viel Murks) hinbekommen. Es ist einfach nicht darauf ausgelegt.
Wenn du wirklich mit CSS gestalten willst, solltest du erst überlegen, welche HTML elemente du hast, was du mit CSS gestalten kannst und darauf aufbauend ein Design entwickeln. Der umgekehrte weg ist aufgrund der beschränkten gestalterischen Möglichkeiten von CSS nicht sinnvoll.
Hier ein paar seiten, die sich damit beschäftigen oder informationen bieten:
http://jendryschik.de/wsdev/einfuehrung/css/
http://www.1ngo.de/web/index.html
http://realworldstyle.com/
http://www.meyerweb.com/eric/css/edge/
http://barrierefrei.e-workers.de/
http://www.stichpunkt.de/css/
http://www.bestviewed.de/Struppi.
-
Das ist der falsche erste Schritt.
Das hoert sich ja schon gut an.
Diese Kästchen wirst du so nicht ohne Verrenkungen mit CSS hinbekommen (irgendwo bei den selfhtml Features oder bei den Artikeln gibt es einen über runde Ecken mit CSS, ich persönlich halte das für zuviel Aufwand, da die ganze Eleganz von HTML/ CSS design verloren geht).
Den Artikel von Herrn Kalt hab ich gefunden. Das waere eine moeglichkeit, aber OK, keine Seite nur aus solchen Sachen...
»Also soweit ich das sehe, würde ich sagen vergiß es, mach ein Tabellenlayout und versuch halt soviel wie möglich mit CSS zu gestalten, aber dieses Design wirst du nicht sauber (oder nur mit viel Murks) hinbekommen. Es ist einfach nicht darauf ausgelegt.
OK, anderes Layout.
»Wenn du wirklich mit CSS gestalten willst, solltest du erst überlegen, welche HTML elemente du hast, was du mit CSS gestalten kannst und darauf aufbauend ein Design entwickeln. Der umgekehrte weg ist aufgrund der beschränkten gestalterischen Möglichkeiten von CSS nicht sinnvoll.
Da versuchte ich eben Webseiten zu nehmen die mir gefallen und "nachzubauen" um Erfharungen zu sammeln, was geht und was nicht, erster Versuch war ja jetzt schon lehrreich..
Hier ein paar seiten, die sich damit beschäftigen oder informationen bieten:
Schau ich durch, vielen vielen Dank auf jeden Fall!
Gruesse
Nico
-