rikard81Medlem sedan mars 2007311 inlägg Hur funkar det med %? Är det relativa värden. Har alltid angivit designen "boxarna" i px förrut. men hur får jag det att funkar så det ser likadant ut fast i %? Hur kan jag byta ut px till % och få det att se likadant ut? Vore supertacksam för svar från er som kan enheter.
Min div-kod ser ut så här: :)
#wrapper{
width: 551px;
height: 577px;
margin-left: auto;
margin-right: auto;
}
#huvud{
width: 550px;
height: 150px;
background: url(headers.jpg);
margin-left: auto;
margin-right: auto;
margin-top: 50px;
border-bottom: 1px solid #000000;
clear: both;
}
#meny{
width: 110px;
height: 400px;
background-color: #999999;
border-right: 1px solid #000000;
float: left;
}
#box{
width: 440px;
height: 400px;
background-color: #dcdcdc;
z-index: 1;
margin-left: auto;
margin-right: auto;
float: right;
}
#infobox{
width: 340px;
height: 330px;
background-color:#d3d3d3;
z-index: 2;
overflow: auto;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
border: 1px black dotted;
}
#fotbox{
width: 550px;
height: 25px;
background-color: #999999;
border-top: 1px black solid;
clear: both;
}
rikard81Medlem sedan mars 2007311 inlägg Div-boxar i %
Oj. såg nu att jag skrivit helt fel. Menade naturligtvis %. vad blir då width: 551px; height: 577px; i procent %
silfverMedlem sedan apr. 200312 679 inlägg
rikard81 skrev:
Oj. såg nu att jag skrivit helt fel. Menade naturligtvis %. vad blir då width: 551px; height: 577px; i procent %
Ifall du tänker efter lite så förstår du ganska snart att du inte kan ange exakta pixlar i %. Det beror helt och hållet på vilken skärmupplösning du har och hur stort webbläsarfönstret är eftersom bredden då anpassar sig med så många procent du angett.
zcorpanMedlem sedan dec. 20042 245 inlägg Dessutom så beräknas % för 'height' till "auto" om föräldern har det beräknade värdet "auto" för 'height' (vilket det är om man inte anger nånting, och det gäller även för <html> och <body>).
Varför vill du ange alla enheter med %? Vilket problem är det du försöker lösa?
zcorpanMedlem sedan dec. 20042 245 inlägg Aha. Japp, då är det % som gäller, men bara för 'width' och andra saker i x-led. Höjd brukar man kunna låta vara på auto (dvs inte ange alls).
Förutsagt att du vill ha ungefär samma proportioner så är det bara lite matte. Bredden på menyn genom bredden på wrappern är 110/577 ~= 0.1996. Då anger du width:20% på menyn. Och motsvarande för de andra boxarna. Sen anger du bredden på wrappern så bred som du vill ha den -- om du vill att den ska ta upp så mycket plats som det finns så låter du bli att ange bredd för wrappern.
rikard81Medlem sedan mars 2007311 inlägg Om jag då skriver så här! Vad blir då procenten på wrappern för att få det att se schysst ut?. Nedanstående procent på boxarna funkar bra storleksmässigt. problemet blir bara att mittboxen åker ner i botten.? Tack för hjälpen. Uppskattas verkligen.
#wrapper{
width: ??%;
height: 577px;
margin-left: auto;
margin-right: auto;
}
#huvud{
width: 100%;
height: 150px;
background: url(headers.jpg);
margin-left: auto;
margin-right: auto;
margin-top: 50px;
border-bottom: 1px solid #000000;
clear: both;
}
#meny{
width: 20%;
height: 400px;
background-color: #999999;
border-right: 1px solid #000000;
float: left;
}
#box{
width: 80%;
height: 400px;
background-color: #dcdcdc;
z-index: 1;
margin-left: auto;
margin-right: auto;
float: right;
}
#infobox{
width: 80%;
height: 330px;
background-color:#d3d3d3;
z-index: 2;
overflow: auto;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
border: 1px black dotted;
}
#fotbox{
width: 100%;
height: 25px;
background-color: #999999;
border-top: 1px black solid;
clear: both;
}
tantenMedlem sedan nov. 20051 596 inlägg Vad du har för % på wrapper ska inte påverka hur divvarna i den sedan lägger sig.
Men vad händer om du ändrar i #meny till width: 19.8%;?
joserMedlem sedan mars 20021 152 inlägg Precis som tanten säger; meny+box+borders blir mer än 100%.
rikard81Medlem sedan mars 2007311 inlägg Tack för alla svaren. Jag har fått det och funka. Nu ser det helschysst ut. Sista lilla problemet är hur jag nu ska centrera hela containern, dvs alla boxar till mitten av sidan. Visst går det att centrera genom att skriva som jag nedan gjort i wrappern "margin-left: 350px;". Men så vill jag inte ha det. När jag angav pixlar förrut gick det att centrera genom att ange "margin-left: auto; margin-right: auto;. Varför funkar detta inte i procent? Hur ska jag nu centrera containern?
#wrapper{
width: 100%;
margin-left: 350px;
}
#huvud{
width: 40%;
height: 150px;
background: url(headers.jpg);
border-bottom: 1px solid #000000;
}
#meny{
width: 8%;
height: 400px;
background-color: #999999;
border-right: 1px solid #000000;
float: left;
}
#box{
width: 32%;
height: 400px;
background-color: #dcdcdc;
z-index: 1;
float: left;
}
#infobox{
width: 80%;
height: 330px;
background-color:#d3d3d3;
z-index: 2;
overflow: auto;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
border: 1px black dotted;
}
#fotbox{
width: 40%;
height: 25px;
background-color: #999999;
border-top: 1px black solid;
clear: both;
zcorpanMedlem sedan dec. 20042 245 inlägg Vad menas det med att centrera nåt som är 100% brett?
rikard81Medlem sedan mars 2007311 inlägg Sorry. såg att det blev fel iallafall. Detta är ju ursvårt. Om jag kör 40% på wrappern och ställer in bredden på meny 19 "ink border" och 80% på boxen så blir boxen förliten ändå.. fattar nada?
