Avatar billede squazz Novice
20. september 2008 - 10:13 Der er 75 kommentarer og
1 løsning

En del begynder problemer med CSS?

Hey eksperter, (håber dette er den rigtige kategori)

Jeg er i gang med at lave min første hjemmeside. Jeg har selv lavet designet i Photoshop, sliced det der og fået Photoshop til at skrive basiskoden til det i CSS... Dette har jeg så rettet til efter bedste evne, men har nu et par problemer...

1. Først og fremmest vil hjemmesiden kun vises ordentligt i Firefox, når jeg åbnerden i IE er der tydelige problemer med at håndtere designet på hjemmesiden... Hvordan får jeg løst dette problem? IE snakker om noget ActiveX? :S
- Hjemmesiden kan ses her: http://lindved-im.dk/imutest/

2. Jeg ønsker at kunne gøre hjemmesiden længere/dybere, så jeg kan få skrevet mere tekst på den, hvordan gør jeg dette?

Ekstra ønsker:

1. Jeg vil gerne have lavet et billedgalleri, er der en nem måde at gøre dette på når man aldrig har lavet en hjemmeiside før?

2. I bunden hvor der er et banner hvorpå der står "It's DONE" vil jeg gerne have lavet et javascript som, hver gang hjemmesiden opdateres, skifter bannaret ud og viser et andet...


Kildekoden til HTML kan ses her:
<html>
<head>
<title>Lindved & Tørring IMU </title>
<link rel="stylesheet" type="text/css" href="style/style.css">
<meta http-equiv="imagetoolbar" content="no">
</head>
<body style="background-color:#FFFFFF;">
<div id="Table_01">
    <div id="Logo_">
        <a href="index.html">
            <img id="Logo" src="images/Logo.gif" width="177" height="51" border="0" alt="Logo" /></a>
    </div>
    <div id="index-02_">
        <img id="index_02" src="images/index_02.gif" width="723" height="7" alt="" />
    </div>
    <div id="dagen-bibelvers-verset_">
        <script language="JavaScript" src="http://jesusnet.dk/budskab/dagensbibelord-2.js.php"> </script>
    </div>
    <div id="index-04_">
        <img id="index_04" src="images/index_04.gif" width="10" height="44" alt="" />
    </div>
    <div id="IMU---hvidt-felt-top_">
        <img id="IMU___hvidt_felt_top" src="images/IMU---hvidt-felt-top.gif" width="900" height="1" alt="" />
    </div>
    <div id="IMU---billedramme_">
        <img id="IMU___billedramme" src="billedramme/billedramme2.jpg" width="900" height="165" alt="" />
    </div>
    <div id="menudel-top_">
        <img id="menudel_top" src="images/menudel_top.gif" width="101" height="8" alt="" />
    </div>
    <div id="menu-graduering_">
        <img id="menu_graduering" src="images/menu_graduering.gif" width="20" height="263" alt="" />
    </div>
    <div id="IMU---billedramme009_">
        <img id="IMU___billedramme009" src="images/IMU---billedramme-09.gif" width="779" height="1" alt="" />
    </div>
    <div id="text-area_">
        <h2>Velkommen til Lindved & Tørrings IMU</h2>
        IMU er for alle unge fra 16 til 25 år.
Vi mødes normalt tirsdag kl. 19.30, som oftest i private hjem, men check altid i programmet! Hvis der intet står, er det i missionshuset i Lindved.
    </div>
    <div id="index-11_">
        <img id="index_11" src="images/index_11.gif" width="6" height="262" alt="" />
    </div>
    <div id="Forside-Knap_">
        <a href="index.html">
            <img id="Forside_Knap" src="images/Forside_Knap.gif" width="101" height="27" border="0" alt="Forside" /></a>
    </div>
    <div id="Program-knap_">
        <a href="program.html">
            <img id="Program_knap" src="images/Program_knap.gif" width="101" height="32" border="0" alt="Program" /></a>
    </div>
    <div id="Events-knap_">
        <a href="events.html">
            <img id="Events_knap" src="images/Events_knap.gif" width="101" height="32" border="0" alt="Events" /></a>
    </div>
    <div id="Hvem-er-vi-knap_">
        <a href="hvem_er_vi.html">
            <img id="Hvem_er_vi_knap" src="images/Hvem_er_vi_knap.gif" width="101" height="35" border="0" alt="Hvem er vi" /></a>
    </div>
    <div id="Kontakt-os-knap_">
        <a href="kontakt.html">
            <img id="Kontakt_os_knap" src="images/Kontakt_os_knap.gif" width="101" height="29" border="0" alt="Kontakt os" /></a>
    </div>
    <div id="Billedgalleri-knap_">
        <a href="galleri.html">
            <img id="Billedgalleri_knap" src="images/Billedgalleri_knap.gif" width="101" height="36" border="0" alt="Billedgalleri" /></a>
    </div>
    <div id="Guestbook-knap_">
        <a href="guestbook.html">
            <img id="Guestbook_knap" src="images/Guestbook_knap.gif" width="101" height="34" border="0" alt="G&#230;stebog" /></a>
    </div>
    <div id="Links-knap_">
        <a href="links.html">
            <img id="Links_knap" src="images/Links_knap.gif" width="101" height="30" border="0" alt="Links" /></a>
    </div>
    <div id="menudel-bund_">
        <img id="menudel_bund" src="images/menudel_bund.gif" width="900" height="26" alt="" />
    </div>
    <div id="Skydeskiver_">
        <img id="Skydeskiver" src="images/Skydeskiver.gif" width="304" height="169" alt="Cirkler - billede" />
    </div>
    <div id="index-22_">
        <img id="index_22" src="images/index_22.gif" width="596" height="35" alt="" />
    </div>
    <div id="reklame_">
        <a href="http://www.event.imu.dk">
            <img id="reklame" src="images/reklame.gif" width="596" height="134" border="0" alt="reklame" /></a>
    </div>
