Cześć forumowicze ;)
Mam pewien mały problem, lecz jakoś nie mogę z tym sobie jakoś poradzić. Szukałem rozwiązań w wyszukiwarce, lecz albo jest to opisane nie jasno, lub wcale :(
No dobra, a teraz ten problem...
Nie wiem jak to zrobić, aby się divy ze sobą nie pokrywały. Najlepiej jak by każdy div był poniżej poprzedniego diva.( oczywiście nie div w divie ;) ) Od razu dzięki za wytłumaczenie i podpowiedzi :)
Ps. Rady i uwagi a pro po całego kodu mile widziane :)
oto html:
<!DOCTYPE.html>
<html>
<head>
<title>xyz.pl</title>
<link href="https://fonts.googleapis.com/css?family=Covered+By+Your+Grace|Raleway:100,500,600,800" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Dynalight&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link href="cssstyle.css" rel="stylesheet" type="text/css">
<link href="css_social_icon.css" rel="stylesheet" type="text/css">
<link href="buttons.css" rel="stylesheet" type="text/css">
<link href="body-homepage.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="hold">
<div class="header">
<div class="container">
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Button1</a></li>
<li><a href="#">Button2</a></li>
<li><a href="#">Button3</a></li>
<li><a href="#">Button4</a></li>
<li><a href="#">Button5</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</div>
<div id="icon">
<ul>
<a href=" " class="social_icon" ><i class="fa fa-facebook"></i></a>
<a href=" " class="social_icon" ><i class="fa fa-twitter"></i></a>
<a href=" " class="social_icon" ><i class="fa fa-youtube"></i></a>
</ul>
</div>
</div>
</div>
<div class="welcome-baner "><div class="position-button-one"><button class="button-one " > <span>Go to homepage forum</span></button></div></div>
<div class="continer-one"></div>
<div class="continertwo">
<div class="continertwoheader"><h2>
Select the one you are interested in.</h2>
<div><ul id="hometabele">
<li><div><a href="#"><img src="007-molecule.png" style="height: 70px; width: 70px;" alt=""></a></div></li>
<li><a href="#"><img src="013-graduate.png" style="height: 70px; width: 70px;" alt=""></a></li>
<li><a href="#"><img src="005-flask.png" style="height: 70px; width: 70px;" alt=""></a></li>
<li><a href="#"><img src="008-blackboard.png" style="height: 70px; width: 70px;" alt=""></a></li>
<li><a href="#"><img src="002-physics.png" style="height: 70px; width: 70px;" alt=""></a></li>
<li><a href="#"><img src="012-biology.png" style="height: 70px; width: 70px;" alt=""></a></li>
<li><a href="#"><img src="004-microscope.png" style="height: 70px; width: 70px;" alt=""></a></li>
<li><a href="#"><img src="001-computer-mouse.png" style="height: 70px; width: 70px;" alt=""></a></li>
<li><a href="#"><img src="014-teamwork.png" style="height: 70px; width: 70px;" alt=""></a></li>
<li><a href="#"><img src="016-chat.png" style="height: 70px; width: 70px;" alt=""></a></li>
<li><a href="#"><img src="009-ereader.png" style="height: 70px; width: 70px;" alt=""></a></li>
<li><a href="#"><img src="011-abacus.png" style="height: 70px; width: 70px;" alt=""></a></li></ul></div>
</div>
</div>
<div class="continer-three"></div>
</div>
©By xyz, All Rights Reserved
<script type="text/javascript" src="stronaskrypt.js"></script>
</body>
I CSS-y
@import url(http://fonts.googleapis.com/css?family=Lato);
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css);
.new_social_icon {
width: 50px;
display: inline-block;
margin: 0 auto;
float: left;
}
.social_icon {
color: #fff;
}
ul.social_icons {
margin-top: 10px;
}
.social_icons li {
vertical-align: top;
display: inline;
height: 100px;
}
.social_icons a {
color: #fff;
text-decoration: none;
}
.fa-facebook {
padding:15px 21px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition: .5s;
background-color: #322f30;
}
.fa-facebook:hover {
background-color: #3d5b99;
}
.fa-twitter {
padding:15px 18px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition: .5s;
background-color: #322f30;
}
.fa-twitter:hover {
background-color: #00aced;
}
.fa-youtube {
padding:15px 21px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition: .5s;
background-color: #322f30;
}
.fa-youtube:hover {
background-color: #e64a41;
}
html, body {
margin: 0;
padding: 0;
min-height:100%;
}
html {
position: relative;
}
.hold{
height:80px;
}
.header {
line-height: 80px;
width: 100%;
transition: line-height 0.2s linear, box-shadow 0.2s linear;
position: fixed;
top: 0;
left: 0;
z-index: 100;
background: rgba(245, 245, 245, 0.97);
font-family: 'Lato', sans-serif;
}
.header.small {
line-height: 50px;
box-shadow: 0px 1px 3px 0px rgba(50, 50, 50, 0.8);
}
#icon{
position: absolute;
top: 50%;
transform: translateY(-50%);
float: left;
right:3px;
height: 30px;
width: 470px;
margin-left: 1px;
}
h1.introduction {
font-size: 54px;
}
ul.nav {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
ul.nav li {
float: left;
position: relative;
}
ul.nav li a {
transition: color 0.2s linear;
font-size: 18px;
}
ul.nav li:hover a {
color: rgb(129, 155, 169);
}
ul.nav li a {
padding: 15px;
color: initial;
text-decoration: initial;
}
.welcome-baner {
position: relative;
width: 100%;
padding: 100px 30px 45px 30px;
min-height: 500px;
background-image: url("astronomy_dark_earth.jpg");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
@include bp-small{
}
#icon {
position: initial;
float: none;
display: block;
transform: none;
margin: auto 0 auto;
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,700italic);
/* All Buttons*/
button{
color:#fff;
text-align: center;
padding: 20px;
}
.button-one, .button-three{
text-align: center;
cursor: pointer;
font-size:24px;
margin: 0 0 0 00px;
}
/*button one*/
.position-button-one{
margin-top:300px;
margin-left:40%;
height: 100%;
width: 210px;
float: left;
}
.button-one {
border-radius: 4px;
background-color:#d35400;
border: none;
padding: 20px;
width: 400px;
transition: all 0.5s;
}
.button-one span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button-one span:after {
content: '»';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button-one:hover span {
padding-right: 25px;
}
.button-one:hover span:after {
opacity: 1;
right: 0;
}
.continer-one{
width: 100%;
height:80px;
background-color: rgba(115, 115, 115, 0.7);
}
.continertwo{
position: absolute;
width: 100%;
background-color: rgba(242, 242, 242, 0.7);
color:black;
height:700px;
}
.continertwoheader{font-size: 50px;
font-family: 'Dynalight', sans-serif; /* ta linijka odnosi się do stylu tekstu z linka w hedzie*/
color:black;
text-align: center;
}
#hometabele{
margin-left: 100px;
margin-right:100px;
padding: 0;
list-style: none;
}
#hometabele li {
float: left;
width: 50px;
margin: 6%;
}
#hometabele li a p {
margin: 0;
padding: 5%;
font-size: 0.75em;
}
/*continer-three*/
.continer-three{
position: relative;
width: 100%;
height: 600px;
background-color: rgba(242, 242, 242, 0.7);
color:black;
}
footer {
position: relative;
font-size: 0.75em;
text-align: center;
padding-top: 500px;
color: black;
}
window.onscroll = function() {
var el = document.getElementsByClassName('header')[0];
var className = 'small';
if (el.classList) {
if (window.scrollY > 10)
el.classList.add(className);
else
el.classList.remove(className);
}
};
window.onscroll = function() {
var a = document.getElementsByClassName('logo1')[0];
var className = 'small';
if (el.classList) {
if (window.scrollY > 20)
el.classList.add(className);
else
el.classList.remove(className);
}
};
Uff dużo tu tego :/