Søg
Avatar billede lasseq Nybegynder
07. februar 2004 - 19:09 Der er 23 kommentarer og
1 løsning

Relative værdier i CSS

Hej
Jeg skal til at designe en side uden brug af rammer, og har i den
forbindelse valgt at opbygge sitets struktur vha.
CSS-teknologien.

Altså: til venstre skal der være en tom udfyldningsplads.
I midten skal der være selve indholdet være med en fast
bredde, fx 700px.
Til højre  skal der sidt være endnu en udfyldningsplads.

Det er i sig selv ikke noget problem at lave selve indholdssiden,
da den benytter en absolut størrelse. Det andet er lidt et
problem: hvordan sættes de til en relativ værdi, så de selv
udnytter den resterende plads?

Hvordan kan det være at man ikke kan bruge fx "height: 100%" når
man har valgt "position: absolute"? Og hvad kan et. alternativ
være?

Håber meget på svar...

Venlig hilsen
Lasse
Avatar billede avj Nybegynder
07. februar 2004 - 19:15 #1
prøv at kikke her

http://www.webdesign101.dk/xhtml/css/index.php

//avj
Avatar billede skovenborg Nybegynder
07. februar 2004 - 23:44 #2
Kan du ikke bare bruge det gode gamle centreringstrick:
<body>
<div style="width:700px;margin:0px auto">
INDHOLD
</div>
</body>
Avatar billede lasseq Nybegynder
08. februar 2004 - 12:37 #3
Mange tak for jeres svar begge to!
Skovenborg -> Det var lige det jeg havde brug for!
Men... Der mangler lige en detalje...
Imellem

<div style="width:700px;margin:0px auto">
INDHOLD
</div>

kunne jeg godt tænke mig en header med en fastsat størrelse og så et andet "div" hvor indholdet kunne være. Indholdet vil jeg gerne have til at tage resten af pladsen (height).

Jeg har prøvet følgende, men får det ikke til at virke helt:
#top {
    background-color:#000000;
    height: 150px;

}
#indhold {
    background-color:#996666;
    height: auto;
}
----
<div style="width:700px;margin:0px auto">
    <div id="top">HEADER</div>
    <div id="indhold">INDHOLD</div>
</div>
Avatar billede skovenborg Nybegynder
08. februar 2004 - 12:55 #4
jo, men du bliver nok nødt til at skrive det sådan her:
<div style="width:700px;margin:0px auto;height:100%">
    <div id="indhold">
    <div id="top">HEADER</div>
    INDHOLD
    </div>
</div>

også skal stylen skrives sådan her:
<style type="text/css">
BODY,HTML {height:100%;}
BODY {margin:0px;padding:0px;}
#top {
    background-color:#000000;
    height: 150px;

}
#indhold {
    background-color:#996666;
    height:100%;
}
</style>

Tricket med at sætte en height til 100% af siden er at også give HTML en højde på 100%.
Avatar billede lasseq Nybegynder
08. februar 2004 - 13:03 #5
Tak endnu engang.
Jeg vil gerne have scroll-baren, der befinder sig yderst til højre "flyttet" hen til indholdsboksen. Hvordan kan det bedst klares?
Avatar billede lasseq Nybegynder
08. februar 2004 - 13:10 #6
Når jeg sætter en baggrund ind under "indhold" sker der intet:
#indhold {
    background-color:#996666;
    height: 100%;
    background-image:url(TopHeader_02.gif);
    background-attachment: fixed;
    background-position: left top;
    background-repeat: no-repeat;
}
Mærkeligt nok, hvis jeg fjerner "background-repeat" så vises grafikken ganske vist, bare gentaget - hvilket ikke er formålet?
Avatar billede skovenborg Nybegynder
08. februar 2004 - 13:24 #7
det skyldes at baggrunds-billedet er skjult bag headeren. Du kan bare gøre sådan i stedet:
#indhold {
    background-image:url("logo.png");
    background-position: 0px 150px;
    background-repeat:no-repeat;
    background-color:#996666;
    height:100%;
}
Avatar billede skovenborg Nybegynder
08. februar 2004 - 13:33 #8
Den med scrollbaren er dog lidt sværere at få til at virke ordentligt. Umiddelbart kan du løse det på denne måde:
<body>
<div id="contentDiv">
    <div id="top">HEADER</div>
    <div id="indhold">
    INDHOLD
    </div>
