[CSS] 1 class voor luxe tekstbox?

[Asitis]

Ik dacht dat ik na al die jaren en sites het meeste van CSS wel doorhad, maar nu wil ik toch nog iets bereiken waar ik eigenlijk geen flauw idee over heb..

Het idee is tamelijk simpel. Ik heb een site, en ik wil bepaalde stukken tekst in een blok zetten (ala blockquote). Het zou dus werken als:

<div class="box">Stukje tekst</div>

Nou is dat het probleem nog niet, maar ik wil een textbox met ronde hoeken en een variabele hoogte (afhankelijk van de tekst - dus geen background image).
Het enige dat ik kon bedenken was een randje boven en een randje onder (met ronde hoeken), met tussenin de tekst. Maar dit zou al meteen 3 divjes worden en ik meen dat het mogelijk is om die twee randjes binnen dezelfde class te zetten, of ben ik dan gek bezig?

[Cyphax]

Daar is wel het een en ander over te vinden, als je zoektermen als "css rounded borders" gebruikt. Hier heb je een pagina met wat uitleg, daar zou je een eind mee moeten kunnen komen.
http://kalsey.com/2003/07/rounded_corners_in_css/
Volgens mij kom je er niet onderuit om een structuur op te bouwen met een paar divs. Echt ronde tabellen in puur css gaat nog niet lekker.

[RaZ]

Ik denk niet dat je om die 3 div's heen komt.

HTML:

<div class="box">
<div class="box_header"></div>
<div class="box_content">
<p>Lorem Ipsum etc..etc...</p>
</div>
<div class="box_footer"></div>
</div>

Dan kan je op de header & footer als background image rounded corners pics gebruiken.

[Asitis]

@Cyphax:
Het is wat RaZ al zegt, ook op die site ontkom je niet aan de 3 divs..
Maar waarom ik dit eigenlijk wil bereiken, is om de sourcecode wat netter te houden, een soort <box> tag waarin die 3 divs zitten (gezien ze altijd hetzelfde zijn) zou de ideale oplossing zijn

[Bosmonster]

Het is wel te doen met 2 divs, maar dan moet je een heel groot plaatje gebruiken (achtergrond/borders van 1 kant in 1).

Je kunt ook de CSS manier gebruiken en IE gebruikers lekker laten zitten met rechte hoeken. Gebeurt hier op T.NET ook.

[H004]

Die extra divs kun je er natuurlijk ook prima, zodra je dom gereed is, met javascript eromheen zetten, zodat je sourcecode netjes blijft. Dat is ook makkelijker te onderhouden dan handmatig divs toevoegen.

Bosmonster schreef op maandag 15 september 2008 @ 18:10:
Je kunt ook de CSS manier gebruiken en IE gebruikers lekker laten zitten met rechte hoeken. Gebeurt hier op T.NET ook.

Maar Tweakers gebruikt de css-ronde hoeken wel alleen voor de vrij onopvallende blokken (behalve bij het reviews en features-gedeelte). De rest zijn allemaal images. Je 'kan' die css-methode niet voor elke div gebruiken, zeker niet als ze een belangrijk onderdeel van je layout zijn...

[ Voor 56% gewijzigd door H004 op 15-09-2008 18:14 ]

[Asitis]

Ik heb het nou even zo

HTML:

<div id="box">
<div id="box_top"></div>
<div id="box_mid">
Tekst
</div><!--/box_mid-->
<div id="box_end"></div>
</div><!--/box-->

En dat kan ik opzich blijven gebruiken, maar indien andere er gebruik van willen maken, leek het me practischer om dmv 1 class het hele gebeuren rondom de tekst te genereren.

[Verwijderd]

Je zou in priciepe een <div> kunnen maken met een background die alleen aan de top is en in die <div> je paragraaf die je cascading een background aan de onderkant meegeeft.

HTML:

<div class="luxe">
 <p>Hier komt je tekst dan in te staan natuurlijk</p>
</div>

Cascading Stylesheet:

