Avatar billede synderen Praktikant
18. juli 2008 - 12:29 Der er 57 kommentarer og
1 løsning

Hjælp til en nybegynder - problemer med tables

Hej alle eksperter.

Jeg er ved at lave en ellers ganske simpel side med logo (gif) øverst til ve. og et billede øverst til højre.
Midt venstre har jeg lavet menu og resten skal så være tekstfelt.

1: hvilken opløsning skal den laves i, så den automatisk kan ses på alle pcér og tilpasser sig? jeg har lavet den i 800x600 men synes den ændrer højde og bredde når jeg ændrer i den.

2: jeg kan godt lave forsiden, men når jeg så vil lave mit tekstfelt så ændrer det hele siden og billedet øverst til højre DRILLER og ændrer sig ofte et par milimeter.

Siden kan ses på: www.aktivfysio.dk/2

Har virkelig brug for hjælp

På forhånd tak
Avatar billede w13 Novice
18. juli 2008 - 12:47 #1
Du får nok meget mere ud af at bygge siden op med div-elementer og CSS. Tabeller har aldrig været ment til design og derfor er der meget få i dag, der stadig bruger dem til det. Det er selvfølgelig fair nok, når du er nybegynder, men det ville også være lidt synd, hvis du lærte det på den "dårlige" måde.

Ang. opløsningen, så kan du jo bare angive det i %. Det vil igen være nemmere, når man bruger div'er, fordi det ikke forskubber andre celler som med tabeller.
Avatar billede synderen Praktikant
18. juli 2008 - 13:03 #2
Jeg bruger dreamweaver, så skal jeg bare lave en ny site eller hvordan?
Avatar billede w13 Novice
18. juli 2008 - 13:06 #3
Det ved jeg ikke, jeg bruger ikke DW. =)
Avatar billede synderen Praktikant
18. juli 2008 - 13:10 #4
hvad bruger du?
Avatar billede w13 Novice
18. juli 2008 - 13:12 #5
Kun Notesblok! :)
Avatar billede synderen Praktikant
18. juli 2008 - 13:13 #6
ok vildt nok, kan man lave en flot side på den måde kun?
Avatar billede w13 Novice
18. juli 2008 - 13:14 #7
Man kan jo lave det samme, hvis man da kan finde ud af det. DW hjælper dig jo kun med at sætte det op, men du kunne sagtens kode det hele fra bunden, hvis du lærer det.
Og jeg kan godt lide at have fuld kontrol over koden.
Avatar billede synderen Praktikant
18. juli 2008 - 13:16 #8
hatten af for det :) jeg har ikke den nødvendige lyst/tid til det, har bare lovet at lave den her side og troede det "nemt" kunne lade sig gøre :)
Avatar billede synderen Praktikant
18. juli 2008 - 13:43 #9
hvordan griber jeg det an med div og css? hvad starter jeg med??
Avatar billede w13 Novice
18. juli 2008 - 13:45 #10
Nu har jeg lige strikket dette sammen med div-elementer og CSS, så det kan du jo lige se på. Bemærk også, at jeg kun bruger 3 billeder. Derudover har jeg testet den i både Internet Explorer, FireFox og Safari, hvor din side kun fungerer i Internet Explorer.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Aktiv Fysio</title>
<style type="text/css">
body{
    height:100%;
    margin:100px 0 0 0;
    font-family:arial,verdana,sans-serif;
    font-size:14px;
}
.structure{
    width:60%;
    margin:auto;
}
.greenbar{
    height:20px;
    padding-top:2px;
    background-color:#cd2;
    text-align:center;
}
.greenbarvert{
    float:left;
    width:5px;
    height:500px;
    margin-top:40px;
    background-color:#cd2;
}
.greentext{
    font-weight:bold;
    color:#cd2;
}
.content{
    padding:25px 10px;
}
.leftmenu{
    margin:0;
    padding:0;
    list-style-type:none;
}
.leftmenu li{
    padding-bottom:20px;
}
</style>
</head>
<body>

<div class="structure">

