Domov > HTML/CSS in dizajniranje spletnih strani > Dva diva v isti vrsti z dinamično širino
stran 1 od 2 |<<12>|
Dva diva v isti vrsti z dinamično širino
 
HeXeR1. jun 2007 20:06:47Pridružen od:
13. dec 2006
3481 objav
+88-90
#1Recimo 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:
všeč(0)ni všeč(0)spam(0)
HeXNet
 
 
mlavta11. jun 2007 21:06:20Pridružen od:
10. dec 2006
890 objav
+166-4713
#2Margin ;)
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>
všeč(0)ni všeč(0)spam(0)
Prevajanje | Avto deli | Optimizacija spletnih strani
 
 
Vini2. jun 2007 00:06:59Pridružen od:
1. sep 2006
5977 objav
+3118-30335
#3oglej si box models...
všeč(0)ni všeč(0)spam(0)
wicked.si | mop.si | wwwp.si
 
 
HeXeR4. jun 2007 13:06:33Pridružen od:
13. dec 2006
3481 objav
+88-90
#4Tole 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 % ...
všeč(0)ni všeč(0)spam(0)
HeXNet
 
 
Vini4. jun 2007 13:06:46Pridružen od:
1. sep 2006
5977 objav
+3118-30335
#5ja, 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...
všeč(0)ni všeč(0)spam(0)
wicked.si | mop.si | wwwp.si
 
 
HeXeR4. jun 2007 14:06:18Pridružen od:
13. dec 2006
3481 objav
+88-90
#6Hmm, 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/pr_dim_width.asp ... druga pa ni ? :confused:
všeč(0)ni všeč(0)spam(0)
HeXNet
 
 
HeXeR4. jun 2007 14:06:50Pridružen od:
13. dec 2006
3481 objav
+88-90
#7Oz. 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.
všeč(0)ni všeč(0)spam(0)
HeXNet
 
 
Vini4. jun 2007 14:06:55Pridružen od:
1. sep 2006
5977 objav
+3118-30335
#8HeXeR, a si ze prestudiral tisto, kar sem rekel, da prestudiras, al spet kar skaces?
všeč(0)ni všeč(0)spam(0)
wicked.si | mop.si | wwwp.si
 
 
HeXeR4. jun 2007 15:06:16Pridružen od:
13. dec 2006
3481 objav
+88-90
#9Nisem š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 ...
všeč(0)ni všeč(0)spam(0)
HeXNet
 
 
Vini4. jun 2007 15:06:24Pridružen od:
1. sep 2006
5977 objav
+3118-30335
#10Potem 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...
všeč(0)ni všeč(0)spam(0)
wicked.si | mop.si | wwwp.si
 
 
Domov > HTML/CSS in dizajniranje spletnih strani > Dva diva v isti vrsti z dinamično širino
stran 1 od 2 |<<12>|