• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Nakładanie się Diva na diva

VPS Starter Arubacloud
0 głosów
766 wizyt
pytanie zadane 22 czerwca 2017 w Nasze projekty przez &xyz Nowicjusz (120 p.)

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>


&copy;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 :/

2
komentarz 22 czerwca 2017 przez Tomek Sochacki Ekspert (227,510 p.)
Proponuję, abyś wrzucił to np. na jsfiddle lub codepen żeby nie trzeba ręcznie kopiować tych wszystkich css i html. To znacznie uprości i szybciej dostaniesz odpowiedź.
komentarz 22 czerwca 2017 przez radek024 Szeryf (77,180 p.)

Dokładnie, załóż codepena. Kod posiada trochę błędów, ale trudno je wypisać scrollując z góry na dół (przykład: dużo importowanych styli CSS, można to spokojnie zmniejszyć; trzy razy pobierasz czcionkę - można to zrobić za jednym zamachem; jest znacznik ul bez li.. i tak dalej).

komentarz 23 czerwca 2017 przez imklau Nałogowiec (42,090 p.)
żeby nie było, że ludzie przesadzają z tym codepenem to ja jeszcze dodam, że wczoraj tam sobie weszłam, zaczęłam kopiować to co wstawiłeś iii...zrezygnowałam z pomocy :<
komentarz 23 czerwca 2017 przez &xyz Nowicjusz (120 p.)
Dzięki za rady, na pewno postaram się trochę to popoprawiać

2 odpowiedzi

+1 głos
odpowiedź 23 czerwca 2017 przez jaca121212 Nałogowiec (40,760 p.)

Proponuję obejrzeć ten Filmik a znajdziesz w nim na swoje pytanie odpowiedź 

komentarz 23 czerwca 2017 przez &xyz Nowicjusz (120 p.)
Ok dzięki :)
+1 głos
odpowiedź 23 czerwca 2017 przez CzikaCarry Szeryf (75,340 p.)

Pobaw się właściwością z-index w CSS :)

komentarz 23 czerwca 2017 przez &xyz Nowicjusz (120 p.)
Ok. może to coś pomoże :/
komentarz 23 czerwca 2017 przez CzikaCarry Szeryf (75,340 p.)
Nie może, a na pewno :D

Podobne pytania

0 głosów
1 odpowiedź 132 wizyt
pytanie zadane 29 listopada 2017 w PHP przez Bartek Pydynkowski Początkujący (320 p.)
0 głosów
1 odpowiedź 1,080 wizyt
pytanie zadane 19 listopada 2016 w HTML i CSS przez dan Nowicjusz (200 p.)
0 głosów
0 odpowiedzi 166 wizyt

92,452 zapytań

141,262 odpowiedzi

319,085 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...