<div class="greenbar"></div>

<div class="greenbarvert"></div>
<div style="float:right" class="greenbarvert"></div>

<div class="content">
    <img style="float:right;margin-right:25px" width="267" height="200" alt="Billede af klinikken" src="http://www.aktivfysio.dk/2/pics/Klinik.jpg">
    <img width="355" height="209" alt="Aktiv Fysio v/ Heidi Eirikstoft, fys. Dip MDT" src="http://www.aktivfysio.dk/2/pics/top_logo.gif">

    <img style="float:right;margin-right:25px" width="336" height="321" alt="Lider du af smerter i ryggen eller nakken, eller lider du af hovedpine, så har du brug for professionel hjælp." src="http://www.aktivfysio.dk/2/pics/midt_logo.gif">

    <ul class="leftmenu">
        <li>
            <span class="greentext">.:</span> Forside
        </li>

        <li>
            <span class="greentext">.:</span> Dit problem
        </li>

        <li>
            <span class="greentext">.:</span> Træning
        </li>

        <li>
            <span class="greentext">.:</span> Sundhedsfremme
        </li>

        <li>
            <span class="greentext">.:</span> Klinik-info
        </li>

        <li>
            <span class="greentext">.:</span> Kontakt
        </li>
    </ul>

    <div style="clear:both"></div>
</div>

<div class="greenbar">Copyright 2008 &copy; Aktiv Fysio - Slåenvej 94 - 7500 Holstebro - Tlf. 97401212 - mail@aktivfysio.dk</div>

</div>

</body>
</html>
Avatar billede synderen Praktikant
18. juli 2008 - 13:53 #11
Fuck du er sej! skal jeg lade de links være du har sat ind? hvad gør jeg med teksten på de andre sider? scrollbar?
Avatar billede w13 Novice
18. juli 2008 - 13:57 #12
Hvilke links tænker du på? Nu har jeg jo ikke set de andre sider, så måske skal de sættes anderledes op. Scrollbar hvad?
Avatar billede synderen Praktikant
18. juli 2008 - 14:02 #13
Under "dit problem" fx. skal der en masse tekst jeg jeg vil gerne have teksten til at stå i midten.

Links jeg tænker på: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

og http://www.aktivfysio.dk/2/pics/midt_logo.gif">

links til logo.gif osv. laver jeg bare om (går ud fra du har lavet det sådan fordi du ikke har billederne liggende)
Avatar billede w13 Novice
18. juli 2008 - 14:09 #14
Jep, det er jeg med på, men jeg ved jo ikke, hvordan du vil have det sat op, dvs. præcis hvordan det skal se ud.

Ang.:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
så er det ikke et link, men en doctype. Hvis du ikke har sådan en øverst i din kode, er det ikke "gyldig" HTML.

Ja, du kan slette "http://www.aktivfysio.dk/2/" fra billederne - det var, som du siger, bare fordi jeg ikke gad hente billederne ned på min computer.
Avatar billede w13 Novice
18. juli 2008 - 14:09 #15
Tak for point i øvrigt! :)
Avatar billede synderen Praktikant
18. juli 2008 - 14:12 #16
Det var så lidt, du fortjener det! jeg synes det er imponerede du har lavet. Tusind tak for det!

Må jeg bede dig om en sidste ting? jeg vil rigtigt gerne have en tekstboks i midten, så jeg selv kan sætte tekst ind.
Avatar billede w13 Novice
18. juli 2008 - 14:17 #17
Men skal der være de 3 billeder på alle sider? For så er der ikke meget plads til tekst.
Avatar billede synderen Praktikant
18. juli 2008 - 14:19 #18
nej kun menuen og de to øverste billeder. Der hvor der står "har du tilbagevende smerter...." skal slettes og i stedet vil jeg skrive det i en tekstboks. Så kan jeg copy index til de andre sider og bare sætte teksten ind.
Avatar billede w13 Novice
18. juli 2008 - 14:25 #19
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Aktiv Fysio</title>
<style type="text/css">
body{
    height:100%;
    margin:100px 0 0 0;
    font-family:arial,verdana,sans-serif;
    font-size:14px;
}
.structure{
    width:60%;
    margin:auto;
}
.greenbar{
    height:20px;
    padding-top:2px;
    background-color:#cd2;
    text-align:center;
}
.greenbarvert{
    float:left;
    width:5px;
    height:500px;
    margin-top:40px;
    background-color:#cd2;
}
.greentext{
    font-weight:bold;
    color:#cd2;
}
.content{
    padding:25px 10px;
}
.leftmenu{
    float:left;
    width:140px;
    margin:0;
    padding:0;
    list-style-type:none;
}
.leftmenu li{
    padding-bottom:20px;
}
</style>
</head>
<body>

