Width / height property

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.

@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:

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 */}

pa koristi to sto si stavio kao avatar

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; }
}

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;
}
}

Copyright © 2020 WM Forum - AboutContact - Sponsored by: Mydataknox & Webmaster.Ninja