Avatar billede jih Nybegynder
13. juni 2005 - 10:22 Der er 9 kommentarer og
1 løsning

CSS ødelægger side på nogle opløsninger

hey... siden vi taler om er http://www.48pages.net/ ..

jeg har lavet layout'et i CSS .. det jeg så tænkte på er at på nogle skærmopløsninger bliver siden helt ødelagt... billederne ligger på de forkerte pladser og sådan .. de 4 hjørnebilleder omkring iframen, skal ligge på hjørnet, men på nogle computere ligger de HELT forkert.. hvorfor er det lige de gør det..? jeg har ikke tænkt mig at lave om i koden eller noget, siden vi i øjeblikket taler om at skifte design på hjemmesiden .. så vi skal lave det hele om fra scratch af.. så tænkte jeg hvordan vi kan lave det sådan uden at bruge CSS..?

Vi har tænkt os at lave det om til noget lignende med dette.. trommespilleren fra bandet og mig arbejder sammen om at lave siden, og han har tegnet dette i paint shop pro / photoshop..
http://webpsycho.users.whitehat.dk/files/layout.jpg

kan bare ikke rigtigt se hvordan det kan gøres uden brug af CSS... vil gerne bruge CSS, siden jeg tænkte at det ville helt klart se bedre ud.. og være nemmere at stille op.. så kan det bruges, og alligevel kunne ses normalt på alle computere..? skal jeg bare kigge væk fra "position" styles..?

// WebPsycho
Avatar billede olebole Juniormester
13. juni 2005 - 10:37 #1
<ole>

Not Found
The requested URL /intro/1400x1050/intro.htm was not found on this server.

/mvh
</bole>
Avatar billede olebole Juniormester
13. juni 2005 - 10:40 #2
PS: Man kan ikke lave layout i CSS - men man kan bruge CSS til at style sine HTML-elementer med  :)
Desuden kan man ikke se på en 'forsiden' af en  webside, om der er brugt CSS i dokumentet eller ej.

- men som sagt er det svært at hjælpe mere specifikt, når jeg ikke kan se din kode med den opløsning, jeg bruger ... og den skifter jeg ikke  :)
Avatar billede foxmulder58 Praktikant
13. juni 2005 - 10:53 #3
det er ellers en fed effekt den måde en ny side fader ind på når man klikker på et af dine links. hvordan har du lavet det??

mvh
Mads
Avatar billede roenving Novice
14. juni 2005 - 15:09 #4
>>foxmulder

-- prøv Vis kilde ...
Avatar billede jih Nybegynder
15. juni 2005 - 02:54 #5
olebole ... det var da mærkeligt.. havde ellers sat det til at hvis den ikke fandt den opløsning man har imellem listen af opløsninger, skulle den vise en default... hmm.. så prøv og se på http://www.48pages.net/1280x1024/index.htm ( så skipper du også introen .. men den har ikke noget med spm at gøre anyway ;) )

hvis det ikke hedder layout så ved jeg ikke helt.. altså.. nu mener jeg hvor tingene ligger i forhold til hinanden og sådan nogle ting.. problemet ligger faktisk kun i "position:relative;" og "position:absolute;"..
Avatar billede olebole Juniormester
15. juni 2005 - 03:21 #6
For det første skal du begynde alle dokumenter med en DTD (DocType Definition) ... og en fuld DTD. Det er et must i et HTML-dokument  :)
I frameset-dokumentet skriver du dette - og intet andet - før <html>-tag'et:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
        "http://www.w3.org/TR/html4/frameset.dtd">

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

- ellers kan IE6 ikke tolke CSS ordentligt.

Dernæst skal vi nok lige friske reglerne for CSS-positionering op:
1. Et absolut positioneret element, skal placere sig i forhold til det første, omkransende element, som er positioneret. Om dette er positioneret relative eller absolute, er uden betydning.
2. Findes et sådan ikke, skal elementet placere sig i forhold til body-elementet.

Første regel er yderst vigtig og kan udnyttes på det skammeligste - men overses af mange. Prøv f.eks. dette dokument:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>TITLE</title>
<style type="text/css">
body, html {
    height: 100%;
    margin: 0;
    padding: 0;
}
.cont {
    position: relative;
    width: 700px;
    height: 500px;
    margin: 20px auto; /* auto centrerer divet horisontalt */
    border: 4px solid #66cc99;
}
.yellowBox {
    position: absolute;
    width: 560px;
    height: 390px;
    left: 70px;
    top: 55px;
    background-color: yellow;
}
.redSquare {
    position: absolute;
    width: 40px;
    height: 40px;
    background-color: red;
}
.blueSquare {
    position: absolute;
    width: 40px;
    height: 40px;
    background-color: blue;
}
.alignL {
    left: 30px;
}
.alignR {
    right: 30px;
}
.vAlignT {
    top: 15px;
}
.vAlignB {
    bottom: 15px;
}
</style>
</head>
<body>

<div class="cont">
    <div class="redSquare alignL vAlignT">&nbsp;</div>
    <div class="redSquare alignR vAlignT">&nbsp;</div>
   
    <div class="yellowBox">&nbsp;</div>
   
    <div class="blueSquare alignL vAlignB">&nbsp;</div>
    <div class="blueSquare alignR vAlignB">&nbsp;</div>
</div>

</body>
</html>

Det er ikke et forsøg på at løse dit specifikke problem, men det viser, hvordan du kan bruge position i forbindelse med left, top, right og bottom
Avatar billede olebole Juniormester
15. juni 2005 - 03:40 #7
I øvrigt er brugerens skærmopløsning ikke særlig interessant i denne forbindelse. Det, der er interessant, er hvor stor hans browser er. Det er - og bør forblive - hans helt suveræne valg.
Du bør hellere sigte efter at lave et design, der er elastisk nok til at kunne bruges på den måde, brugeren ønsker at bruge sin browser på.

Møbeldesigneren skal heller ikke fortælle mig, min sofa skal være fem meter bred, fordi min stue er fem meter bred og hans sofa 'ser så godt ud i den størrelse'. Jeg vil have, den skal stå mellem min reol og et lille bord ... og det skal han ikke blande sig i.
Forventer han, jeg vil bruge hans produkt, skal han designe for at opfylde mine behov ... ikke for tilfredsstille sine egne.

Det skriver jeg ikke for at fornærme nogen, men fordi det er et grundvilkår indenfor al design, der desværre ofte overses. Det første offer for designerens gode idé er alt for ofte brugervenlighed og -frihed  :)
Avatar billede Slettet bruger
19. juni 2005 - 13:32 #8
I det mindste er det ikke ret tit at sofaer prøver at ommøblere din stue for dig. Det samme kan desværre ikke siges om hjemmesider.
Avatar billede jih Nybegynder
23. juli 2005 - 19:36 #9
tak for svarene .. hvis olebole bare lige smider et svar..? og forresten .. olebole .. det er netop det jeg laver .. jeg laver hjemmesiden efter andres behov .. hvis de bruger en så og så stor størrelse, så retter siden sig op efter deres størrelse.. jeg vil bare have at vide om det kan gøres på en bedre måde, så jeg kan være sikker på at billederne ligger der hvor de skal ligge, og teksten skal være der hvor den er.. ;-)
Avatar billede jih Nybegynder
08. december 2005 - 09:38 #10
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