Jump to content
Sign in to follow this  
Jetix

Problema distanta footer fata de sidebar

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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...