Notifikationer

Markér alle som læst Log ud

Slettet bruger

12. august 2007 - 18:08 Der er 18 kommentarer og
1 løsning

CSS - elastisk indholdsfelt?

Hej
Jeg er ved at lave et site udelukkende i CSS, men jeg kan ikke få mit indholdsfelt til at makke ret. Siden ligger på http://raasthoj.dk/v3/. Mit problem er med middle_main, som er det hvide grafik i midten, hvor tekst/billeder skal være. Det vil jeg gerne have skal være elastisk og strække sig afhængigt af skærmopløsning. Jeg har angivet en top- og en bund-værdi, som den skal strække sig mellem og har prøvet med en background-repeat men det virker ikke, det virker heller ikke med en fast eller procentvis height. Nogle ideer?
mvh Jesper

Synes godt om

notes2c Nybegynder

12. august 2007 - 18:51 #1

Hvis du vil gøre brug af css, skal du bruge en fuld doctype

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

Så tror du nærmer dig.

Synes godt om

kongknabe Nybegynder

12. august 2007 - 20:07 #2

Jeg vil dog stærkt anbefale at du bruger en HTML 4.0 strickt doctype - ellers kan du regne med en masse CSS bugs i IE6 :-)

Synes godt om

kongknabe Nybegynder

12. august 2007 - 20:21 #3

Kan i øvrigt ikke helt gennemskue hvad det er du vil og hvad du ikke kan få til at virke..!? - Som jeg ser det lader det da til at det hvide felt i midten fint udvider sig alt efter hvor høj browsren bliver!? - Til gengæld er den måde du har valgt at centrere dit indhold horisontalt på ikke så smart. Hvis browseren bliver for lille forsvinder en del af din side ud til venstre og bliver utilgængelig grundet den negative venstre margin. Her er en bedre måde at centrere indhold horisontalt i CSS:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<html>
<head>
<title></title>
<style type="text/css">

html, body

{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}

#centered_container

{
background: #555555;
width: 750px;
height: 100%;
margin: 0px auto;
padding: 0;
position: relative;
}

</style>
</head>
<body>
<div id="centered_container"></div>
</body>
</html>

Synes godt om

olebole Juniormester

13. august 2007 - 00:20 #4

<ole>

kongknabe >> Undskyld, men det er noget vrøvl. Der er ikke flere CSS-bugs IE6, når du bruger Transitional, end når du bruger Strict.
Mon ikke du har misforstået noget omkring quirks mode? Det har dog intet at gøre med, om du bruger Trans eller Strict

/mvh
</bole>

Synes godt om

kongknabe Nybegynder

13. august 2007 - 17:01 #5

Lader til du har ret - det var jeg ellers overbevist om - my bad :-)

Synes godt om

Slettet bruger

13. august 2007 - 22:00 #6

Jeg har nu sat siden op efter kongknabes CSS-forslag. Men problemet er stadig det samme, det hvide indholdsfelt strækker sig ikke efter skærm-højden...Der er en top og en bund til det hvide felt, men intet grafik i midten?!

Synes godt om

kongknabe Nybegynder

13. august 2007 - 22:06 #7

Tilføje:

position: absolute

til #middle_main :-) - Så virker det i hvert fald i Firefox :-)

Synes godt om

Slettet bruger

14. august 2007 - 11:18 #8

Det gør det :-)
..men det virker ikke i IE 6 :-(

Synes godt om

olebole Juniormester

14. august 2007 - 13:17 #9

Det virker med statsgaranti ... men mon du overhovedet har haft indhold i? Og det ville iøvrigt være tosset at bruge position:absolute. Det er der absolut ingen begrundelse for at gøre ... tværtimod =)

Synes godt om

kongknabe Nybegynder

14. august 2007 - 16:04 #10

Gik udmiddelbart ud fra at det var position absolute der skulle bruges her da feltet i midten var positioneret både i forhold til top og bund - Men det afhænger selvfølglig af hvilket layout du er ude efter.. Hvad skal der ske med din side når der kommer rigtig meget indhold i det hvide felt i midten!? - Er det forstået rigtig hvis du ønsker en side der som minimum altid er lige så høj som ens viewpoint i browseren og så ellers udvider i forhold til indholdet, eller er du mere ovre i noget ala et frameset layout hvor du vil smide en scrollbar ind i det vide felt hvis der kommer for meget indhold!?

Synes godt om

Slettet bruger

14. august 2007 - 16:11 #11

kongknabe, hvis du vil have pointene, så smid lige et svar. Så kan du få pointsene for din css-kode til centrering...Med indhold og både med og uden position:absolute virker det stadig ikke i IE6. Baggrunden strækker sig kun til, hvor teksten stopper...Jeg prøver selv at rode med det eller finder noget hjælp et andet sted...

Synes godt om

kongknabe Nybegynder

14. august 2007 - 16:23 #12

Altså.. IE6 er altid lidt en bitch når det kommer til den slags... Men det kan fixes :-) - Det vigtige er at vide hvordan du gerne vil have at siden skal opføre sig når der kommer meget indhold :-) - Point er jeg ligeglad med - ellers tak :-)