<div class="structure">

<div class="greenbar"></div>

<div class="greenbarvert"></div>
<div style="float:right" class="greenbarvert"></div>

<div class="content">
    <img style="float:right;margin-right:25px" width="267" height="200" alt="Billede af klinikken" src="http://www.aktivfysio.dk/2/pics/Klinik.jpg">
    <img width="355" height="209" alt="Aktiv Fysio v/ Heidi Eirikstoft, fys. Dip MDT" src="http://www.aktivfysio.dk/2/pics/top_logo.gif">

    <ul class="leftmenu">
        <li>
            <span class="greentext">.:</span> Forside
        </li>

        <li>
            <span class="greentext">.:</span> Dit problem
        </li>

        <li>
            <span class="greentext">.:</span> Træning
        </li>

        <li>
            <span class="greentext">.:</span> Sundhedsfremme
        </li>

        <li>
            <span class="greentext">.:</span> Klinik-info
        </li>

        <li>
            <span class="greentext">.:</span> Kontakt
        </li>
    </ul>

    <br>

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus venenatis, justo placerat venenatis porttitor, neque lorem congue orci, vel dignissim pede neque non lacus. Nulla dui lacus, pellentesque ut, commodo vel, consectetuer ac, odio. Cras mattis dapibus leo. Morbi non sapien aliquet dolor aliquam eleifend. Cras eu velit non leo tincidunt eleifend. Mauris nec urna. Etiam sed urna vel nulla scelerisque rhoncus. Vestibulum mi sapien, elementum et, adipiscing ac, faucibus in, pede. Integer magna quam, tempus eget, mollis vitae, interdum ac, augue. Aliquam lacus. Nam sit amet ante et ipsum tristique blandit.<br><br>
    Integer risus. Vivamus accumsan tristique leo. Fusce accumsan mi ut mi. Nullam volutpat blandit lectus. In eros turpis, faucibus eu, suscipit et, dignissim quis, massa. Quisque hendrerit pulvinar mauris. Fusce velit turpis, blandit sit amet, nonummy quis, venenatis nec, arcu. Pellentesque leo leo, viverra eu, gravida nec, ultricies a, massa. Morbi vestibulum, mauris id rhoncus condimentum, tortor tortor cursus velit, a condimentum erat justo vitae libero. Mauris condimentum felis quis magna consequat tristique. Phasellus sit amet ligula. Mauris cursus, enim sit amet viverra dictum, magna mi tristique justo, id rutrum nisi justo ut mi. Nunc at orci a nibh sollicitudin accumsan. Aenean convallis. Duis in nunc hendrerit velit facilisis laoreet. Ut ipsum felis, venenatis sit amet, varius ut, dignissim ut, sapien. Nullam viverra.

    <div style="clear:both"></div>
</div>

<div class="greenbar">Copyright 2008 &copy; Aktiv Fysio - Slåenvej 94 - 7500 Holstebro - Tlf. 97401212 - mail@aktivfysio.dk</div>

</div>