</div>
<!-- End ImageReady Slices -->
</body>
</html>

Kildekoden til CSS ses her:

#Table_01 {
    height:100%;
    margin:0px;
    border:0px;
    padding:0px;
    position:relative;
    width:900px;
    margin:0 auto;
    height:100%;
   
}

#Logo_ {
    position:absolute;
    left:0px;
    top:0px;
    width:177px;
    height:51px;
}

#index-02_ {
    position:absolute;
    left:177px;
    top:0px;
    width:723px;
    height:7px;
}

#dagen-bibelvers-verset_ {
    position:absolute;
    left:183px;
    top:7px;
    width:707px;
    height:44px;
}

#index-04_ {
    position:absolute;
    left:890px;
    top:7px;
    width:10px;
    height:44px;
}

#IMU---hvidt-felt-top_ {
    position:absolute;
    left:0px;
    top:51px;
    width:900px;
    height:1px;
}

#IMU---billedramme_ {
    position:absolute;
    left:0px;
    top:52px;
    width:900px;
    height:165px;
}

#menudel-top_ {
    position:absolute;
    left:0px;
    top:217px;
    width:101px;
    height:8px;
}

#menu-graduering_ {
    position:absolute;
    left:101px;
    top:217px;
    width:20px;
    height:263px;
}

#IMU---billedramme009_ {
    position:absolute;
    left:121px;
    top:217px;
    width:779px;
    height:1px;
}

#text-area_ {
    position:absolute;
    left:127px;
    top:218px;
    width:720px;
    height:262px;
}

#index-11_ {
    position:absolute;
    left:894px;
    top:218px;
    width:6px;
    height:262px;
}

#Forside-Knap_ {
    position:absolute;
    left:0px;
    top:225px;
    width:101px;
    height:27px;
}

#Program-knap_ {
    position:absolute;
    left:0px;
    top:252px;
    width:101px;
    height:32px;
}

#Events-knap_ {
    position:absolute;
    left:0px;
    top:284px;
    width:101px;
    height:32px;
}

#Hvem-er-vi-knap_ {
    position:absolute;
    left:0px;
    top:316px;
    width:101px;
    height:35px;
}

#Kontakt-os-knap_ {
    position:absolute;
    left:0px;
    top:351px;
    width:101px;
    height:29px;
}

#Billedgalleri-knap_ {
    position:absolute;
    left:0px;
    top:380px;
    width:101px;
    height:36px;
}

#Guestbook-knap_ {
    position:absolute;
    left:0px;
    top:416px;
    width:101px;
    height:34px;
}

#Links-knap_ {
    position:absolute;
    left:0px;
    top:450px;
    width:101px;
    height:30px;
}

#menudel-bund_ {
    position:absolute;
    left:0px;
    top:480px;
    width:900px;
    height:26px;
}

#Skydeskiver_ {
    position:absolute;
    left:0px;
    top:506px;
    width:304px;
    height:169px;
}

#index-22_ {
    position:absolute;
    left:304px;
    top:506px;
    width:596px;
    height:35px;
}

#reklame_ {
    position:absolute;
    left:304px;
    top:541px;
    width:596px;
    height:134px;
}


der gives 100 point hvis I kan svare mig på mine 2 hoves spørgsmål, og 100 point mere pr hver af mine "ekstra spørgsmål" hvis de to hovedspørgsmål er besvaret...
Avatar billede roenving Novice
20. september 2008 - 12:50 #1
Uden en gyldig doctype kan du ikke regne med noget som helst (og så er det slet ikke et rigtigt html-dokument !-), så brug f.eks.

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

som det allerførste i dokumentet før html-tagget !o]

-- og det er rigtig dårlig kode, når alle elementer er placeret absolut, hvilket i øvrigt også medfører et af dine andre problemer, at det er fastlåst i størrelsen ...

-- og disse ting understreger lige det uheldige valg, du har taget omkring editor, det er absolut uhensigtsmssigt at bruge et billedbehandlingsprogram til at lave html-kode, du vælger vel heller ikke traktoren, hvis du skal et smut til Tyskland og hente et par rammer cola ?-)
Avatar billede roenving Novice
20. september 2008 - 12:53 #2
-- og så skal du i øvrigt være opmærksom på Ekspertens regler, der bl.a. fastslår, at det ikke er tilladt at udlove eller modtage mere end 200 point i eet spørgsmåls kontekst ...

Læs dem lige: http://www.eksperten.dk/regler.phtml

-- og kig også lige på: http://expfaq.dk/ !-)
Avatar billede w13 Novice
20. september 2008 - 14:22 #3
Ang. ekstraønskerne:

1) Nej, det er ikke let at lave et billedgalleri. Det er det kun, når du er nok inde i programmering til at vide, hvordan det skal laves. =) Men der er masser af færdige eksempler på nettet, som du let kan finde via Google.

