Problem z Bootstrapem?

pytanie zadane 3 września 2018 w HTML i CSS przez Toran138 Nowicjusz (210 p.)

A więc niedawno zacząłem przerabiać mój stary projekt na bootstrapie i kiedy wydawało się że już go skończyłem problemem okazała się stopka. Chodzi o to, że kiedy divy się poprzestawiają to pojemnik w którym dotychczas była zawartość jest za niski i stopka wystaje poza niego, niszcząc całą ideę wyglądu strony

body
{
	background-color:#ededed;
	margin:0px;
	font-family: 'Open Sans', sans-serif;
}
#container
{
	margin-top:30px;
	margin-left:auto;
	margin-right:auto;
	background-color:#fefefe;
	border:1px solid #e1e1e1;
	border-radius:10px;
	padding:35px;
}
#logo
{
	min-height:25px;
	font-size:28px;
}
#nazwa
{
	text-align:center;
	min-height:25px;
	background-color:#00ccc9;
	color:#fff;
	font-size:24px;
	border:1px solid #00eeeb;
	border-radius:5px;
}
#topnav
{
	border-bottom:1px solid #efefef;
	min-height:45px;
}
.toplink
{
	text-align:center;
	padding:5px;
	text-decoration:none;
}
.toplink:hover
{
	background-color:#00ccc9;
	border-radius:5px;
	cursor:pointer;
}
.toplink a
{
	color:#000;
	display:block;
	width:100%;
}
.toplink:hover a
{
	color:#fff;
	text-decoration:none;
}
#sidenazwa
{
	text-align:center;
	min-height:25px;
	padding-top:10px;
	padding-bottom:10px;
	background-color:#00ccc9;
	color:#ffffff;
	font-size:24px;
	border:1px solid #00eeeb;
	border-radius:5px;
}
.sidelink
{
	margin-top:5px;
	text-align:center;
	padding:5px;
}
.sidelink:hover
{
	background-color:#00ccc9;
	border-radius:5px;
	cursor:pointer;
}
.sidelink a
{
	color:#000;
	text-transform:uppercase;
	display:block;
	width:100%;
}
.sidelink:hover a
{
	color:#fff;
	text-decoration:none;
}
#mini-slajder
{
	height:50px;
	border-radius:5px;
}
#mini-slajder img
{
	width:100%;
}
#content
{
	margin-top:10px;
	min-height:327px;
	padding:10px;
	border-radius:5px;
	margin-bottom:15px;
	border-left: 1px solid #efefef;
}
#footer
{
	width:99%;
	height:140px;
	color: #000;
	border-radius:5px;
	font-size:10px;
}
#footer a
{
	text-decoration: none;
	color: #000;
}
#footer a:hover
{
	text-decoration: italic;
	color: grey;
}
.column
{
	background-color:#00ddda;
	padding-left:5px;
	text-align:center;
	border:1px solid #11ccc9;
	padding-top:10px;
	min-height:140px;
}
.title
{
	font-size:20px;
}

<!DOCTYPE HTML>
<html lang="pl">
<head>

	<meta charset="utf-8" />
	<title>Sklepik</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
	<link rel="stylesheet" href="style.css" type="text/css" >
	<link rel="stylesheet" href="css/fontello.css" type="text/css" >
	<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&amp;subset=latin-ext" rel="stylesheet">
	<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
	<script src="slajder.js"></script>

