Domov > HTML/CSS in dizajniranje spletnih strani > Dva diva v isti vrsti z dinamično širino
stran 1 od 2 |< < 1 2 >|
Dva diva v isti vrsti z dinamično širino
 
HeXeR 1. jun 2007 18:06:47 Pridružen od:
13. dec 2006
3268 objav
 122 22 5
#1

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:


všeč(0) ni všeč(0) spam(0)
First rule of business, protect your investment.
 
 
mlavta1 1. jun 2007 19:06:20 Pridružen od:
10. dec 2006
1035 objav
 348 85 20
#2

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>
všeč(0) ni všeč(0) spam(0)
Optiweb - Spletne rešitve | Si kofetar? | Videa.si - Inovativna video produkcija
 
 
Vini 1. jun 2007 22:06:59 Pridružen od:
1. sep 2006
6612 objav
 5234 611 56
#3

oglej si box models...


všeč(0) ni všeč(0) spam(0)
 
 
HeXeR 4. jun 2007 11:06:33 Pridružen od:
13. dec 2006
3268 objav
 122 22 5
#4

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 % ...


všeč(0) ni všeč(0) spam(0)
First rule of business, protect your investment.
 
 
Vini 4. jun 2007 11:06:46 Pridružen od:
1. sep 2006
6612 objav
 5234 611 56
#5

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...


všeč(0) ni všeč(0) spam(0)
 
 
HeXeR 4. jun 2007 12:06:18 Pridružen od:
13. dec 2006
3268 objav
 122 22 5
#6

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:


všeč(0) ni všeč(0) spam(0)
First rule of business, protect your investment.
 
 
HeXeR 4. jun 2007 12:06:50 Pridružen od:
13. dec 2006
3268 objav
 122 22 5
#7

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.


všeč(0) ni všeč(0) spam(0)
First rule of business, protect your investment.
 
 
Vini 4. jun 2007 12:06:55 Pridružen od:
1. sep 2006
6612 objav
 5234 611 56
#8

HeXeR, a si ze prestudiral tisto, kar sem rekel, da prestudiras, al spet kar skaces?


všeč(0) ni všeč(0) spam(0)
 
 
HeXeR 4. jun 2007 13:06:16 Pridružen od:
13. dec 2006
3268 objav
 122 22 5
#9

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 ...


všeč(0) ni všeč(0) spam(0)
First rule of business, protect your investment.
 
 
Vini 4. jun 2007 13:06:24 Pridružen od:
1. sep 2006
6612 objav
 5234 611 56
#10

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...


všeč(0) ni všeč(0) spam(0)
 
 
Domov > HTML/CSS in dizajniranje spletnih strani > Dva diva v isti vrsti z dinamično širino
stran 1 od 2 |< < 1 2 >|
 

🔒 Za odgovor na to temo se moraš prijaviti.

Prijavi se