Avatar billede mcclement Nybegynder
05. april 2009 - 18:21 Der er 7 kommentarer og
1 løsning

hensigtsmæssig design + content = 100% - 2*boks...?

mit problem er som det fremgår af overskriften, er dette en hensigtmæssig opbygning??? derudover vil jeg gerne høre hvordan man kan tildele mit indhold den resterende bredde efter at hver menuboks har taget deres 150px? håber at nogen har et svar i ærmet ^^

her kommer koden:

style:
body{
margin:0;
background: #fff;
text-align: center;
}

#wrapper{
margin:0 auto;
padding:0;
width:80%;
height:90%;
}

#banner{
width:100%;
height:12%;
clear:both;
}

#vmenu{
float:left;
width:150px;
min-height:500px;
}

#indhold{
margin:10px;
margin-top:0;
padding:5px;
min-height:500px;
text-align:left;
float:left;
width:55%
}

#hmenu{
margin: 0;
float:right;
width:150px;
min-height:500px;
}

#fod {
clear:both;
}

<html>
<head>
        <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
        <title>Clement web productions</title>
        <link rel="stylesheet" href="style/style.css" type="text/css">
</head>
<body>
    <div id="wrapper">
           
           
        <div id="banner">
                <img src="logo.gif">
        </div>
           
        <div id="vmenu">
            <ul>
                <li>venstre menu</li>
                <li>punkt1</li>
                <li>punkt1</li>   
                <li>punkt1</li>   
                <li>punkt1</li>
                <li>punkt1</li>   
            </ul>   
        </div>
        <div id="hmenu">
            <ol>
                <li>højremenu</li>
                <li>punkt1</li>
                <li>punkt1</li>   
                <li>punkt1</li>   
                <li>punkt1</li>
                <li>punkt1</li>   
            </ol>
        </div>   
        <div id="indhold">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </div>
       
        <div id="fod">
        copyright 2009 ©
        </div>
    </div>
</body>
</html>
Avatar billede jensgram Nybegynder
05. april 2009 - 19:31 #1
Du kan evt. lade #indhold have padding i siderne på 150px og bredde på 100% ...
Avatar billede mcclement Nybegynder
05. april 2009 - 19:40 #2
også det jeg har brugt tidligere, men jeg formulerede mig nok ikke ordentlig... jeg vil gerne kunne angive alle længder bredder osv. som en vairiabel værdi, altså i %...

er det muligt at sætte vmenu og hmenu til f.eks 15% og så mangler jeg en en måde at tildele mit indhold resten... syntes ikke det virker hvis jeg sætter den til f.eks 70 eller 65%...
Avatar billede jensgram Nybegynder
05. april 2009 - 19:54 #3
Altså de har jo samme parent, så hvis de tre bredder i procent summerer op til 100 så må problemet ligge et andet sted.

Har du testet i forskellige browsere?
Avatar billede mcclement Nybegynder
05. april 2009 - 20:24 #4
jeg har prøvet at sætte hmenu og v menu til 15% og derefter prøvet at tilpasse indholdets bredde, men det ændres efter browservinduet størellelse... så boksen rykker op og ned hele tiden alt efter om jeg maximere eller køre mindre størrelse...

det virker ikke i andet en IE... men spørgsmålet går også mere på om der er en måde at tildele sin boks den resterende width %

altså indhold width = 100% - (vmenu+hmenu)

men kan de t lade sig gøre uden at skal i php osv.???
Avatar billede jensgram Nybegynder
06. april 2009 - 08:09 #5
100% - 2 * 15% = 70%

Serverside-fortolkning er nok ikke løsningen.
Avatar billede mcclement Nybegynder
06. april 2009 - 12:16 #6
problemet jens er, at det kan browserne ikke finde ud af... det virker fint i IE, men firefox og chrome, osv. reagerer anderledes hvis man trækker i browservinduet... boksen flyver op og ned med den metode ;) så der må være et eller andet lille tweak der kan løse det problem :) ?
Avatar billede jensgram Nybegynder
06. april 2009 - 12:28 #7
Ah - jeg havde ikke fanget, at det var ved resize. Beklager. (Og så er mine kompetencer vist ikke dækkende.)
Avatar billede mcclement Nybegynder
26. april 2009 - 20:43 #8
...
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