Jump to content
Sign in to follow this  
Jetix

Problema footer.

Recommended Posts

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;
}


 

 

Share this post


Link to post
Share on other sites

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;
}

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×