CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

AnyFellow Mester

14. december 2004 - 16:01 Der er 25 kommentarer og
1 løsning

Problem med skærmopløsning

Jeg er lige gået i gang med at opbygge en hjemmeside i css og html.

Den kan ses på http://test.tkdc.dk

Når siden bliver vist i en skærmopløsning, der giver scroll i siden, forsvinder toppen.

Hvad kan jeg gøre?

Selve hovedboksen er centreret på siden.

Synes godt om

Slettet bruger

14. december 2004 - 16:27 #1

Du skal lige sætte et logo på:
<img src="Img/top.jpg" border="0" width="720" height="100" align="bottom" alt="">

eller noget andet

Synes godt om

fennec Nybegynder

14. december 2004 - 16:28 #2

Det er din top og margin-top på #content, der gør det. Den hurtige løsning er at sætte top til 0 og fjerne margin-top:

#content {
position: absolute;
left: 50%;
top: 0;
width: 776px;
height: 766px;
margin-left: -388px;
color: #5a5a5a;
background-color: #ffffff;
border: 1px solid #000000;
}

Synes godt om

AnyFellow Mester

14. december 2004 - 16:33 #3

ibtage...> Ændrer ikke på noget. Toppen forsvinder stadigvæk.

fennec...> Løser problemet, men hovedboksen er ikke centreret længere på siden, hvilket den skal være.

Synes godt om

fennec Nybegynder

14. december 2004 - 16:38 #4

Det var netop derfor det var den hurtige løsning :o)
Du får desuden et problem hvis du smider tekst i div'en og gør vinduet smallere.

Hvis du vil gøre det skal du til at bruge JavaScript tilat hente skærmbrede/højde, smide det i en tabel eller frames. Der kan måske laves noget med div og centering.

Synes godt om

AnyFellow Mester

14. december 2004 - 16:42 #5

Hehe, let at finde en løsning på et problem, ved at omdefinere problemet ;o)

Jeg er ikke interesseret i at bruge JavaScript til løsningen, da jeg finder det omstændigt.

Synes godt om

fennec Nybegynder

14. december 2004 - 16:50 #6

Har lavet lidt kode, som du måske kan bruge til noget:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
</head>
<style>
div{
padding :0px;
margin : 0px;
background-color: #FFFFFF;
}
</style>
<body>

<div align="center" style="height:100%;background-color: #AAAAAA;">
<table height="100%">
<tr>
<td valign="middle">
<div style="height:300px;width:400px;">
<div style="height:100px;width:400px;background-color: #987654;"></div>
dslvsd
</div>

</td>
</tr>
</table>
</div>
</body>
</html>

Synes godt om

AnyFellow Mester

14. december 2004 - 16:55 #7

fennec...> Ideén er god nok, men tror jeg render i større problemer ved at forsøge at opbygge noget med den blanding af css og tabeller.

Jeg har fuldt styr på placering og kodning inde i min hovedboks. Det er selve placeringen jeg har problemer med.

Synes godt om

fennec Nybegynder

14. december 2004 - 17:04 #8

Det er derfor man "fusker". Du kan sagtens placere den rigtigt verticalt, pga de indbygget funktioner til at centrere med, men højden er straks sværrere, da der ikke er en align på højden (bortset fra på tabeller). Derfor læser man højden med JavaScript, også kan man dynamisk placere boksen, eller også bruger man tabeller.

Synes godt om

fennec Nybegynder

14. december 2004 - 17:10 #9

Nu fandt jeg lige den kode frem jeg bruger. Den er anderledes end det jeg lavede tidligere:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
</head>
<style>
body{
padding :0px;
margin : 0px;
background-color: #AAAAAA;
}

div{
padding :0px;
margin : 0px;
background-color: #FFFFFF;
}
</style>
<body style="width:100%">
<table style="height:100%;width:100%;">
<tr>
<td align="center" valign="middle">
<div id="MainWindow" style="height:766px;width:776px;border:1px solid black;" align="left">
<div id="TopWindow" style="height:70px;width:776px;background-color: #987654;">Top Menu</div>
Data her.....
</div>
</td>
</tr>
</table>
</body>
</html>

Synes godt om

AnyFellow Mester