</div>
</body>

Læg mærke til at jeg har ændret HTML igen igen.

<style type="text/css">
BODY,HTML {height:100%;}
BODY {margin:0px;padding:0px;overflow:hidden;}
#contentDiv {
    width:700px;
    margin:0px auto;
    height:100%;
    overflow:auto;
    background-color:#966;
}
#top {
    background-color:#000000;
    height: 150px;

}
#indhold {
    background-image:url("TopHeader_02.gif");
    background-position: top left;
    background-repeat:no-repeat;
    background-attachment:scroll;
    overflow:auto;
}
</style>
Avatar billede skovenborg Nybegynder
08. februar 2004 - 13:35 #9
scrollbaren kommer til at være på hele boksen - altså også der hvor headeren er. Håber det er i orden lige nu, da det er den bedste løsning jeg umiddelbart kunne komme på hvis resten samtidig skulle virke :-)
Avatar billede lasseq Nybegynder
08. februar 2004 - 13:51 #10
Tak endnu engang. Jeg har prøvet begge modeller - enten med scrollbaren inde i "indhold" og den gamle med scrollbaren i bodyen. Jeg kan egentlig bedst lide den gamle når alt kommer til alt - og nu virker baggrunden også :D

Til jer begge to: Send mig et "svar" og jeg skal give jer jeres point for ulejligheden :D
Avatar billede skovenborg Nybegynder
08. februar 2004 - 14:10 #11
velbekomme :-)
Avatar billede avj Nybegynder
08. februar 2004 - 15:57 #12
Skovenborg har fortjent alle point da jeg også lærte noget af hans svar

//avj
Avatar billede lasseq Nybegynder
08. februar 2004 - 20:38 #13
Hvis du insisterer, giver jeg Skovborg alle pointene. Jeg har lært noget fra det link, avj har givet mig og en hel del fra Skovenborg, tak begge :D
Avatar billede skovenborg Nybegynder
08. februar 2004 - 21:14 #14
selv tak :-)

avj >> Hvis du fortryder kan vi altid løse det. Glad for også at kunne hjælpe dig lidt . Også et meget fint link du kom med - den skal jeg lige se nærmere på ;-)
Avatar billede avj Nybegynder
08. februar 2004 - 22:22 #15
selv tak poient er ikke alt, kun glad for at kunne hjælpe
:-)
//avj
Avatar billede lasseq Nybegynder
11. februar 2004 - 22:41 #16
Hej igen...
Ved godt at spørgsmålet egentlig er besvaret, men der er noget der giver en mærkelig virkning, når jeg sætter et baggrundsbillede til at være aller nederst på siden.
Baggrundsbilledet skal nemlig vises neder på siden altid; uanset hvor meget "fyld" der er i indholdsruden. Jeg har vedlagt selve html'en og CSS'en. Det er "#bund" der er det nederste baggrunds-div.

html:
<div style="width:700px;margin:0px auto;height:100%;">
    <div id="indhold">
            <div id="top"></div>
            <div id="indholdtypografi">
    <!-- TemplateBeginEditable name="indhold" -->
        indhold
    <!-- TemplateEndEditable -->
            </div>
        <div id="bund"></div>
    </div>
</div>

