bootstrap - problem z dopasowaniem

pytanie zadane 5 lipca 2020 w HTML i CSS przez niezalogowany

mam problem a raczej kilka

1. belka nawigacyjna nie zamienia sie w hamburgera tylko rozwija się jako lista przylepiona do strony

2. w belce nawigacyjnej fontello są przemieszczone do lewej krawędzi a sam navbar odsuwa się przy zmianie okna na large napisy zaś wychodzą poza białe pole

3. po dodaniu margin lub padding nic się nie dzieje

4. social divs są bardziej po lewo - minimalnie ale jednak i nie mogę tego zmienić

zdjęcia

Kod html

pomoże ktoś bo nie mam pojęcia jak to wystylizować a czuje ze jestem już prawie w domu :P

2 odpowiedzi

odpowiedź 5 lipca 2020 przez niezalogowany

body
{
	background-image: url(zdjecia/backgrounimage.png);
	background-attachment: fixed;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}




.wraper
{
width:80%;
background-color:white;
margin:auto;
margin-left:auto;
margin-right:auto;

}

.header
{
width:100%;
padding: 45px 0 20px;
}


.logo
{
	width: 88%;
	background:white;
	margin-left:auto;
	margin-right:auto;
	padding: 5px;
	font-size:80px;
	font-family: 'Crimson Text', serif;
	text-align: center; 
}

.motto
{
	width:70%;
	font-size:30px;
    font-family: 'DM Mono', monospace;
	margin-left:auto;
    margin-right:auto;
    text-align: center;
}


.navbar
{
	width:100%;
	float:left;
	position: fixed;
	display:inline-block;
	top:-10px;
	z-index:2;
	left:110px;
	margin-left:auto;
	margin-right:auto;
	
}
	

.nav-item
{
	top:0;
	width:126.3px;
	background-color:#e2e2e2;
	padding:10px 0;
	text-align:center;
	font-size:20px;
	height:50px;
	display:inline-block;
	border-style:none;
}

.Home:hover
{
	background-color:white;
	transform: scale(1.1);
}

.translate:hover
{
	background-color:white;
	transform: scale(1.1);
}

.podstrona
{
	display:block;
	margin-left: auto;
	margin-right: auto;
	text-align: justify;
	padding: 20px;
	font-size:21px;
}
	
.content
{
	width: 900px;
	margin-left: auto;
	margin-right: auto;
	text-align: justify;
	padding-top: 0px;
	font-size:21px;
}

.Parallax 
{
	background: url(zdjecia/Mainfoto.png) no-repeat center;
background-size: cover;
	background-attachment: fixed;
	height: 500px;
}

.Parallax2
{
	background: url(zdjecia/Mainfoto.png) no-repeat center;
	background-size: cover;
	background-attachment: fixed;
	height: 400px;
}

.Parallax2 img
{
	width:100%;
	height: auto;
	
}

.Parallax img
{
	width:100%;
	height: auto;
}

.socials
{
	width:100%;
	margin-left:auto;
	margin-right:auto;
	text-align: justify;
	
}

.row socialdivs
{
	width: 1000px;
	margin-right:auto;
	margin-right:auto;
	height: 100px;
	

}

.FB
{
	width:200px;
	height: auto;
	float:left;
	text-align: center; 
	padding: 15px 0;
	text-decoration: none;
    color: transparent;
}
.FB:hover
{
	background-color: #4267B2;
	height: 60px;
	
}

.YT
{
	width:200px;
	height: auto;
	float:left;
	text-align: center; 
	padding: 15px 0;
	text-decoration: none;
    color: transparent;
}

.YT:hover
{
	background-color:#FF0000;
	height: 60px;
	
}

.G
{
	width:200px;
	height: auto;
	float:left;
	text-align: center; 
	padding: 15px 0;
}
.G:hover
{
	background-color:#d44638;
	height: 60px;
}

.Linked
{
	width:200px;
	height: auto;
	float:left;
	text-align:center; 
	padding: 15px 0;
	
}
.Linked:hover
{
	background-color:#2867b2;
	height: 60px;
}

.instagram
{
	width:200px;
	height: auto;
	float:left;
	text-align:center; 
	padding: 15px 0px;
}
.instagram:hover
{
	background-color:#fcaf45;
	height: 60px;
}


.footer
{
	width: 78%;
	background-color: #e2e2e2;
	text-align: center;
	margin-left:auto;
	margin-right:auto;
	padding: 10px;
	
}