14. december 2004 - 18:36 #10

Den fungerer fint... lige indtil jeg sætter en korrekt doctopy på:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Synes godt om

zyph Nybegynder

14. december 2004 - 20:14 #11

Altså, forstår ikke helt dit problem, og hvorfor du har givet dine 2 bokse position?

Kan du bruge http://zyph.dk/eksempler/kfisker til noget?

Synes godt om

Cars10 Praktikant

14. december 2004 - 21:07 #12

Jeg har selv brugt det her: http://www.quirksmode.org/css/centering.html
Prøv at se om det virker for dig. Det kan nemlig være lidt forskellig alt efter hvilken server det ligger på og skriv lige hvilken du bruger.

Synes godt om

AnyFellow Mester

14. december 2004 - 22:05 #13

zyph...> Prøv at lade din browser være i et vindue, og så lav længden af siden mindre, så forsvinder den øverste boks ud af billedet, uden mulighed for at scrolle til den.

Hvorfor skulle jeg ikke give mine bokse positioner?
Er det ikke ret normalt at ville layout'e sin side på en bestemt måde?

Kan ikke bruge eksemplet, da det ikke er en på forhånd fastsat størrelse boks, men derimod et layout hvor sidens længde tilpasser sig brugerens opløsning.
Det ønskede er en boks på f.eks. 700x700px der altid er centreret. Kører brugeren en opløsning der gør at siden er for stor, skal scrollbaren give mulighed for stadigvæk at kunne se alt indhold.

cars10...> Synes klart det var en mulighed, lige indtil den korrekte doctype blev sat på, så fungerede det ikke længere.

Så vidt jeg ved, er det da ikke serveren der afgør hvordan en klient skal vise en hjemmeside???

Synes godt om

zyph Nybegynder

15. december 2004 - 13:05 #14

kfisker, toppen forsvinder da ingensteder i mit eksempel? Hvis sidens længde skal tilpasse sig brugerens opløsing, hvorfor bruger du så ikke bare % til at definere længden? Eller skal den bare centrere sig efter browservinduets størrelse og have fast vidde/længde?

Du må undskylde, at jeg ikke lige forstår hvad du vil? :)

Synes godt om

AnyFellow Mester

15. december 2004 - 14:16 #15

zyph...> Har nu heller ikke skrevet at toppen forsvinder i dit eksempel.

Jeg vil lave lave en side i et fast mål. Det kunne være eks. 700x700px. Denne boks skal centrere sig efter browservinduets størrelse, uden at indholdet går tabt, såfremt brugeren bruger lavere opløsning.

Synes godt om

lyf Nybegynder

15. december 2004 - 16:59 #16

Okay, forstod jeg bare ud fra den foerste sætning i din tidligere kommentar :)

Du kan jo sagtens lave en boks med faste mål, som centrerer sig i alle opløsninger, men indholdet går jo logisk nok tabt, hvis brugeren fx koerer 800x600 i dit tilfælde.

Det eneste du kan goere så, er vel at bruge overflow: auto; så der kommer scrollbars hvis siden er for stor?

Synes godt om

AnyFellow Mester

15. december 2004 - 17:21 #17

Øhhh er lyf og zuph en og samme person??

Kender masser af løsninger til at omgå problemet, men ville check om der ikke fandtes en løsning.

Principielt vil man altid kunne komme ud for en bruger der har så mange toolbars og dit og dat, at hans browservindue vil være for lille til at vise siden i hele højden.

Synes godt om

AnyFellow Mester

18. december 2004 - 14:36 #18

Har valgt ikke at benytte en "komplet" centrering, da det åbenbart ikke er muligt uden at bruge JS.

Efter at have kigget meget rundt i de forskellige spørgsmål på eksperten, synes jeg det er skuffende at der er så mange der foreslår løsninger der ikke fungerer hvis man forsøger at holde sig op ad standarderne.

Er der nogen der vil have point, kan i lægge et svar.

Synes godt om

lyf Nybegynder

18. december 2004 - 14:47 #19

Ja, mig og zyph er en og samme person :)

Der er der ingen der siger, at man ikke kan lave en komplet centrering uden JS, det kan man da sagtens. Du kan jo centrere både vertikalt og horisontalt med CSS, hva mere skal du bruge?