CSS:
body {
    margin: 0px;
    padding: 0px;
    background-color:#CFCBBE;
}
#top {
    background-color:#000000;
    height: 146px;
    background-image:url(TopHeader_01.gif);
    background-attachment: scroll;

}
#bund {
    height: 163px;
    background-image: url(Nederste_collage_01.jpg);
    background-attachment: fixed;
    background-position: bottom;
}
#indhold {
    background-color:#CFC298;
    height: 100%;
    background-image:url(TopHeader_02.gif);
    background-attachment: scroll;
    background-position: left top;
    background-repeat: no-repeat;
    background-position: 0px 146px;
}
#indholdtypografi {
    padding-left: 10px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:13px;
    line-height: 15px;
}
BODY,HTML {height:100%;}


---
Håber I vil hjælpe mig endnu engang!
Avatar billede skovenborg Nybegynder
12. februar 2004 - 02:56 #17
hmm, jeg kunne ikke undgå at lægge mærke til at siden ikke centrerer i IE - mærkeligt da margin:0px auto; plejer at virke. Desuden kan der opstå problemmer i mozilla hvis der kommer for meget tekst og der er specificeret en bestemt højde, da teksten blot vil gå ud over kanten i stedet for at forstørre den. Løsningen burde gerne virke i både mozilla og IE (og til dels Opera, hvor der er lidt problemmer med bundens bredde). Jeg har desuden lige slettet den div du centrerede med - du kan ligeså godt bruge din indholdsboks til det:

    <div id="indhold">
            <div id="top"></div>
            <div id="indholdtypografi">
    <!-- TemplateBeginEditable name="indhold" -->
        indhold

    <!-- TemplateEndEditable -->
    <div id="bund"></div>
            </div>

    </div>

og så CSS'en:
body {
    margin: 0px;
    padding: 0px;
    background-color:#CFCBBE;
}
#top {
    background-color:#000000;
    height: 146px;
    background-image:url("TopHeader_01.gif");
    background-attachment: scroll;
    width:100%;

}
#bund {
    height: 163px;
    background-image: url("Nederste_collage_01.jpg");
    background-attachment: fixed;
    background-position: bottom;
    position:absolute;
    left:0px;
    bottom:0px;
    width:100%;
}
#indhold {
    background-color:#CFC298;
    height: 100%;
    background-image:url("TopHeader_02.gif");
    background-attachment: scroll;
    background-position: left top;
    background-repeat: no-repeat;
    background-position: 0px 146px;
    position:relative;
    text-align:left;
    width:700px;
    margin:0px auto;
}
DIV > #indhold {
    height:auto;
    min-height:100%;
}
#indholdtypografi {
    padding-left: 10px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:13px;
    line-height: 15px;
    padding-bottom:183px;

}
BODY,HTML {height:100%;text-align:center}
Avatar billede skovenborg Nybegynder
12. februar 2004 - 03:01 #18
hov, hvis man sletter den yderste div skal man lige rette noget:
BODY > #indhold { /* altså BODY i stedet for DIV */
    height:auto;
    min-height:100%;
}

Det overstående er et lille CSS trick hvor man udelukker IE ved at bruge en selector den ikke forstår (i dette tilfælde >). På den måde kan man rette den lille fejl med højden ;-)
Avatar billede lasseq Nybegynder
12. februar 2004 - 15:37 #19
TAK endnu engang... Jeg lærer mere og mere!
Jeg har fået et mærkeligt problem (dette lover jeg skal blive den sidste i denne tråd!).
Jeg har en horisontal menu placeret inden for "top"-divet. Koden ser således ud:
-------------
<style media="all" type="text/css">
.menu {
    position: absolute;
    top: 146px;
    background-color:#000000;
    width: 700px;
    height: 14px;
    filter:alpha(opacity=50);
}   
a.hovedmenu {
    font-family:Arial, Helvetica, sans-serif;
    color:#FFFFFF;
    width: 100%;
    font-size: 12px;
    font-weight:bold;

}
</style>

-------------

Bagefter er der genereret en hel del Javascript-kode (dette er en Dreamweaver-popup-menu). Og derefter mine links.

