Witam, mam problem z ustawieniem elementów na stronie.
Mianowicie chodzi o tą stronę - https://symu.co/pnccfq.sl
Jak na razie mam tylko menu i content z lewym panelem bocznym (bez zawartości) i za bardzo nie wiem jak je poprawnie ustawić.
Nie chce gotowego kodu, lecz jakąś podpowiedź lub koncepcje jak to rozwiązać w prawidłowy sposób.
Obecnie próbowałem coś z position: absolute, lewy panel ustawił się ok, ale gdy chciałem dodać prawy to się totalnie wysypał, pojawiło się ich kilka na stronie, więc dodałem backgroud-repeat: no-repeat.
I odnośnie tej kwestii mam pytanie, czemu tak się stało skoro panel-left ustawił się bez żadnych problemów z takimi samymi parametrami?
No i dalej, jak już ustawiłem ... - no-repeat; i panel-right ustawiłem jak ma być to na dole pojawiła się wolna przestrzeń, tzn około 200px białego tła, poniżej całej strony.
HTML:
<!DOCTYPE HTML> <html lang="pl"> <head> <meta charset="utf-8"> <title>Neria - Prywatny serwer Metin2.</title> <meta name="description" content="Neria.pl to najlepszy prywatny serwer metin2 w Polsce! Rozpocznij przygodę już dziś!"> <meta name="keywords" content="najlepszy, prywatny, serwer, metin2, w, Polsce, mt2, metin2, m2, rpg, mmo"> <meta http=equiv="X-UA-Compatible" content="IE=edge, chrome=1"> <link href="style.css" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Caudex:400,700&subset=latin-ext" rel="stylesheet"> </head> <body> <div class="wrapper"> <nav> <ul> <li><a href="#" class="menu-item-1 font-color">Home</a></li> <li><a href="#" class="menu-item-2 font-color">Forum</a></li> <li><a href="#" class="menu-item-2 font-color">Register</a></li> <li><a href="#" class="menu-item-2 font-color">Support</a></li> <li><a href="#" class="menu-item-3"><p class="font-download">Download</p> <p class="font-client">Client 1,2 GB</p></a></li> <li><a href="#" class="menu-item-4 font-color">ItemShop</a></li> <li><a href="#" class="menu-item-5 font-color">Rankings</a></li> <li><a href="#" class="menu-item-5 font-color">Contact</a></li> <li><a href="#" class="menu-item-5 font-color">Events</a></li> </ul> </nav> <div class="content"></div> <div class="panel-left"></div> <div class="panel-right"></div> </div> </body> </html>
CSS:
body{
font-family: 'Caudex', serif;
margin: 0;
padding: 0;
}
.wrapper{
width: 1920px;
height: 1189px;
background: url(img/background.jpg);
}
nav{
width: 1063px;
height: 84px;
background: url(img/menu.png);
margin: auto;
}
ul{
padding: 0;
margin: 0;
}
ul > li{
float: left;
margin-left: 25px;
list-style-type: none;
text-transform: uppercase;
font-size: 12px;
font-weight: 700;
line-height: 46px;
text-shadow: 0 0 5px rgba(0,0,0,0.35);
}
ul > li:first-child{
margin-left: 0;
}
.menu-item-1{
margin-left: 104px;
}
.menu-item-2{
margin-left: 16px;
}
.menu-item-3{
margin-left: 48px;
text-decoration: none;
}
.font-download{
color: #111304;
width: 78px;
height: 24px;
line-height: 24px;
margin-left: 48px;
margin-top: -45px;
text-shadow: none;
}
.font-client{
color: #a9af79;
margin-left: 52px;
margin-top: -34px;
font-size: 10px;
}
.menu-item-4{
margin-left: 44px;
}
.menu-item-5{
margin-left: 6px;
}
.font-color{
background-image: -webkit-gradient(linear,
left top, left bottom,
from(#c2b59b),
to(#817762));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 0 5px rgba(0,0,0,0.75);
}
.font-color:hover{
background-image: -webkit-gradient(linear,
left top, left bottom,
from(#cfbf9e),
to(#c2b59b));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 0 5px rgba(0,0,0,0.75);
}
.content{
width: 900px;
height: 1189px;
background: url(img/content.png);
margin: auto;
margin-top: -84px;
}
.panel-left{
width: 350px;
height: 1014px;
background: url(img/panel-left.png);
position: absolute;
left: 381px;
top: 175px;
}
.panel-right{
width: 900px;
height: 1189px;
background: url(img/panel-right.png);
position: absolute;
}
Z góry dziękuje za pomoc ;-)