</body>
</html>
Avatar billede w13 Novice
18. juli 2008 - 14:26 #20
Når du har arbejdet med det i lidt længere tid, bør du kigge på enten ASP eller PHP (afhængigt af hvad din server kender til) og se på muligheder for at inkluderer designet på alle sider, så du kun skal rette et sted, når du har ændringer.
Avatar billede synderen Praktikant
18. juli 2008 - 14:30 #21
ja lige præcis. Hvordan retter jeg boksen til så den passer under billedet og hvordan når jeg sætter mere tekst ind? scrollbar?
Avatar billede w13 Novice
18. juli 2008 - 14:37 #22
Passer den ikke under billedet?

Du kan få scrollbar sådan her:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Aktiv Fysio</title>
<style type="text/css">
body{
    height:100%;
    margin:100px 0 0 0;
    font-family:arial,verdana,sans-serif;
    font-size:14px;
}
.structure{
    width:60%;
    margin:auto;
}
.greenbar{
    height:20px;
    padding-top:2px;
    background-color:#cd2;
    text-align:center;
}
.greenbarvert{
    float:left;
    width:5px;
    height:500px;
    margin-top:40px;
    background-color:#cd2;
}
.greentext{
    font-weight:bold;
    color:#cd2;
}
.content{
    padding:25px 10px;
}
.leftmenu{
    float:left;
    width:140px;
    margin:0;
    padding:0;
    list-style-type:none;
}
.leftmenu li{
    padding-bottom:20px;
}
</style>
</head>
<body>

<div class="structure">

<div class="greenbar"></div>

<div class="greenbarvert"></div>
<div style="float:right" class="greenbarvert"></div>

<div class="content">
    <img style="float:right;margin-right:25px" width="267" height="200" alt="Billede af klinikken" src="http://www.aktivfysio.dk/2/pics/Klinik.jpg">
    <img width="355" height="209" alt="Aktiv Fysio v/ Heidi Eirikstoft, fys. Dip MDT" src="http://www.aktivfysio.dk/2/pics/top_logo.gif">

    <ul class="leftmenu">
        <li>
            <span class="greentext">.:</span> Forside
        </li>

        <li>
            <span class="greentext">.:</span> Dit problem
        </li>

        <li>
            <span class="greentext">.:</span> Træning
        </li>

        <li>
            <span class="greentext">.:</span> Sundhedsfremme
        </li>

        <li>
            <span class="greentext">.:</span> Klinik-info
        </li>

        <li>
            <span class="greentext">.:</span> Kontakt
        </li>
    </ul>

    <div style="height:300px;overflow:auto;margin-right:25px;text-align:justify">

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus venenatis, justo placerat venenatis porttitor, neque lorem congue orci, vel dignissim pede neque non lacus. Nulla dui lacus, pellentesque ut, commodo vel, consectetuer ac, odio. Cras mattis dapibus leo. Morbi non sapien aliquet dolor aliquam eleifend. Cras eu velit non leo tincidunt eleifend. Mauris nec urna. Etiam sed urna vel nulla scelerisque rhoncus. Vestibulum mi sapien, elementum et, adipiscing ac, faucibus in, pede. Integer magna quam, tempus eget, mollis vitae, interdum ac, augue. Aliquam lacus. Nam sit amet ante et ipsum tristique blandit.<br><br>
    Integer risus. Vivamus accumsan tr<br><br><br><br><br>istique leo. Fusce accumsan mi ut mi. Nullam volutpat blandit lectus. In eros turpis, faucibus eu, suscipit et, dignissim quis, massa. Quisque hendrerit pulvinar mauris. Fusce velit turpis, blandit sit amet, nonummy quis, venenatis nec, arcu. Pellentesque leo leo, viverra eu, gravida nec, ultricies a, massa. Morbi vestibulum, mauris id rhoncus condimentum, tortor tortor cursus velit, a condimentum erat justo vitae libero. Mauris condimentum felis quis magna consequat tristique. Phasellus sit amet ligula. Mauris cursus, enim sit amet viverra dictum, magna mi tristique justo, id rutrum nisi justo ut mi. Nunc at orci a nibh sollicitudin accumsan. Aenean convallis. Duis in nunc hendrerit velit facilisis laoreet. Ut ipsum felis, venenatis sit amet, varius ut, dignissim ut, sapien. Nullam viverra.

    </div>

    <div style="clear:both"></div>
