[CSS] box mit abgerundeten ecken ohne tabelle

**mrhappiness** · 29-09-2004, 16:40

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

Code:

<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** · 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:

PHP Code:


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

Code:

.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:

PHP Code:


<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

Code:

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.

EDIT:
... 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

PHP Code:


<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

Attached Files

div.gif (55.3 KB, 158 views)

**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

... 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)

EDIT:

ohne Tabellen und sollte in gängigen Browsern funktionieren

[CSS] box mit abgerundeten ecken ohne tabelle