Hej
Nu vänder jag mig till er igen då det har kört fast sig.
Håller på och bygger en responsiv sida där jag vill ha 3 olika banners vid 3 olika resolutioner.
Har jätteproblem med att få in dessa banners och få dom att bli 100% width & height.
Ena sättet jag provat är att tilldela alla bilder "class 1-3" i html koden.
Ex:
<div id="wrap">
<div id="header">
<img class="logga1" src="logga1.png">
<img class="logga2" src="logga1.png">
<img class="logga3" src="logga1.png">
</div>
</div>
CSS
#header{height:13%; width:100%; margin:0; padding:0; overflow:hidden; background-repeat:no-repeat;
.logga1{width:100%; height:100%;}
det här verkar inte funka i 3:e steget i mediaquery av nån anledning.
Vet inte om man kan göra såhär?
Andra steget som jag funderat över är att lägga in bilderna direkt i css koden
men jag har inte riktigt lyckats få bilderna att bli 100% via den vägen. Dessutom så vet jag inte om jag kan ändra föregående bild i nästa steg i mediaquery.
Förslag?
class ska altså vara 1-3 och INTE 1 som det står på alla bilder i html koden ovan
Heatseeker, du kan redigera dina inlägg, du behöver inte postar ett nytt inlägg ;)
Och snälla använda [kod]-block runt dina koder, bli betydligt enklare att läsa vad som är text och vad som är kod.
var är media query koden?
Lite andra tips är att du behöver inte sätta bredd eller padding+margin på #header (utgå ifrån att detta är det ända div, #header css kod du har, background-repeat behöver du inte heller, då det inte ser ut att du ha någon bakgrund).
Om bilderna är från samma källa så räcker det med att du ändra img CSS koden för de olika upplösningar.
voigtann1 Hur skulle det se ut då?
typ
{background-image:url(logga1.png)}
sen
@media screen and (max-width:1280px) {
{background-image:url(logga2.png)}
}
??
Bilden expanderar ju hela bilden. och eftersom jag använder border radius i toppen så har jag bara stött på problem:(
Du måste ju ha en selector på dina CSS koder, sen om du har problem med radius så sätt bara en overflow hidden (vilket du redan har på din #header) och sätt border radius på den.
Så här ser det ut nu.
html, body{height:100%; margin-bottom:0; padding:0; background:#999;}
#wrap{min-height:100%; width:70%; margin:0 auto; background:#fff; border-top-right-radius:100px; border-top-left-radius:10px;}
#header{height:13%; width:100%; overflow:hidden;}
.logga1{border-top-right-radius:100px; border-top-left-radius:10px; width:100%;height:100%;}
@media screen and (min-width:901px) and (max-width:1280px) {
#wrap{min-height:100%; width:70%; margin:0 auto; background:#fff; border-top-right-radius:70px; border-top-left-radius:10px;}
#header{ width:100%; height:13%;border-top-right-radius:70px; overflow:hidden; }
.logga1{border-top-right-radius:70px; border-top-left-radius:10px; width:100%; height:100%;}
}
@media screen and (min-width:600px) and (max-width:900px){
#wrap{min-height:100%; width:70%; margin:0 auto; background:#fff; border-top-right-radius:70px; border-top-left-radius:10px;}
#header{ width:100%; height:13%;border-top-right-radius:70px; }
.logga2{border-top-right-radius:70px; border-top-left-radius:10px; width:100%; height:100%; overflow:hidden;}
}
@media screen and (min-width:200px) and (max-width:599px){
#wrap{min-height:100%; width:70%; margin:0 auto; background:#fff; border-top-right-radius:70px; border-top-left-radius:10px;}
#header{ width:100%; height:13%; border-top-right-radius:70px;}
.logga3{border-top-right-radius:70px; border-top-left-radius:10px; width:100%; height:100%;}
}
Postar relevant kod (tex du avslutar aldrig dina @media frågor).
Sen litet tips, om alla #wrap alltid har en min-height på 100% så behöver du inte upprepa dig på dina media querys, du har redan angett det i din huvud #wrap, lägg bara in vad som diffar på dina frågor.
Jo jag är helt med på att jag upprepar mig i det jag anget nu. Och jag har en "}" på slutet. Men bilden borde väl ändå ändra sig??
Inte som jag ser det, du har sagt:
.logga2, logga3{display:none;}
att .logga2 och .logga3 skall vara display none, du visar aldrig dom
men tog bort det nu:) nu ser det exakt ut som det jag skrev senast:)
Och btw, sker ändringarna alltid från orgininal koden eller från föregående query?
Om kravet uppfylls så kommer den köra media också, ja.
