Avatar billede supersquirrel Nybegynder
19. oktober 2007 - 17:55 Der er 39 kommentarer og
1 løsning

Centret design

Hejsa,

Nu er jeg ved at gå ud af mit gode skind, og inden det sker må jeg nok hellere få lidt hjælp her på siden først.

Mit store problem er at jeg bare ikke kan få min side til at passe sammen.
Jeg tænkte på om der var en af jer, der ville være super flinke at skrive grundformen til at få sin side i center, sådan at det passer både i IE og FF, eller ihvertfald hjælpe mig med det.

Jeg havde nogen planer om at det skulle være sådan her:

      Banner
left | Content | right
left |        | right
left |        | right

Og sådan forsætter den hele vejen ned af siden.
Håber at der er nogen der har tålmodighen til at hjælpe mig med det :D
Avatar billede supersquirrel Nybegynder
19. oktober 2007 - 17:56 #1
Banner
left | Content | right
left | Content | right
left | Content | right

* sådan
Avatar billede leif Seniormester
19. oktober 2007 - 18:12 #2
Lav en Tabel med 3 kolonner og 2 rækker og smid banneret i den øverste og dit indhold i række 2
Avatar billede montago Praktikant
19. oktober 2007 - 18:16 #3
<center>
<table>
  <tr><td colspan=3>Banner
  <tr><td>LEFT
  <tr><td>CONTENT
  <tr><td>RIGHT
Avatar billede montago Praktikant
19. oktober 2007 - 18:17 #4
hov...

<center>
<table>
  <tr><td width="800" colspan=3>Banner
  <tr>
      <td width="100">LEFT
      <td width="600">CONTENT
      <td width="100">RIGHT
Avatar billede montago Praktikant
19. oktober 2007 - 18:20 #5
<center>
<table>
  <tr>
      <td width="800" colspan=3>Banner</td>
  </tr>
  <tr>
      <td width="100">LEFT</td>
      <td width="600">CONTENT</td>
      <td width="100">RIGHT</td>
  </tr>
  </table>
</center>
Avatar billede w13 Novice
19. oktober 2007 - 18:32 #6
<center>-tag'et er desværre alt for forældet og holder ikke ret meget længere.

Brug i stedet css:

<div style="width:100%;margin:0 auto">

indhold her

</div>
Avatar billede w13 Novice
19. oktober 2007 - 18:32 #7
Den plejer at virke. Hvis jeg husker den rigtigt :)
Avatar billede sijmonj Nybegynder
19. oktober 2007 - 18:36 #8
www.html.dk læs artiklerne om CSS
Avatar billede supersquirrel Nybegynder
19. oktober 2007 - 18:55 #9
Ja okay.. Den havde jeg ikke lige tænkt på..
Men nu er mit problem så, at det skal gå helt fra top til bund.

Og kan ikke lige få <td height="100%" ....> til at virke.

skal jeg igang med margin nu?
Avatar billede supersquirrel Nybegynder
19. oktober 2007 - 18:58 #10
w13 > Beklager, den virker ikke helt vil jeg sige :)
Avatar billede w13 Novice
19. oktober 2007 - 18:59 #11
Hvis du sætter div'en jeg skrev, uden om alle elementer, skulle det virke. Altså lige inden for Body:

<html>
<head></head>
<body>
<div style="width:100%;margin:0 auto">
Indhold
</div>
</body>
</html>
Avatar billede supersquirrel Nybegynder
19. oktober 2007 - 19:09 #12
Den gider desværre stadig ikke at hoppe ind i midten :S

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<html>
<head>
      <title>test table</title>
</head>
<body>
<div style="width:100%;margin:0 auto">
<table>
  <tr>
      <td bgcolor="#FF0000" width="800" colspan=3>Banner</td>
  </tr>
  <tr>
      <td height="100%" bgcolor="green" width="100">LEFT</td>
      <td bgcolor="yellow" width="600">CONTENT</td>
      <td height="100%" bgcolor="grey" width="100">RIGHT</td>
  </tr>
  </table>