</head>
<body onload="zmienslajd();" >
<div class="container" id="container">
	<div class="row">
		<div class="col-md-2">
			<div id="logo">
				abc
			</div>
		</div>
		<div class="col-md-6 offset-md-4">
			<div id="nazwa">
				strona <b>jan kowalski</b>
			</div>
		</div>
	</div>
		<nav>
			<div id="topnav">
				<div class="row">
							<div class="col-md-2 offset-md-4">
								<div class="toplink"><a href="index.html">Strona Główna</a></div>
							</div>
							<div class="col-md-2">
								<div class="toplink"><a href="partnerzy.html">Partnerzy</a></div>
							</div>
							<div class="col-md-2">
								<div class="toplink"><a href="wyslij.html">Wyślij zamówienie</a></div>
							</div>
							<div class="col-md-2">
								<div class="toplink"><a href="kontakt.html">Kontakt</a></div>
							</div>
				</div>
			</div>
		</nav>
		<div class="row no-gutters">
			<div class="col-md-3">
				<div id="side">
					<aside>
						<div class="row">
							<div class="col-12"><div id="sidenazwa">Nasza Oferta</div></div>
							<div class="col-12">
								<div class="sidelink"><a href="#">pieczywo</a></div>
							</div>
							<div class="col-12">
								<div class="sidelink"><a href="#">słodycze</a></div>
							</div>
							<div class="col-12">
								<div class="sidelink"><a href="#">napoje</a></div>
							</div>
							<div class="col-12">
								<div class="sidelink"><a href="#">gazety</a></div>
							</div>
							<div class="col-12">
								<div class="sidelink"><a href="#">szkolne</a></div>
							</div>
							<div class="col-12">
								<div class="sidelink"><a href="#">majonez bo czemu nie?</a></div>
							</div>
							<div class="col-12"><div id="mini-slajder"><img src="img/haribo.png" /></div></div>
						</div>
					</aside>
				</div>
			</div>
			<div class="col-md-9">
				<div id="content">
					Tu znajdzie się właściwa zawartość strony.
				</div>
			</div>
		</div>
			<footer>
				<div id="footer">
					<div class="row no-gutters">
					<div class="col-md-4 column">
						cośtam
					</div>
					<div class="col-md-4 column">
						cośtam
					</div>
					<div class="col-md-4 column">
						<span class="title">Kontakt z nami</span><br />
						<div style="margin:5px 0px 10px 0px;">
						<ul>
							<li>
								bla
							</li>
							<li>
								ble
							</li>
							<li>
								bli
							</li>
							<li>
								blo
							</li>
						</ul>
						</div>
						<a href="#">>>Czytaj więcej</a>
					</div>
					</div>
				</div>
			</footer>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>

Proszę o szybką pomoc.

1 odpowiedź

odpowiedź 3 września 2018 przez pablop76 VIP (123,120 p.)

#mini-slajder
{
height:50px;
border-radius:5px;
}

usuń z tej deklaracji height: 50px; bo twój obrazek się nie mieści

A poza tym struktura jest przerośnięta np.

<div class="row no-gutters">
            <div class="col-md-3">
                <div id="side">
                    <aside>
                        <div class="row">
                            <div class="col-12">

Nie lepiej

<div class="row no-gutters">
             <aside id="side" class="col-md-3">
                     <div id="sidenazwa">Nasza Oferta</div>

<div class="col-12"> zbędne całkowicie.

I to powinna być lista.

komentarz 19 września 2018 przez Toran138 Nowicjusz (210 p.)

Co prawda powinna tam być lista i miałem zamiar to już zmieniać ale nie w tym był problem. Jeśli otworzysz stronę i pobawisz się z szerokością to kolumny w #footer ułożą się prawidłowo ale tło containera nie przedłuży się i część footera zostanie na szarym tle zamiast na białym, można teoretycznie wyjąć footer z niego i wtedy cały będzie na szarym tle albo zrobić całą stronę białą a to nie ma już takiego efektu jaki chciałbym osiągnąć.

komentarz 20 września 2018 przez pablop76 VIP (123,120 p.)

Ustawienie

#mini-slajder {
    height: 50px; // BŁĄD!!!
    border-radius: 5px;
}

#footer {
    width: 99%;
    height: 140px; // BŁĄD!!!
    color: #000;
    border-radius: 5px;
    font-size: 10px;
}

Wskazane błędy powodują, że jeżeli wewnątrz umieścisz element wyższy niż ustawiony na sztywno height to on się nie mieści i wystaje poza dostępny obszar.

Po zmianie szerokości ekranu elementy w stopce układają się jeden pod drugim zwiększając wysokość stopki, ale znów to samo co wyżej. Ona ma ustawione na sztywno height: 140px; więc 'wyjeżdżają' poza o dostępny obszar.