Width / height property

Programiranje
1

Pozdrav webmajstori,

Dali postoji kakav tag u css da se moze nariktati da odredenu visinu i sirinu prikazuje na odredenim veličinama kompjutera inčima

Recimo imam header koji je fixiran i na lijevoj strani text a na desnoj strani gumb i ja sam lijevu stranu poravno sa float: left; a desni gumb sa float: right; i recimo dodem sa kompom od 15 inci i to sad ljepo izgleda i kasnije dodem sa kompom od 21 inč i header se vidi na 80% stranice. I sada ako ja taj header stavim da mu sirina 100% to ce se ljepo vidit na ovom od 21 inč kompjuteru ali na ovom od 15 inč ili manje button se nece vidjeti. Ja sam radio sa margin-right i to radi vraca gumb u lijevo ali ja bi bas taj float:right da kolko god ga moze pomakne u desno i da se vidi na svim velicinama kompjutera.

2

@media je taj tag…

http://www.w3schools.com/css/css_mediatypes.asp - ti ces trebati screen

Inace to ti je responzivni dizajn sto ti zelis postici, imas tone tema o tome pa samo proguglaj :wink:

3

Ja sam pokuso stavit stavit to u css ali i dalje nece i sad mi cjeli css neprepoznaje bez backgrounda ga dobijem i bez poravnanja teksta

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  { /* STYLES GO HERE */}
4

pa koristi to sto si stavio kao avatar

5

Pa ne radi kada tvoja rezolucija (širina) je sigurno veća od 1024px. Taj query koji si naveo se odnosi samo na uređaje kojima je širina između 768px i 1024px. Probaj smanjiti prozor preglednika kojeg koristiš pa ćeš vidjeti rezultate.

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  {
    body { background: red; }
}
6

Da evo radi ali nekuzim zasto mi se izgubi css kad stavim ovo je moj css

@media only screen 
and (min-device-width : 50%) 
and (max-device-width : 100%)  {

h2{
        background: #eeeeee; /* Old browsers */
	background: -moz-linear-gradient(top,  #eeeeee 0%, #cccccc 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #eeeeee 0%,#cccccc 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #eeeeee 0%,#cccccc 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #eeeeee 0%,#cccccc 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #eeeeee 0%,#cccccc 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
	position:fixed;
        width:90%;
        font-size: 18px;
	color: #535353;
	padding: 18px 18px 13px 18px;
	border-bottom: 1px solid #dfdfdf;
	margin-bottom: 18px;
	margin-top:-92px;
	z-index:999;
    -moz-box-shadow: 3px 3px 10px #000000;
    -webkit-box-shadow: 3px 3px 10px #000000;
    box-shadow: 3px 3px 10px #000000;
}
}