a:visited
{
   color: black;
}

a.nav
{
	width:900px;
	margin-left:auto;
	margin-right:auto;
	position:fixed;
	left:0;
	right:0;
	z-index:100;
}

ul
{
	padding:0;
	margin:0;
	list-style-type: none;
	font-size:16px;
	height:35px;
	line-height:200%;
}
	
ul a
{
	color:red;
	text-decoration: none;
	display:block;
}

ul > li
{
	float:left;
	width:142px;
	height:30px;
	border-right:1px solid black;
	text-align: center;
	display:inline-block;
}

ul>li:first-child
{
	border-left: none;
}
	
ul>li:hover
{
	background-color:white;
}

ul>li:hover>a
{
	background-color:white;
}

.content1
{
	
	width: 900px;
	margin-left: auto;
	margin-right: auto;
	text-align: justify;
	padding-top: 20px;
	padding-bottom:10px;
}

.art1
{
	width:800px;
	display:block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom:50px;
	position:relative;
}

.contwart
{
	
	padding:10px;
	display:block;
	width:auto;
	margin-left: auto;
	margin-right: auto;
	background-color:white;

}
.art1 .contwart
{
	position:absolute;
	display: block;
	width: auto;
	bottom:0px;
	left:0px;
	top:auto;
	right:auto;
	padding:10px;
	opacity:0;
	transition: opacity 0.4s ease-in-out;
	text-decoration: none;
}

.art1:hover .contwart
{
	opacity:0.8;	
}

.pager
{
	position: relative; left:50px;
	display:inline-table;
	width:900px;
	margin-left: auto; 
	margin-right: auto;
	text-align:center;
	text-decoration:none;
	list-style-type: none;
}

.previous
{
	possition:absolute 20px;
	text-align: center;
	float:left;
	dispalay:block;
	font-size:20px;
	padding-left:0px;
	left:70px;
	height:auto;
	border: dashed 1px black;
	-webkit-transition: transform 0.3s ease-in-out;
	-ms-transition: transform 0.3s ease-in-out;
	transition: transform 0.3s ease-in-out;
}
.next
{
	text-align: center;
	float:right;
	dispalay:block;
	font-size:20px;
	padding-left:0px;
	height:auto;
	border: dashed 1px black;
	transition: transform 0.3s ease-in-out;
	-webkit-transition: transform 0.3s ease-in-out;
	-ms-transition: transform 0.3s ease-in-out;
}

.previous:hover
{
	background-color:#e2e2e2;
	transform: scale(1.3);
}

.next:hover
{
	background-color:#e2e2e2;
	transform: scale(1.3);
}

.naglowekart
{
	font-size:30px;
	padding-top: 0px;
	
}

.zawartoscart
{
	width: 800px;
	margin-left: auto;
	margin-right: auto;
	text-align: justify;
	font-size:21px;
	
}

<!DOCTYPE HTML>
<html lang="PL"> 

<head>   
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Na poludnie stad... </title>
<meta name="description" content="Strona poswiecona kulturze Europy w szczegolności Bałkanom, oraz jako strona mająca mi pomóc znaleźć pracę"/> 

<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/>
<link rel="stylesheet" href="mojecss.css" type="text/css"/>
<link rel="stylesheet" href="fontello-cd612d41/css/fontello.css" type="text/css"/>




</head> 
<body> 

 <div class="wraper"> 

 <div class="container-fluid">
 <header>
        <div class="header">
 
 <div clsss="col-sm-1">
    <div class="logo"><image src="zdjecia/Logo1.png" style="float:left"> Na Południe stąd...</div>
</div>
     <div clsss="col-sm-6">
   <div class="motto"><i> "Nie ważne skąd przybyłeś - </br> ważne dokąd zmierzasz"</i></div>
 </div> 
  
 


  
  
   <button class="navbar-toggler" data-toggle="collapse" data-target="#collapse_target">
  <span class="navbar-toggler-icon"></span>
  
  </button>
  
  <nav class="navbar navbar-expand-md sticky-top">
 
	
	 <ul class="navbar-nav mr-auto">
	 
	 
	 <li class="nav-item active">
	
	 <div class="collapse navbar-collapse" id="collapse_target">
	
    <a href="index.php" title="Home"> <i class="icon-home"> </i> </a> </li> 
  
  <li class="nav-item active">
		<a href="film.php" title="Film" >Film</a></li>
		
   <li class="nav-item active">
		<a href="historia.php" title="Historia" >Historia</a></li>
			
	<li class="nav-item active">
		<a href="kuchnia.php" title="Kuchnia" >Kuchnia</a></li>
	
	<li class="nav-item active">
		<a href="muzyka.php" title="Muzyka" >Muzyka</a></li>
		
	<li class="nav-item active">
		<a href="poradniki.php" title="Poradniki" >Poradniki </a></li>
		
	<li class="nav-item active">
    <a href="omnie.php" title="O mnie">O mnie </a></li>
   
    <li class="nav-item active">
   <a href="englishversion.php" title="English version"> <i class="icon-language"> </i></a></li> 
   
  
   
   
   </ul>
   
