Jump to content

Problema distanta footer fata de sidebar


Jetix

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


 

 

Link to comment
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;
}

 

Link to comment
Share on other sites

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

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.

  • 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.