Avatar billede hpo Nybegynder
28. marts 2008 - 11:16 Der er 6 kommentarer og
1 løsning

Bokse i CSS

Hej eksperter.

Siden www.dengodekode.dk er inddelt i nogle tekstbokse, som jeg ikke kan finde ud af hvordan er lavet. Jeg forestiller mig at de er lavet i CSS, men hvordan de ellers er lavet kan jeg ikke regne ud.

Er der nogen der kan løfte sløret og gerne vise med kode hvordan det er lavet? Jeg tænker i sær på at boksene har en tekstoverskrift i en boks der selv er på rammen.
Avatar billede Slettet bruger
28. marts 2008 - 11:35 #1
Det skulle være nemt nok

Her er deres CSS-kode

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #f9f9f9;
    font-family: verdana, arial, sans-serif;
}
* {
   
}
#content {
    padding: 50px;
}
h1 {
    padding: 10px 10px;
    margin: 0;
    margin-bottom: 40px;
    border: 1px solid #cccccc;
    background-color: #efefef;
}
#content .para {
    position: relative;
    margin: 25px 0 35px 0;
    padding: 10px 20px 5px 20px;
    font-size: 11px;
    border: 1px solid #cccccc;
    background-color: white;
}
#content .para h2 {
    position: absolute;
    top: -13px;
    margin: 0;
    margin-left: -7px;
    padding: 5px 10px;
    font-size: 12px;
    border: 1px solid #cccccc;
    background-color: #666666;
    color: #efefef;
}
#content .para p {
    padding: 0;
    margin: 1.7em 0;
}
#content .para pre {
    padding: 25px 20px;
    font: 12px monospace;
    border: 1px solid #cccccc;
    background-color: #f9f9f9;
    width: 94%;
    overflow: auto;
}
#content .para div {
    padding: 10px 20px;
    font: 12px monospace;
    border: 1px solid #cccccc;
    background-color: #f9f9f9;
    margin: 12px 0;
    white-space: nowrap;
}
.scriptComm {
    padding: 0 3px 2px 3px;
    font: 11px monospace;
    background-color: #ff9;
}

Du bruger
<div id="content">
    <h1>Velkommen til Den Gode Kode</h1>

    <div class="para">
        <h2>Om Den Gode Kode</h2>

......tekst
</div>
<!--første afsnit slut  -->
<!--næste afsnit  -->
    <div class="para">
        <h2>Kort om bagmanden</h2>

...tekst
</div>
Avatar billede hpo Nybegynder
28. marts 2008 - 12:07 #2
OK - tester det når jeg kommer hjem. Læg gerne et svar.

PS. Hvordan fik du fat i koden så hurtigt?

/hpo
Avatar billede Slettet bruger
28. marts 2008 - 13:12 #3
Jae...men... hvis man bruger Firefox browseren og installere et plugin der hedder Web Developer, som for mig er uundværlig hvis man programerer webscript

Koden sat sammen i et færdigt script er herunder:

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>[Ingen titel]</title>

<meta name="Author" content="Ib Bermann">
<style type="text/css" media="screen">
body, html {
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #f9f9f9;
    font-family: verdana, arial, sans-serif;
}
* {

}
#content {
    padding: 50px;
}
h1 {
    padding: 10px 10px;
    margin: 0;
    margin-bottom: 40px;
    border: 1px solid #cccccc;
    background-color: #efefef;
}
#content .para {
    position: relative;
    margin: 25px 0 35px 0;
    padding: 10px 20px 5px 20px;
    font-size: 11px;
    border: 1px solid #cccccc;
    background-color: white;
}
#content .para h2 {
    position: absolute;
    top: -13px;
    margin: 0;
    margin-left: -7px;
    padding: 5px 10px;
    font-size: 12px;
    border: 1px solid #cccccc;
    background-color: #666666;
    color: #efefef;
}
#content .para p {
    padding: 0;
    margin: 1.7em 0;
}
#content .para pre {
    padding: 25px 20px;
    font: 12px monospace;
    border: 1px solid #cccccc;
    background-color: #f9f9f9;
    width: 94%;
    overflow: auto;
}
#content .para div {
    padding: 10px 20px;
    font: 12px monospace;
    border: 1px solid #cccccc;
    background-color: #f9f9f9;
    margin: 12px 0;
    white-space: nowrap;
}
.scriptComm {
    padding: 0 3px 2px 3px;
    font: 11px monospace;
    background-color: #ff9;
}

</style>
</head>
<body>
<div id="content">
    <h1>Velkommen til Den Gode Kode</h1>

    <div class="para">
        <h2>Om Den Gode Mars</h2>

<p>Mars - den røde planet
Navnet har den fået, fordi den på himlen skinner med et svagt orangerødt skær. Årsagen hertil skal søges i den kemiske sammensætning af marsgruset. Det indeholder store mængder af oxideret jern, eller med andre ord rust. Marsoverfladen bærer præg af, at der en gang har flydt en eller anden væske - formentlig vand - på dens overflade.

</div>
<!--første afsnit slut  -->
<!--næste afsnit  -->
    <div class="para">
        <h2>Kort om Mars</h2>

<p>I dag er Mars en tør, kold planet uden en brugbar atmosfære til at holde på vand som væske. Is er der meget af - både ved Mars' poler og som permafrost i mars-skorpen. Store vulkaner vidner om, at Mars i en ikke så fjern fortid har været geologisk aktiv, men nu synes alt roligt. Den geologiske aktivitet har oså frembragt vældige kløfter, hvoraf Valles Marineris med mere end 6 km's dybde langt overgår de jordiske, f.eks Grand Canyon, som "kun" er 1829 m.

<p>Mars har givet navn til tirsdag (Latin: Dies Martis, fransk: Mardi)

</div>
</body>
</html>
Avatar billede Slettet bruger
28. marts 2008 - 13:12 #4
Og så lige mit svar :-)
Avatar billede Slettet bruger
28. marts 2008 - 13:21 #5
Først nu ser jeg at det er jo

<ole>
's website
</bole>
Avatar billede hpo Nybegynder
28. marts 2008 - 14:08 #6
det er korrekt.

Jeg tror også jeg havde foretrukket en forklaring til hvordan det egentligt var lavet, da ovennævnte jo er "tyv-stjæleri" :)

Det skal ikke bruges kommercielt, og jeg er da også blot interesseret i hvordan det var lavet, når nu jeg ikke selv kunne finde ud af det.

/hpo
Avatar billede jeppe999 Nybegynder
09. april 2008 - 20:53 #7
Det er desværre rigtig nemt at "stjæle", men man kan også lære noget af det.

F.eks. i IE7 skal man bare gå ind i fanen "vis" også videre til "kilde" og der er html koden så og hvis der er et stylesheet så står der oppe i headeren hvor det er.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Kurser inden for grundlæggende programmering

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester