Siema
To moje pierwsze pytanie tego typu więc proszę o wyrozumiałość :) Potrzebuje rady i pomocy. Trenuje sobie html i css wiec postanowiłem że zrobię sobie taką małą galerię swoich dzieciaków. Zdjęcia zawsze pod ręka, różne możliwości treningu itd, ale do rzeczy.
Może w punktach :) Kod dam na samym dole. (to co mam)
1: Stronę chciałem podzielić na pół aby były dwa kolory, po pół dla każdego i na środku (wyżej lub niżej, próbowałem i tak i tak) slider ze zdjęciami (akurat też przerabiam kursy JS i tutaj też sobie trenowalem.
2: Wszystkie trzy elementy (niebieski, slider i rozowy) opakowałem w jednego diva i dałem mu flexboxa.
3: Niebieski i rozowy podzielilem po 50% a na slider dalem position:absolute i z-index aby byl tak jakby wyjęty z tego pojemnika. (inaczej mieszał mi z tłem i nie mam pojęcia jak mógłbym to zrobić inaczej)
4: Po tym jak już slider został wyjęty z pojemnika, musiałem go odpowiednio odsunąć od góry i lewej strony. I tutaj mam problem. Bo Jak to dopasować aby było RWD? Zawsze coś mi się chrzani, a to przesuwa go w dół, nawet poza divy i robi białe tło, a to w góre, a to nierówne marginesy. Nie mogę sobie z tym poradzić. Może jest jakiś inny sposób na wypozycjonowanie elementu w ten sposób co ja chce?
Mam nadzieje że wmiare jasno to opisałem, a teraz kod:
http://jsfiddle.net/khyg0wt4/3/
Zdjęcia i kod jsa na potrzeby tego pytania dalem w komentarz a za slider robi czerwony prostokąt.
<!DOCTYPE HTML>
<html lang="pl">
<head>
<meta charset="utf-8" />
<title>TYTUL</title>
<meta name="description" content="OPIS GOOGLE" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style2.css" type="text/css" rel="stylesheet" />
<link href="css/normalize.css" type="text/css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Butterfly+Kids" rel="stylesheet">
<!--<script type="text/javascript">
var numer = Math.floor(Math.random()*5)+1;
function zmienslajd()
{
numer++; if(numer>5) numer=1;
var plik = "<img src=\"img/slider/slajd" + numer + "_640.jpg\" srcset=\"img/slider/slajd"+numer+"_1280.jpg 1280w, img/slider/slajd"+numer+"_1800.jpg 1800w\" />";
document.getElementById("slider").innerHTML = plik;
setTimeout("zmienslajd()", 5000);
}
</script>-->
</head>
<body onload="zmienslajd()">
<div id="calosc">
<a href="#" id="M"><span class="imiona">Marcelek</span></a>
<div id="slider">
</div>
<a href="#" id="T"><span class="imiona">Tosia</span></a>
</div>
</body>
</html>
body
{
font-size: 16px;
/*background-image: url("../img/tlo.png");
background-position: center;
background-size: cover;*/
/*background-image: linear-gradient(#c8a2c8, #8fc5db);*/
color: #eee;
text-shadow: 2px 2px 2px black;
}
img
{
max-width: 100%;
display: block;
height: auto;
}
a
{
display: block;
color: #eee;
text-shadow: 2px 2px 2px black;
text-decoration: none;
}
#calosc
{
display: flex;
width: 100%;
}
#M, #T
{
width: 50%;
text-align: center;
font-size: 5em;
letter-spacing: 5px;
height: 100vh;
font-family: 'Butterfly Kids', cursive;
}
#T
{
background-color: #c8a2c8;
border-left: 5px solid #8fc5db;
transition: 0.5s ease-in-out;
}
#M
{
background-color: #8fc5db;
border-right: 5px solid #c8a2c8;
transition: 0.5s ease-in-out;
}
.imiona
{
display: block;
margin-top: 20px;
}
#T:hover
{
background-color: rgb(200, 162, 200, 0.8)
}
#M:hover
{
background-color: rgb(143, 197, 219, 0.8)
}
#slider
{
margin-left: auto;
margin-right: auto;
border: 3px solid #fff;
box-shadow: 2px 2px 2px black;
position: absolute;
left: 12.5%;
max-width: 75%;
top: 25%;
background-color: red;
width: 1000px;
height: 300px;
}
Przed kilkoma minutami wyrzuciłem wszystkie media-queries, jest jeszcze inaczej niż było. Troche się już w tym wszystkim pogubiłem i mam nadzieje że daje dobry kod :)
P.s Dałem na JSfiddle (pierwszy raz) wyżej, może się przyda.
Pozdro
