|
 |
  |
| Autor |
Nachricht |
LoD
Neuer [User]
Anmeldung: 07.10.07
Beiträge: 7
|
 Verfasst am: 07.10.2007, 14:08 Titel: (Speicher)Platzsparende runde Ecken!? |
 |
|
Hey!
Meine Homepage basiert auf einem 3-Spalten-Layout.
Die 1.Spalte beinhaltet die Buttons für die Navigation, in der 3.ten werden Informationen angezeigt
und in der mittleren Spalte wird mein Hauptinhalt dargestellt. Um diese Spalte möchte ich einen Rahmen mit runden Ecken, bestehend aus Bildern, haben.
Bisher hab ich des nach  der Anleitung gemacht. Damit hatte ich auch keine Probleme und alles lief gut.
(Bei der methode werden aus einem großen Bild, dass die gesamte Box so groß wie möglich darstellt, 4 Bilder gemacht mit jeweils einer Ecke und einem Mittelteil der Box, Über CSS werden diese Bilder dann 4 ineinander verschachtelten Div's zugeordnet, sodass immernur ein Stückbereich der ursprünglichen Box zu sehen ist. Oder so^^)
Aber da die Box mit der Methode nur so groß werden kann, wie die Bilder sind, und meine Seiten teilweise ziemlich lang sind,werden die Bilder für die Box auch immer größer und größer.
Langsam leider zu groß.
Deshalb Suche ich nun eine Möglichkeit mit der ich eine abgerundete Box auf meiner HP darstellen kann, die sich größenmäßig dem Text anpasst, aus meinen Bildern besteht (also nicht einfach ein mit CSS gefärbter Div-Tag) und am besten kein JavaScript enthält.
Ich hoffe ihr könnt mir da helfen!?
Cya
LoD
(Ich hoffe des gehört hier rein)
|
|
| Nach oben |
|
 |
Tijan
Helfer [User]
Anmeldung: 02.05.06
Beiträge: 150
|
| Verfasst am: 07.10.2007, 14:40 Titel: |
|
|
Bin mir nicht sicher ob ich das richtig verstehe
(du solltest immer eine URL mit schicken)
Deine Struktur sollte so aussehen:
<div class="backgroundBilder">
<div class="navigation"></div>
<div class="inhalt"></div>
<div class="spalte3"></div>
</div>
In die drei Spalten kommen KEINE background Bilder, nur Inhalt !
|
|
| Nach oben |
|
|
chris1988
Bekannter [User]
Anmeldung: 12.12.05
Beiträge: 1623
|
| Verfasst am: 07.10.2007, 15:24 Titel: |
|
|
Ich glaub er meinte das allgemeiner 
| Code: |
<div class="ecke_oben_links">
<div class="ecke_oben_rechts">
<div class="ecke_unten_links">
<div class="ecke_unten_links">
Inhalt
</div>
</div>
</div>
</div>
|
CSS:
| Code: |
.ecke_oben_links {
background: #ffffff url(ecke_oben_links.gif) no-repeat top left;
}
.ecke_oben_rechts {
background: url(ecke_oben_rechts.gif) no-repeat top right;
}
.ecke_unten_links {
background: url(ecke_unten_links.gif) no-repeat bottom left;
}
.ecke_unten_rechts {
background: url(ecke_unten_rechts.gif) no-repeat bottom right;
}
|
Die Bilder sind einfach die Ecken, dabei darauf achten, dass der Außenbereich nicht transparent ist.
Die allgemeine Hintergrundfarbe darf nur in dem ersten DIV auftauchen, sonst überdeckt die Hintergrundfarbe die Eckgrafiken unterliegender <div>s!
_________________
Mancher ertrinkt lieber,
als daß er um Hilfe ruft.
(Wilhelm Busch)
|
|
| Nach oben |
|
|
LoD
Neuer [User]
Anmeldung: 07.10.07
Beiträge: 7
|
| Verfasst am: 08.10.2007, 13:59 Titel: |
|
|
Im Grunde ists genauso wie chris meint, nur hab ich halt nicht nur die runden Ecken als Bild, sondern die ganze Box, da ausenrum noch ein Rahmen ist.
Schauts euch einfach an: daaa
Ich hab leider grad nix da wo mer sich des richtig anschauen kann.
Aber wenn Ihr in der Navigation auf 'SCHLECHT' drückt, werdet ihr das Problem scho erkennen.
An sich gefiele mir die Methode ja.. Aber die Bilder für die Box werden einfach zu groß..
Deswegen brauch ich eine neue Methode, wie ich das gleiche Ergebnis, ohne zuviel Speicherplatz zu verbrauchen und am besten relativ simpel hinbekomme.
|
|
| Nach oben |
|
|
|
|
  |
|
Alle Zeiten sind GMT + 1 Stunde
|
| Seite 1 von 1 |
|  |
