Rahmen um div
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
arbeiten
aussehen
beispiel
bild
blocken
boxen
code
container
display
ergebnis
frage
http
image
inhalt
position
problem
rahmen
tabelle
url
webseite
-
Hallo ihr Lieben,
momentan stelle ich mir die Frage, wie ich das folgende Problem am einfachsten (und vor allem am sinnvollstel) lösen kann.
Auf einer Website sollen Inhalte grundsätzlich in einer "Box" angezeigt werden. Diese würde ich normalerweise per div über css codieren. Nun habe ich mir in Photoshop einen Rahmen dazu gebastelt: Wie setze ich es am besten um, dass sich dieser entsprechend der Länge anpasst?
Eine Möglichkeit sollte es wohl sein, mit vielen verschachtelten divs zu arbeiten. Somit müsste ich mir das Ganze doch in mindestens 5 Teile aufteilen (mittlerer Bereich und die jeweiligen Ränder) und mit einer Mindesthöhe arbeiten.
Das würde ich vermutlich hinbekommen, jedoch frage ich mich, ob es auch andere Möglichkeiten gibt, dieses Problem zu lösen? -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Seit CSS3 gibt es border-image. Demo.
Die Unterstützung ist leider nicht die beste. http://caniuse.com/border-image
Beitrag zuletzt geändert: 11.6.2014 20:38:32 von c143 -
Ich würde es mit border-image lösen.
Damit kannst du das Bild als Rahmen einsetzen.
Ein Beispiel von w3schools: http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_border-image
Wenn du etwas Browser kompatibles brauchst (also unter ie11) dann würde ich versuchen mehrere divs einzusetzen (top, left, right, bottom) und jeweils immer den Rahmenteil mit Background laden wenn du auch noch spezielle Ecken haben möchtest musst du weiter vier divs machen.
Außerdem könnte man auch etwas mit canvas machen.
Hier hat sich ein Entwickler damit beschäftigt (ist nur ein Beispiel, findest auch noch mehr):
https://github.com/chrislondon/9-Patch-Image-for-Websites -
Es wäre interessant zu sehen, wie es am Ende aussehen soll, die CSS-Eigenschaft box-shadow kann ein paar nette Rahmen zaubern.
http://dropshado.ws/post/1592190942/multiple-borders-with-box-shadow -
Ich habe bereits versucht über border-image zu arbeiten, jedoch ist mir das Ganze nicht komplett verständlich.
Das Beispiel verstehe ich ohne Probleme, jedoch weiß ich nicht ganz, wie ich dies auf andere Rahmen umsetzen soll.
Ich habe euch mal ein Bild hochgeladen. Es geht um die untere "Box". Diese soll sich der Höhe des Inhalts anpassen.
http://i59.tinypic.com/1xhmr.jpg -
Bei dem Bild spielt doch der Rahmen keine Rolle, sondern die Form. Der Rahmen ist nur ein schwarzer Strich um die Box.
-
Da dortn sehr weit gestreckt bzw gestaucht werden müßte wird das wohl so oder so irgendwann irgendwo bescheiden aussehen.
Meiner Ansicht nach Sinnvoller wäre es, die Rundung in Kopf und Fuß starr zu machen und als flexiblen Zwischenteil eine durchgezogene vertikale Linie zu nutzen( Infografik). -
Wie wäre es denn mit einer Tabellenlösung? Ist vielleicht vom Code her nicht das schönste, aber immerhin besser als nichts - außerdem sollte es einigermaßen einfach sein.
Erstmal eine Tabelle mit drei Spalten
<table> <tr> <td class="left"></td> <td class="content"></td> <td class="right"></td> </tr> </table>
Danach die beiden Bilder zerschnipseln
Das heißt, wir nehmen jeweils die obere- und untere Hälfte des Bildes und speichern sie einzeln. Dann müssten wir einmal den oberen und den unteren linken sowie den oberen und den unteren rechten Kreisteil haben.
Div-Container, die die Bilder beinhalten
Um die Bilder nun einblenden zu lassen, basteln wir uns jeweils zwei Div-Container für jede Seite, die wir in die jeweiligen Tabellenspalten einfügen. Das sollte dann so aussehen:
<td class="left"> <div class="bg_top"></div> <div class="bg_bottom"></div> </td>
Die Container positionieren
Nun müssen wir die Container nur noch korrekt positionieren. Dass würde ich tun, indem ich ihnen beiden eine absolute Position verpasse - dazu muss aber erst die jeweilige Tabellenspalte relativ positioniert sein, damit der absolut positionierte Div nicht irgendwo ist, sondern auch wirklich in der Tabellenspalte. Die Breite der Tabellenspalte sollte die Breite des Bildes sein.
td.left, td.right {position: relative; left: 0; top: 0; width: 123px;}
Jetzt die beiden Div-Container ausrichten. Die Höhe musst du auf die Höhe der jeweiligen Teilkreisbilder setzen.
div.bg_top {position: absolute; top: 0; right: 0; width: 100%; height: 123px;} div.bg_bottom {position: absolute; bottom: 0; right: 0; width: 100%; height: 123px;}
Die Bilder einfügen
Nun müssen nur noch die Bilder eingefügt werden. Entweder du tust das ganz normal via <img>-Tag...
<div class="bg_top"><img src="http://exampel.com/left_top.png" alt="" /></div>
... oder als Hintergrundbild in der CSS.
td.left div.bg_top {background-image: url('http://example.com/left_top.png'; background-repeat: no-repeat;}
Ergebnis
HTML-Code:
<table> <tr> <td class="left"> <div class="bg_top"></div> <div class="bg_bottom"></div> </td> <td class="center">Inhalt</td> <td class="right"> <div class="bg_top"></div> <div class="bg_bottom"></div> </td> </tr> </table>
CSS-Code:
td.left, td.right {width: 123px; position: relative; top: 0; left: 0;} div.bg_top {position: absolute; top: 0; right: 0; width: 123px; height: 123px;} div.bg_bottom {position: absolute; bottom: 0; right: 0; width: 123px; height: 123px;} td.left div.bg_top {background-image: url('http://example.com/left_top.png'); background-repeat: no-repeat;} td.left div.bg_bottom {background-image: url('http://example.com/left_bottom.png'); background-repeat: no-repeat;} td.right div.bg_top {background-image: url('http://example.com/right_top.png'); background-repeat: no-repeat;} td.right div.bg_bottom {background-image: url('http://example.com/right_bottom.png'); background-repeat: no-repeat;}
Ich hoffe, ich habe bei der Anleitung jetzt nicht allzuviel verbockt oder deine Frage komplett falsch beantwortet. -
Man nimmt schon lange keine Tabellen mehr her, um die Webseite zu gestalten, dafür gibt es CSS.
Html:
<section id="box"> <div id="box-top></div> <div id="box-content"></div> <div id="box-bottom"></div> </section>
CSS:
#box-top { background: ...; height: ...; width: ...; display: block; } #box-bottom{ … } -
tchab schrieb:
Man nimmt schon lange keine Tabellen mehr her, um die Webseite zu gestalten, dafür gibt es CSS.
Obwohl du recht hast schien es miur auf den ersten Blick jedoch einfacher. Bei deiner Lösung möchte ich jedoch noch kritisieren, dass das ganze mit deinem display: block; nicht funktionieren dürfte. Du ordnest das ganze ja ganz anders an - also von oben nach unten. Damit wird aber - denke ich - nicht das gewünschte Ergebnis erzielt - denn so könnte man auf gleicher Höhe mit dem Halbkreis in den div#box-content keinen Text hinterlassen.
Meine Lösung wäre folgende:
HTML:
<section id="box"> <div id="box-left"> <div class="bg_top"></div> <div class="bg_bottom"></div> </div> <div id="box-center">Inhalt</div> <div id="box-right"> <div class="bg_top"></div> <div class="bg_bottom"></div> </div> </section>
CSS:
div#box-left, div#box-right {display: inline-block; width: ...; height: ...; background: ...;} -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
