• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Umrandung mit divs

C

crashc

Neues Mitglied
Hey Liebe Forumer,
ich habe ein kleines Problem.
Ich will ein Foto umranden und das mit divs:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<title>Untitled</title>
<link rel="stylesheet" type="text/css" href="my.css">
</head>
<body> 
<div id="box">
  <div id="top">
    <div id="top_left"></div>
    <div id="top_right"></div>
  </div>
  <div id="middle">
    <div id="left"></div>
    <div id="right"></div>
    <div id="content">hier soll einmal ein bild hin,<br />das eine belibige Größe haben soll.<br />Alle anderen Elemente sollen dieses Umschließen</div> 
  </div>
  <div id="bottom">
    <div id="bottom_left"></div>
    <div id="bottom_right"></div>
  </div>
</div>  
</body>
</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;}
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
 

Anhänge

  • ff2.jpg
    ff2.jpg
    85,5 KB · Aufrufe: 8
  • ie2.jpg
    ie2.jpg
    93 KB · Aufrufe: 6
  • sol2l.jpg
    sol2l.jpg
    83,1 KB · Aufrufe: 6
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.
 
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
 

Anhänge

  • sshot-1.jpg
    sshot-1.jpg
    22,3 KB · Aufrufe: 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: 
<body>
<div id="boxbox">
 <div id="top">
   <div id="top_left"></div>
   <div id="top_right"></div>
 </div> 
 <div class="box">
   <div class="box2" id="bild">
     <img src="./img/Chrysanthemum.jpg" width="550"/>
   </div>
 </div> 
 <div id="bottom">
   <div id="bottom_left"></div>
   <div id="bottom_right"></div>
 </div>  
</div> 
</body>

und das stylesheet dazu

Code: 
.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;}
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben