Dva diva v isti vrsti z dinamično širino
3 naročniki
3 naročniki
Recimo da imam tole:
[HTML]
.left {
float: left;
width: 75%;
padding: 4px 4px 4px 4px;
margin: 8px 4px 8px 8px;
border: 1px solid #ccc;
background: #eee;
color: #454545;
}
/* content right -------------------------- */
.right {
float: right;
width: 20%;
padding: 4px 4px 4px 4px;
margin: 8px 8px 8px 4px;
border: 1px solid #ccc;
background: #eee;
color: #454545;
}
[/HTML]
pa potem
<div class="left">2</div>
<div class="right">1</div>
Sicer je ok, pokaže se v eni vrsti, najprej left potem pa right, vendar kje je 5% ?!?!, če namreč dam namsto 75% noter 80% se mi pokaže right, drugi div, POD prvim divom in ne v isti vrsti, ... sumim da je kriv rob ... vendar zaradi designa rabim rob ...
se da še to kako drugače rešiti ?, nebi rad dal v div 100% pa tabelo uporabo, ker to sicer dela, vendar če sem se že trudil pa je vse brez tabel ... :confused: :confused:
11 odgovorov
Margin ;)
margin: 8px 0px 8px 0px;
edit: vidim da ni samo to....
edit: nekaj je še padding kriv, pa seveda rob ja. daj pač malo manj procentov
<style type="text/css">
<!--
#left {
float: left;
width: 78%;
padding: 4px 5px 4px 5px;
border: 1px solid #ccc;
background: #eee;
color: #454545;
}
/* content right -------------------------- */
#right {
float: right;
width: 20%;
padding: 4px 6px 4px 5px;
border: 1px solid #ccc;
background: #eee;
color: #454545;
}
-->
</style>
</head>
<body>
<div id="left">2</div>
<div id="right">1</div>
</body>
</html>
Tole me je*e ... v priloženi datoteki
[HTML]/* content -------------------------- */
.content {
width: 100%;
padding: 2px 2px 2px 2px;
margin: 4px 4px 4px 4px;
}
/* content left -------------------------- */
.left {
float: left;
width: 85%;
padding: 2px 2px 2px 2px;
margin: 4px 4px 4px 4px;
border: 1px solid #ccc;
background: #eee;
color: #454545;
}
/* content right -------------------------- */
.right {
float: right;
width: 15%;
padding: 2px 2px 2px 2px;
margin: 4px 4px 4px 4px;
border: 1px solid #ccc;
background: #eee;
color: #454545;
}[/HTML]
[HTML]
<div class="content">
<div class="left">domov.php</div>
<div class="right">Keywordi</div>
</div>[/HTML]
Rešitev je box models ? Še kak namig ... ker je malo čudno a ne ? 15 + 85 % ni 100% ... wtf ?
EDIT:
Tudi če odstranim
padding: 2px 2px 2px 2px;
margin: 4px 4px 4px 4px;
s tem da to tako ne pride v poštev ker hočem rob, pa da vsbina ni do roba ...
EDIT2:
Tule http://www.w3.org/TR/css3-box/ iščem :confused: ... s tem da ne deluje kot bi moralo ... tam je bil sicer primer brez roba padding in marign vendar če odstranim tudi ni tako kot hočem, pa širine so bile fikse .... jaz pa bi rad mel % ...
ja, 15% + 85% = 100%, prestudiraj box models, kot sem ti rekel, pa ti bo jasno, zakaj se ti zadeva obnasa tako, kot vidis da se... In ne, resitev ni box models, resitev je ta, da razumes, kako delujejo razlicni box models...
Hmm, kako pa bi lahko dioločil širine tako da bi bilo
.right { width: 200px; ...
.left { width: ???
left pa vse kar ostane ? Tako bi bil right vedno isto left pa se spreminja glede na resulucijo/velikostjo okna, s tem da tega potem nemorem s px ali %, auto pa itak ne ... http://www.w3schools.com/css/prdimwidth.asp ... druga pa ni ? :confused:
Oz. sej gre lepo tole:
[HTML]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
html,body{margin:0;padding:0}
body{font: 76% arial,sans-serif}
p{margin:0 10px 10px}
a{display:block;color: #981793;padding:10px}
div#content p{line-height:1.4}
div#navigation{background:#B9CAFF}
div#wrapper{float:left;width:100%}
div#content{margin: 2px 202px 2px 2px}
div#navigation
{
float:left;
width:200px;
margin-left:-200px;
}
</style>
</head>
<body>
<div id="container">
<div id="wrapper">
<div id="content" style="background:#FF8539">
1
</div>
</div>
<div id="navigation">
<p><strong>2) Navigation here.</strong> long long fill filler very fill column column silly filler very filler fill fill filler text fill very silly fill text filler silly silly filler fill very make fill column text column very very column fill fill very silly column silly silly fill fill long filler </p>
</div>
[/HTML]
Samo malo še uredim :D.
Nisem še preštudiral :( :confused: ... še bom :)
Morem si eno soboto vzet, ker je tega zlo dosti :( ... vem pa da ni prav da takole skačem sem ter tja ...
Potem pa nehaj skakat :) Tezko bos razmisljal o tem, kako resit svoj problem s sirinami in visinami block level elementov, ce ne bos imel pojma o razlicnih box modelih...