Ga naar inhoud

Ronde hoeken in CSS

Cidhino

Door Cidhino
in Archief Website Hulp & Scripts

 Delen

Aanbevolen berichten

Cidhino Groentje

Cidhino

Geplaatst:
Geplaatst:

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>

Link naar reactie
Delen op andere sites
leroy Mentor

leroy

Geplaatst:
Geplaatst:

Ik heb echt HEEEL lang moeten kijken hoe je dit nou hebt gedaan... en eigenlijk is dit nog niet zo´n verkeerde oplossing!.. als je gaat nadenken is hij eigenlijk nog best slim en makkelijk! :P

Maar ik heb er een beetje mee gespeeld. En kwam tot de onderstaande code.

Voordat je hem kopieert, moet je even weten dat je nu bijvoorbeeld het linkerkadertje precies even hoog moet maken als het rechterkadertje. Visa versa (ook andersom).

anders krijg je fouten.

Maar mocht je hier zelf iets op verzinnen, laat het hier dan ook even weten! is wel eens handig!.

Als je de volgende code kopieert en in een html bestand zet dan zie je wat het is geworden. Laat maar even weten of het goed is.

Let wel op wat ik eerder zei. probeer het maar eens uit om in het linkerkadertje een enter te zetten en wat tekst. Dan zie je wat ik bedoel.

hier de code:

<html>
<head>
<style type="text/css">
.b1h, .b2h, .b3h, .b4h, .b1bh, .b2bh, .b3bh, .b4bh
{
font-size:1px; 
overflow:hidden; 
display:block;
}


.b1h 
{
height:1px; 
background:#aaa; 
border-top:px solid #aaa;
margin:0px 0px 0px 5px;
}
.b2h
{
height:1px; 
background:#fff; 
border-left:2px solid #aaa; 
margin:0px 0px 0px 3px;
}
.b3h
{
height:1px; 
background:#fff; 
border-left:1px solid #aaa; 
margin:0px 0px 0px 2px;
}
.b4h
{
height:2px; 
background:#fff; 
border-left:1px solid #aaa; 
margin:0px 0px 0px 1px;
}

.b1bh 
{
height:1px; 
background:#aaa; 
margin:0px 5px 0px 0px;
}
.b2bh
{
height:1px; 
background:#aaa; 
border-right:2px solid #aaa; 
margin:0px 3px 0px 0px;
}
.b3bh
{
height:1px; 
background:#aaa; 
border-right:1px solid #aaa; 
margin:0px 2px 0px 0px;
}
.b4bh
{
height:2px; 
background:#aaa; 
border-right:1px solid #aaa; 
margin:0px 1px 0px 0px;
}


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

.headh 
{
background: #fff; 
border-left:1px solid #aaa;
}
.headh *
{
margin: 0px 10px 0px 10px; 
padding-bottom: 3px;
}
.contenth 
{
background: #ddd; 
border-right:1px solid #aaa; 
}
.contenth * 
{
margin: 0px 10px 0px 10px;
padding-bottom: 6px;
}
</style>
</head>
<body>
<div style="float:left">
<div style="float:left">
	<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>
	<b class="b4h"></b><b class="b3h"></b><b class="b2h"></b><b class="b1h"></b>
</div>

<div style="float:right">
	<b class="b1bh"></b><b class="b2bh"></b><b class="b3bh"></b><b class="b4bh"></b>
	<div class="contenth">
		<div>Look mam no images!</div>
	</div>
	<b class="b4bh"></b><b class="b3bh"></b><b class="b2bh"></b><b class="b1bh"></b>
</div>
</div>
</body>
</html>

Link naar reactie
Delen op andere sites
Cidhino Groentje

Cidhino

Geplaatst:
  • Auteur
Geplaatst:

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.

Link naar reactie
Delen op andere sites
leroy Mentor

leroy

Geplaatst:
Geplaatst:

Oke ;)

Ik denk dat het ook wel op te lossen is d.m.v. een losse DIV over al die DIV's te zetten met de eigenschap: min-height:30px (ofzo). En dan de hoogte van de interne Div's (links en rechts) te zetten op 100%.

Misschien dat het dan werkt. Maar daar heb ik geen idee van. Dan zou je dan zelf even moeten knutselen.

Tegenwoordig is trouwens de ronde rand met plaatjes gewoon makkelijk te doen met .gif extensie plaatjes. Ikzelf pak het dan wel NET andersom. Je zou denken om de ronding (binnenkant) een vaste kleur te geven, en de buitenkant op doorzichtig te zetten.

______

|****

|**

|*

Hoop dat je met bovenstaande een beetje snapt wat ik bedoel Dat is zegmaar de linkerbovenhoek van een Div'je.

Normaal gezien zou je het met sterretjes gedeelte doorzichtig maken, en de rest een vaste kleur geven. Ik doe het andersom, Ik geef dat met sterretjes gedeelte de kleur van mijn achtergrond, en de rest zet ik op doorschijnend. Wanneer je dan een andere kleur Div wilt gebruiken, hoef je niet een nieuwe afbeelding te maken met die kleuren, maar maak je gewoon de DIV bijvoorbeeld rood. Dus worden ook gelijk je hoekjes rood.

Hoop dat je beetje snapt wat ik bedoel. Anders wil ik er voorbeelden bijzetten met screenshotjes.

Groeten,

Leroy

Link naar reactie
Delen op andere sites
Cidhino Groentje

Cidhino

Geplaatst:
  • Auteur
Geplaatst:

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

Link naar reactie
Delen op andere sites
Gast
Dit topic is nu gesloten voor nieuwe reacties.
 Delen
Ga naar topic overzicht
Logo

OVER ONS

PC Helpforum helpt GRATIS computergebruikers sinds juli 2006. Ons team geeft via het forum professioneel antwoord op uw vragen en probeert uw pc problemen zo snel mogelijk op te lossen. Word lid vandaag, plaats je vraag online en het PC Helpforum-team helpt u graag verder!

SITEMAP

×
×
  • Nieuwe aanmaken...

Belangrijke informatie

We hebben cookies geplaatst op je toestel om deze website voor jou beter te kunnen maken. Je kunt de cookie instellingen aanpassen, anders gaan we er van uit dat het goed is om verder te gaan.