Avatar billede Slettet bruger
11. november 2013 - 21:16 Der er 6 kommentarer og
1 løsning

Rettelse af størrelse af på webside..

Hej Eksperter..

Jeg sidder med en lille udfording. Jeg har denne webside som jeg skal ha udvidet læse vinduet på.. så det bliver lidt større.

Websiden: https://dl.dropboxusercontent.com/u/27438044/Public%20Folder/Capture.PNG

Det jeg kalder læsevinduet er det hele med menu i venstre side og kasserne til højre osv..

Undskyld rodet men den er stadig undervejs..

Jeg har også en CSS fil her: https://dl.dropboxusercontent.com/u/27438044/Public%20Folder/styles.css

Spørgsmålet går på om det bare er lige at gøre hele læseruden større og få modulerne med så det hele passer men bare er blevet større?

Er der behov for mere info så sig endelig til :)

På forhånd tak!
12. november 2013 - 00:23 #1
Det du viser er et screenshot af websiden.  Det ville gøre det nemmere at svare, hvis du gav os et link til selve websiden.
Avatar billede Slettet bruger
12. november 2013 - 15:34 #2
12. november 2013 - 17:04 #3
Du vil have lavet 'læsevinduet' bredere.  Jeg kan se, at du har en body der fylder det hele.  Indeni har du øverst <div id="header"> der er 980px bred.  Der sidder teksten "Dina Amholt."  Derunder <div class="shadow"> der er 995px bred og indeni den igen <div id="wrapper"> der er 980px, og indeni wrapperen har du øverst <div id="navr"> der er 981px bred og derunder <div id="main-content"> som du ikke fastsætter nogen bredde for.  Indeni main content har du så <div id="leftbar-w"> på 200px, <div id="centercontent"> på 520px, og <div id="rightbar"> på 200px.  På modulerne sætter du ingen bredde.  Nederst i shadow har du så <div id="user-bottom"> på 980px.  Adskillige af div'erne har du givet position relativ.

Jeg går ud fra, at det er både header og shadow der skal gøres bredere (ellers vil det se underligt ud) og du vil have, at de tre kolonner leftbar-2, centercontent, og rightbar, med de moduler der er i, skal gøres forholdsvis bredere.

Du har nok gjort det unødvendigt kompliceret.  Jeg er ikke den største ekspert på dette område, men ville nok gøre noget i denne retning:

1.  Droppe de relative positions.
2.  Have en div med bredde på (lad os i første omgang sige 1000px) der indeholder alt resten, altså både header og shadow.  Hvis header og shadow så skal være en smule smallere, så giv dem en margin.  Du har nu <div id="main"> der sidder udenom det hele, så giv den width: 1000px.
3.  Så ville jeg droppe bredderne i px på alle divs.  Indeni shadow ville jeg give leftbar-w og rightbar hver en bredde på 20% og centercontent en bredde på 60%.

Så uden at have testet det ville jeg mene, at alle divs og moduler så vil finde deres rigtige bredder, de divs der går hele vejen over bliver 1000px minus deres margin, og left og right 200px minus margins og center 600 px. 

Hvis du kommer så langt, SÅ skulle du kunne ændre bredden på siden og alle dens elementer ved blot at rette på bredden i main.  Hvis du sætter den for eksempel til 1200px i stedet for 1000px, så bliver header og bottom også 1200px, og left og right bliver 20% af 1200, altså 240px og center 720px.

Held og lykke med foretagendet.
Avatar billede Slettet bruger
12. november 2013 - 17:34 #4
Hej Christian!

Det er rigtig fedt du gider sætte dig og bruge tid på skrive alt dette ned!

Jeg vil lige forsøge mig på det du siger, Jeg synes det virker en smule uoverskueligt. men vil ihvertfald forsøge. og så lige vende tilbage!

På forhånd tusind tak! :)
12. november 2013 - 19:28 #5
Så som (i uddrag):
<body>
    <div id="main">
        <div id="header">
            .......
        </div>
        <div class="shadow">
            <div id="wapper">
                <div id="main-content">
                    <div id="leftbar-w"></div>       
                    <div id="centercontent"></div>       
                    <div id="rightbar"></div>       
                </div>
            </div>
            <div id="user-bottom">
    ........
            </div>
        </div>
    </div>
</body>

#main
{
    width:1000px;
    ........
}

#leftbar-W
{
    width:20%;
    .........
}

#centercontent
{
    width:60%;
    ........
}
#rightbar
{
    width:20%;
    ........
}
Avatar billede Asky Forsker
13. november 2013 - 20:22 #6
For mig ser det ud til, at det vil være meget nemmere at styre det hele med et stylesheet i CSS.
Avatar billede Asky Forsker
13. november 2013 - 20:27 #7
Nå, undskyld, jeg havde ikke rigtig set, hvad der stod, men læste kun koderne. jeg har haft en del succes med at bruge procent, som det også foreslås. Det fungerer også bedre, når siden skal ses på mange forskellige skærmstørrelser. I dag skla man også tage hensyn til små skærme på mobil og pads-
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