</div>

<div class="greenbar">Copyright 2008 &copy; Aktiv Fysio - Slåenvej 94 - 7500 Holstebro - Tlf. 97401212 - mail@aktivfysio.dk</div>

</div>

</body>
</html>
Avatar billede synderen Praktikant
18. juli 2008 - 14:54 #23
Jaaaaa sådan :) super godt. Tusind tak.
Avatar billede w13 Novice
18. juli 2008 - 14:55 #24
Så lidt! ;)
Avatar billede synderen Praktikant
18. juli 2008 - 15:06 #25
Lige et sidste spørgsmål. Hvordan får jeg menuen lidt ned? synes den er tæt på billedet.
Avatar billede synderen Praktikant
18. juli 2008 - 15:18 #26
Har du evt. et link så jeg kan lærer lidt om div- koder osv? så skal jeg nok selv prøve.
Avatar billede w13 Novice
18. juli 2008 - 16:47 #27
Du kan rette:

.leftmenu{
    float:left;
    width:140px;
    margin:0;
    padding:0;
    list-style-type:none;
}

til:

.leftmenu{
    float:left;
    width:140px;
    margin:0;
    margin-top:10px;
    padding:0;
    list-style-type:none;
}

Dvs. indsætte margin-top:pixeltal;

Det er CSS-koder du skal lære om. Du kan evt. prøve med www.html.dk 's tutorial om CSS til en start.
Avatar billede synderen Praktikant
18. juli 2008 - 17:01 #28
Tak for det :)
Avatar billede synderen Praktikant
18. juli 2008 - 17:36 #29
Kan det bruges i alle browsere det du har lavet? er det med autoskalering? Hende der skal have siden, har lige fortalt at det står skævt på hendes pc og på min står det lige?
Avatar billede w13 Novice
18. juli 2008 - 17:49 #30
Jeg har testet det i forskellige, gængse browsere, og der ser det fint ud. Kan du skaffe et printscreen?
Avatar billede synderen Praktikant
18. juli 2008 - 17:59 #31
Hmm måske er det fordi jeg har brugt Dreamweaver? burde jeg sætte det ind i notebook og prøve igen?
Har bedt hende om et SS, så det er på vej.
Avatar billede w13 Novice
18. juli 2008 - 18:10 #32
Ja, det kunne være derfor.
Avatar billede zips Juniormester
18. juli 2008 - 18:13 #33
siden kræver min 1152x864 i skærmstørrelse, er den under vil billedet af huset stå øverst ;-)
Avatar billede synderen Praktikant
18. juli 2008 - 18:15 #34
Jeg synes det er vildt underligt. Hun bruger IE7.0 se ss her:

http://aktivfysio.dk/ss/ss.gif
Avatar billede w13 Novice
18. juli 2008 - 18:20 #35
Ja, som Zips siger, sker det ved en lille skærmstørrelse - i så fald vil der jo ikke være plads til billederne.

Prøv at lægge denne div ind øverst i den div, der har class="content":

<div style="width:900px"></div>
Avatar billede synderen Praktikant
18. juli 2008 - 20:02 #36
Det duer ikke, da det rykker på rammerne; men nu ved jeg hvorfor. Hun har accepteret det og så må vi gå ud fra andre har bedre opløsning end hende.
Avatar billede zips Juniormester
18. juli 2008 - 20:13 #37
Det er dette som styre bredden
.structure{
    width:60%;
    margin:auto;
}