.luxe { padding-top: 10px; background: #ccc url(hier-je-achtergrond voor de bovenkant.png) no-repeat top left; }
.luxe p { padding-top: 10px; background: #ccc url(hier-je-achtergrond-voor-de-onderkant.png) no-repeat bottom left; }

Dat is meestal de manier waarop ik die dingen maak. Misschien heb je er iets aan. Gewoon wat knutselen. Ik heb het liefst zo min mogelijk <div>'s enzo, vandaar dat ik dit soort dingen probeer

[disjfa]

Verwijderd schreef op dinsdag 16 september 2008 @ 09:45:
Je zou in priciepe een <div> kunnen maken met een background die alleen aan de top is en in die <div> je paragraaf die je cascading een background aan de onderkant meegeeft.

Alleen als je dat gaat doen ga je opmaak met inhoud koppelen. En dat is niet echt een goede oplossing lijkt me. krijgt de gebruiker een tweede paragraaf en dan ontploft alles

[Cyphax]

disjfa schreef op dinsdag 16 september 2008 @ 09:48:
[...]

Alleen als je dat gaat doen ga je opmaak met inhoud koppelen. En dat is niet echt een goede oplossing lijkt me. krijgt de gebruiker een tweede paragraaf en dan ontploft alles

Dat is ook nog wel met pure CSS op te lossen met last-child lijkt me (op zich vind ik dat elegant genoeg; in de HTML staat niets over dat een paragraaf die afbeelding moet krijgen, dat is alleen in de CSS gedefinieerd), al werkt het dan al gauw ook niet meer met IE denk ik.

[Kiphaas7]

Een andere mogelijkheid zou zijn het gebruiken van javascript. Curvy corners is daar een voorbeeld van.

Het is natuurlijk niet de netste oplossing, behavior (js) gebruiken om presentation (css) werk te doen. Maarja, het is of je html vervuilen, of je javascript verkeerd gebruiken, of het netjes doen met css en een groot deel van de gebruikers (die IE en opera gebruiken) geen ronde hoeken geven, omdat alleen gecko en webkit die CSS3 property ondersteunen.

[Asitis]

@SnoRt: Zoiets zoek ik inderdaad, bedankt voor de heads up

@Kiphaas7: Ik probeer alles zo transparant mogelijk te doen, dat alles in 1x werkt in alle browsers. Javascript is voor mij niet meer dan een last-resort. Het gaat me trouwens ook niet perse om de ronde hoeken, dit heb ik geregeld met images (verder geen probleem) - ik wil de css alleen zo compact mogelijk (zoals SnoRt voorstelde)

[Kiphaas7]

Asitis schreef op dinsdag 16 september 2008 @ 15:36:
@Kiphaas7: Ik probeer alles zo transparant mogelijk te doen, dat alles in 1x werkt in alle browsers. Javascript is voor mij niet meer dan een last-resort. Het gaat me trouwens ook niet perse om de ronde hoeken, dit heb ik geregeld met images (verder geen probleem) - ik wil de css alleen zo compact mogelijk (zoals SnoRt voorstelde)

Fair enough, ik gaf je alleen extra opties. Wat je kiest is natuurlijk je eigen keuze.

[Verwijderd]

Mijn optie is om iets als dit neer te zetten:

HTML:

<div id="box">
   <div>
       Stukje tekst
   </div>
</div>

Met als CSS:

Cascading Stylesheet:

#box {
background: #000000 url(box-top.png) top left no-repeat;
}

#box div {
background: url(box-bottom.png) bottom left no-repeat;
}

Waarbij box-top.png en box-bottom.png je plaatjes zijn met ronde hoeken (de bovenkant en de onderkant).

Dit werkt meestal het beste. De achtergrond van #box heeft natuurlijk dezelfde kleur als je plaatjes.

[H004]

Verwijderd schreef op donderdag 18 september 2008 @ 11:17:
Mijn optie is om iets als dit neer te zetten:

HTML:

<div id="box">
   <div>
       Stukje tekst
   </div>
</div>

Met als CSS:

Cascading Stylesheet:

#box {
background: #000000 url(box-top.png) top left no-repeat;
}

#box div {
background: url(box-bottom.png) bottom left no-repeat;
}

disjfa schreef op dinsdag 16 september 2008 @ 09:48:
[...]

Alleen als je dat gaat doen ga je opmaak met inhoud koppelen. En dat is niet echt een goede oplossing lijkt me. krijgt de gebruiker een tweede paragraaf div en dan ontploft alles

[Verwijderd]

Ervoor zorgen dat je niet twee div in de #box div plaatst
Dus lekker gaan copypasten en onder elkaar zetten.

Of gebruik maken van <p> tags in je binnenste div. Heb je het probleem ook niet meer.

[ Voor 28% gewijzigd door Verwijderd op 18-09-2008 11:50 ]