Jump to content

Problema distanta footer fata de sidebar


Recommended Posts

Posted

Salut, cum spune si titlul, am o ptoblema cu footer care nu pastreaza distanta fata de sidebar. La container isi mentine distanta de 10px, dar la sidebar nu merge. Am incercat sa pun diferite comenzi sa il blochez dar nu merge.

Spoiler

 

UQvnBYY.png

 

CSS source


* {
	margin: 0px;
	padding: 0px;
	font-family: Arial;
}

body {
	position: relative;
	margin: 0px;
	font-family: Verdana, Georgia, serif;
	font-size: 14px;
	color: black;
	padding-bottom: 6rem;
}

input, textarea:focus {
	outline: none;
}

header {
	background-color: #f5f5f5;
	margin-bottom: 10px;
	height: 150px;
	box-shadow: 0 0 5px #1a1a1a;
}

header .logo {
	position: relative;
	margin: 25px;
	opacity: 0.8;
}

header .logo:hover {
	opacity: 1;
	transition: 0.3s;
}

header nav {
	margin: 50px;
	float: right;
	position: relative;
}

header nav ul a {
	text-decoration: none;
	list-style: none;
	color: white;
}

header nav ul li {
	margin-right: 2px;
	background: rgba(25, 25, 25, 0.7);
	float: left;
	display: block;
	padding: 15px;
	text-align: left;
	position: relative;
}

header nav ul li:hover {
	background: rgba(25, 25, 25, 0.9);
}

.sidebar {
	position: relative;
	float: right;
	width: 260px;
}

.sideright {
	display: block;
	background-color: #f5f5f5;
	margin-left: 10px;
	margin-right: 10px;
	margin-top: 0px;
	margin-bottom: 10px;
	padding: 20px;
	font-size: 105%;
	float: right;
	width: 260px;
	box-shadow: 0 0 5px #1a1a1a;
}

.sideright .side-search {
	text-align: center;
}

.sideright .input-side-search {
	margin-top: 10px;
	display: block;
	width: 100%;
	height: 30px;
	text-indent: 5px;
	background: #fff;
	border: none;
	border-bottom: 1px solid #000;
	box-shadow: 0 0 5px #1a1a1a;
}

.sideright .side-cat {
	padding: 5px;
}

.sideright .side-cat a {
	text-decoration: none;
	color: black;
}

.sideright .side-cat a:hover {
	color: #df9d19;
}

.content {
	overflow: hidden;
	position: relative;
	background-color: #f5f5f5;
	margin-left: 10px;
	margin-right: 320px;
	margin-top: 10px;
	margin-bottom: 15px;
	height: 100%;
	padding: 20px;
	font-size: 110%;
	box-shadow: 0 0 5px #1a1a1a;
}

footer {
	position: absolute;
	height: 100px;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: #212121;
	box-shadow: 0 0 5px #1a1a1a;
}

footer p {
	padding-top: 10px;
	color: grey;
	text-align: center;
	font-size: 120%;
	font-style: italic;
}

footer a {
	text-decoration: none;
	color: #bf4d26;
	transition: 0.3s;
}

footer a:hover {
	text-decoration: underline;
	color: #df9d19;
	transition: 0.3s;
}

.last-mod {
	float: left;
	position: relative;
	display: block;
	width: 96%;
	padding: 2%;
}

.last-mod .last-title {
	width: 100%;
	height: 50px;
	margin-bottom: 10px;
}

.last-mod .last-title a {
	font-size: 150%;
	text-decoration: none;
	color: rgba(25, 25, 25, 0.7);
}

.last-mod .last-title a:hover {
	color: rgba(25, 25, 25, 0.9);
}

.last-mod .last-title h2 {
	padding: 8px;
}

.last-mod .last-content {
	padding: 1%;
	width: 98%;
	margin-bottom: 10px;
}

.last-mod .last-content img {
	width: 300px;
	height: 200px;
}
.last-mod .last-content img:hover {
	background: #fff;
	opacity: 0.7;
	transition: 0.3s;
}

.last-mod .last-content p {
	margin-left: 320px;
}

.last-mod .last-content button {
	margin-left: 320px;
	float: right;
	position: absolute;
	bottom: 0;
	right: 0;
	width: 200px;
	height: 50px;
	background: rgba(25, 25, 25, 0.7);
	color: white;
	border: none;
}

.last-mod .last-content button:hover {
	background: rgba(25, 25, 25, 0.9);
	color: #df9d19;
	cursor: pointer;
}

.download-btn {
	margin-top: 50px;
	width: 300px;
	height: 50px;
	border: none;
	background: rgba(25, 25, 25, 0.7);
	color: white;
}

.download-btn:hover {
	background: rgba(25, 25, 25, 0.9);
	color: #df9d19;
	cursor: pointer;
}

.upload table tr th {
	float: left;
}

.upload table tr td input {
	margin: 5px;
	width: 200px;
	height: 30px;
	text-indent: 5px;
	border: none;
	border-bottom: 1px solid #212121;
}

.upload table tr td textarea {
	margin: 5px;
	width: 200px;
	min-width: 200px;
	max-width: 200px;
	height: 30px;
	min-height: 30px;
	text-indent: 5px;
	border: none;
	border-bottom: 1px solid #212121;
}

.upload table tr td .img-btn {
	border: none;
}


 

 

Posted
4 minutes ago, Sn!k3rs said:

incearca sa scazi din footer la width:95% etc destea

El este pe pozitie absolute si ar trebui sa fie jos fara a se ridica.

footer {
	position: absolute;
	height: 100px;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: #212121;
	box-shadow: 0 0 5px #1a1a1a;
}

 

  • 2 months later...
  • gaby changed the title to Problema distanta footer fata de sidebar

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.