Søg
Avatar billede amazon Nybegynder
18. september 2006 - 14:41 Der er 12 kommentarer og
1 løsning

CSS-hjælp

Jeg er rimelig ny mht. css og forsøger at lære det ved at prøve mig frem og læse diverse tutorials. Har lavet noget, som jeg selv mener bør virke (men fakta er at det gør det altså ikke...) Problemerne er bl.a. at min spaltestreg vil ikke strækkes og min tekstkasse vil ikke vises. Desuden bliver min anden mellemrubrik ikke hvid som den første... Hjælp?!

eksternt stylesheet:
.mlrubrik { color: #fff; background-color: #039; width: 175px; margin-bottom: 5px; padding-top: 5px; padding-bottom: 5px; padding-left: 5px; }

.175pxramme { background-color: #b0e0e6; margin-bottom: 5px; padding-top: 5px; padding-bottom: 5px; padding-left: 5px; width: 175px; border-color: #036; border-width: 1px; }

#spalte1 { width: 175px; float: left; margin-right: 15px; border-right-color: #036; border-right-width: 1px; }

#spalteluft { width: 1px; height: 100%; float: left; padding-right: 10px; padding-left: 10px; }

#spalte2 { width: 175px; float: left; margin-left: 15px; }




Html:

        <link href="css/basic.css" rel="stylesheet" type="text/css" media="all" />

    </head>

    <body leftmargin="0" marginheight="0" marginwidth="0" topmargin="0">

        <div id="spalte1">
        <p>Dette er almindelig brødtekst og lidt mere og lidt mere osv. osv.</p>
        <p>
        <div class="mlrubrik">Mellemrubrik </div>
        mere brødtekst og mere og mere og mere.
<p>&nbsp;</p>
    </div>

<div id="spalteluft">
        <img src="illu/brik_003366.gif" alt="" height="100%" width="1" border="0" /></div>

        <div id="spalte2">   
            <div class="175pxramme">
            <p>Tekst i kasse og mere og mere og mere. Dette er almindelig brødtekst og lidt mere og lidt mere osv. osv.</p>
        </div>
        <p></p>
        <p>og almindelig tekst igen</p>
       
        <div class="mlrubrik">
            <p>Og lidt mere <br />
                mellemrubrik igen igen</p>
        </div>
       
        <p>og almindelig tekst igen</p>
</div>
    </body>
Avatar billede jowii Nybegynder
18. september 2006 - 15:28 #1
Det er en god idé hvis du giver dokumentet en doctype, så du kan få din side valideret. Der er et par fejl på den.

Bl.a. bruger du gammelt kode - fx skriver du marginheight osv. Det er der ikke noget der hedder.

Der hvor det går galt med baggrundsfarven, er fordi at '175pxramme' ikke bliver fundet. HVorfor skriver du ikke lige som du har gjort ved de andre #ramme eller lignende. Som det er nu kan den ikke finde stien, og derfor ignorer den reglerne du giver kassen. Prøv at ret 175pxramme - sæt eventuelt en havelåge foran så det bliver ligesom alt andet, så er det mere overskueligt.. Prøv så igen, det skulle gerne hjælpe.

Hvad er det helt præcist prolemet med spalten er - hvordan ønsker du det skal se ud?

PS. Har du mulighed for at rette dine valideringsfejl, ville det også hjælpe dig godt på vej. Se her http://validator.w3.org/
Avatar billede amazon Nybegynder
18. september 2006 - 15:48 #2
Det var bare for ikke at have for meget uvæsenligt med, men hele html-filen hedder index2.htm og indeholder:

<!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">

    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <meta name="generator" content="Adobe GoLive" />
        <title>Min CSS-test</title>
        <link href="css/basic.css" rel="stylesheet" type="text/css" media="all" />
        <meta name="description" content="generic" />
    </head>

    <body leftmargin="0" marginheight="0" marginwidth="0" topmargin="0">

        <div id="spalte1">
        <p>Dette er almindelig brødtekst og lidt mere og lidt mere osv. osv.</p>
        <p>
        <div class="mlrubrik">Mellemrubrik </div>
        mere brødtekst og mere og mere og mere.
<p>&nbsp;</p>
    </div>

<div id="spalteluft">
        <img src="illu/brik_003366.gif" alt="" height="100%" width="1" border="0" /></div>

        <div id="spalte2">   
            <div class="175pxramme">
            <p>Tekst i kasse og mere og mere og mere. Dette er almindelig brødtekst og lidt mere og lidt mere osv. osv.</p>
        </div>
        <p></p>
        <p>og almindelig tekst igen</p>
       
        <div class="mlrubrik">
            <p>Og lidt mere <br />
                mellemrubrik igen igen</p>
        </div>
       
        <p>og almindelig tekst igen</p>
</div>
    </body>

</html>

------------
Jeg bruger (som det fremgår af meta'erne) Adobe GoLive som min editor, og den kan ind i mellem lave lidt uorden i koderne, men det synes jeg ikke er tilfældet her. Grunden til at jeg ikke har min 175pxramme som en #ramme er at jeg gerne vil kunne bruge den generelt på siden, og ikke bare én gang.

Og så havde jeg en drøm om, at jeg gerne ville have spalterne adskilt med en lodret streg, der fylder 100% fra top til bund.

Du kan se eksemplet her: http://www.anjak.dk/index2.htm
Avatar billede amazon Nybegynder
18. september 2006 - 15:53 #3
min skille streg er pt angivet som følger:

#spalteluft { width: 1px; height: 100%; float: left; padding-right: 10px; padding-left: 10px; }

Jeg er klar over, at der er problemer med %-angivelser af højder, især i IE, men kan ikke helt blive klog på hvordan man kommer udenom det..!
Avatar billede jowii Nybegynder
18. september 2006 - 21:45 #4
Men der er da stadigvæk et par valideringsfejl? Hvorfor bruger du utf8?
Avatar billede jowii Nybegynder
18. september 2006 - 21:53 #5
Hvis du fx skriver .ramme og angiver en masse deklarationer, så kan den godt bruges flere gange - det er da ikke noget problem?

Du kunne jo også lave det som p'er. fx:

p.roed {background-color: red; float: right;}
<p class="roed">Tekst, tekst og mere tekst</p>
Avatar billede jowii Nybegynder
18. september 2006 - 22:05 #6
Og mht stregen, så aner jeg ikke hvordan det skal løses. Jeg er selv i gang med at finde en løsning på det problem lige nu. Mange vil med det samme sige at det er fordi at marginerne går ind over spalten, men sådan er det jo ikke i dit tilfælde, så jeg ved det virkelig ikke. Du kunne selvfølgelig lave en border-right, på dine tekstallementer, og give dit sidste element en meget stor margin/padding bottom, men jeg ved ikke hvor sikkert det er. Beklager..

Måske de andre har et bud?
Avatar billede amazon Nybegynder
19. september 2006 - 11:06 #7
Hmmm. Jeg er jo så forvænt mht. automatisk genereret kode fra GoLive, så jeg har ikke spekuleret synderligt i betydningen af charset (sagde jeg det højt..?! :-O)
Men jeg har fundet en skabelon fra Stu Nicholls site, som jeg har rettet til til mit seneste site, og da han brugte nedenstående har jeg også brugt det, eneste tilretning er lang:="da" ... var det ikke rigtig rettet..? :

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

    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />

------------
Ellers har jeg før omgået de lodrette streger ved en tabel indeholdende en td med sort gif-brik. Men nu er det jo CSS det gælder, så den hopper du nok ikke på!
Avatar billede jowii Nybegynder
19. september 2006 - 18:18 #8
Jo det er rigtig sådan her: xml:lang="da"

Men i vesteuropa bruger man charset=ISO-8859-1 jeg er ikke selv 100% vidende inde for 'charset-området' men bruger du den, kan du få valideret din side, og dermed rettet dine fejl. Der er ikke så mange fejl, men en enkelt eller to, kan også ødelægge resten af sidens kode, og skabe problemer..

Mht at bruge .ramme flere gange. Kan du så ikke gøre det som tidligere nævnt? angive på p'er?
Avatar billede amazon Nybegynder
23. september 2006 - 16:15 #9
Jeg holder mig til utf-8 da jeg gerne vil kunne skrive æ-ø-å i min kode...

Jeg tror ikke jeg følger dit råd med at lave det på <p> for så skal jeg have lidt flere div'er end jeg finder nødvendigt, og jeg afskærer mig fra muligheden for at mindske luft under ved kun at bruge </br>

Jeg er kommet frem til nedenstående, bl.a. ved at nærstudere kildekoder fra http://www.cssplay.co.uk/layouts/bodyfix.html



.ramme1sp180 {background-color:#036; color:#fff; font-weight: 700; display:block;
width:180px; height:auto; padding: 2px 5px 2px 5px;
}

og så har jeg lavet disse containere:

#spalte1 { position: absolute; visibility: visible; z-index: 6;
width: 190px; height: 100%; margin-left: 12px; padding-right: 10px;
background: url(../illu/bg_spalte1.gif); }


#spalte2 {
width: 365px; height: 100%; left: 212px; padding-right: 10px;
background: url(../illu/bg_spalte2.gif); position: absolute; visibility: visible; }


#spalte3 {
width: 180px; left: 598px;
position: absolute; visibility: visible; }
Avatar billede amazon Nybegynder
23. september 2006 - 16:17 #10
Og mht. spaltestregerne, så løste jeg det ved at lave dem i baggrundsbilledet for spalterne ;-)
Avatar billede amazon Nybegynder
23. september 2006 - 16:18 #11
Jeg er i denne proces blevet lidt klogere (lidt har også ret!) på hvad css er, så tak for hjælpen og smid et svar!
Avatar billede jowii Nybegynder
14. november 2006 - 18:17 #12
Efterhånden lang tid siden, men faldt lige over denne tråd. Har lige skimtet den igennem, og synes du fandt frem til dine fejl uden min hjælp. Behold hellere pointsne selv :-)
Avatar billede amazon Nybegynder
28. november 2006 - 21:27 #13
Jamen så lukker jeg den her! - Tak for hjælpen alligevel!
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

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

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
27/0714:34 Hjælp til at kunne skanne negativer på Plustek 8300i SE Af Mariann i Foto & video
27/0713:58 Mapperne Dokumenter og Overførsler er forsvundet efter geninstallation af Win11 Af bragger i Windows
25/0713:55 Ukendt sender e-mails fra - og til min e-mail adresse Af mort1 i Andet sikkerhed
24/0711:08 Forskel mellem klokkeslet start aften slut næste morgen Af krasmussen i Excel
23/0715:10 WINDOWS KOMPABILITET Af snestrup2000 i Windows
White papers
Flere white papers »