CSS problem
5 naročnikov
5 naročnikov
Spet imam en problem in sicer se mi v primeru da stran od-zoomiram (ctr "plus" -) le ta prelomi.. V glavnem divu želim imeti 4 kvadrate, kateri naj bodo vsi v vrsti, kljub temu, da stram odzoomiram..
Prosim za pomoč...
Pa še koda:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
#wide_full {
width: 963px;
float: left;
border-left: 1px solid #202020; border-right: 1px solid #202020; border-bottom: 1px solid #202020;
margin-bottom: 30px;
padding:0px;
}
.list_videos .item {
float: left;
width: 176px;
padding: 0px;
height: 185px;
border: 1px solid #434343;
margin: 5px 6px 7px 8px;
display: inline;
}
</style>
</head>
<body>
<div id="wide_full">
<div class="list_videos">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
</body>
</html>
Hvala za pomoč
9 odgovorov
.list_videos .item {
float: left;
width: 176px;
Raje uporabi za width tukaj procente (recimo 18%). Ni ravno najboljša rešitev, tako da boš moral še malo prilagoditi širine.
Tezko imas nekaj v %, potem pa margine in border v px, po mojih izkusnjah to ne gre najbolje skupaj.
Dela zoom tudi pri PX, AFAIK, za plus povecevanje, tako kot imas tukaj. V % potem das se margin (lahko tudi tako margin: 5px 0.5% 7px 0.5%;) in meni dela :)
@perunpro potem sta razmaka na levi in desni strani razlicna in to precej učitno..
Ma s to glupo foro se dajem ze dva dni pa mi nikakor ne gre skups pravit..
Pa drugace napisi, naj ima wide_full padding, notri das pa samo margin-right.
To je prednost CSSja, obstaja milijon in ena moznost kako napisati da bo (zelo) enako izgledalo!
Border ne štima;) Ko se zadeva procentualno manjša zaradi zooma samo boarder ohranja zmeraj tisti 1px;) In tako enkrat preseže velikost kontejnerja in potem se prelomi.
Spacer, recimo:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
#wide_full {
float: left;
border-left: 1px solid #202020; border-right: 1px solid #202020; border-bottom: 1px solid #202020;
margin-bottom: 30px;
padding:0px;
}
.list_videos {
padding: 5px 0px 7px 0px;
float: left;
}
.list_videos .item {
float: left;
width: 176px;
padding: 0px;
height: 185px;
border: 1px solid #434343;
margin: 0px 6px 0px 8px;
display: inline;
}
</style>
</head>
<body>
<div id="wide_full">
<div class="list_videos">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
</body>
</html>
Dela v FF, ostalo nisem sprobaval.