</div>   
    


</header>

<main>
<div class="row">
   <div class="content">
   <div clsss="col-sm-2 p-3">
 <?php echo ' <h2><center> Witaj na mojej stronie! </center></h2></br>
<p style="text-indent: 7%;">Drogi gościu, niezwykle miło mi cię widzieć na mojej stronie! Jest to moja pierwsza strona internetowa w moim życiu - nie badź więc zbyt surowy dla jej wygladu, lub jej braków - poprostu dałem z siebie wszystko co mogłem, aby była jak najlepsza, jeżeli posiadasz jakies uwagi proszę kieruj je bezpośrednio na mojego maila lub na moje social media! Ta strona będzie sukcesywnie rozbudowywana o kolejne materiały, więc wpadaj co jakiś czas, aby sprawdzić co nowego! Strona ta została stworzona przeze mnie z dwóch powodów - po pierwsze mojej niezwykłej miłości do Bałkanów i podróży, oraz z chęci znalezienia nowej pracy, a czy może być lepsza reklama, niż pokazanie swoich umiejętności? Tak więc, ciesz się tą stroną i niech umila ci czas!  </br></br></P>'?>
</div>
<div clsss=" col-sm-2 p-3">
<div class="Parallax2" class="img-fluid" title="Moje zdjęcie na tle Akropolu ateńskiego">
</div> 
</div>
</br>
<?php echo '<p style="text-indent: 7%;">
Moją stronę podzieliłem na kilka działów takich jak: film, historia, kuchnia, muzyka, poradniki oraz o mnie. W działach tych będę się starał skupić na kulturze Bałkańskiej i nie tylko :) uzupełnieniem mojej tworczości będa filmy, zdjęcia oraz artykuły omawiające Bałkany z mojej perspektywy, natomiast w zakładce "o mnie" będą informacje o mojej osobie jak również dane do kontaktu. </br>
Serdecznie was do tego zapraszam!</p>'?>


<?php echo '<p style="text-indent: 7%;">Jeśli masz jakiś pomysł na stronę, chciałbyś mnie zatrudnić, podjąć jakąś wspołpracę ze mną lub po prostu umowić się na piwo to również zapraszam cię do kontaku! </p>'?>


</br>
<div clsss="col-sm-2 p-3">
<div class="Parallax2"  title="Moje zdjęcie na tle Akropolu ateńskiego">
 

</div>
</div>
</div> 

</div>

</br>
   </div>
  
  
</main>

<aside class="col-sm">
 
 <div class="row socialdivs"> 
     

  	
	<div clsss="col-sm-6">
       <div class="FB"> <a href="https://www.facebook.com/" target="_blank" title="Zapraszam na mojego Facebooka"><i class="icon-facebook-rect"> </i></a>
		</div></div>
	   
	   <div clsss="col-sm-6">
       <div class="YT"><a href="https://www.youtube.com/" target="_blank" title="Zapraszam na mój kanał Youtube"> <i class="icon-youtube"> </i></a>
	   </div></div>
	   
	   <div clsss="col-sm-6">
       <div class="G"> <a href="https://accounts.google.com" target="_blank" title="Zapraszam na mój Gmail"><i class="icon-gmail"></i></a>
		</div></div>	   
	   
	   
	   <div clsss="col-sm-6">
       <div class="Linked"><a  href="https://www.linkedin.com/" target="_blank" title="Zapraszam na mój profil na Linkedin"> <i class="icon-linkedin"> </i></a>
	   </div></div>
	   
	   <div clsss="col-sm-6">
		<div class="instagram"><a href="https://www.instagram.com/" target="_blank" title="Zapraszam na mój profil na Instagramie"><i class="icon-instagram-filled"></i></a>
		</div></div>
		
       
     
 </div>        
		 
		 </div>
		 
	 <div class="row">
			
  <div class="footer">copyright: napoludniestad.pl 2020&copy Strona ta powstała z mojej checi rozwoju w sferze IT oraz zamiłowania do podróży. </br>Twórcą tej strony jest Jan Pytlarczyk. Chcesz o mnie wiedzieć więcej? Sprawdź moje social media! </div>
  
  </div>
  </aside>	
  </div>
 
 </div>
 <script src="jquery-3.5.1.min.js"> </script>
 