Synes godt om

Slettet bruger

14. august 2007 - 17:29 #13

Nå, men så prøver vi igen, hvis du mener det kan løses. Siden skal opføre sig præcis som den gør i Firefox 2.0, hvor det virker som det skal med position:absolute. Midterfeltet til tekst og billeder (det hvide felt) består af en top (ligger på en fast position målt fra toppen af browseren), en bund (ligger på en fast position målt fra bunden af browseren) og et midterfelt (#middle_main) som skal fylde mellemrummet ud mellem top og bund uafhængigt af, hvor meget indhold, der ligger her...Ligger der mere indhold end der kan være i den pågældende skærmopløsning, skal man selvfølgelig scrolle nedad (feltet skal udvide sig). Vi er ikke ude i noget med at der skal ligge iFrames eller layers i det hvide felt.

Synes godt om

kongknabe Nybegynder

14. august 2007 - 17:34 #14

Ok.. Så kort fortalt er du ude efter et side layout der som udgangspunkt har en højde der er på 100%, men som udvider sig hvis der kommer mere indhold i!? Hmm.. Skal prøve at kigge på det.. Så vidt jeg husker er lige netop denne type layouts lidt besværlige at lave med CSS desværre - men prøver :-)

Synes godt om

kongknabe Nybegynder

14. august 2007 - 18:02 #15

Her et eksempel hvor middel div virker rimeligvis i IE6 også.. Der så dog et par problemer med positionering og grafik, men det er måske noget du selv kan ordne (Kender du til conditional comments? - det er det jeg bruger nederst i CCSet hvor det er komemnteret ud.. Alt der står inde i udkommenteringen læses kun af IE6 eller tidligere versioner - ret dit CSS til IE6 til der! :-))

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<html>
<head>
<title></title>
<style type="text/css">

html, body
{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: #E1E8F7;
}

#centered_container
{
background: url(http://raasthoj.dk/v3/images/middle_main.gif) repeat-y;
width: 980px;
min-height: 100%;
height: auto;
margin: 0px auto;
padding: 0;
position: relative;
}

#left
{
background-image:url(http://raasthoj.dk/v3/images/leftborder.gif);
margin-left: -490px;
position: absolute;
top: 0px;
left: 50%;
width: 50px;
height:100%;
visibility: visible
}
#right
{
background-image:url(http://raasthoj.dk/v3/images/rightborder.gif);
margin-right: -490px;
position: absolute;
top: 0px;
right: 50%;
width: 50px;
height:100%;
visibility: visible
}

#logo
{
background-image:url(http://raasthoj.dk/v3/images/logobg.gif);
top: 0px;
width: 980px;
height:80px;
visibility: visible
}

#menu
{
background-image:url(http://raasthoj.dk/v3/images/menubg.gif);
top: 80px;
width: 980px;
height:30px;
visibility: visible
}
#pic
{
top: 110px;
width: 980px;
height:180px;
visibility: visible;
background-color: #E1E8F7;
}
#middlebar
{
background-image:url(http://raasthoj.dk/v3/images/middlebg.gif);
top: 290px;
width: 980px;
height:23px;
visibility: visible
}
#bottom
{
background-image:url(http://raasthoj.dk/v3/images/bottom.gif);
bottom:0px;
position: absolute;
width: 930px;
height:132px;
visibility: visible
}
#top_main
{
background-image:url(http://raasthoj.dk/v3/images/top_main.gif);
top: 313px;
width: 980px;
height:40px;
visibility: visible
}
#middle_main
{
top: 353px;
width: 980px;
height: auto;
visibility: visible;
}
#bottom_main
{
background-image:url(http://raasthoj.dk/v3/images/bottom_main.gif);
position:absolute;
width: 980px;
height:32px;
bottom:132px;
visibility: visible
}
</style>


</head>
<body>
<div id="centered_container">
<div id="logo">
 
</div>
<div id="menu">
 
</div>
<div id="pic">
 
</div>
<div id="middlebar">
 
</div>
<div id="top_main">
 
</div>
<div id="middle_main">
</div>
<div id="bottom_main">
 
</div>
<div id="bottom">
 
</div>
<div id="left">
 
</div>
<div id="right">
 
</div>
</div>
</body>
</html>

Synes godt om

Slettet bruger

14. august 2007 - 19:47 #16

Det er for fedt, det virker i alle browsere jeg har afprøvet i undtagen opera 8.5 (men den tror jeg nok, jeg kan gennemskue, hvordan jeg får det til at virke i)
Tusind tak for hjælpen, nu skal jeg bare have hældt indhold i (og selvfølgelig have lavet resten af sitet færdig) :-)

Synes godt om

kongknabe Nybegynder

14. august 2007 - 19:53 #17

Så lidt :-)

Synes godt om

Slettet bruger

14. august 2007 - 20:02 #18

Stadig ikke have nogen point?

Synes godt om

kongknabe Nybegynder

14. august 2007 - 20:10 #19

Synes det der point system er lidt dumt - men ellers mange tak :-)

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

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.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS