[CSS] box mit abgerundeten ecken ohne tabelle [Archiv] - PHP-Scripte PHP-Tutorials PHP-Jobs und vieles mehr

Archiv verlassen und diese Seite im Standarddesign anzeigen :
[CSS] box mit abgerundeten ecken ohne tabelle

TobiaZ

29-09-2004, 16:31

Hi zusammen,

hab mir n schönes Bild gezaubert (s. Anhang) und möchte das nun schön in HTML einbauen.

Nach Möglichkeit sollen Höhe und Breite der Box variabel sein und in die Mitte sollte man einen Textreinschreiben können.

Jemand ne Idee, wie man das ganze mit wenig Code und ohne Tabellen hinbekommt?

mrhappiness

29-09-2004, 16:40

ohne tabellen wird's eine css-fummelei werden, aber wenn du unbedingt willst

<div class="container">
<img src="/images/upper-left.gif" class="upperleft" />
<p>
Dein Text
<img src="/images/lower-left.gif" class="lowerleft" />
</p>
</div>"container" bekommt als background-image den oberen teil des bildes (ohne linke obere ecke), den mittelteil kannst du ja länger ziehen, vergrößert die datei ja nicht wirklich arg

der "p" bekomt den rest (rechter rand, unterer rand und die ecke dazwischen) als background-image (nicht vergessen, die geraden teile kannst du ja vorher verlängern

wie du die bilder positionierst, musst du selbst austüfteln *g*

schnellschuss

Kropff

29-09-2004, 16:42

Jemand ne Idee, wie man das ganze mit wenig Code und ohne Tabellen hinbekommt?

also ich denke ohne tabellen wird das nicht klappen, da musst du das bild schon zerschnipseln.

peter

TobiaZ

29-09-2004, 16:48

also ich denke ohne tabellen wird das nicht klappen, da musst du das bild schon zerschnipseln. Das Zerschnipseln ist klar. das muss ich wohl bei beiden lösungen. Hab auch strebsamerweise schonmal die slices angelegt ;)

TobiaZ

30-09-2004, 15:57

Kurz meine Lösung:

<table class="box">
<tr>
<td class="box_top"><img
src="Bilder/corner_tl.gif" alt="1"></td>
<td class="box_top" style="text-align:right"><img
src="Bilder/corner_tr.gif" alt="2"></td>
</tr>
<tr>
<td colspan="2" class="box_right">Mein Text</td>
</tr>
<tr>
<td class="box_bottom"><img
src="Bilder/corner_bl.gif" alt="3"></td>
<td class="box_bottom" style="text-align:right"><img
src="Bilder/corner_br.gif" alt="4"></td>
</tr>
</table>

.box
{
width: 400px;
background-color:#f1f0f0;
border-collapse:collapse;
}

.box_top
{
padding:0;
}

.box_bottom
{
padding:0;
background:url(Bilder/bg_bottom.gif) repeat-x;
background-position:bottom;
}

.box_right
{
padding-right:20px;
padding-left:15px;
background:url(Bilder/bg_right.gif) repeat-y;
background-position:right;
}

Ne vernünftige DIV-Lösung gibt es anscheinend nicht wirklich, da der IE (leider auf allen Schulrechnern installiert) offensichtlich ein bild nicht ganz(!) rechts floaten kann.

mrhappiness

30-09-2004, 16:03

Original geschrieben von TobiaZ
Ne vernünftige DIV-Lösung gibt es anscheinend nicht wirklich, da der IE (leider auf allen Schulrechnern installiert) offensichtlich ein bild nicht ganz(!) rechts floaten kann. nen komischen IE habt ihr da...
aber nach links sollte selbst bei eurem gehen, oder auch nicht?
was haste denn versucht?

und wozu die nummerierten alt-attribute?

TobiaZ

30-09-2004, 16:05

u.a. hatte ich glaube ich sowas probiert:<div class="box_top"><img
src="Bilder/corner_tr.gif" alt="2" style="float:right"><img
src="Bilder/corner_tl.gif" alt="1"></div>

und wozu die nummerierten alt-attribute? damit ich die anzahl zählen kann, nee. war nur zum testen.

mrhappiness

30-09-2004, 16:10

gibt ja auch noch margin und padding und teilweise kann man denen auch negative werte geben...

bei den IEs die ich bis jetztgesehen habe ging das

TobiaZ

30-09-2004, 16:13

ja, klar, nur muss der padding zwangsläufig auf 0, da ich die seite ja auch von zu hause ansehen möchte ;)

wenn ich das ganze jetzt 2-3 pixel nach rechts schiebe, dann wirds vermutlich in anderen browsern aus dem Rahmen tanzen. Im wahrsten Sinne des Wortes...

mrhappiness

30-09-2004, 16:16

