Avatar billede kongsteddk Nybegynder
20. februar 2003 - 23:49 Der er 27 kommentarer og
1 løsning

CSS i stedet for tabeller....

Halløj!

Jeg sidder og forsøger at bygge en side op der tager udgangspunkt i css i stedet for tabeller (for selve siden).
Hvordan er det at CSS koderne skal være?

Jeg sidder lige nu og tester og er kommet frem til følgende:

Css.css
#main 
        {
        width: 750px;
        background: #336699;
        }

#menu   
        {
        floats: left;
        width: 100px;
        background: yellow
        }
       
#indhold
        {
        width: 350;
        background: white
        }


test.asp
<html>

<head>
<Link rel=Stylesheet href="css.css" type ="text/css">
<title>Ny side 1</title>
</head>
<body bgcolor="#336600">
<div id="main">
Toplogo<br><br><br>


    <div id="menu">
        Menuen
    </div>

    <div id="indhold">
        INDHOLD
    </div>


</div>
</body>

</html>

Håber at der er nogen der kan hjælpe mig. Selve indholdsruden skulle gerne op ved siden af menuboxen!
Avatar billede bearhugx Nybegynder
20. februar 2003 - 23:56 #1
ændre din
  floats : left;
til
  float : left; :-)
Avatar billede bearhugx Nybegynder
20. februar 2003 - 23:56 #2
( i #menu ) :-)

/Søren Munk Skrøder
Avatar billede kongsteddk Nybegynder
21. februar 2003 - 00:02 #3
Hvad et "s" da ikke kan gøre! *G* Tak for hjælpen! Måske jeg burde gå på langs! :-)
Avatar billede kongsteddk Nybegynder
21. februar 2003 - 00:07 #4
Hvordan vil du så centrer det hele, uden at teksen (menuen og indhold) bliver centreret???
Avatar billede bearhugx Nybegynder
21. februar 2003 - 00:09 #5
:-))

hvis jeg lige på lave to points, som ikke vil ændre den måde, din css virker på - men vil gøre den mere læse/vedligeholdsvenlig :

1) nu er du så heldig at width modtager pixel-parameter som default - men det er dog god skik at angive hvilken måleenhed man bruger - så derfor "px efter dine pixel-angivelser
2) hvis du havde ";" efter alle dine statements - så ville du se, at det ville gøre det lettere at putte nye parametre på dine class'er - for så behøver man ikke at være opmærksom på, hvor man indsætter :-)
Avatar billede bearhugx Nybegynder
21. februar 2003 - 00:09 #6
centrere main ???
Avatar billede bearhugx Nybegynder
21. februar 2003 - 00:16 #7
du kan evt. gøre

<center>
  <div id="main">
    ...
  </div>
</center>
Avatar billede bearhugx Nybegynder
21. februar 2003 - 00:16 #8
dvs. lave centeringen i html-strukturen...
Avatar billede kongsteddk Nybegynder
21. februar 2003 - 00:17 #9
Kunne godt ske at det var den jeg efterlyste! :-)

Tak for hjælpen! :-)
Avatar billede bearhugx Nybegynder
21. februar 2003 - 00:19 #10
Det er det ikke... afprøvede lige - og teksten blev også centreret ... så....

Kigger lige i CSS-specifikationen :-)
Avatar billede bearhugx Nybegynder
21. februar 2003 - 00:22 #11
ok... Dette er noget af et hack - men det virker ...

    <body bgcolor="#336600">
        <div align="center">
            <div id="main" align="left">
            Toplogo<br><br><br>
            <div id="menu">
                Menuen
            </div>
            <div id="indhold">
                INDHOLD
            </div>
        </div>
        </div>
    </body>
Avatar billede bearhugx Nybegynder
21. februar 2003 - 00:23 #12
dvs. have en <div align="center"></div> som omkranser "main"-div'en (som der - eller via css får sat align:left; igen :-)
Avatar billede bearhugx Nybegynder
21. februar 2003 - 00:26 #13
og det hedder forresten "text-align" i css, ikke "align" :-)
Avatar billede kongsteddk Nybegynder
21. februar 2003 - 01:16 #14
http://bsommer.seestspejder.dk Kan du se hvad der går galt på forsiden? Det passer ikke helt sammen, hvis du ser nyhed og dagbog. De burde stå på samme linie! :-(
Avatar billede bearhugx Nybegynder
21. februar 2003 - 01:25 #15
kan du ikke lige poste din css.css ???
Avatar billede kongsteddk Nybegynder
21. februar 2003 - 01:49 #16
h2
        {
        font-family: Verdana;
        font-size: 10 pt;
        font-color: black;
        color: #000000;
        font-weight: bold;
        }
       
li
        {
        font-family: Verdana;
        font-size: 10 pt;
        }
       
h1
        {
        font-family: Verdana;
        font-size: 24 pt;
        font-weight: bold;
        text-align: center;
        word-spacing: 0;
        line-height: 100%;
        margin-top: 0;
        margin-bottom: 0;
        }
       
p
        {
        font-family: Verdana;
        font-size: 10 pt;
        font-color: black;
        color: #000000;
        text-align: left;
        }
       
a:visited
        {
        font-family: Verdana;
        font-size: 10 pt;
        color: #666666;
        }
       
a:link
        {
        font-family: Verdana;
        font-size: 10 pt;
        font-color: black;
        color: #666666;
        }
       
a:active
        {font-family: Verdana;
        color: #666666;
        font-size: 10 pt;
        }
tabel
        {
        font-family: Verdana;
        font-size: 10 pt;
        }
       
textarea
        {
        font-family: Verdana;
        font-size: 10 pt;
        }

#main 
        {
        width: 750px;
        background: WHITE;
        }
       
#toplogo 
        {
        width: 750px;
        background: white;
        border-top-width: 2px;   
        border-top-style: solid;   
        border-top-color: white;
        border-bottom-width: 2px;   
        border-bottom-style: solid;   
        border-bottom-color: #336600;
        border-left-width: 2px;   
        border-left-style: solid;   
        border-left-color: white;
        border-right-width: 2px;   
        border-right-style: solid;   
        border-right-color: white;
        }

#menu   
        {
        float: left;
        width: 140px;
        background: White;
        }
       
#indhold
        {
        width: 605px;
        float: right;
        background: White;
        border: 2px solid white   
        }

#bundlogo 
        {
        width: 750px;
        background: white;
        border-top-width: 2px;   
        border-top-style: solid;   
        border-top-color: #336600;
        border-bottom-width: 2px;   
        border-bottom-style: solid;   
        border-bottom-color: white;
        border-left-width: 2px;   
        border-left-style: solid;   
        border-left-color: white;
        border-right-width: 2px;   
        border-right-style: solid;   
        border-right-color: white;
        }

#forside-venstre
        {
        float: left;
        width: 300;
        border: 1px solid gray;
        }
       
#forside-hojre
        {
        float: right;
        width: 300;
        border: 1px solid gray;
        }

#forside-row
        {
        width; 100%;
        border: 1px solid gray;
        }
Avatar billede bearhugx Nybegynder
21. februar 2003 - 01:54 #17
Det ser da ud til at du har fået det til at virke - hvis der så bare kunne komme lidt plads mellem dagbog-rammen  og "billede"-rammen
Avatar billede kongsteddk Nybegynder
21. februar 2003 - 01:57 #18
Problemet har ændret sig lidt.
Jeg vil gerne at tilmeld nyhedsbrev og billedarkiv også står lige over for hinanden! :-)
Avatar billede bearhugx Nybegynder
21. februar 2003 - 01:57 #19
Derudover vil jeg foreslå
  padding: 1px;
på de div's som indeholder tekst (f.eks. "forside-venstre" (som så nok bør hede noget mere deskriptivt, som f.eks. "news" el.lign.) og "forside-hoejre" ... you get the idea....)
Avatar billede kongsteddk Nybegynder
21. februar 2003 - 02:04 #20
Kan ikke lige gennemskue hvad der går galt. Dagbog bliver ved med at være "for lang"!!!
Avatar billede bearhugx Nybegynder
21. februar 2003 - 02:11 #21
hvad er det for en rød ramme, som er kommet midt i det hele ?
Avatar billede kongsteddk Nybegynder
21. februar 2003 - 02:13 #22
Det er en "test-ramme". Tror heller ikke har jeg vil have de grå, men er ikke sikker endnu! :-)
Avatar billede bearhugx Nybegynder
21. februar 2003 - 02:15 #23
hmmm ... indsæt følgende css i forside-venstre og forside-højre

clear: both;
Avatar billede bearhugx Nybegynder
21. februar 2003 - 02:15 #24
(kom lige i tanke om en illustration fra CSS specifikationen, som omhandler vores "problem" :-)
Avatar billede bearhugx Nybegynder
21. februar 2003 - 02:17 #25
dvs :

#forside-venstre
        {
        float: left;
        width: 300;
        border: 1px solid gray;
    clear: both;
        }
Avatar billede kongsteddk Nybegynder
21. februar 2003 - 02:25 #26
TAK for hjælpen!
Så har jeg også lært lidt om CSS i dag. Det har været ret begrænset hvor meget jeg kendte til det i forvejen! :-)
Avatar billede bearhugx Nybegynder
21. februar 2003 - 02:28 #27
Selv tak :-)
PS : Selvom det måske er en stor mundfuld, så prøv at surf ind på www.w3.org/TR/REC-CSS2

Især kapitlerne 5,6,8-10,14-17 kan anbefales, om ikke at gennemlæse, så i hvert fald lige skimme ... efter man har "brugt" tingene et par gange, så er man rimligt godt med, hvad angår CSS :-)
Avatar billede kongsteddk Nybegynder
21. februar 2003 - 02:31 #28
Okay! :-)
Tak! :-)
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