</div>
</body>
</html>
Avatar billede w13 Novice
19. oktober 2007 - 19:17 #13
Er du sikker på, der er plads til det?
Avatar billede w13 Novice
19. oktober 2007 - 19:18 #14
Ret til: <div style="width:100%;margin:0 auto;text-align:center">
Det er lige testet.
Avatar billede supersquirrel Nybegynder
19. oktober 2007 - 19:31 #15
Aaah..
Nu ved jeg hvorfor det ikke virker, eller det virker - men ikke i firefox, som jeg meget gerne vil have at det skal.

- Kan du hjælpe med den? :)
Avatar billede w13 Novice
19. oktober 2007 - 19:32 #16
Ikke medmindre jeg ser mere af dit design. Det skulle meget gerne virke i FF.
Avatar billede supersquirrel Nybegynder
19. oktober 2007 - 19:39 #17
http://danishbulldog.dk/youmeet/test_index.php
- Der kan du lige se :)

du skal ikke lige tage dig af farverne, det er bare så jeg kan bedre kan kende forskel på det hele :)
Avatar billede dkfire Nybegynder
19. oktober 2007 - 20:07 #18
To ting:
Hvis du nu lader være med at sætte with til 100%, men til 800px vil det hjælpe enormt meget.
En anden ting:
Vælg en rigtig og fuld dokumenterklæring. foreksempel den som eksperten har: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Og så lige husk en meta tag til dit karaktersæt:
<meta http-equiv="Content-type" content='text/html; charset="iso-8859-1"' />
Avatar billede sibbelone Nybegynder
19. oktober 2007 - 20:22 #19
body {
    Font-family: verdana;
    font-size: 11px;
    color: #000;
    margin-top:0px;
    margin-bottom:0px;
    padding:0px;
    background-color: #fff;}


   
   
/*Starter selv sideindelingen med de forskellige div boxe*/

/*heunder den box som centrere indholdet på siden*/
.holder {
    position: relative;
    width: 963px;
    height: 20px;
    margin-top: 30px;
    margin-left: auto;
    margin-right: auto;
    /*background-color: #fff;*/
   
    }
/*firefox og ie7 hack så siden også udvider sig i de 2 browser*/
html>body .holder {
    min-height: 200px;
    height: auto;
    }

   
   
/*heunder den indhold hvor både left og content er inde i dette gør at siden udvider sig*/
.indhold {
    position: relative;
    float: left; 
    width: 957px;
    height: 300px;
    border: 3px solid #94aec4;
    background-color: #fff;
    background-color: #fff;}
/*firefox og ie7 hack så siden også udvider sig i de 2 browser*/   
html>body .indhold {
    min-height: 300px;
    height: auto;
    }

   
   
/*heunder den conten  hvor indhold på siden skal sættes ind*/
.content {
    position: relative;
    float: right;  /*skift right ud med left og divboxen vil stå i højre side men kræver at du også ændre .left, der skal float ændres til right*/
    width: 740px;
    height: 10px;
    padding: 10px;
    margin-top: 20px;
    background-color: #fff;}
/*firefox og ie7 hack så siden også udvider sig i de 2 browser*/
html>body .content {
    min-height: 10px;
    height: auto;}   


/*heunder toplogo hvor du kan indsætte et bagrundsbilled*/   
.toplogo {
    position: relative;
    float: left;
    width: 957px;
    height: 90px;
    background-color: #fff;
    border-top: 1px solid #94aec4;
    /*herunder kan du indsætte toplogo
    background: url(../image/toplogo.jpg);
    background-repeat: repeat-y;*/}

/*heunder den menu der går på tværs af hele side, hvis du ikke vil have menuen der kan du bare undlade den på siden*/
.menu {
    position: relative;
    font-size: 11px;
    float: left;
    padding: 0px 0px 0px 10px;
    width: 953px;
    height: 20px;
    left: -3px;
    color: #fff;
    border-top: 1px solid #94aec4;
    background-color: #435a6e;
    display: inline;
    z-index: 200;}

/*heunder left indhold , her kan du evt lave menu*/   
.left {
    position: relative;
    float: left; /*skift left ud med right og divboxen vil stå i højre side men kræver at du også ændre content, der skal float ændres til left*/
    width: 155px;
    height: 500px;
    margin-right: 0px;
    padding: 5px;
    background-color: #bbb;*/}
/*firefox og ie7 hack så siden også udvider sig i de 2 browser*/
html>body .left {
    min-height: 500px;
    height: auto;}
   

   
   
   
   
   
.bund {
    position: relative;
    font-size: 11px;
    float: left;
    width: 960px;
    height: 20px;
    text-align: center;
    margin-top: 10px; /*styre afstanden op til indhold sættes til 0 hvis man ikke ønsker afstand*/
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #94aec4;
    }
   
    .curvy {position:relative; width:250px; background:#9caf9c; color:#000; margin:5em auto;}
#ctl, #cbl, #ctr, #cbr {position:absolute; width:20px; height:20px; color:#9caf9c; background:#fff; overflow:hidden; font-style:normal; z-index:1;}
#ctl {top:0; left:0;}
#cbl {bottom:0; left:0;}
#ctr {top:0; right:0;}
#cbr {bottom:0; right:0;}
.curvy em b {position:absolute; font-size:150px; font-family:arial; color:#9caf9c; line-height:40px; font-weight:normal;}
#ctl b {left:-8px;}
#ctr b {left:-25px;}
#cbl b {left:-8px; top:-17px;}
#cbr b {left:-25px; top:-17px;}
.curvy p {position:relative; z-index:100; padding:5px 10px;}
Avatar billede sibbelone Nybegynder
19. oktober 2007 - 20:23 #20
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>css</title>
<meta http-equiv="Content-Language" content="da" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="style/alink.css" />
<!--<link rel="stylesheet" type="text/css" href="style/round.css" />
<link rel="stylesheet" type="text/css" href="style/fieldset.css" />
-->



</head>
<body>



<div class="holder">



<!--indhold starter her og denne div er den der udvider -->
<div class="indhold">

<!--Toplogo starter herunder-->
<div class="toplogo">Toplogo</div>

<!--Vandrette menu starter her-->
<div class="menu"></div>


<!--Left starter her og kan bruges til alt mulig indhold-->
<div class="left">Venstre

</div><!--Left slutter her-->



<!--Contente starter her-->

<div class="content">


Indhold på siden sættes ind her
<div class="curvy">
<em id="ctl"><b>&bull;</b></em>
<em id="cbl"><b>&bull;</b></em>
<em id="ctr"><b>&bull;</b></em>
<em id="cbr"><b>&bull;</b></em>
<p>I know it's been done before, but not this way!<br />A box with curved corners into which you can put text that goes right up to the corners.<br />
Again, no graphics were used in the making of this demonstration.<br />All it takes is four quadrants of a bullet point positioned absolutely in each corner (arial font this time as it's the safest one to use).</p>
</div>


</div><!--Content slutter her-->




</div><!--Indhold slutter her-->



<div class="bund">Bund bjælke</div>


</div>
</body>
</html>
Avatar billede sibbelone Nybegynder
19. oktober 2007 - 20:25 #21
der er lihge en med runde hjørne i midten men den kan du bare fjerne
og det virker i ie 6, ie7, firefox, avant, safari, opera og netscape
Avatar billede supersquirrel Nybegynder
19. oktober 2007 - 20:38 #22
Jo.. Yes.. Den var faktisk helt uventet :P
Faktisk en smule uoverskueligt :P

dkfire > Den er nu i center - tak :))
Kan du så også sige hvordan jeg får den fra top til bund?
Avatar billede dkfire Nybegynder
19. oktober 2007 - 21:10 #23
Giv den en fast højde, f.eks. 600px og sæt margin til auto.
Avatar billede dkfire Nybegynder
19. oktober 2007 - 21:30 #24
Nej åbenbart ikke alligevel, så ved jeg det ikke.
Avatar billede supersquirrel Nybegynder
19. oktober 2007 - 21:54 #25
Der skal deles nogle point mellem jer her, da jeg har brugt lidt fra jer alle sammen..
Avatar billede supersquirrel Nybegynder
19. oktober 2007 - 22:00 #26
sibbelone > Nu har jeg for det meste tager af din eksempel, og derfor vil jeg lige spørge dig om du kan hjælpe med at få mit design/layout/css - kald det hvad du vil - til at passe både i IE og i FF :)

body {
    Font-family: verdana;
    font-size: 11px;
    color: #000;
    margin-top:0px;
    margin-bottom:0px;
    padding:0px;
    background-color: #e2e2e3;}


 
 
/*Starter selv sideindelingen med de forskellige div boxe*/

/*heunder den box som centrere indholdet på siden*/
.holder {
    position: relative;
    width: 800px;
    height: 20px;
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto;
    /*background-color: #fff;*/
 
    }
/*firefox og ie7 hack så siden også udvider sig i de 2 browser*/
html>body .holder {
    min-height: 200px;
    height: auto;
    }

 
 
/*heunder den indhold hvor både left og content er inde i dette gør at siden udvider sig*/
.indhold {
    position: relative;
    float: left;
    width: 800px;
    height: 300px;
    background-color: green;
    background: url(billeder/main_background_midt.gif);
    background-repeat: repeat-y;
}
/*firefox og ie7 hack så siden også udvider sig i de 2 browser*/ 
html>body .indhold {
    min-height: 300px;
    height: auto;
    }

 
 
/*heunder den conten  hvor indhold på siden skal sættes ind*/
.content {
    position: relative;
    float: right;  /*skift right ud med left og divboxen vil stå i højre side men kræver at du også ændre .left, der skal float ændres til right*/
    width: 615px;
    height: 10px;
    padding: 5px;
    margin-right:15px;
    background-color: green;
}
   
/*firefox og ie7 hack så siden også udvider sig i de 2 browser*/
html>body .content {
    min-height: 10px;
    height: auto;} 


/*heunder toplogo hvor du kan indsætte et bagrundsbilled*/ 
.toplogo {
    position: relative;
    float: left;
    width: 800px;
    height: 130px;
    background-color: #fff;
    border-top: 0px solid #94aec4;
    background: url(billeder/main_top_banner.gif);
    background-repeat: repeat-y;
}

/*heunder den menu der går på tværs af hele side, hvis du ikke vil have menuen der kan du bare undlade den på siden*/
.menu {
    position: relative;
    font-size: 11px;
    float: left;
    padding: 0px 0px 0px 10px;
    width: 790px;
    height: 20px;
    left: 0px;
    color: #fff;
    */0border-top: 1px solid #94aec4;*/
    background-color: #435a6e;
    background: url(billeder/main_background_midt.gif);   
    display: inline;
    z-index: 200;
}

/*heunder left indhold , her kan du evt lave menu*/ 
.left {
    position: relative;
    float: left; /*skift left ud med right og divboxen vil stå i højre side men kræver at du også ændre content, der skal float ændres til left*/
    width: 122px;
    height: 500px;
    margin-right: 10px;
    padding: 5px;
    margin-left:15px;
    background-color: #bbb;*/
}

/*firefox og ie7 hack så siden også udvider sig i de 2 browser*/
html>body .left {
    min-height: 500px;
    height: auto;
}

.bund {
    position: relative;
    font-size: 11px;
    float: left;
    width: 800px;
    height: 20px;
    text-align: center;
    margin-top: 10px; /*styre afstanden op til indhold sættes til 0 hvis man ikke ønsker afstand*/
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #94aec4;
    }
 
.curvy {position:relative; width:150px; background:#9caf9c; color:#000; margin:5em auto;}
#ctl, #cbl, #ctr, #cbr {position:absolute; width:20px; height:20px; color:#9caf9c; background:#fff; overflow:hidden; font-style:normal; z-index:1;}
#ctl {top:0; left:0;}
#cbl {bottom:0; left:0;}
#ctr {top:0; right:0;}
#cbr {bottom:0; right:0;}
.curvy em b {position:absolute; font-size:150px; font-family:arial; color:#9caf9c; line-height:40px; font-weight:normal;}
#ctl b {left:-8px;}
#ctr b {left:-25px;}
#cbl b {left:-8px; top:-17px;}
#cbr b {left:-25px; top:-17px;}
.curvy p {position:relative; z-index:100; padding:5px 10px;}

- du kan selv lige kigge på forskellene i IE og FF. Og du skal ikke lige tage dig af farverne og det
Avatar billede sibbelone Nybegynder
19. oktober 2007 - 22:31 #27
hvis det er i ie 6 der er forskel ken jeg ikke se det lige pt da jeg har lånt min bærebare pc ud
Avatar billede sibbelone Nybegynder
19. oktober 2007 - 22:32 #28
men fortæl mig havd problemet er
Avatar billede supersquirrel Nybegynder
19. oktober 2007 - 22:41 #29
Jeg kan da bare lige tage et par screenshots til dig :))
- 2 sec
Avatar billede supersquirrel Nybegynder
19. oktober 2007 - 22:47 #30
IE:
http://danishbulldog.dk/youmeet/billeder/ie.PNG

FF:
http://danishbulldog.dk/youmeet/billeder/ff.PNG

som du kan se bliver designet i IE skubbet længere til højre, hvilket gør at content'en også bliver rykket og så går det helt galt
Avatar billede sibbelone Nybegynder
19. oktober 2007 - 22:57 #31
51513828 til klokken 24
Avatar billede supersquirrel Nybegynder
19. oktober 2007 - 22:58 #32
Erhm.. yes..
Avatar billede sibbelone Nybegynder
19. oktober 2007 - 23:01 #33
i content skal du fjerne eller 0 stille margin-left: 0px;
og det samme i left
Avatar billede sibbelone Nybegynder
19. oktober 2007 - 23:06 #34
den grå og den grønne kasse er for stor eller for langt inde så de kan ikke være der og så smutter den grønne ned unde den grå
Avatar billede sibbelone Nybegynder
19. oktober 2007 - 23:08 #35
når man bruger relative position må de kasse man vil have i holderen ikke tilsammen være større end holderen og det er inklusive margin padding m.m
Avatar billede supersquirrel Nybegynder
19. oktober 2007 - 23:17 #36
Sååååååååååå... Du kunne vel ikke ved at kigge på koden foroven, sige hvor meget det er?
Avatar billede sibbelone Nybegynder
19. oktober 2007 - 23:27 #37
body {
    Font-family: verdana;
    font-size: 11px;
    color: #000;
    margin-top:0px;
    margin-bottom:0px;
    padding:0px;
    background-color: #e2e2e3;}


 
 
/*Starter selv sideindelingen med de forskellige div boxe*/

/*heunder den box som centrere indholdet på siden*/
.holder {
    position: relative;
    width: 800px;
    height: 20px;
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto;
    /*background-color: #fff;*/
 
    }
/*firefox og ie7 hack så siden også udvider sig i de 2 browser*/
html>body .holder {
    min-height: 200px;
    height: auto;
    }

 
 
/*heunder den indhold hvor både left og content er inde i dette gør at siden udvider sig*/
.indhold {
    position: relative;
    float: left;
    width: 800px;
    height: 300px;
    background-color: green;
    background: url(billeder/main_background_midt.gif);
    background-repeat: repeat-y;
}
/*firefox og ie7 hack så siden også udvider sig i de 2 browser*/ 
html>body .indhold {
    min-height: 300px;
    height: auto;
    }

 
 
/*heunder den conten  hvor indhold på siden skal sættes ind*/
.content {
    position: relative;
    float: right;  /*skift right ud med left og divboxen vil stå i højre side men kræver at du også ændre .left, der skal float ændres til right*/
    width: 615px;
    height: 10px;
    padding: 5px;
    margin-right:0px;
    background-color: green;
}
   
/*firefox og ie7 hack så siden også udvider sig i de 2 browser*/
html>body .content {
    min-height: 10px;
    height: auto;} 


/*heunder toplogo hvor du kan indsætte et bagrundsbilled*/ 
.toplogo {
    position: relative;
    float: left;
    width: 800px;
    height: 130px;
    background-color: #fff;
    border-top: 0px solid #94aec4;
    background: url(billeder/main_top_banner.gif);
    background-repeat: repeat-y;
}

/*heunder den menu der går på tværs af hele side, hvis du ikke vil have menuen der kan du bare undlade den på siden*/
.menu {
    position: relative;
    font-size: 11px;
    float: left;
    padding: 0px 0px 0px 10px;
    width: 790px;
    height: 20px;
    left: 0px;
    color: #fff;
    */0border-top: 1px solid #94aec4;*/
    background-color: #435a6e;
    background: url(billeder/main_background_midt.gif);   
    display: inline;
    z-index: 200;
}

/*heunder left indhold , her kan du evt lave menu*/ 
.left {
    position: relative;
    float: left; /*skift left ud med right og divboxen vil stå i højre side men kræver at du også ændre content, der skal float ændres til left*/
    width: 122px;
    height: 500px;
    margin-right: 0px;
    padding: 5px;
    margin-left:15px;
    background-color: #bbb;*/
}

/*firefox og ie7 hack så siden også udvider sig i de 2 browser*/
html>body .left {
    min-height: 500px;
    height: auto;
}

.bund {
    position: relative;
    font-size: 11px;
    float: left;
    width: 800px;
    height: 20px;
    text-align: center;
    margin-top: 10px; /*styre afstanden op til indhold sættes til 0 hvis man ikke ønsker afstand*/
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #94aec4;
    }
 
.curvy {position:relative; width:150px; background:#9caf9c; color:#000; margin:5em auto;}
#ctl, #cbl, #ctr, #cbr {position:absolute; width:20px; height:20px; color:#9caf9c; background:#fff; overflow:hidden; font-style:normal; z-index:1;}
#ctl {top:0; left:0;}
#cbl {bottom:0; left:0;}
#ctr {top:0; right:0;}
#cbr {bottom:0; right:0;}
.curvy em b {position:absolute; font-size:150px; font-family:arial; color:#9caf9c; line-height:40px; font-weight:normal;}
#ctl b {left:-8px;}
#ctr b {left:-25px;}
#cbl b {left:-8px; top:-17px;}
#cbr b {left:-25px; top:-17px;}
.curvy p {position:relative; z-index:100; padding:5px 10px;}
Avatar billede sibbelone Nybegynder
19. oktober 2007 - 23:27 #38
prøv lige det
Avatar billede supersquirrel Nybegynder
19. oktober 2007 - 23:33 #39
Nu passer menuen i FF, men den grønne boks er skubbet ud af siden i højre side.
I IE passer intet af det, desværre
Avatar billede supersquirrel Nybegynder
01. november 2007 - 17:10 #40
Yes.. Det kom aldrig til at virke - beklager.
Men ellers tak for jeres tid
- lukker
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
Vi tilbyder markedets bedste kurser inden for webudvikling

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