Søg
Avatar billede webrex Nybegynder
06. september 2004 - 17:08 Der er 20 kommentarer og
1 løsning

Div kasser

Skal lave website-forside, hvor jeg har en ide, om at selve indholdet skal bestå af måske 15 div-kasser sat sammen i 3 rækker, som i alt altså udgør een stor kasse. (Senere vil jeg så lægge forskellige billeder ind i de små kasser + tekst) Spgm.'et lyder derfor: Hvordan opbygges dette smartest - evt. kode! (html & css)
Avatar billede morteeart Nybegynder
06. september 2004 - 17:12 #1
Her er en guide:

http://www.thenoodleincident.com/tutorials/box_lesson/index.html

Husk at bruge MINDST 2 forskellige browsere (IE/Ophra og Firefox/Netcape/Mozilla)
Avatar billede roenving Novice
06. september 2004 - 17:16 #2
F.eks.

<style type="text/css">
html,body{height:100%;margin:0px;border:0px;padding:0px;font-family:tahoma,verdana,arial,sans-serif;font-size:small;}
#container{
  position:relative;
  width:750px;
}
#container div{
  float:left;
  width:150px;
  border:0;
  overflow:hidden;
}
</style>

<body>
  <div id="container">
    <div>Div nr. 1</div>
    <div>Div nr. 2</div>
    <div>Div nr. 3</div>
    <div>Div nr. 4</div>
    <div>Div nr. 5</div>
    <div>Div nr. 6</div>
    <div>Div nr. 7</div>
    <div>Div nr. 8</div>
    <div>Div nr. 9</div>
    <div>Div nr. 10</div>
    <div>Div nr. 11</div>
    <div>Div nr. 12</div>
    <div>Div nr. 13</div>
    <div>Div nr. 14</div>
    <div>Div nr. 15</div>
  </div>
</body>
Avatar billede morteeart Nybegynder
06. september 2004 - 17:17 #3
og for at kunne lave rigtigt css, skal du også kode w3c valid:

her er en diskussion omkring det:
http://eksperten.dk/spm/493764

og nogle links

www.w3c.org
http://www.w3schools.com/css/css_reference.asp

http://validator.w3c.org // xhtml/html-validator
http://jigsaw.w3.org/css-validator  // css-validator
Avatar billede webrex Nybegynder
06. september 2004 - 19:19 #4
>Roeving: Det ser godt ud - hvordan kan det være, at de lægger sig sådan og ikke på række, som de gør når jeg laver det? + Hvis jeg skal lave borders på dem, skal jeg så sidde og sætte class'es (og id's) på dem alle?
Avatar billede webrex Nybegynder
06. september 2004 - 19:33 #5
>Roeving, hvordan gør jeg sådan at der kommer mellemrum mellem kasserne? Og hele kassen med alle de små skal desuden side horisontialt lige - styrer jeg det med margins - det lader sig bare ikke gøre...?
Avatar billede webrex Nybegynder
06. september 2004 - 19:38 #6
Jeg tror det er din float funktion som driller - den gør at div kassenerne ikke centreres...
Avatar billede webrex Nybegynder
06. september 2004 - 20:56 #7
Mellemrum klarede jeg med margin: 1px; Men ved stadigvæk ikke, hvordan jeg skal centrere boksen - float til ventre gør, at de sider klinet op til venstre, mens at dette lader et større rum stå tomt til højre! :)
Avatar billede webrex Nybegynder
06. september 2004 - 22:24 #8
Nogen (Roeving) der kan hjælpe mig med dette?
Avatar billede roenving Novice
06. september 2004 - 23:07 #9
float'en betyder ikke noget for cebtreringen af boksen, men containeren er ikke centreret, så den centrerer ikke, men den var forberedt for det !-)

Hvis borderen skal være ens, kan du, som vist, bare sætte den ind i #container div{}-sektionen af stylesheetet ...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>

<title>Tomt dokument</title>
<style type="text/css">
html,body{height:100%;margin:0px;border:0px;padding:0px;font-family:tahoma,verdana,arial,sans-serif;font-size:small;text-align:center;}
#container{
  position:relative;
  margin: 0 auto;
  width:771px;
  text-align:left;
}
#container div{
  float:left;
  width:150px;
  border:0;
  overflow:hidden;
  margin:1px;
  border:1px solid blue;
}
</style>
</head>
<body>
  <div id="container">
    <div>Div nr. 1</div>
    <div>Div nr. 2</div>
    <div>Div nr. 3</div>
    <div>Div nr. 4</div>
    <div>Div nr. 5</div>
    <div>Div nr. 6</div>
    <div>Div nr. 7</div>
    <div>Div nr. 8</div>
    <div>Div nr. 9</div>
    <div>Div nr. 10</div>
    <div>Div nr. 11</div>
    <div>Div nr. 12</div>
    <div>Div nr. 13</div>
    <div>Div nr. 14</div>
    <div>Div nr. 15</div>
  </div>
</body>
</html>
Avatar billede webrex Nybegynder
07. september 2004 - 14:46 #10
Hej Roeving - nu har jeg bikset med det et stykke tid, men det er ikke lykkedes at få den centreret - jeg ser dog at dit sample kode virker - den container boks ligger på mit site sådan:

<html>
<head>
</head>
<body>
<div id="content">
    <div id="header"></div>
    <div id="menu">
        <div></div>
    </div>
    <div id="indhold">
               
      <div>Div nr. 1</div>
        <div>Div nr. 2</div>
        <div>Div nr. 3</div>
        <div>Div nr. 4</div>
      <div>Div nr. 5</div>
        <div>Div nr. 6</div>
        <div>Div nr. 7</div>
        <div>Div nr. 8</div>
        <div>Div nr. 9</div>
        <div>Div nr. 10</div>
      <div>Div nr. 11</div>
        <div>Div nr. 12</div>
      <div>Div nr. 13</div>
        <div>Div nr. 14</div>
        <div>Div nr. 15</div>
     
    </div>
    <div id="outro"></div>
</div>
</body>
</html> Hvad gør jeg galt - forskellen på din og min er, at mine bokse (dvs. min indholdsboks (din container) ligger afgrænset af contentdiven! Kan du hjælpe med dette? -- Mange tak!
Avatar billede webrex Nybegynder
07. september 2004 - 15:03 #11
Roeving det er lykkedes nu... hehe:) så længe det varer!!! Satte en ekstra div ind  i indhold!
Avatar billede webrex Nybegynder
07. september 2004 - 15:03 #12
Smid lige et svar, tak!
Avatar billede roenving Novice
07. september 2004 - 16:59 #13
Velbekomme '-)
Avatar billede roenving Novice
08. september 2004 - 00:05 #14
-- og tak for point ;~}
Avatar billede webrex Nybegynder
10. september 2004 - 18:21 #15
>Roeving - hvis du lige skulle kigge forbi dette spgm. er det nemmest at spørge netop her: Hvis nu jeg vil have tekst i disse container divs og vil have teksten  med bestemt mellemrum til boksenes sider??? Hvad gør jeg da? ( (Evt. bruge margin? - men den er jo allerede defineret i container div { ...}) /Tak
Avatar billede roenving Novice
11. september 2004 - 00:10 #16
padding:12px;

-- er den simpleste måde at definere et indholds afstand til kanten af en boks !-)
Avatar billede webrex Nybegynder
11. september 2004 - 10:05 #17
Ok - men så udvider den bare kassen, dvs. gør den større - og forvrænger derved det hele. (Har billeder i nogle kasser, mens der skal være tekst i andre - derfor har jeg sat et id på hver kasse. Men padding hjælper altså ikke. Hm?) :)
Avatar billede webrex Nybegynder
11. september 2004 - 10:23 #18
Nu kan jeg styre/ definere padding - løst ved at sætte ekstra dív ind div="test":

<div id="indhold">

    <div id="container">   
      <div id="a"></div>
        <div id="b"><div id="test">Bla bla bla</div></div>
        .....
- Dog hvis overholder den ikke højre padding - i stedet g¨r teksten helt på til kanten og endda forsvinder! Hvad gør jeg for at få teksten til at udvide sig nedad og overholde højrepadding? :)
Avatar billede webrex Nybegynder
11. september 2004 - 10:51 #19
Skal jeg oprette et nyr spgm? :)
Avatar billede webrex Nybegynder
11. september 2004 - 12:39 #20
Har også prøvet at lave den i tables - som måske er lettere til dette, men du kan se vha. den kode, hvordan td- rubrikken blt udvides ved padding bestemmelse! :)

<html>
<head>

<style type="text/css">

#test{
      position: relative;
      margin: 0 auto;
      width: 722px;
    text-align: left;
   
}
td
    {
        height: 125px;
    width: 140px;
    background:rgb(255,250,235);
    overflow: hidden;
        border: 1px solid #696969;
    }
.text {
    padding: 5px;
}
</style>
</head>
<body>

<div id="test">

<table>
    <tr>
    <td class="text">Hej med dig digHej med digHej med digHej med digHej        med dig Hej med dig Hej med dig Hej med  dig</td><td>Hej</td><td>Hej</td><td>Hej</td><td>Hej</td>
    </tr>
    <tr>
    <td>Hej</td><td>Hej</td><td>Hej</td><td>Hej</td><td>Hej</td>
    </tr>
    <tr>
    <td>Hej</td><td>Hej</td><td>Hej</td><td>Hej</td><td>Hej</td>
    </tr>

</table>

</div>
</body>
</html>
Avatar billede webrex Nybegynder
11. september 2004 - 13:36 #21
Nu laver jeg den i stedet en tabel inden i en div som ovenfor, og tabel-layout: fixed; sikrer, at td-taggene ikke udvides! - og man kan definere padding! -
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
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
Se alle spørgsmål i kategorien Opret spørgsmål

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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
20/0815:01 Samsung smart TV Af postpeter@outlook.dk i Fri debat
20/0814:16 installere windows på separat diskpartition Af Malm i Windows
20/0813:43 Problem med mcafee Af Malm i Andet software
20/0813:39 Er tilstrækkelig antivirus incl på ny Samsung smartphone ? Af annam i Backup- & Antivirus
19/0819:46 Skift fra Microsoft365 til Microsoft 2024 Af 1Dorte i Office & Kontorpakker
White papers
Flere white papers »