<script>

	$(document).ready(function() {
	var NavY = $('.st').offset().top;
	 
	var stickyNav = function(){
	var ScrollY = $(window).scrollTop();
		  
	if (ScrollY > NavY) { 
		$('.st').addClass('sticky');
	} else {
		$('.st').removeClass('sticky'); 
	}
	};
	 
	stickyNav();
	 
	$(window).scroll(function() {
		stickyNav();
	});
	});
	


</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

<script src="js/bootstrap.min.js"></script>



</body>
</HTML>

odpowiedź 5 lipca 2020 przez pablop76 VIP (123,180 p.)

Po domykaj tagi , porównaj swoja nawigację z dokumentacją.

Straszny bałagan w kodzie. Kolumny nie posiadają row, row nie posiada kolumn, js umieszczony w divie (oczywiście nie domknięty tag script)

Podwójne dołączenie jquery i bootstrap

Po co ci wrapper jeżeli masz container?

komentarz 5 lipca 2020 przez niezalogowany

ale jedno jest jquery-3.5.1.min.js a drugie ? Bo nie wiem o czym teraz mówisz?

wrapper był na początku bo tą stronę przerabiam niejako na bootstrapa

fakt nie było domknięcia script - dzięki!

hmm jak zamykam div header to rozwala mi wszystko, skoro to jest header to nie powinno to tak być ze zamyka go na dole strony tylko gdzieś przed navbar - jak nie zamykam to strona ma białe tło i się nie krzaczy widzisz może co robię źle?

Tak wygląda teraz HTML

<!DOCTYPE HTML>
<html lang="PL"> 

<head>   
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Na poludnie stad... </title>
<meta name="description" content="Strona poswiecona kulturze Europy w szczegolności Bałkanom, oraz jako strona mająca mi pomóc znaleźć pracę"/> 

<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/>
<link rel="stylesheet" href="mojecss.css" type="text/css"/>
<link rel="stylesheet" href="fontello-cd612d41/css/fontello.css" type="text/css"/>


</head> 

<body> 

 <div class="container-fluid">
 
	<header>
			<div class="header">
 
				<div clsss="navbar-brand">
					<div class="logo"><image src="zdjecia/Logo1.png" style="float:left"> Na Południe stąd...</div>
					
						<div clsss="col-lg">
							<div class="motto"><i> "Nie ważne skąd przybyłeś - </br> ważne dokąd zmierzasz"</i></div>
						</div> 
					</div>
				</div>


  
  
   
  
<nav class="navbar navbar-expand-md sticky-top">
  
	<button class="navbar-toggler" data-toggle="collapse" data-target="#collapse_target">
		<span class="navbar-toggler-icon"></span>
	</button>
 
	
	 <ul class="navbar-nav mr-auto">
	 
	 
		<li class="nav-item active">
	
			<div class="collapse navbar-collapse" id="collapse_target">
	
		<li class="nav-item active">
			<a href="index.php" title="Home"> <i class="icon-home"> </i> </a> </li> 
  
		<li class="nav-item active">
			<a href="film.php" title="Film" >Film</a></li>
		
		<li class="nav-item active">
			<a href="historia.php" title="Historia" >Historia</a></li>
			
		<li class="nav-item active">
			<a href="kuchnia.php" title="Kuchnia" >Kuchnia</a></li>
	
		<li class="nav-item active">
			<a href="muzyka.php" title="Muzyka" >Muzyka</a></li>
		
		<li class="nav-item active">
			<a href="poradniki.php" title="Poradniki" >Poradniki </a></li>
		
		<li class="nav-item active">
			<a href="omnie.php" title="O mnie">O mnie </a></li>
   
		<li class="nav-item active">
			<a href="englishversion.php" title="English version"> <i class="icon-language"> </i></a></li> 
   
	</ul>
 
	

</header>

<main>

<div class="row">
	<div class="content">
		<div clsss="col-sm-2 p-3">
 <?php echo ' <h2><center> Witaj na mojej stronie! </center></h2></br>