Hvis du vil have en fast bredde på denne div kan du ændre 60% til 800px som vil passe fint til siden
Avatar billede zips Juniormester
18. juli 2008 - 20:14 #38
Eller find det mål som passer jer bedst ;-)
Avatar billede synderen Praktikant
18. juli 2008 - 21:41 #39
tak zips :)
Avatar billede w13 Novice
19. juli 2008 - 14:19 #40
Procenttallet var for, at den skulle tilpasse sig skærmopløsningen som nævnt i hovedspørgsmålet, men ja det giver problemer, når den bliver for lille.
Avatar billede synderen Praktikant
19. juli 2008 - 15:28 #41
Så hvad er så bedst, px eller %?
Avatar billede roenving Novice
19. juli 2008 - 15:42 #42
Jeg vil stort set altid anbefale, at lave designet i en fast bredde, men s lave det inde i en overordnet div, der så centreres horisontalt !-)
Avatar billede zips Juniormester
19. juli 2008 - 15:44 #43
px eller % er helt op til dig, at have en fast størrelse giver dig styr på billeder og tekst, mens % kan få det til at flytte sig alt afhængig af skærmstørrelsen

Så det er smag og behag ;-)
Avatar billede synderen Praktikant
19. juli 2008 - 20:50 #44
roenving har du en stump kode jeg kan se, så jeg ved hvad du mener med "overordnet div, der så centreres horisontalt"?
Avatar billede zips Juniormester
19. juli 2008 - 20:59 #45
structure er den overordnet div ;-)
Avatar billede synderen Praktikant
24. juli 2008 - 12:15 #46
Ihh det driller. Er der en af jer der kan fortælle mig hvordan jeg får en anden baggrund på alt udenom siden/div/vinduet? når jeg prøver så laver den baggrund på alt og det ønsker jeg ikke.
Avatar billede w13 Novice
24. juli 2008 - 12:21 #47
Så må du fortælle den, at siden/div'en/vinduet skal have en f.eks. hvid baggrundsfarve.
Avatar billede synderen Praktikant
24. juli 2008 - 13:11 #48
jamen hvordan??
Avatar billede w13 Novice
24. juli 2008 - 13:58 #49
F.eks. <div style="background-color:#fff">
Avatar billede synderen Praktikant
24. juli 2008 - 14:09 #50
men hvor? prøv og se koden længere oppe her i teksten. Hvor sætter jeg den ind? jeg har prøvet under "body" men så er det bare hele siden?
Avatar billede w13 Novice
24. juli 2008 - 14:13 #51
Ja, du sætter det på body, som du gjorde før, det er rigtigt nok.

Og så skal du sætte en anden baggrund på elementet som omkranser alt indholdet (den overordnede div).

Dvs.:

<div class="structure" style="background-color:#fff">
Avatar billede w13 Novice
24. juli 2008 - 14:29 #52
Hvis du stadig ikke kan få det til at virke, så vis hele koden, så vi kan se, hvad du prøver.
Avatar billede synderen Praktikant
24. juli 2008 - 14:39 #53
YES nu virker det - tusind tak.
Du kan se siden her:
http://aktivfysio.dk/1/
2,3,4 osv. som testsider.

Måske har du forslag eller kritik :)
Avatar billede w13 Novice
24. juli 2008 - 14:55 #54
Det ser fint ud. =) Men jeg ser ikke nogen baggrund, som du nævnte her i de sidste poster?
Avatar billede synderen Praktikant
25. juli 2008 - 09:51 #55
Tak for det. Jeg nåede ikke at få det lagt ind, inden jeg skulle ud af døren. Ligger det ind senere, så det er klar til en kritik :)
Avatar billede synderen Praktikant
12. august 2008 - 19:47 #56
Er der nogen der ved hvordan jeg flytter "vinduet/siden" op, sådan at den sorte kant ikke er så bred?

Jeg har fået den tilbagemelding, at nogle skal "scrolle" for at se siten på deres pc. Hvordan kommer jeg ud over det? mindre pixels eller?
Avatar billede zips Juniormester
12. august 2008 - 20:02 #57
Sæt dette MARGIN: 100px 0px 0px; til MARGIN: 0px; så er den helt oppe i toppen :-)
Avatar billede synderen Praktikant
12. august 2008 - 20:20 #58
Tak zips.
Hvad gør jeg ved det problem her:
"Har også fået feed back på at det er træls at undermenuerne forsvinder når man skroller ned på siden. Kan du ikke sætte undermenuerne ovenfor skrol funktionen således at de er stationære på siden?"
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

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