[ ] du weißt, dass der IE manches korrekte css nicht versteht
[x] du kannst diese schwäche des IE nutzen

css für IE

css für richtige browser, vor dem IE versteckt

TobiaZ

30-09-2004, 17:20

da hast du recht.

da es aber in dem forum hier nur hilfe zur selbsthilfe gibt und ich außnahmsweise auch mal zu faul bin, mich darum zu kümmern, belasse ich es einfach bei der aktuellen Lösung.

... wobei eigentlich sollte ich das so machen, wie du gesagt...

asp2php

30-09-2004, 21:20

@Tobi vielleicht verstehe ich dich falsch, aber ohne Tabelle gehts doch.
Schneide das Bild in 3 Teilen: Kopf, Fuß und Rest. Ich habe kein richtiges Bild da, aber ich versuche mal zu visuellisieren :)

<html>
<head>
<style type="text/css">

</style>
</head>
<body>
<div style="width:760px;margin:0px auto;text-align:left;">
<div id="left">
<?php
for ($i=0;$i<100;$i++) echo 'bla ';
?>
</div>
<div id="content">
<div id="top"> </div>
<div id="body">
<?php
for ($i=0;$i<300;$i++) echo $i.' ';
?>
</div>
<div id="bottom"> </div>
</div>
</div>

</body>
</html>

ob es das was du willst :dontknow:

wahsaga

30-09-2004, 21:32

Original geschrieben von asp2php
@Tobi vielleicht verstehe ich dich falsch, aber ohne Tabelle gehts doch.
Schneide das Bild in 3 Teilen: Kopf, Fuß und Rest.
das lässt aber leider die anforderung
Nach Möglichkeit sollen Höhe und Breite der Box variabel sein
außer acht.

asp2php

30-09-2004, 21:35

hab' gewußt, dass ich was vergesse :D ... Hm mal schauen ;)

NielsRunge

30-09-2004, 22:29

vielleicht helfen Dir diese ->

http://www.albin.net/CSS/roundedCorners/
http://www.virtuelvis.com/gallery/css/rounded/ (EDIT: vergiss diesen, IE will nicht)

ohne Tabellen und sollte in gängigen Browsern funktionieren

TobiaZ

30-09-2004, 23:30

@asp: hatte in der tat schon drüber nachgedacht das so zu machen, erschien mir aber zu unflexibel...

@niels: der link sieht interessant aus. werde ich mir morgen mal ansehen, wenns wenig code ist, lohnt es sich...

NielsRunge

30-09-2004, 23:39

hmm, naja "wenig Code" ist wohl Ansichstssache ;)

CSS 1,76 KB 67 Zeilen

Beispiel HTML 0,9 KB 15 Zeilen

aber lässt sich beides noch optimieren

KillerGod2000

01-10-2004, 12:36

guck mal bei ALA (http://www.alistapart.com), da gab es mal ein Tut zu genau dem Thema ;)

S.Oliver

01-10-2004, 14:06

//Edit: Hat sich erledigt, hatte nicht gesehen, dass die Höhe und Breite änderbar sein sollte.

TobiaZ

03-10-2004, 22:12

a list apart beschränkt sich leider auch auf ein top- und ein bottom-image...

mrhappiness

04-10-2004, 08:16

http://www.saila.com/attic/sandbox/rounded-corners/#code

warum kannst du als breitenangabe denn nicht mit em arbeiten?

TobiaZ

04-10-2004, 12:03

@happy: wüsste nicht warum ich das sollte... :)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<title>Test</title>

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

<style type="text/css">

div.box
{
width:400px;

background-color:#ededed;
padding:0;
}

div.box_top
{
height:18px;
}

div.box_content
{
padding:0 15px 0 15px;
background:url(/images/box/bg_right.gif) repeat-y;
background-position:right;
}

div.box_bottom
{
height:18px;
background:url(/images/box/bg_bottom.gif) repeat-x;
background-position:bottom;
}

</style>

</head>

<body>

<div class="box">
<div class="box_top"><img
src="/images/box/corner_tr.gif" style="float:right;" /><img
src="/images/box/corner_tl.gif" /></div>
<div class="box_content">Text hier<br />Ende.</div>
<div class="box_bottom"><img
src="/images/box/corner_br.gif" style="float:right;" /><img
src="/images/box/corner_bl.gif" /></div>
</div>

</body>

</html>

Hatte gestern nach nem durchzechten WE nochmal ne schlaflose Nacht. Grad noch was ausgebessert und das kommt dabei raus: Funzt im IE und Mozi sollte auch klappen.Achso, damit ihr nicht denkt "der macht sich ja viel zu viel Aufwand" (was er zwar ohnehin tut): ihr müsst bedenken, dass die Box nen schatten hat ;)

- -