I have 2 boxes that should show up next to eachother. I want one to have a vertical fixed position.
So when I scroll up or down the box stays at the same height.
But I don't want it to be horizontal fixed, because I want the 2 boxes together always in the center. Even when you make your browser bigger or smaller. For this I use the margin: 20px auto;
Is there any way how I can keep the margin and get 2 boxes where 1 of them has a vertical fixed position.
Just like this website when making a post. There is a the main page with the question and a sidebox with similar question that always stays on the screeen.
My code so far:
<!DOCTYPE html>
<html>
<head>
<link rel="icon" type="image/png" href="/favicon.ico">
<style>
html,
body {
background-color: #026642;
}
#container {
width: 800px;
margin: 20px auto;
position: relative;
}
#sidebox {
background-color: white;
padding: 5px;
margin: 5px;
border-radius: 5px;
width: 180px;
position: absolute;
}
#indexcontainer {
padding: 10px;
background-color: #FFD302;
border-radius: 20px;
width: 580px;
position: absolute;
}
#header {
text-align: center;
}
#content {
background-color: white;
padding: 5px;
margin: 5px;
border-radius: 5px;
}
#content i {
font-size: 14px;
}
#footer {
clear: both;
padding: 0 5px;
font-size: 11px;
clear: both;
}
a:link {
text-decoration: none;
color: black;
}
a:visited {
text-decoration: none;
color: black;
}
a:hover {
text-decoration: underline;
color: black;
}
a:active {
text-decoration: underline;
color: black;
}
</style>
</head>
<body>
<div id="container">
<div id="sidebox">
Sidebox
</div>
<div id="indexcontainer">
<div id="header">
<img src="images/emte.jpg" alt="logo" width="200" height="100">
</a>
</div>
<div id='content'>
Main text box
</div>
<div id="footer"></div>
</div>
</div>
</body>
</html>
How it needs to work:
use this CSS...
body {
background-color: #026642;
}
#container {
width: 100%;
}
#container #indexcontainer{
margin-left:23%;
width:30%;
}
#container #indexcontainer #header #sidebox {
background-color: white;
color:red;
padding: 5px;
margin-left:31%;
border-radius: 5px;
width: 20%;
position: fixed;
}
#indexcontainer {
padding: 10px;
background-color: #FFD302;
border-radius: 20px;
width: 580px;
position:relative;
}
#header {
text-align: center;
}
#content {
background-color: white;
padding: 5px;
margin: 5px;
border-radius: 5px;
}
#content i {
font-size: 14px;
}
#footer {
clear: both;
padding: 0 5px;
font-size: 11px;
clear: both;
}
a:link {
text-decoration: none;
color: black;
}
a:visited {
text-decoration: none;
color: black;
}
a:hover {
text-decoration: underline;
color: black;
}
a:active {
text-decoration: underline;
color: black;
}
for further look at this jsfiddle link http://jsfiddle.net/NJMK6/4/
Hope this help you... thanks
<html>
<head>
<script type="text/css">
#sidebox{
margin:left;
position:fixed;
}
</script>
</head>
<body>
<div id="sidebox">
Sidebox
</div>
<p>
other data to display......
</p>
</body>
Hope this will helps
also you can see this JsFiddle link http://jsfiddle.net/Dn3UH/
#indexcontainer {
padding: 10px;
background-color: #FFD302;
border-radius: 20px;
width: 40%;
position: relative;
margin: 0 auto;
}
#container {
width: 100%;
margin: 20px auto;
position: relative;
}
Related
I did check the other questions, but none of them fixed my problem. When I resize the page, my elements are moving everywhere, all squashed up. I even tried doing a wrapper div, and that didn't help. Are we allowed to post web sites? Because I have the site live.
<!DOCTYPE html>
<html>
<head>
<title>Promises!-Contact</title>
<meta charset="UTF-8">
<style>
#body {
margin: 0 auto;
width: 370px;
height: 1%;
margin-top: 100px;
border-radius: 15px;
border: 5px dotted #00A396;
background-clip: content-box;
background-color: #F8B72E;
text-align: justify;
font-family: Kirvy;
overflow: hidden;
font-size: 13px;
}
#wrapper {
width: 100%;
margin: 0%;
padding: 0%;
}
p { padding: 10px;}
#title {
text-align: center;
font-size: 24px;
top-margin: 0px;
padding: 0px;
}
nav {
font-family: KBAStitchInTime;
font-size: 12px;
color: #EC225F;
right: 220px;
top: 140px;
position: relative;}
#dot1 {
font-size: 100px;
display: inline-block;
line-height: 20px;}
#dot2 {
font-size: 100px;
display: inline-block;
line-height: 20px;}
#dot3 {
font-size: 100px;
display: inline-block;
line-height: 20px;}
#dot4 {
font-size: 100px;
display: inline-block;
line-height: 20px;}
a:link { color:#EC225F; text-decoration:none; }
a:visited{ color: purple; }
a:hover{ color: ;}
a:active {}
body {background-color: #262626;
text-align: left;
}
</style>
</head>
<body>
<div id="wrapper">
<nav>
<span id="dot1">.</span>About<br>
<span id="dot2">.</span>Pages<br>
<span id="dot3">.</span>Poems<br>
<span id="dot4">.</span>Home<br>
</nav>
<div id="body">
<p id="title">Contact!</p>
<p> I love getting mail! Find me at:</p>
</div>
</div>
</body>
</html>
Why does my header and navigation go below my hero image?
Whenever I increase the size of my text on my image the nav and heading goes down further. If i get rid of the size for the text it goes back to where i want it.
Here is my html and css.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Amanda Farrington</title>
<link rel="stylesheet" href="css/demo.css" />
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,500' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="header">
<div id="leftHeader">
<img src="assets/logo2.jpg" alt="Logo" style="width:65px;height:65px">
<h1>Amanda Farrington</h1>
</div>
<div id="nav">
<ul>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div>
</div>
<div id="hero">
<div id="heroImage">
<img src="assets/trees.jpg" alt="trees" style="width:100%;height:10%">
</div>
<div id="overlay">
<h2>Amanda Farrington</h2>
</div>
</div>
</body>
</html>
CSS
body {
margin: 0px;
padding: 0px;
height: 100%;
background: white;
}
#header {
color: #D7DADB;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size : 15px;
text-align: left;
width: 97%;
margin:0;
padding-left: 3em;
float: left;
background: white;
height: 10%;
}
#leftHeader
{
}
#header img
{
float: left;
padding-left: 3em;
}
h1{
width: 9em;
float: left;
padding-left: 0.5em;
color: #45CCCC;
padding-bottom: 1px;
}
#nav {
width: 40%;
margin:0;
padding:0;
text-align: right;
color: red;
font-size:20px;
float: right;
padding-right: 2em;
}
#nav ul {
padding: 1px;
}
#nav li {
display: inline;
padding: 38px;
}
#nav li a {
color: #2C3E50;
text-decoration: none;
}
#nav li a:hover {
color: #45CCCC;
}
#hero{
width: 100%;
height: 30em;
}
#heroImage
{
top: 12%;
width: 100%;
z-index: 1;
position: absolute;
}
#overlay{
width: 30em;
top: 90%;
margin-left: 30%;
z-index: 2;
position: relative;
}
h2{
width: 9em;
position: relative;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 60px;
float: center;
color: white;
opacity: 1.0;
text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
}
It's because of position: absolute; of your #heroImage div (if I understand, what do you want)
I just started building a cms, and i have not even gotten to the server side scripting yet but i noticed something about my html tag each time i declare the doctype tag in the html the whole html and body tag is always shortened here is a screenshot http://postimg.org/image/h3lj4ozzd/ i've checked my css and html for any mistake but i can't find any error. i was using firefox to run my pages initially, i even switched to chrome, but the error still comes up. i even tried running it on a windows system with wamp (I'm using linux) but the error is still there.i've tried everything i can lay my hands on and they are not working...pls i need suggestions.Thanks
This is the normal document
http://postimg.org/image/xcahm9bsj/
This is the html file with the doctype in it
<!DOCTYPE html>
<html lang="en">
<head>
<title>Welcome to quick score</title>
<link rel = "stylesheet" href = "style.css" />
</head>
<body>
<div id = "top_bar"><p>Home</p></div>
<div id = "two">
<p>Database connection was succesful</p>
</div>
<div id = "one">
<ul>
<li><img src = "images/sidebar/dashboard.png" /> Dashboard</li>
<li><img src = "images/sidebar/attendance.png" /> Attendance sheet </li>
<li><img src = "images/sidebar/grades.png" /> Grades</li>
<li><img src = "images/sidebar/students.png" /> Students</li>
</ul>
</div>
</body>
</html>
and this is the css file i'm using
#charset "utf-8";
/* CSS Document */
body {
margin: 0 auto;
padding: 0;
border: 3px solid #000000;
}
p {
padding: 0;
margin: 0;
font-family: "Trebuchet MS";
}
a {
text-decoration: none;
}
#top_bar {
padding-top: 5px;
background-image: url(images/back3.jpg);
color: #ffffff;
border-bottom: 2px solid #ffffff;
height: 40px;
width: 100%;
}
#one { background-image: url(images/back3.jpg);
width: 15%;
height: 100%;
margin-top: -16px;
color: #ffffff;
}
#one ul {
list-style-type: none;
padding: 0;
height: 50%;
padding-top: 20px;
}
#one ul li {
padding-bottom: 2px;
text-align: left;
display: block;
}
#one ul li a {
color: #ffffff;
padding-top: 6px;
padding-bottom: 6px;
width: 100%;
display: block;
font-family: "Comic Sans MS";
}
#one ul li a:hover {
background-color: #ffffff;
}
#one ul li a img {
margin-bottom: -10px;
}
.position {
margin-top: 5px;
}
#one ul li a:hover {
color: #000;
}
#one ul li:active{
text-decoration: none;
background-color: blue;
padding-left: 48px;
padding-right: 47px;
padding-bottom: 9px;
text-align: center;
}
#two {
width: 81.5%;
height: 200px;
float: right;
padding: 20px 0 0 20px;
}
.login {
margin: 0 auto;
padding: 10px;
background-color: #999;
}
form ul li {
padding-bottom: 5px;
display: block;
}
#white {
display: block;
background-color: black;
height: 40%;
width: 50%;
}
.buttons {
color: white;
margin-left: 60px;
}
.register_buttons {
color: white;
margin-left: 70px;
}
input[type=submit] {
border: 1px solid #f44c0e;
color: #fff;
background: tomato;
padding: 10px 20px;
border-radius: 3px;
}
input[type=submit]:hover {
background: #f44c0e;
}
For HTML5 compliant browsers and a good way to follow the web evolution keep that doctype in place.
Have you tried adding:
html, body{
width:100%;
height:100%;
}
Also you should get rid of your borders, specially on body. Otherwise add:
*{box-sizing: border-box;}
I'm having trouble putting a sticky footer onto a site I'm working on.
I've tried everything and can't think of what the problem could be.If someone could take a look at the coding id appreciate it.
As some content on the site is only going to be small paragraphs i need a sticky footer to stick to the bottom to stop it floating in the middle of the site.
I have the content in a div that over laps a image and id like the footer to float on the bottom. however when i close the divs i can't get the footer to stay at the bottom, it starts floating under the image banner. Ive tried position:fixed; but i don't want that as it overlaps the content. Thanks
HTML
<!doctype html>
<html><head>
<meta charset="UTF-8">
<title>Linear Partners</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=yes" />
<meta name="viewport" content="initial-scale=1, maximum-scale=2" />
<link href="style1.css" rel="stylesheet" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/modernizr.js"></script>
<script src="js/respond.min.js"></script>
<script src="js/prefixfree.min.js"></script>
<script type='text/javascript' src='js/main.js'></script>
<script>
$(document).ready(function() {
$('#menu-toggle').click(function () {
$('#menu').toggleClass('open');
e.preventDefault();
});
});
</script>
</head>
<body>
<div id="wrap">
<div id="mainpage">
<div id="header">
<img src="images/Linear.Partners.Logo.png" width ="173" height="65" alt="logo">
<nav class="nav clearfix">
<a id="menu-toggle" class="anchor-link" href="#"><img src="images/3lines.png" width ="31" height="25"></a>
<ul class="simple-toggle" id="menu">
<li>Home</li>
<li>About
<ul>
<li>Team</li>
</ul>
</li>
<li>Expertise</li>
<li>Research</li>
<li>Best Practice</li>
<li>Join Our Team</li>
<li>Contact</li>
</ul>
</nav>
</div>
<div id="bg-image"style="background-image:url(images/slide1.jpg); background-position:50% 50%;">
<div id="main" class="wrapper clearfix">
<left>
<h1>Privacy Policy</h1>
<p>Linear Partners are required by law to comply with the UK and European Data Protection legislation. We are committed to ensuring that all employees comply with the Acts in order to maintain the confidentiality of personal data.</p>
</left>
<right>
<h1>Privacy Policy</h1>
Linear Partners are required by law to comply with the UK and European Data Protection legislation. We are committed to ensuring that all employees comply with the Acts in order to maintain the confidentiality of personal data.</right>
</div>
</div>
<div class="clear"></div>
<footer>
<div id="footer-wrapper">
<div id="footer-content">
<div class="Copyright">
Copyright © 2014 Linear Partners. All rights reserved.
</div>
<div class="footer-nav">
Home Privacy Diversity Policy
</div>
</div>
</div>
</footer>
<!-- #end footer area -->
</body>
</html>
CSS
html, body {
height: 100%; margin: 0; padding: 0;
}
body
{
margin:0;
padding:0;
background: #fff;
font: 13px'helvetica', ariel, sans-serif;
color: #000;
}
/*Header*/
#header
{
position:relative;
width:autopx;
max-width:950px;
height:65px;
margin: 0 auto;
z-index:10000;
background: #fff;
padding:20px;
}
#wrap {min-height: 100%;}
#mainpage {
padding-bottom: 85px;} /* must be same height as the footer */
.footer {position: relative;
margin-top: -85px; /* negative value of footer height */
height: 85px;
clear:both;}
/* nav */
.nav
{
width:autopx;
float:right;
padding-top:22px;
}
ul.simple-toggle
{
list-style:none;
padding: 0px;
margin: 0px;
text-align: center;
}
ul.simple-toggle li {
display: inline-block;
text-align: center;
border-right: 1px solid #cfcfcf;
}
ul.simple-toggle li:last-child
{
border-right: none;
}
ul.simple-toggle li a
{
display: block;
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 5px;
color:#000;
text-decoration:none;
}
.anchor-link
{
display: none;
background-color: #16447b;
margin-top: -10px;
float: right;
height:40px;
width:40px;
}
.anchor-link img
{
margin:9px 6px 0px 4px ;
}
#mobile-nav
{
display:none;
}
nav ul ul
{
display: none;
}
nav ul li:hover > ul
{
display: table-cell;
text-align: center;
vertical-align: middle;
}
nav ul
{
list-style: none;
position: relative;
display: inline-table;
}
nav ul li:hover
{
background: #16447b;
color: #fff;
}
nav ul li:hover a
{
color: #fff;
}
nav ul ul
{
background: #092a55; padding:0px; margin:0px;
position: inherit; top: 100%;
}
nav ul ul:hover a
{
background: #6689b3;
}
/*wrapper*/
#bg-image {
z-index:-5780000;
float: left;
width: 100%;
height:250px;
background-size:cover;
margin-top:2px;
border: 2px solid #16447b;
border-width: 2px 0;
border-color: #fff;
box-shadow: 0 2px 0px #16447b, 0 -2px 0px #16447b;
}
.wrapper
{
width:90%;
max-width: 910px;
margin: auto;
margin-top:125px;
padding:20px;
background: #fff;
height:150px;
}
#main left{
background-color: #fff;
width: 62.5%;
float: left;
}
#main right
{
background-color:#fff;
width: 35%;
float: right;
}
/*Footer*/
#footer-wrapper
{
height:65px;
margin: 0 auto;
background: #000;
padding:20px;
}
#footer-content
{
height:65px;
max-height:120px;
position:relative;
width:100%;
max-width:950px;
margin: 0 auto;
margin-top:20px;
color: #fff;
}
.Copyright
{
margin-top:5px;
float:left;
color: #fff;
text-decoration:none;
}
.footer-nav
{
margin-top:5px;
float:right;
color: #fff;
text-decoration:none;
margin-right:-6px;
}
.footer-nav a
{
color: #fff;
padding-left:6px;
padding-right:5px;
border-right: 1px solid #fff;
text-decoration:none;
float: left;
}
.footer-nav a:last-child
{
border:none;
}
.footer-nav a:hover
{
text-decoration:underline;
}
.clear {
clear:both;
}
/*media*/
#media (max-width:750px){
ul.simple-toggle
{
display: none;
}
.anchor-link, #mobile-nav
{
display: block;
}
ul.open
{
background-color: #16447b;
display: block;
list-style: none outside none;
margin: 0;
padding: 0;
position: absolute;
right: 20px;
top: 100%;
width: 175px;
z-index: 50000;
opacity:0.90;
}
ul.open ul
{
background-color: #092a55;
display: none;
list-style: none outside none;
margin: 0;
padding: 0;
position: relative;
top: 100%;
width: 175px;
z-index: 50000;
}
ul.open li
{
display: block;
list-style: none;
text-align: center;
border: none;
}
ul.open li a
{
display: block;
padding: 10px 5px;
border-bottom: 0px solid #5578a4;
color: #fff;
}
ul.open li a:hover
{
background-color: #375d8f;
color: #fff;
}
.wrapper
{
width:85%;
max-width: 910px;
margin: auto;
margin-top:125px;
padding:20px;
background: #fff;
height:250px;
}
#main left{
background:#fff;
width: 62.5%;
float: left;
}
#main right
{
background:#fff;
width: 35%;
float: right;
}
.Copyright
{
position:absolute;
left:0px;
top:-10px;
font: 11px'helvetica', ariel, sans-serif;
}
.footer-nav
{
position:absolute;
left:-6px;
top:10px;
font: 11px'helvetica', ariel, sans-serif;
}
}
#media (max-width:480px){
img[src*="images/Linear.Partners.Logo.png"]
{
margin-top:13px;
height:40px;
width:106px;
}
.bg-image {
float: left;
width: 100%;
height:150px;
background-size:cover;
}
.wrapper{
width:80%;
height:200px;
margin-top:75px;
}
#main right
{
float: left;
clear: left;
margin: 0 0 10px;
width: 100%;
}
#main left
{
float: left;
clear: left;
margin: 0 0 10px;
width: 100%;
}
.Copyright
{
position:absolute;
left:0px;
top:-10px;
font: 11px'helvetica', ariel, sans-serif;
}
.footer-nav
{
position:absolute;
left:-6px;
top:10px;
font: 11px'helvetica', ariel, sans-serif;
}
}
To avoid the footer to overlap the content add a margin to the content corresponding to the footer's height
.footer-nav{
//...
position:fixed;
bottom;0;
height:50px; // just an example
//...
}
.wrap{
margin-bottom:50px;// same as .footer-nav height
}
FIDDLE
Try this for footer div:-
#footer-wrapper {
background: none repeat scroll 0 0 #000000;
height: 65px;
margin: 0 auto;
padding: 20px;
bottom: 0;/*add from here*/
left: 0;
position: fixed;
width: 100%;/*to here*/
}
Check out this code
it may help youjust wirte the footer tag inside the wrap div
<div id="wrap"> <footer></footer> </div>
It seems that everything alright but you missed somewhere 2 closing DIVs.
Try to add them before
<div class="clear"></div>
http://jsfiddle.net/wF9UL/
In my code below, how do I get the the text in the class="author" to right align underneath the text in class="label"? In the example below, the "e" in "Author name" should right align underneath the ":' in "Answered by:". Thanks.
<html>
<head>
<style type="text/css">
.action {
display: inline;
}
.add-box {
margin-left: 40px;
display: inline;
}
.share-button {
margin-left: 30px;
display: inline;
}
.flag {
margin-left: 30px;
display: inline;
}
.author-area {
margin-left: 30px;
display: inline;
}
.label {
margin: 0;
display: inline;
}
.author {
margin: 0;
}
.gray-button {
background: #C0C0C0;
font-size: 14px;
margin:0;
padding: 10px;
border: 1px solid #C0C0C0;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="action">
<div class="add-box">
Plan
</div>
<div class="share-button">
<a> Share </a>
</div>
<div class="flag">
<a>flag</a>
</div>
<div class="author-area">
<p class="label">Answered by:</p>
<p class="author">Author name </p>
</div>
</div>
</body>
You can use 'inline-block' on the '.author-area':
.author-area {
margin-left: 30px;
display: inline-block;
vertical-align: top;
}
The 'vertical-align' option stops the div from sticking out above the others.
Theres a couple of options. But you can try to float the elements to the left and set a text-align:right to the author-area DIV.
<style type="text/css">
.action {
display: inline;
float: left;
}
.add-box {
margin-left: 40px;
display: inline;
float: left;
}
.share-button {
margin-left: 30px;
display: inline;
float: left;
}
.flag {
margin-left: 30px;
display: inline;
float: left;
}
.author-area {
margin-left: 30px;
display: inline;
float: left;
text-align: right;
}
.label {
margin: 0;
display: inline;
}
.author {
margin: 0;
}
.gray-button {
background: #C0C0C0;
font-size: 14px;
margin:0;
padding: 10px;
border: 1px solid #C0C0C0;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
cursor: pointer;
}
</style>
I always like to use a CSS grid system, such as
http://www.1kbgrid.com/
to do my div positioning etc with... makes it a snap to do things like you outline above