[CSS] box mit abgerundeten ecken ohne tabelle

[TobiaZ]

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]

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*

EDIT:

---

schnellschuss

---

[Kropff]

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]

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]

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]

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]

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]

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]

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]

[ ] 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]

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.

EDIT:

---

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

---

[asp2php]

@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">
<!--
body
{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size:10px;
    text-align:center;
}    
#top, #bottom, #body
{
    width:400px;
}
#top
{
    background-image:url(/images/deep_blue.gif);
    height:10px;
}
#bottom
{
    background-image:url(/images/brown_mottle.jpg);
    height:10px;
}
#body
{
    background-image:url(/images/blumarbl.gif);
    padding-left:10px;
    padding-right:10px;
}
#left, #content
{
    float:left;
}
#left
{
    width:160px;
}
#content
{
    width:600px;
}
-->
</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">&nbsp;</div>
        <div id="body">
        <?php 
            for ($i=0;$i<300;$i++) echo $i.' ';
        ?>
        </div>
        <div id="bottom">&nbsp;</div>
    </div>
</div>

</body>
</html>

ob es das was du willst

[wahsaga]

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]

hab' gewußt, dass ich was vergesse ... Hm mal schauen

[NielsRunge]

vielleicht helfen Dir diese ->

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

EDIT:

---

ohne Tabellen und sollte in gängigen Browsern funktionieren

---