Responsive slider with fixed height

If you want to have a fixed height for a responsive-slider, you must disable ”max-width” and set width and height to auto. This is NOT a solution for a specific slideshow, just a general thinking of how to solve it.

Ex.)

.slider img {
max-width: none;
height: auto;
width: auto;
}

Then you can set your height for the container div.

Annonser

CSS – hierarki

Bra att känna till när man jobbar med CSS är i vilken ordning inställningarna läses in.

Till att börja med så gäller att senast inlästa värdet, som du om anget width för en tagg två gånger så är det det senaste inlägget som gäller.
Exempel:

.minClass {
width: 100px;
}
.minClass {
width: 200px;
}

I exemplet kommer alltså objekten med classen ”.minClass” att få en width på 200px.

Värden på ID gäller alltid över CLASS. Dvs att om du anger ett värde för t ex width i både CLASS och ID för en div så är det värdet i ID defineringen som gäller, även om CLASS värdet angavs senare.
Exempel

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#minDiv {
width: 100px;
}
.minClass {
width: 200px;
}
</style>
</head>
<body>
<div id="minDiv" class="minClass">
<p>Jag är en test div</p>
</div>
</body>
</html>

I exemplet ovan så kommer diven ha en width på 100px, då det värdet gäller ovanför CLASS värden, även fast CLASS värdet angavs senare

En CLASS kan också defineras genom kedjade classer, objekt och ID-värden. I kort kan man säga att ju fler kedjelänkar desto högre relevans får ett tilldelat värde.


Exempel:


div.minClass {
width: 130px;
}

.minAndraClass {
width: 90px;
}

<div class="minClass minAndraClass">
<p class="minClass minAndraClass">Jag är en test div</p>
</div>

Width 130px ovanför tilldelas endast objekt med ".minClass" som är en div, och har högre värde än .minAndraClass då den endast tilldelas objekt oavsett "föräldrar"-objekt. Dvs att <div>-taggen blir 130px medan <p>-taggen blir 90px då den kommer hämta sitt värde från .minAndraClass som ej har krav på att objektet ska vara en <div>.

Blogginlägget är under uppbyggnad