Synes godt om

AnyFellow Mester

18. december 2004 - 15:25 #20

lyf...> Det er korrekt at du godt kan lave en komplet centrering med CSS, dog ikke hvis indholdet også skal kunne ses i en meget lav opløsning, så forsvinder indholdet.
Det er jo lige netop det der er mit oprindelige problem.

En god idé ville være at skynde dig at få nedlagt den ene bruger.
Det er ikke tilladt at have mere end én bruger på eksperten:

Synes godt om

lyf Nybegynder

18. december 2004 - 18:53 #21

Oh, den skal jeg nok lige få nedlagt. Det vidste jeg ikke, men gad ikke hedde zyph. Jamen, det er jo klart at alle designs, når de bliver vist i en lille opløsning, ikke kan vises.

Hvis den skal vises i de mindre opløsninger, bliver du nød til enten at lave flere designs eller lave det i %.

800x600 plejer nu heller ikke at være noget problem. 750px i bredden er en fin størrelse. Tekst skal ikke smides bredere imo :)

Synes godt om

AnyFellow Mester

19. december 2004 - 11:01 #22

Nej, det er jo lige netop ikke klart.
Har jeg f.eks. lavet en side og besluttet at den skal kunne ses bedst fra 800x600 og opefter, vil jeg da også gerne have at folk med en opløsning på 640x480 stadigvæk kan se siden, også selvom der er scroll både verticalt og horizontalt.

Synes godt om

lyf Nybegynder

19. december 2004 - 17:09 #23

Ja, det forstår jeg også godt, men vil du så ikke lige skrive dit problem endnu en gang, da jeg ikke helt kan se det længere. Dit problem var i starten, at designet hoppede ud af browservinduet i små oploesninger, men det goer mit eksempel f.eks. ikke? Det goer det nuværende på din side heller ikke?

Synes godt om

AnyFellow Mester

19. december 2004 - 19:26 #24

Jeg kan ikke oploade kodningen med problemet i længere, da jeg har droppet at løse det med rent CSS, og har lavet en boks der hænger i toppen af siden i stedet.

Problemer med dit eksempel er netop at det ikke er en boks af en fast defineret størrelse. Dit eksempel tilpasser sig browservinduet, hvilket ikke var ønsket.

Endnu en gang, jeg ønsker følgende:
- 1 boks i størrelsen 766px x 766px, centreret både verticalt og horizontalt (kan laves uden de store problemer).
- kodningen lavet i css (heller ingen problemer her)
- Brugere med en opløsning på 640x480 skal kunne se indholdet på siden, vha. scrollbars (problemet her er netop af indholdet forsvindet ud af billedet, når man laver vinduet mindre end indholdet, og det er ikke muligt at have overflow=auto i hvert enkelt felt.)

Efter hvad jeg har kunnet snuse mig frem til, er det ikke muligt at lave ovenstående i CSS.

Det er dog muligt at lave det med både CSS og tabeller, dog ikke med gyldig doc-type.

HTML-kode alá:

<table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%">
<tr align="center" valign="middle">
<td>
<table border="0" cellpadding="0" cellspacing="0" width="612" height="400" bgcolor="black">
<tr>
<td>
INDHOLD HER
</td>
</tr>
</table>
</td>
</tr>
</table>

fungerer ikke med korrekt doc-type sat.

Synes godt om

lyf Nybegynder

20. december 2004 - 07:41 #25

Arh, tak. Nu fandt jeg ud af dit problem, men kan desværre ikke hjælpe dig med den :| Jeg løber ind i samme problem som dig: www.zyph.dk/eksempler/kfisker

Synes godt om

AnyFellow Mester

20. december 2004 - 08:10 #26

Lukker

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
Bredde på div elementer Af dane022 i HTML	2	16/02/202408:29	20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML	2	21/12/202322:51	22/12/202308:03
validering <input tlfnr. Af slein55 i HTML	5	15/10/202311:43	15/10/202314:51
Link fra form input Af jnrmgs i HTML	9	19/09/202319:10	23/09/202313:11
includere i HTML Af slein55 i HTML	3	15/09/202313:47	16/09/202309:40

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