css border

[Cyberjunkie]

Beste lezer,

Ik had een vraag, ivm borders met css. Ik kwam de volgende website tegen...

http://css-tricks.com/opt-in-typography/

En vroeg mij af hoe je boxen maakt die op deze pagina worden getoond, met zo´n een
gele balk bovenaan. Ik heb al geprobeerd wijzer te worden van de source code maar
helaas zonder succes.

Alvast bijvoorbaat dank,

Mvg
Cyberjunkie

[klaaspeter]

Volgens mij is het dit de css die je nodig hebt:

pre[rel]:after {
    background: none repeat scroll 0 0 #F3A01E;
    border-radius: 7px 7px 0 0;
    color: white;
    content: attr(rel);
    font: bold 16px "myriad-pro-1","myriad-pro-2","Lucida Grande",Sans-Serif;
    left: 0;
    padding: 5px;
    position: absolute;
    right: 0;
    top: 0;
}
style.css?v=9.5 (regel 465)
pre[rel] {
    padding-top: 40px;
}
style.css?v=9.5 (regel 462)
pre {
    background: none repeat scroll 0 0 #333333;
    border-radius: 8px 8px 8px 8px;
    color: white;
    font-family: Monaco,Courier,MonoSpace;
    font-size: 12px;
    line-height: 1.8;
    margin: 0 0 25px;
    overflow: auto;
    padding: 10px;
    position: relative;
}
style.css?v=9.5 (regel 442)
pre {
    white-space: pre-wrap;
    word-wrap: break-word;
}
style.css?v=9.5 (regel 121)
pre, code, kbd, samp {
    font-family: monospace,monospace;
    font-size: 1em;
}

en dit de html:

1
2
<pre class="prettyprint" rel="CSS">
</pre>

Succes

PS. Als je firefox gebruikt moet je firebug gebruiken hiermee kan je heel gemakelijk de broncode uitlezen

[Naarling]

PS. Als je firefox gebruikt moet je firebug gebruiken hiermee kan je heel gemakelijk de broncode uitlezen

Of, als je Opera/Chrome gebruikt, gewoon rechts klikken op het element dat je interesseert en dan op "inspect element".

[freestyler12]

Of, als je internet explorer gebruikt rechts klikken en dan bron weergeven ;-)

[Naarling]

Of, als je internet explorer gebruikt rechts klikken en dan bron weergeven ;-)

Nou nee, dan krijg je alleen de HTML te zien, en niet eens op de plek waar het om gaat maar de hele lap. IE heeft wel een mogelijkheid om ook de CSS te laten zien maar die is veel minder goed uitgewerkt dan in Opera/Chrome/Firebug.

[freestyler12]

Aj dat wist ik niet,sorry!

[csshunter]

Hoi allemaal,

• Als je Safari gebruikt, ook rechts klikken en "Inspecteer element".
• Als je Firebug gebruikt, ook rechts klikken en "Element inspecteren".
• Als je Internet Explorer test: IE Developer Toolbar (standaard in menu v/a IE8, los voor IE7). Is best wel uitgebreid in de css-signalering (ook bv. de IE has-layout eigenschap), maar voor zover ik weet niet online wijzigbaar, zoals bij Firebug).
• Met de Webdeveloper Toolbar van van Chris Pederick (voor FF en Chrome) zijn overigens de html en css ook online te editen. Soms net wat handiger dan Firebug.

Maar om terug te komen op de vraag:
De manier waarop het in css-tricks.com/opt-in-typography gedaan is, is nogal gecompliceerd.
Het kan veel eenvoudiger met de css3-eigenschap border-radius alleen (toe te voegen aan de <div> in kwestie en aan de kop daarin).
In principe:

.box {
   border-radius: 10px; /* rondom afgeronde hoeken */
   }
.box h2 {
   border-radius: 10px 10px 0 0; /* alleen boven afgeronde hoeken */
   }

Laat je de border-radius van de omvattende box weg, dan komt de achtergrondkleur van de box door de hoekjes van de kop heen piepen.

In Internet Explorer < IE9 werkt het niet *), daar is bijkomend script-werk voor nodig (of background-images waar de hoekjes in zitten).

• Zie verder uitgewerkt voorbeeld: bliksekaters.nl/tests/box-met-kop.htm

Met vriendelijke groet,
CSShunter
________
*) Ongeveer de helft van de IE-surfers in NL gebrukt op dit moment geen IE9 maar IE8 of IE7. Zonder script of images zien die dus geen ronde hoekjes.

[Cyberjunkie]

Bedankt voor alle reacties, het is gelukt