2) Det bør du nok spørge om i et nyt spørgsmål under JavaScript-kategorien.
Avatar billede w13 Novice
20. september 2008 - 14:26 #4
Hvordan du skal lave et billedgalleri kommer selvfølgelig også helt an på, hvordan det skal fungere og hvad det skal kunne. Hvis det f.eks. selv skal finde billpederne i en mappe på din computer, skal det laves med noget Server Side-sprog, f.eks. PHP eller ASP, og det samme, hvis der skal kunne kommenteres på billederne o.lign.
Avatar billede squazz Novice
21. september 2008 - 11:15 #5
roenvig - Du har ret, det havde jeg glemt at læse, så spg. 2 "slettes" hermed herfra, og stille et nyt spg. om det i Java når jeg har fået det basale til at køre...
Du siger det er rigtig dårlig kode, og det tror jeg du har ret i, jeg sidder så bare og tænker, hvad skal jeg skrive om? Hvordan skal jeg så sætte det op? Jeg har ikke så meget forstand på dette, og det stemmer fint overens med hvad der står på HTML.dk... Kan du evt. hjælpe mig lidt i gang så jeg ved hvad jeg skal rette på?
- Jeg ved det er den dum idé at bruge PhotoShop som editor, men har også lidt i det...

w13 - jeg har fundet et færdigt billedgalleri som hedder plogger (http://www.plogger.org/) men dette er vel PHP, og kræver en del opsætning?
Avatar billede squazz Novice
21. september 2008 - 11:17 #6
Indførelsen af

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

gjorde ikke hjemmeisden kønnere ;) Hvorfor det? :)
Avatar billede w13 Novice
21. september 2008 - 11:23 #7
Der er stadig ingen Doctype på: http://lindved-im.dk/imutest

Husk også at tjekke fejl i din kode med: http://validator.w3.org/check?uri=http%3A%2F%2Flindved-im.dk%2Fimutest%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

Ja, plogger kræver, at du kan køre PHP på din server, men ellers burde der ikke være forfærdelig meget i det. Jeg har ingen erfaring med Plogger, men det ser ud til, der er en komplet guide til, hvordan man sætter det op, på deres side.

Husk også, at stille dit spørgsmål 2 under JavaScript og ikke Java, som er et helt andet sprog. =)
Avatar billede squazz Novice
21. september 2008 - 11:32 #8
Nej, grunden til at der ikke er opdateret på hjemmesiden er at jeg først skal sende det til en administrator som så updaterer hjemmesiden, jeg snakker med han i dag og prøver at få adgang til hjemmesiden så jeg selv kan opdatere, skulle gerne gøre dette mere smertefrit...

Det W3C fortæller mig er vel alle de ting som skal laves om? Validation output forstår jeg, men jeg er ikke helt med på "Potential Issues"?
Avatar billede w13 Novice
21. september 2008 - 11:38 #9
Potential Issues skal oversættes til Mulige Problemer.

F.eks. har du ikke noget meta-tag, som angiver charset. (Første "problem".)

Og så har du heller ikke nogen Doctype, siger den. Hvilket jo er rigtigt nok.

Men du kan selv prøve at validere den side, som ligger på din computer, og se, hvad den siger.
Avatar billede olebole Juniormester
21. september 2008 - 16:52 #10
<ole>

squazz >> html.dk er stedet, hvor man lærer, hvordan webkodning _ikke_ skal foretages. Det site er proppet med mangler udeladelser og seriøse fejl!  :o|

Du er nok nødt til at finde nogle gode bøger fra et anerkendt forlag - et bud kunne være http://oreilly.com/

/mvh
</bole>
Avatar billede squazz Novice
21. september 2008 - 18:41 #11
olobole - http://oreilly.com/ kræver jo at jeg så betaler for at blive undervist, det har jeg ikke lyst til :P
Avatar billede olebole Juniormester
21. september 2008 - 19:15 #12
Så skal du nok heller ikke påregne at lære ret meget  =)
Avatar billede squazz Novice
21. september 2008 - 19:18 #13
Hehe, jeg er bare vant til at få foræret ting gratis :)
En af mine kammerater har fået dette på hans skole, som jeg har lånt:
”Grundlæggende CSS” © Jesper Kristensen/Kim Vase, 2008 Aalborg tekniske skole/Hansenberg

Tror du dette kan være godt nok? :)
Avatar billede olebole Juniormester
22. september 2008 - 18:13 #14
Jeg kender den ikke, så det har jeg ingen anelse om  =)
Avatar billede squazz Novice
22. september 2008 - 20:54 #15
Så god var den heller ikke, den fortalte mig ikke rigtigt noget som html.dk ikke havde fortalt mig...

Jeg har lige i dette øjeblik fået rettigheder over hjemmiseden, (www.lindved-im.dk/imutest) og dette skulle vel gøre det en del lettere for jer at hjælpe mig i gang?

roenvig skriver at det er meget dårlig kode og at den skal skrives om, der kan jeg kun give ham ret, det hele skal vel ændres til XHTML og alt layout skal smides over i min CSS fil?

Problemet for mig er bare, jeg kan ikke rigtigt regne ud hvordan jeg skal skrive det når jeg skal have CSS'en til at styre det grafiske som htm fil gør i øjeblikket...

