Umrandung mit divs

html.de-Forum HTML, XHTML & CSS
1

Hey Liebe Forumer,
ich habe ein kleines Problem.
Ich will ein Foto umranden und das mit divs:
[HTML]

Untitled
hier soll einmal ein bild hin,
das eine belibige Größe haben soll.
Alle anderen Elemente sollen dieses Umschließen
[/HTML]Und mein Stylesheet: [CODE] * { margin: 0; padding: 0; }

BODY, TD {
background-color: #4d4b4c;
padding: 50px;
}

#box {
padding: 40px;
background-color: blue;
float: left;
width: auto;
}

#top { margin-top: -40px; margin-left: -40px; margin-right: -40px; background-color: white; overflow: hidden; height: 40px;}
#top_left { height: 40px; width:40px; background-color: fuchsia; float: left; }
#top_right { height: 40px; width:40px; background-color: fuchsia; float: right; }

#bottom { margin-bottom: -40px; margin-left: -40px; margin-right: -40px; background-color: white; overflow: hidden; height: 40px;}
#bottom_left { height: 40px; width:40px; background-color: fuchsia; float: left; }
#bottom_right { height: 40px; width:40px; background-color: fuchsia; float: right; }

#left { margin-left: -40px; background-color: white; width: 40px; float: left;}
#right { margin-right: -40px; background-color: white; width: 40px; float: right;}
#content { background-color: red;}
[/CODE]Jetzt entstehen aber folgende Probleme:

  1. Der IE gleicht das „#box“-div an die body breite an
  2. Der FF weißt dem „#right“-div und dem „#left“-div eine height von 0 zu. Der IE weißt dem „#right“-div und dem „#left“-div eine height zu, aber diese ist eben immer noch nicht gleich groß, wie das „#content“-div.

Das was hier mit Farben dargestellt ist soll später noch gegen einen richtigen Rand aus background-images ersetzt werden.

LG Crashc

2

Zu Problem 1: das macht der IE auch richtig, wenn Du einem Blockelemt sagst es soll floaten braucht es auch eine Größenangabe. Ergänze also die Breite.

Zu Problem 2: Vielleicht wären faux columns das Richtige für dich. Vielleicht würde es auch reichen, wenn Du auf die Elemente links und rechts verzichtest und das mittlere div auf die ganze Breite bringst und den Inhalt (also das Bild) zentrierst.

3

Zu deinem ersten Vorschlag:
das Problem ist, dass es um ein dynamisches Layout gehen soll.
Es soll ein Bild,dessen größe unbekannt ist, mit 7 bildern umgeben und somit einen „Rand“ bilden.
Im Anhand, sieht man wie es aussehen soll.
Zu deinem zweiten Vorschlag:
das Problem wäre ja dann, das wenn ich das img kompett über die Breite mache, dass ich links und rechts kein „Rand“ mehr habe.
Und somit komme ich auch denke ich mit faux columns nicht weiter, da man so nur maximal eine spalte simulieren kann. Oder liege ich hier falsch?

LG crashc

4

Fixes 3-Spalten-Layout: Yet Another Multicolumn Layout | An (X)HTML/CSS Framework
CSS-P 3 Column Layout

5

Danke

Danke dir habe alles verstanden. Ich habe es mit 2 inneinander geschachtelten faux columsgelöst.

Hier noch mal der code, falls andere das selbe/ein ähnliches Problem haben:
[HTML]

[/HTML]

und das stylesheet dazu

.box{background-color: transparent;background-image: url('./img/left.jpg');background-repeat: repeat-y;background-position: left;padding-left: 39px; }
.box2{background-color: transparent;background-image: url('./img/right.jpg');background-repeat: repeat-y;background-position: right;padding-right: 39px;}

#boxbox{ float:left;}
#top{background-image: url('./img/top.jpg');height: 39px;}
#top_left{background-image: url('./img/top_left.jpg');height: 39px; width: 39px; float:left;}
#top_right{background-image: url('./img/top_right.jpg');height: 39px; width: 39px; float:right;}
#bottom{background-image: url('./img/bottom.jpg');height: 30px;}  
#bottom_left{background-image: url('./img/bottom_left.jpg');height: 30px; width: 39px; float:left;}
#bottom_right{background-image: url('./img/bottom_right.jpg');height: 30px; width: 39px; float:right;}