Inden jeg fik det seneste tip fra dig virkede linksene fint, hvor jeg havde indstillet dem til popup-menuerne skulle komme under dem, når musen blev ført hen over et pågældende link. Efter din seneste kode er dette ikke længere tilfældet - nu vises opopup-menuerne et par hundrede pixels længere til højre fra selve linket. Jeg kan naturligvis sætte det op sådan at popup-menuerne vises med en "x" på -200 og så ser det korrekt ud - dog ikke i Windows 98 (jeg bruger XP).

Har du et forslag?

JEg skal lige sige at ellers "virker" hele siden upåklagelig.
Avatar billede skovenborg Nybegynder
16. februar 2004 - 23:21 #20
undskyld forsinkelsen...

Jeg tror problemmet er at dine dreamwaver menuer bruger en absolut positionering - hvilket de fleste tror betyder en position i forhold til siden. I virkeligheden bliver et element med position:absolute; placeret efter første element det ligger indeni, som selv er blevet positioneret - fx med position:relative;
Det du oplever er (hvad jeg tror i hvert fald) at du regner med at menuerne bliver placeret efter siden, men da din #indhold div har propertyen position:relative; bliver dine menuer placeret efter den i stedet. Umiddelbart vil det ødelægge footeren hvis du fjernede position:relative - så i stedet vil jeg anbefale dig at lave dine javascript menuer før (eller efter) du starter på din indholdsdiv. På den måde bliver menuerne placeret efter siden og ikke indholdsdiven.
Avatar billede lasseq Nybegynder
17. februar 2004 - 09:25 #21
hej Skovenborg
Mange tak for dit svar. Jeg vil prøve det af efter første givende lejlighed.
Tak for hjælpen.
Jeg ser nu tråden som lukket :)
Avatar billede lasseq Nybegynder
03. april 2004 - 14:29 #22
hej igen!

Jeg ved godt tråden er lukket, men jeg har et problem, jeg håber du  vil hjælp mig med, skovenborg...

Jeg har set at ved udskrift vises siden forkert - teksten "går ud over" højre-marginen... Jeg har prøvet at sætte følgende ind bagefter det andet stylesheet:
<style type="text/css" media="print">
#indholdtypografi{
    margin: 0px;
}
BODY,HTML {
    text-align:left;
}
</style>

(ligger på http://www.soren-ervig.com/website/dansk/livshistorie.asp)

Men det virker alligevel ikke.... Har du nogen forslag?
Avatar billede avj Nybegynder
03. april 2004 - 14:45 #23
hej
jeg tror det ville være en god ide hvis du oprettede et nyt spørgsmål. på den måde kommer du ud til mange flere af eksperterne det er jo ikke alle der har været i kontakt med denne tråd, og det kunne jo være at skovenborg er taget på 3ugers ferie :-). derudover kunne det jo være at andre kunne bruge svaret på dit spørgsmål, og det har jo en lidt anden vinkel end relative værdier.

bare et venligt tip. :-)

//avj
Avatar billede skovenborg Nybegynder
08. april 2004 - 16:19 #24
avj >> Det har du helt ret i - og jeg har faktisk været på ferie, selvom det kun var 5 dage ;-) Men man har selvfølgelig lov til at spørge.

Her er en ref til spørgsmålet, som blev oprettet i stedet:
http://www.eksperten.dk/spm/485354
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
I går 15:02 Gemme besked fra Facebook / Messenger Af lurup i Sociale medier
29/0820:17 Kan man kopiere en DVD og afspille den på * Linux Mint - Cinnamon - 22.1 - "Xia" * ? Af Ikke-ekspert i Linux
27/0821:03 Kan man få Word viewer gratis Af Strawberry i Word
26/0813:28 Findes der en brugsanvisning til : "ONKYO Stereo Casette - Tape Deck - R1" Af Ikke-ekspert i Musik & videoafspillere
24/0820:07 Libra Office 26.2.5.2 - Er sort - Kan an ændre til lysere baggrund ? (Windows 11) Af Ikke-ekspert i Office & Kontorpakker
White papers
Flere white papers »