Jeg har fået rettet næsten alt som W3C beklager sig over, nemlig det som kan ses på følgende link: http://validator.w3.org/check?uri=http%3A%2F%2Flindved-im.dk%2Fimutest%2F&charset=(detect+automatically)&doctype=Inline&group=0
Avatar billede w13 Novice
22. september 2008 - 20:59 #16
XHTML understøttes ikke af nogen browsere, så du bør nok holde det i HTML 4.01, men det kan de andre fortælle dig meget mere om. =)
Avatar billede squazz Novice
22. september 2008 - 21:07 #17
XHTML understøttes ikke?
Hmm, prøv at se på på den nye kilde kode på www.lindved-im.dk/imutest, er det ikke lidt XHTML der er brugt her? Ellers ved jeg ikke heæt hvad det er jeg har læst ^^
Troede da ellers at det var bedre en HTML? Ny generation og det hele har jeg fået tudet ørene fulde med, af en af mine kammerater som læser til webintegrator...
Avatar billede w13 Novice
22. september 2008 - 21:22 #18
Nej, XHTML tolkes som mærkværdig HTML. =) I dag bruges XHTML 1.1, men vi må nok vente på XHTML 2.0, før XHTML understøttes i browserne. Og 2.0 vil være helt anderledes end 1.1.
Avatar billede olebole Juniormester
22. september 2008 - 21:48 #19
Til en start har XHTML 1.0 Transitional stortset intet med XHTML at gøre. XHTML er et subset af XML og parses som sådan - XHTML 1.0 Transitional er derimod HTML og parses som sådan. Jeg kender roenving ret godt og er helt sikker på, han også vil råde dig til at skrive koden i HTML 4.01 Strict, indtil XHTML 2.0 understøttes  ;o)

Desværre har rigtig mange af de, der underviser webintegratorer (roenving undtaget), ikke ret meget forstand på det, de underviser i. Jeg har selv undervist webintegratorer og har en søn, som har taget uddannelsen, så jeg har et vist kendskab til uddannelsens katastrofalt ringe faglige niveau, hvad webkode angår!

Det er helt korrekt, at XHTML formodentlig bliver den nye generation af markup kode, men IE 7.0 understøtter ikke engang MIME-typen for 'ægte' XHTML - og 'ægte' XHTML får vi først, når XHTML 2.0 bliver færdig hos W3C ... og endnu vigtigere: At den bliver understøttet af browserne.

Læs evt:
    http://www.eksperten.dk/artikler/537
    http://www.eksperten.dk/artikler/538
Avatar billede squazz Novice
22. september 2008 - 22:23 #20
Jeg har nu læst artiklerne...

Så I vil altså råde mig til udelukkende at skrive i HTML 4.01 Strict? Hvilket vel betyder at den smule jeg har skrevet på hjemmesiden indtil videre ikke kan bruges til ret meget og skal skrives om?
Og så må jeg vil i gang med RIGTIGT mange timers læsning af HTML og CSS på W3C? Hvis vi da ikke skal til at snakke om PHP5 og MySQL?
Avatar billede w13 Novice
22. september 2008 - 22:29 #21
Jo, HTML 4.01 Strict og XHTML adskiller sig jo kun fra hinanden på meget få punkter. Bl.a. at man i HTML 4.01 ikke skal lukke tags såsom <br> med /
Avatar billede squazz Novice
23. september 2008 - 07:02 #22
Så det gør vel i princippet ikke noget at man allerede nu skriver det lidt XHTML? Så er det vel bare det mere klar til XHTML 2.0 kommer? Fx. som når man i XHTML lukker tags, det øger vel bare parsningen?
Avatar billede squazz Novice
23. september 2008 - 08:13 #23
Undskyld for det forrige post, havde vist ikke læst artikel 2 ordentligt igennem...
Avatar billede w13 Novice
23. september 2008 - 09:00 #24
I HTML er det jo forkert at skrive <br />, og da XHTML vil blive fortolket som HTML, vil <br /> også blive tolket som forkert.

Men man kan gøre en masse andre ting for at være klar til XHTML 2.0. F.eks. kan man sørge for at holde alle sine attribut-navne med små bogstaver (også "onclick", som ikke må være "onClick"). Man skal også altid huske at have anførselstegn omkring sine attribut-værdier. Dvs. name="navn" og ikke name=navn.

Derudover kan man jo læse om det, der er ved at blive besluttet om XHTML 2.0 her, så man ved, hvad det går ud på og kan forberede sig på strukturen og koderne: http://www.w3.org/TR/xhtml2
Avatar billede squazz Novice
23. september 2008 - 11:06 #25
Jeg indsætter straks

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

i stedet for

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="da" xml:lang="da"

og så må jeg jo til at skrive om til HTML igen :)

Men nu hvor jeg skal til at skrive om alligevel, er der så ikke en der kan fortælle mig hvordan jeg får:

    <div id="Logo_">
        <a href="index.html">
            <img id="Logo" src="images/Logo.gif" width="177" height="51" border="0" alt="Logo" /></a>
    </div>

Lavet om til CSS så jeg kan styre det hele i min CSS fil?
Avatar billede tfswebguy Nybegynder
23. september 2008 - 11:26 #26
<div class="logo_">
<a href="index.html">
  <img class="logo" src="images/Logo.gif" alt="Logo">
</a>
</div>

Kan man bruge class="logo_" ???
I CSS .logo {
width: 177px;
height: 51px;
border: 0px;
}
Avatar billede squazz Novice
23. september 2008 - 11:34 #27
Når jeg bruger

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

Er der grafiske problemer som jeg håber på bliver rettet når jeg får lagt alt grafik ind i CSS...

Dog er tfswebguy's løsning ikke helt komplet :(
Avatar billede tfswebguy Nybegynder
23. september 2008 - 11:38 #28
kan du fortælle lidt om hvad der går galt med den CSS stump jeg foreslog, hvis det er, så jeg kan se fejlen, og evt. løse den?
Avatar billede squazz Novice
23. september 2008 - 11:53 #29
Hvad mener du med: Kan man bruge class="logo_" ???
I CSS .logo ?
Avatar billede tfswebguy Nybegynder
23. september 2008 - 12:03 #30
<div class="logo_"> <-- Om den er valid pga _ tegnet
Avatar billede squazz Novice
23. september 2008 - 12:35 #31
Hmm, jeg har allerede nu i min CSS denne:

#Logo_ {
    position:absolute;
    left:0px;
    top:0px;
    width:177px;
    height:51px;
}

Hvis jeg sletter

    <div id="Logo_">
        <a href="index.html">
            <img id="Logo" src="images/Logo.gif" width="177" height="51" border="0" alt="Logo" /></a>
    </div>

i min HTML, forsvinder billedet, hvad skal jeg skrive i min HTML i stedet for

    <div id="Logo_">
        <a href="index.html">
            <img id="Logo" src="images/Logo.gif" width="177" height="51" border="0" alt="Logo" /></a>
    </div>

Og hvad skal jeg skrive i min CCS i stedet for

#Logo_ {
    position:absolute;
    left:0px;
    top:0px;
    width:177px;
    height:51px;
}

Hvis min CSS da ikke er rigtig nok...
Avatar billede w13 Novice
23. september 2008 - 12:41 #32
Bare skriv:

    <div id="Logo_">
        <a href="index.html">
            <img id="Logo" src="images/Logo.gif" width="177" height="51" border="0" alt="Logo">
        </a>
    </div>
Avatar billede squazz Novice
23. september 2008 - 12:47 #33
Altså at jeg smidder </a> ned på næste linie? Intet andet?

Dette skal vel stå i HTML?
Avatar billede w13 Novice
23. september 2008 - 13:31 #34
Du behøver ikke at smide det ned på næste linje. Pointen er, at HTML 4.01 og XHTML 1.1 er næsten identisk i syntaks, men XHTML 2.0 bliver helt anderledes. Det eneste, jeg har rettet i din kode, er at img-tag'et ikke skal lukkes med / i HTML.
Avatar billede squazz Novice
23. september 2008 - 14:25 #35
Arh, vi snakker hver sit :)
Jeg fandt ud af at alt skal skrives i HTML 4.01 i stedet for XHTML - kapitel slut :)

Det jeg så spørger efter, er det som en af mine kammerater har snakket om, nemlig at alt layout, det vil sige at

    <div id="Logo_">
        <a href="index.html">
            <img id="Logo" src="images/Logo.gif" width="177" height="51" border="0" alt="Logo" /></a>
    </div>

skal laves om til CSS og smides ind i min CSS fil... Dette skulle gøre det mere dynamisk...

Det er vel også det roenvig snakker om her: 20/09-2008 12:50:34 ?
Avatar billede w13 Novice
23. september 2008 - 16:05 #36
Det du har der er fint. Du har allerede lagt noget CSS ind, som knytter sig til Logo_ og Logo, viste du os jo. Du kunne selvfølgelig tilføje i dit CSS:

img{
  border-width:0;
}

Og så sparer du border="0" på dine billeder. =)
Avatar billede squazz Novice
23. september 2008 - 16:31 #37
roenvig snakker om at mine billeder er låst, og at det er dette der giver mig problemer hvordan ændrer jeg dette?
Avatar billede roenving Novice
23. september 2008 - 16:47 #38
Laver det så meget som muligt med naturligt flow !-)

-- en div, der skrives efter en anden div vil komme nedenunder medmindre den floates og har en bredde, så vil en efterfølgende div lægge sig bagved, hvis der er plads til den ...

-- et eksempel kunne være:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Tomt dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{height:100%;margin:0px;border:0px;padding:0px;font-family:tahoma,verdana,arial,sans-serif;font-size:small;overflow:auto;}
#site{width:960px;margin:0 auto;}
#banner{height:160px;background:url(sti/til/dit/banner.jpg) no-repeat #345;}
#main{background-color:lightgreen;}
#menu{width:160px;float:left;background-color:yellow;height:400px;}
#content{width:800px;float:left;background-color:lightgreen;min-height:400px;}
#footer{width:600px;height:200px;float:right;border:1px solid red;}
.clearDiv{clear:both;line-height:0;font-size:0;}
</style>
</head>
<body>
  <div id="site">
    <div id="banner">&nbsp;</div>
    <div id="main">
      <div id="menu">
        Dine menu-punkter
      </div>
      <div id="content">
        Plads til dit indhold
      </div>
      <div class="clearDiv">&nbsp;</div>
    </div>
    <div id="footer">
      Dit bundstykke
    </div>
  </div>
</body>

</html>
Avatar billede olebole Juniormester
23. september 2008 - 17:07 #39
Man får altid visningsproblemer mellem IE og andre browsere, hvis man skriver:

<div>
    <a href="">En tekst</a>
</div>

Hvis det sidste indhold i et block-element (eller block-lignende element) er inline-indhold, skaber et linjeskift i koden 'ekstra luft' i bunden af block-elementet ... men _kun_ i IE.

Disse to eksempler burde eksemplificere problemet:

<div style="background:red">
    <img src="http://www.eksperten.dk/img/elogo.png"></div>

<!-- og nu med ekstra luft til fødderne =) -->
<div style="background:red">
    <img src="http://www.eksperten.dk/img/elogo.png">
</div>
Avatar billede olebole Juniormester
23. september 2008 - 17:09 #40
- og det var ikke så meget til roenvings eksempel, som jeg mest ser som et overordnet struktureksempel. Kommentaren gik på eksemplet højere oppe - men prinicipielt er problemet det samme  =)
Avatar billede squazz Novice
25. september 2008 - 09:04 #41
Jeg er ikke helt sikker på om det er det sammen som reonvig lavede til mig, men min kammerat som læser til webintegrator lavede mig dette:

HTML:

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

<html>

<head>
<title>Lindved &amp; Tørring IMU - Hvem er vi?</title>
<link href="style/style.css" rel="stylesheet" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="imagetoolbar" content="no">
<title>Velkommen til Lindved &:amp Tørring IMU </title>
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>


</head>


<body>
<div id="wrapper">
    <div id="top">
        <div id="logo">
        </div>
        <div id="word">
        <script language="JavaScript" src="http://jesusnet.dk/budskab/dagensbibelord-2.js.php"></script>
        </div>
    <div id="flash">
    </div>
    <div id="indholdbox">
    <div id="menu">
    <a href="index.html"> Forside </a>
    <a href="events.html"> events </a>
    <a href="guestbook.html"> Gæstebog </a>
    <a href="links.html"> Links </a>
    <a href="galleri.html"> Galleri </a>
    <a href="hvem_er_vi.html"> Hvem er vi? </a>
    <a href="program.html"> program </a>
    <a href="kontakt.html"> kontakt </a>
    </div>
    <div id="indhold">

    <p>Lorem ipsum dolor sit amet,
</p>
    </div>
    </div>
<div id="cirkler">
</div>
<div id="space">
</div>
<div id="reklame">
</div>

</div>
</body>
</html>
Avatar billede squazz Novice
25. september 2008 - 09:05 #42
CSS:

body {
    background-color: blue;
}
#wrapper {
    left: 50%;
    margin-left: -450px;
    position: absolute;
    width: 900px;
    background-color: white;
   
}
#logo {
    background-image: url("../images/logo.png");
    position: absolute;
    height: 53px;
    width: 177px;
}   
#word {
    background-image: url("../images/word.png");
    float: left;
    height:    53px;
    width: 900px;

}
#flash {
    background-image: url("../billedramme/billedramme1.jpg");
    float: left;
    height: 165px;
    width: 900px;
}
#indholdbox {
    background-image: url("../images/indhold.png");
    background-repeat: repeat-y;
    float: left;
    width: 900px;
    background-color: white;
}
#menu {

}

#indhold {
    padding-left: 135px;
    padding-right: 15px;
}   
#cirkler {
    background-image:url("../images/cirkler.png");
    float: left;
    width: 304px;
    height: 183px;
    clear: both;
}
#space {
    background-image:url("../images/space.png");
    float: left;
    width: 596px;
    height: 49px;
}
#reklame {
    background-image:url("../images/reklame.png");
    float: left;
    width: 596px;
    height: 134px;
}
Avatar billede olebole Juniormester
25. september 2008 - 15:03 #43
Jeg har ikke gået det efter i detaljen, men det ser udmærket ud. Dog begår han samme 'fejl':
    <a href="kontakt.html"> kontakt </a>
    </div>

- som bør være:
    <a href="kontakt.html"> kontakt </a></div>
Avatar billede roenving Novice
25. september 2008 - 16:37 #44
Tjah, hvis der er elementer der er absolut positioneret bør man undersøge hvorfor, og i ovenstående er der en helt uforståelig absolut positionering af det omkransende element, det bør kun kunne se således ud:

#wrapper {
    margin: 0 auto;
    position: relative;
    width: 900px;
}

-- den overflødige hvide baggrundsfarve fjernede jeg så også lige, da det jo er standard-farven !-)

-- og logo-divet er også absolut positioneret uden position ???

-- ellers har jeg ikke nærlæst det ...
Avatar billede squazz Novice
26. september 2008 - 16:17 #45
Jeg burde egentligt lukke dette emne, jeg har fået hjemmesiden til at gøre sig længere (background-repeat: repeat-y;), og hjemmesiden ser ens ud på IE og Firefox, dette løste jeg ved floats, som roenvig snakkede om i starten... For som han sagde, var de alt for låst fast...

Egentligt burde jeg give jer alle point, da I alle har hjulpet mig meget, men da w13 og roenvig er de 2 der har hjulpet mig mest, må det nok være dem der skal dele de 100 point...

Dog har jeg et lille ekstra spørgsmål, som ikke er indbefattet af de første spørgsmål jeg stillede... Nemlig, Hvordan får jeg linket til logoet? Jeg syntes ikke jeg kan få et til at fungere, kan man lave et link i CSS, således at CSS fortæller hjemmesiden, at logoet skal være et hyperlink, som linker til "index.html"?
Avatar billede olebole Juniormester
26. september 2008 - 16:21 #46
Det kan du ikke med CSS - og det ville heller ikke give mening at sætte links med CSS. CSS er kun markup'ens 'beautybox'  =)
Avatar billede squazz Novice
26. september 2008 - 16:23 #47
For at I lige er med poster jeg da også lige CSS og index.html

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

<html>
<head>
<title>Velkommen til Lindved &amp; Tørring IMU</title>
<link href="style/style.css" rel="stylesheet" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="imagetoolbar" content="no">
</head>


<body>
<div id="wrapper">
    <div id="logo"></div>
    <div id="word">
        <script language="JavaScript" src="http://jesusnet.dk/budskab/dagensbibelord-2.js.php"></script></div>
    <div id="flash"></div>
    <div id="indholdbox">
    <div id="menu">
    <br><a href="index.html"><img src="images/forside.gif"></a>
    <br><a href="program.html"><img src="images/program.gif"></a>
    <br><a href="events.html"><img src="images/events.gif"></a>
    <br><a href="hvem_er_vi.html"><img src="images/hvem-er.gif"></a>
    <br><a href="kontakt.html"><img src="images/kontakt.gif"></a>
    <br><a href="galleri.html"><img src="images/galleri.gif"></a>
    <br><a href="guestbook.html"><img src="images/guestbook.gif"></a>
    <br><a href="links.html"><img src="images/links.gif"></a>
    </div>
    <div id="indhold">
    <p><h2>Velkommen til Lindved & Tørrings IMU</h2>
              IMU er for alle unge fra 16 til 25 år.
        <br>Vi mødes normalt tirsdag kl. 19.30, som oftest i private hjem, men check altid i programmet! Hvis der intet står, er det i missionshuset i Lindved.
    </div>
    </div>
<div id="cirkler"></div>
<div id="space"></div>
<div id="reklame"></div>

</div>
</body>
</html>
Avatar billede squazz Novice
26. september 2008 - 16:24 #48
Og så CSS'en...

Som du kan se roenvig har jeg tilføjet en baggrundsfarve i "wrapper", da selve baggrunden er "LightSkyBlue"


img{
  border-width:0;
}

body {
    background-color: LightSkyBlue;
}
#wrapper {
    position: relative;
    margin: 0 auto;
    width: 900px;
    background-color: white;
}
#logo {
    background-image: url("../images/logo.png");
    float: left;
    width: 177px;
    height: 70px;
}   
#word {
    background-image: url("../images/word.png");
    float: left;
    width: 723px;
    height:    70px;
    margin-top  20px;
    margin-left 20px;
}
#flash {
    background-image: url("../billedramme/billedramme3.jpg");
    float: left;
    width:  900px;
    height: 165px;
}
#indholdbox {
    background-image: url("../images/indhold.png");
    background-repeat: repeat-y;
    float: left;
    width: 900px;
    background-color: white;

}
#menu {
    float: left;
    width:  127px;
    height: 310px;
}
#indhold {
    padding-left: 135px;
    padding-right: 15px;
}
#cirkler {
    background-image:url("../images/cirkler.png");
    background-color: white;
    float: left;
    width:  304px;
    height: 183px;
}
#space {
    background-image:url("../images/space.png");
    background-color: white;
    float: left;
    width: 596px;
    height: 49px;
}
#reklame {
    background-image:url("../images/reklame.png");
    background-color: white;
    float: left;
    width:  596px;
    height: 134px;
}
#construction {
    background-image:url("../under-construction.png");
    width:  250px;
    height: 250px;
}
Avatar billede roenving Novice
27. september 2008 - 10:48 #49
-- du kan ikke lave det med css, men med en smule javascript er det ikke svært:

#logo {
    background-image: url("../images/logo.png");
    float: left;
    width: 177px;
    height: 70px;
    cursor:pointer;
}

<div id="logo" onclick="window.location.href='index.html';" title="Gå til forsiden"></div>
Avatar billede roenving Novice
27. september 2008 - 10:49 #50
-- og så bør der være 'noget' i div'en: >&nbsp;</div>

-- els velbekomme '-)
Avatar billede squazz Novice
28. september 2008 - 14:34 #51
Jeg er ikke helt med på dine sidste beskeder roenvig... Og er det også sådan jeg skal lave menuen?
det sjove er nemlig at jeg kan linke i menuen som er billeder, men at jeg ikke kan linke fra logoet med de samme koder :S
Avatar billede squazz Novice
28. september 2008 - 18:40 #52
Jeg fik det til at fungere :)
Men nu tænker jeg bare, er det det samme jeg skal gøre ved menu punkterne? For W3C kan ikke lide min menu...
Avatar billede olebole Juniormester
28. september 2008 - 18:45 #53
Begynd med at rette de fejl, W3C's validator fortæller dig om - sikkert bl.a. noget om, at du mangler alt attributter på dine billeder
Avatar billede squazz Novice
28. september 2008 - 21:02 #54
Det er nemlig dét der er problemet, jeg fatter ikke 100% hvad det er den fortæller mig...
Se fx. dette:

http://validator.w3.org/check?uri=http%3A%2F%2Flindved-im.dk%2Fimutest%2Fevents.html&charset=(detect+automatically)&doctype=Inline&group=0

Som du siger olebole er det manglende alt attributter den beklager sig mest over. Men hvordan løser jeg dette problem?
Avatar billede olebole Juniormester
28. september 2008 - 21:15 #55
Læs 13.8 her:
    http://www.w3.org/TR/html401/struct/objects.html#alternate-text

    <img src="sti/til/billede.jpg" alt="En tekst, som beskriver billedet">

- evt. kan du sætte en tom title attribut, hvis du ikke ønsker, at IE viser et tooltip:
    <img src="sti/til/billede.jpg" alt="En tekst, som beskriver billedet" title="">
Avatar billede olebole Juniormester
28. september 2008 - 21:16 #56
Udskift også:
    <script language="javascript">

- med:
    <script type="text/javascript">
Avatar billede olebole Juniormester
28. september 2008 - 21:19 #57
target attributten er heller ikke tilladt i HTML 4.01, så:
    <a href="http://www.event.imu.dk" target="Nyt vindue">Event</a>

- skal skiftes med:
    <a href="http://www.event.imu.dk" onclick="window.open(this.href,'_blank');return false">Event</a>,
Avatar billede olebole Juniormester
28. september 2008 - 21:19 #58
- så skulle den vist validere  =)
Avatar billede squazz Novice
28. september 2008 - 21:45 #59
Jeg kan ikke bare indsætte en top alt? Hvad skal jeg bruge alt til? er den overhovedet nødvendig?
Avatar billede squazz Novice
28. september 2008 - 22:05 #60
Når jeg spørger om ikke jeg bare kan indsætte en top alt mener jeg tom :P
Avatar billede w13 Novice
29. september 2008 - 00:02 #61
Hvis du indsætter en tom alt, vil w3c validere, men det er jo fuldstændig lige meget, om den validerer, hvis skærmoplæsere og søgemaskiner ikke får noget ud af din alt.

Alt-attributter skal bruges til at forklare, hvad billedet forestiller, så programmer og "robotter" kan registrere det.
Avatar billede olebole Juniormester
29. september 2008 - 14:39 #62
- og det fremgår vel ganske tydeligt af det, W3C skriver bag det link, jeg henviste til  =)
Avatar billede squazz Novice
29. september 2008 - 21:52 #63
Så fik jeg løst problemet, og næsten alle mine sider validerer, dog kan den ikke lide at jeg har brugt <center> til nogle af mine billeder da jeg ikke kunne få det til at virke i CSS...
Avatar billede roenving Novice
29. september 2008 - 22:25 #64
Alt kan løses uden center ...

-- du må gøre noget 'mærværdeligt' !-)
Avatar billede squazz Novice
30. september 2008 - 08:25 #65
"-- du må gøre noget 'mærværdeligt' !-)" Huh? :P
Den forstod jeg ikke helt ;)
Avatar billede olebole Juniormester
30. september 2008 - 10:09 #66
Du må gøre noget mærkværdigt, hvis du ikke kan centrere et billede uden center-tags - og dine forsøg er slået fejl:
    <div style="text-align:center"><img src="pic.gif" alt="Mit billede"></div>
Avatar billede squazz Novice
30. september 2008 - 10:31 #67
Jeg har skrevet det sådan i CSS:

#construction {
    background-image:url("../images/under-construction.png");
    position: center; center;
    width:  250px;
    height: 250px;
}
Avatar billede squazz Novice
30. september 2008 - 10:39 #68
Sry, jeg havde set en lille fejl, og har nu rettet det til:

#construction {
    background-image:url("../images/under-construction.png");
    position: center center;
    width:  250px;
    height: 250px;
}

Har også prøvet

#construction {
    background-image:url("../images/under-construction.png");
    background-position: center center;
    width:  250px;
    height: 250px;
}

Må jeg spørge hvorfor du vil lave den som:

  <div style="text-align:center"><img src="pic.gif" alt="Mit billede"></div>

Snakkede du ikke om at ALT grafisk skulle laves i CSS?
Avatar billede w13 Novice
30. september 2008 - 10:41 #69
style indeholder jo også CSS. Men man ville nok i sidste ende rykke det ud i et stylesheet.
Avatar billede olebole Juniormester
30. september 2008 - 10:56 #70
Det er skam også lavet i CSS, men at jeg valgte at skrive det som inline-styles, var af ren dovenskab - og så kan du jo selv lægge det ind i et stylesheet  =)

Grunden til, jeg skrev det med et img-tag, var blot, at jeg ikke var opmærksom på, du udelukkende bruger baggrundsbilleder. Hvorfor gør du forøvrigt det?
Avatar billede squazz Novice
30. september 2008 - 10:58 #71
Det er det jeg mener... Jeg vil gerne have en så ryddet HTML som muligt...
Men hvordan ville

<div style="text-align:center"><img src="pic.gif" alt="Mit billede"></div>

se ud hvis den blev omskrevet til et stylesheet?

Syntes jo det er noget nær sådan jeg har skrevet det
Avatar billede w13 Novice
30. september 2008 - 11:15 #72
Så sætter du jo en class på:

<div class="center"><img ...></div>

og i CSS:

.center{
  text-align:center;
}
Avatar billede squazz Novice
30. september 2008 - 12:05 #73
Haha, selvfølgelig :D
Nice, tak w13...
Avatar billede squazz Novice
01. oktober 2008 - 08:15 #74
mange tak for hjælpen alle sammen :) Jeg accepterer roenvig svar da det er ham der har svaret op det oprindelige spørgsmål :)
Selve billedgalleriet fandt jeg selv ud af :)
Avatar billede roenving Novice
01. oktober 2008 - 08:20 #75
Skal vi ikke dele, for særligt aktiv kan man vist ikke sige, jeg var i denne tråd ?-)

>>squazz

-- tak for point i øvrigt ;~}
Avatar billede squazz Novice
01. oktober 2008 - 12:06 #76
Egentligt er det dig der har fortjent pointene da det er dig der svarede på de oprindelige spørgsmål, olebole og w13 valgte at hjælpe mig videre, selvom  at jeg egentligt havde fået besvaret mit spørgsmål... Dette kan jeg sagtes give point for, men så skal pointene gives i et andet spg. som jeg linker til herfra...
(er det ikke sådan reglerne er? Det er sådan jeg har opfattet et)
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