<p style="text-indent: 7%;">Drogi gościu, niezwykle miło mi cię widzieć na mojej stronie! Jest to moja pierwsza strona internetowa w moim życiu - nie badź więc zbyt surowy dla jej wygladu, lub jej braków - poprostu dałem z siebie wszystko co mogłem, aby była jak najlepsza, jeżeli posiadasz jakies uwagi proszę kieruj je bezpośrednio na mojego maila lub na moje social media! Ta strona będzie sukcesywnie rozbudowywana o kolejne materiały, więc wpadaj co jakiś czas, aby sprawdzić co nowego! Strona ta została stworzona przeze mnie z dwóch powodów - po pierwsze mojej niezwykłej miłości do Bałkanów i podróży, oraz z chęci znalezienia nowej pracy, a czy może być lepsza reklama, niż pokazanie swoich umiejętności? Tak więc, ciesz się tą stroną i niech umila ci czas!  </br></br></P>'?>
		</div>


		<div clsss=" col-sm-2 p-3">
			<div class="Parallax2" class="img-fluid" title="Moje zdjęcie na tle Akropolu ateńskiego"></div> 
		</div>
</br>
<?php echo '<p style="text-indent: 7%;">
Moją stronę podzieliłem na kilka działów takich jak: film, historia, kuchnia, muzyka, poradniki oraz o mnie. W działach tych będę się starał skupić na kulturze Bałkańskiej i nie tylko :) uzupełnieniem mojej tworczości będa filmy, zdjęcia oraz artykuły omawiające Bałkany z mojej perspektywy, natomiast w zakładce "o mnie" będą informacje o mojej osobie jak również dane do kontaktu. </br>
Serdecznie was do tego zapraszam!</p>'?>


<?php echo '<p style="text-indent: 7%;">Jeśli masz jakiś pomysł na stronę, chciałbyś mnie zatrudnić, podjąć jakąś wspołpracę ze mną lub po prostu umowić się na piwo to również zapraszam cię do kontaku! </p>'?>


</br>
<div clsss="col-sm-2 p-3">
	<div class="Parallax2"  title="Moje zdjęcie na tle Akropolu ateńskiego"></div>
</div>
</div> 

</div>

</br>
   
  
  



</main> 

 <div class="row socialdivs"> 
     

  	
	<div clsss="col-sm-6">
       <div class="FB"> <a href="https://www.facebook.com/" target="_blank" title="Zapraszam na mojego Facebooka"><i class="icon-facebook-rect"> </i></a>
		</div></div>
	   
	   <div clsss="col-sm-6">
       <div class="YT"><a href="https://www.youtube.com/" target="_blank" title="Zapraszam na mój kanał Youtube"> <i class="icon-youtube"> </i></a>
	   </div></div>
	   
	   <div clsss="col-sm-6">
       <div class="G"> <a href="https://accounts.google.com" target="_blank" title="Zapraszam na mój Gmail"><i class="icon-gmail"></i></a>
		</div></div>	   
	   
	   
	   <div clsss="col-sm-6">
       <div class="Linked"><a  href="https://www.linkedin.com/" target="_blank" title="Zapraszam na mój profil na Linkedin"> <i class="icon-linkedin"> </i></a>
	   </div></div>
	   
	   <div clsss="col-sm-6">
		<div class="instagram"><a href="https://www.instagram.com/" target="_blank" title="Zapraszam na mój profil na Instagramie"><i class="icon-instagram-filled"></i></a>
		</div></div>
		
       
     
 </div>        
		 
		 
		
<div class="row">
			
  <div class="footer">copyright: napoludniestad.pl 2020&copy Strona ta powstała z mojej checi rozwoju w sferze IT oraz zamiłowania do podróży. </br>Twórcą tej strony jest Jan Pytlarczyk. Chcesz o mnie wiedzieć więcej? Sprawdź moje social media! </div>
  
 </div>
  </aside>	
  </div>
 
 </div>
 
 
 
 
 
 <script src="jquery-3.5.1.min.js"> </script>
 
<script>

	$(document).ready(function() {
	var NavY = $('.st').offset().top;
	 
	var stickyNav = function(){
	var ScrollY = $(window).scrollTop();
		  
	if (ScrollY > NavY) { 
		$('.st').addClass('sticky');
	} else {
		$('.st').removeClass('sticky'); 
	}
	};
	 
	stickyNav();
	 
	$(window).scroll(function() {
		stickyNav();
	});
	});
	</script>



<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

<script src="js/bootstrap.min.js"></script>



</body>
</HTML>