Cidhino

Hallo Leroy,

Bedankt voor al het meedenken. Maar ik ben nu aan de slag gegaan met images om de ronde hoeken te krijgen. Alleen ben ik nu op een soortgelijk probleem gestuit alleen in een andere situatie.

Ik heb hiervoor een nieuw topic geplaatst: http://www.pc-helpforum.be/f215/div-hoogte-gelijk-maken-18423/#post96301

Denk je dat dit handig is?

Groeten Cidhino

Hallo iedereen,

Inmidels ben ik met images gaan werken om ronde hoeken te krijgen. Dit is al aardig gelukt alleen zit ik vast op het volgende:

Het is de bedoeling dat de twee div's naast elkaar dezelfde lengte krijgen. Dus naar mate er meer tekst in de ene div komt zal de andere div automatisch dezelfde lengte krijgen en gevuld worden met de achtergrond kleur/afbeelding. Het is dus niet de bedoeling dat de div's met een vaste "height" worden aangegeven.

Heeft iemand hier een oplossing voor?

Zie onderstaande CSS en HTML.

<div id="container">
       <div id="container_left">

    <img src="http://i33.tinypic.com/21mtb9z.png" alt="" 
    width="15" height="15" class="corner" 
    style="display: none" />


  <p>Lorem ipsum dolor sit amet, consectetur adipisicing 
  elit, sed do eiusmod tempor incididunt ut labore et 
  dolore magna aliqua. Ut enim ad minim veniam, quis 
  nostrud exercitation ullamco laboris nisi ut aliquip 
  ex ea commodo consequat. Duis aute irure dolor in 
  reprehenderit in voluptate velit esse cillum dolore eu 
  fugiat nulla pariatur. Excepteur sint occaecat cupidatat 
  non proident, sunt in culpa qui officia deserunt mollit 
  anim id est laborum.addsfsdfsfsfasfsdfsdfsdfsfsfegrgdfgdsgdsgsdgdsgsdgdsfhfdkljfnsdkjn sdhsdkh slfsl</p>


    <img src="http://i33.tinypic.com/i24zll.png" alt="" 
    width="15" height="15" class="corner" 
    style="display: none" />

</div>    


<div id="container_right">
  <div class="roundtop">
    <img src="#" alt="" 
    width="15" height="15" class="corner" 
    style="display: none" />
  </div>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing 
  elit, sed do eiusmod tempor incididunt ut labore et 
  dolore magna aliqua. Ut enim ad minim veniam, quis 
  nostrud exercitation ullamco laboris nisi ut aliquip 
  </p>

  <div class="roundbottom">
    <img src="#" alt="" 
    width="15" height="15" class="corner" 
    style="display: none" />
  </div>
</div>    
   </div>

</div>

body, html{
   text-align:center;
   background-color:#CCCCCC;
}

#container {
   position:absolute;
     width: 1000px;
     margin-left:-500px;
     left: 50%;
   top:20px;
}

#container_left {
   float:left;
     width: 600px;
   background-color: #fff;
}

#container_right {
   float:left;
     width: 400px;
   background-color: #fff;
   background: url(http://i36.tinypic.com/4l3fih.png) 0% 0% repeat-y;
   color: #fff;
}

.roundcont {
   width: 100%;
   background-color: #fff;
}

.roundcont p {
   margin: 0 10px;
}

.roundtop { 
   background: url(http://i33.tinypic.com/33egz9d.png) no-repeat top right; 
}

.roundbottom {
   background: url(http://i38.tinypic.com/33c8zyp.png) no-repeat top right; 
}

img.corner {
  width: 15px;
  height: 15px;
  border: none;
  display: block !important;
}

Hallo Leroy,

Beetje late reactie maar goed...

Bedankt anyway voor je reactie en moeite, dit is precies waar ik naar toe wilde.

Het klopt inderdaad wat je zegt dat die kaders individueel van elkaar veranderen zodra je er meer content in plaatst. Dat is jammer want het is de bedoeling uiteindelijk dat het als één geheel groter wordt en gelijk blijft aan elkaar.

Wat een optie is, is dat je de hoogte in waardes aangeeft bijv 300 px en 304 px. Dat kan je ze custom gelijk zetten. Maar dat is niet waar ik naar toe wilde.

Anyway ik vindt het een ingewikkeld verhaal en denk dat ik het toch ga proberen met images

Bedankt in ieder geval voor je hulp.

Grt Cidhino.

Hallo iedereen,

Ik zit met een probleempje. Ik heb een goede code gevonden om ronde hoeken te maken zonder images te gebruiken die in alle browsers leesbaar zijn.

Ik heb het zover gekregen dat er 2 delen onder elkaar staan, 1 met witte achtergrond en 1 met grijze achtergrond. Ze staan nu onder elkaar maar ik wil ze naast elkaar hebben. Dus het linker deel witte achtergrond en het rechterdeel grijze achtergrond.

Weet iemand hoe je dit aanpast?

Mvg Cid.

CSS:

.b1h, .b2h, .b3h, .b4h, .b2bh, .b3bh, .b4bh{font-size:1px; overflow:hidden; display:block;}

.b1h {height:1px; background:#aaa; margin:0 5px;}

.b2h, .b2bh {height:1px; background:#fff; border-right:2px solid #aaa; border-left:2px solid #aaa; margin:0 3px;}

.b3h, .b3bh {height:1px; background:#fff; border-right:1px solid #aaa; border-left:1px solid #aaa; margin:0 2px;}

.b4h, .b4bh {height:2px; background:#fff; border-right:1px solid #aaa; border-left:1px solid #aaa; margin:0 1px;}

.b2bh, .b3bh, .b4bh {background: #ddd;}

.headh {

background: #fff;

border-right:1px solid #aaa;

border-left:1px solid #aaa;

}

.headh h3 {

margin: 0px 10px 0px 10px;

padding-bottom: 3px;

}

.contenth {

background: #ddd;

border-right:1px solid #aaa;

border-left:1px solid #aaa;}

.contenth div {

margin-left: 12px;

padding-top: 5px;

}

HTML:

<b class="b1h"></b><b class="b2h"></b><b class="b3h"></b><b class="b4h"></b>

<div class="headh">

<h3>Here is your Header!</h3>

</div>

<div class="contenth">

<div>Look ma, no images!</div>

</div>

<b class="b4bh"></b><b class="b3bh"></b><b class="b2bh"></b><b class="b1h"></b>

Bedankt Leroy,

Ik ben er al een tijdje uit. Maar dit was inderdaad de oplossing.

Mvg Cid.

Hallo,

Ik hoop dat ik hier goed zit.

Ik heb een website gemaakt met tables en ben bezig deze om te zetten naar CSS om zo beter in de seo van google te komen en een cleanere html pagina te krijgen.

Het probleem is echter de div box plaatsing. Het idee is om het via bijgaande afbeelding te doen. Kan iemand me hierbij helpen?

Alvast bedankt!