Avatar billede madseksperten Nybegynder
12. november 2014 - 15:20 Der er 7 kommentarer og
1 løsning

passe pixelbredde i css

Hejsa

Jeg er igang med at øve mig lidt på css og div tags. Jeg har lavet følgende kode:

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8"/>
    <title> | Div Tag Test |</title>
    <link rel="stylesheet" type="text/css" href="divs.css">
</head>

<body>
    <!--<h1>Test</h1> -->
   
    <div id="mainbox">
        <p id="text">Banner</p>
    </div>
    <div id="leftbox">
        <p id="text">Left</p>
    </div>
    <div id="centerbox">
        <p id="text">Center</p>
    </div>
    <div id="rightbox">
        <p id="text">Right</p>
    </div>

</body>
</html>

____________

body {
    text-align: center;
}

#text {
    font: bold 30px Arial;
    color: red;
}

#mainbox {
    display: block;
    width: 600px;
    margin-left: 100px;
    margin-right: 100px;
    margin-top: 60px;
    margin-bottom: 60px;
    padding: 15px;
    text-align: center;
    border: 1px solid blue;
    background-image: url("img/neki.jpg");
    -webkit-border-radius: 25px;
    -webkit-box-shadow: rgb(110,110,110) 8px 8px 8px;
}

#leftbox {
    display: block;
    width: 200px;
    margin-left: 100px;
    padding: 15px;
    text-align: center;
    border: 1px solid blue;
    background: orange;
    float: left;
}

#centerbox {
    display: block;
    width: 200px;
    margin-left: 100px;
    padding: 15px;
    text-align: center;
    border: 1px solid blue;
    background: orange;
    float: left;

}

#rightbox {
    display: block;
    width: 200px;
    margin-left: 100px;
    padding: 15px;
    text-align: center;
    border: 1px solid blue;
    background: orange;
    float: left;
}

Dette ser sådan ud:

http://postimg.org/image/pr2z0fhaf/

Jeg kunne rigtig godt tænke mig at banneret tilpassede sig de nederste boxe. Jeg har defineret en pixelbredde på banner, og de tre kasser, men også margin mellem de tre kasser. Kan man ikke gøre sådan at banneret selv fyldte ud til de yderste kanter på de små kasser, så man var fri for at sidde og tælle pixels?

mvh Mads
Avatar billede vandrefuglen Juniormester
12. november 2014 - 15:50 #1
Prøv evt at kigge på nedenstående - kunne det være en løsning..?

http://jsfiddle.net/#&togetherjs=3lIte5JTqr

Alternativ kan du give mig din ønskede max-bredde så kan jeg eller flere herinde hjælpe med en mere fast løsning ;-)
Avatar billede vandrefuglen Juniormester
12. november 2014 - 15:51 #2
http://jsfiddle.net/mw1dauo2/  - dette link er vist bedre ;-)
Avatar billede madseksperten Nybegynder
13. november 2014 - 12:11 #3
Hejsa

Mange tak for svaret. Jeg sidder lige og kigger på koden. Hvorfor er det egentligt du laver <div> udenom de andre <div> tags? Er det for at kunne styre det bedre? Hvad er det en container betyder i forhold til det her?

Hvorfor bruger man class="banner" og ikke id="banner"?
Avatar billede keysersoze Guru
13. november 2014 - 13:14 #4
Det er god stil at benytte class og ikke id at style ud fra - container er bare et navn og kunne være alt muligt andet, container er bare det nok mest brugte for at navngive arbejdsområdet (formentlig tæt forfulgt af wrapper). Og ja, container benyttes til at indramme sidens indhold/arbejdsområde.

Tag et kig på et css framework som fx bootstrap for lidt ideer i den retning.
Avatar billede vandrefuglen Juniormester
13. november 2014 - 21:40 #5
Det var så lidt. På jsfiddle, kan du selv skrive koden om og rykke elementerne. Og derved se hvad de forskellige gør. Som Soze forslår bør du kigger på bootstrap, som giver et godt indblik i css'ens muligheder
Avatar billede madseksperten Nybegynder
28. november 2014 - 10:41 #6
Har lige haft vildt travlt. Grunden til du siger 960 px i bredde til banneret på linket, er det fordi det er standarden idag at lave en bredde på dette?

mvh Mads

ps smider du et svar?

mvh Mads
Avatar billede vandrefuglen Juniormester
28. november 2014 - 11:18 #7
960px var blot for at give det et holdepunkt. Men det er nok ikke langt fra en standard. Hvis der er nogen ;-)
Avatar billede BedreHusogHave Nybegynder
28. november 2014 - 14:11 #8
Flot svar Vandrefuglen.

Ellers kunne du også bruge procent (%) i stedet for, så forbliver det responsive hvis det skal være på flere skærmstørrelser.

Eksempelvis:
.container {
    margin-left: auto;
    margin-right: auto;
    width: 80%;
   
}

Og så ville jeg også tilføje, til head:
<meta name="viewport" content="width=device-width, initial-scale=1">

De bedste hilsner
Christian - BedreHusogHave.dk
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