I'm having trouble positioning my vertical navigation bar to the left of my content Div. Here is what I have and what I want:
The problem, is that it's a fixed position so it's different for monitors that are not a similar size. So I'm guessing I'll need to have relative positioning but I'm not too sure on how to do it.
HTML
<!DOCTYPE html>
<html>
<head>
<title> Home Page </title>
<link rel="stylesheet" type="text/css" href= "styles/styling.css" />
</head>
<div class="container">
<ul class="nav">.....(Just nav bar stuff)
<div class="content">
<h1>abcd</h1>
<p>abcd</p>
</div>
CSS
.content {
background-color: #FFFFFF;
width: 650px;
padding: 20px;
margin: auto;
word-wrap: break-word
}
.container {
position: fixed;
top: 151px;
left: 420px;
}
Thanks!
Fixed position will help you keep your menu visible when you scroll down. Otherwise, you should not use it.
<div class="container">
<div class="one-third column">
<ul class="yourmenu">xxx</ul>
<div class="filler"></div>
</div>
<div class="two-thirds column">
Your page content here
</div>
</div>
<style>
.container {width:960px;margin:auto;}
.column {float:left;position:relative;}
.one-third {width:320px;}
.two-thirds {width:640px;}
.filler {width:100%;height:10px;}
.yourmenu {position:fixed;top:100px;} /* do not define left, because it will fix the screen and not the column div */
</style>
Use percent (%) instead of pixels (px).
Related
Right now I'm coding a menu that has a two column layout. This is the code.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>replit</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="stockapps">
<img src="icons/eShop.svg">
<img src="icons/sverse.svg">
</div>
<div class="main">
<p>
Hello!
</p>
</div>
</body>
</html>
CSS:
.stockapps {
background-color: #111;
float: left;
width: 5%;
height: 100%;
}
.stockapps :after {
content: "";
display: table;
clear: both;
}
.stockapps img{
width:100%;
display: inline;
vertical-align: top;
}
.main {
float: left;
padding: 2%;
width: 91%;
overflow: hidden;
}
The issue is that the stockapps div tag is not filling the whole screen with height instead opting to only fill the area the children objects take up.
I have tried using the clear-fix and setting overflow to hidden but neither seem to fix the issue. Its likely some beginner mistake as CSS is not my strong suit
This fiddle showcases the issue.
You can wrap stockapps and main divs into a container div
Style this container as below
I used background color for stockapps div to show you its height
.container {
display: flex;
align-items: stretch;
/*Set height as you want, you can use height in px */
height: 100vh;
}
.stockapps {
/* used background-color to show you how much height it takes*/
background-color: #999;
/*You can ignore width if it's not convenient for your desired final output */
width: 50%
}
<div class="container">
<div class="stockapps">
<img src="icons/eShop.svg">
<img src="icons/sverse.svg">
</div>
<div class="main">
<p>
Hello!
</p>
</div>
</div>
If I understand you correctly, you need to create a 2-column layout for your menu.
To achieve this layout, I would wrap the <div class="stockapps"> and <div class="main"> into another <div> with class of manu-wrap and add this CSS styles:
.menu-wrap {
display: flex;
justify-content: space-between;
}
I would then remove the float properties and you should have a working 2-column layout.
You can find more about display: flex here.
I've tried to make the white space disappear to no avail! Below I've pasted my code. The problem occurs between .jumbotron and .footer. I know it must be something with the margin or padding, maybe with the .jumbotron h2.
HTML:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="CSS/main.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<title>Niall's Portfolio</title>
</head>
<body>
<audio src="/Users/kmahford/Music/iTunes/iTunes Media/Music/Hiatus Kaiyote/Choose Your Weapon/16 Only Time All the Time_ Making Friends with Studio Owl.m4a" autoplay></audio>
<div class="header">
<div class="container">
<div class="row">
<div class="col-md-4">
<h1>ZAH</h1>
</div>
<div>
<ul class="pull-right">
<li>About Me</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
<div class="jumbotron">
<div class="container">
<h2>making <span>rustic</span> <span id="and">and</span> <span>modern</span> meet.</h2>
</div>
</div>
<div class="footer">
<p>© Che Co.</p>
</div>
</body>
</html>
CSS:
/* Jumbotron */
.jumbotron {
height: 600px;
background: url("https://images.unsplash.com/photo-1432821596592-e2c18b78144f?q=80&fm=jpg&s=a4598570a3286ea23369fdefe46953ba") no-repeat center center;
background-size: cover;}
.jumbotron h2 {
margin-top: 0;
text-align: center;
color: #1E91B2;
padding-top: 300px;
font-size: 50px;
font-weight: 400;}
.jumbotron span {
font-weight: 800;}
.jumbotron #and {
color: #FF8208;
font-weight: 400;}
The jumbotron class has a 30px bottom margin by default. Remove it:
div.jumbotron {margin-bottom:0;}
jsFiddle example
Note that this is the reason for the spacing issue and you have to override Bootstrap's CSS with your own by making your CSS more specific in order for it to take effect.
What's happening is that within your footer, the <p> has a margin that is pushing the footer down.
What you want instead is to add this piece of CSS:
.footer p{
margin:0;
}
If I guess right you should change on the jumbotronclass the margin, like this:
CSS
.jumbotron{
margin-bottom: 0;
}
jsfiddle
if you also don't want the whitespace on the bottom of your page, set the margin from the p tag also to zero.
I have a parent DIV with a child DIV that I'd like to have stretch to the bottom of the parent. At present it does not despite having height:auto!important; A screenshot illustrating the issue can be seen here.
The relevant HTML (as a Jade template) is as follows:
.main.top0
.infoPanel.koneksa_bg_blue
.innerPanel.mtop0.mbottom0
.infoCaption.font8em.koneksa_white 404
.infoCaption.koneksa_white We can't find the page you are looking for
.infoCaption.koneksa_white
| Don't worry. Just try to go back or
a.koneksa_white.underline(href='/') home
.footer.stickyBottom.koneksa_bg_gray.koneksa_fg_light_gray
The main DIV is the parent and the infoPanel is the child (colored in blue in the image above) that I am struggling to stretch.
The corresponding CSS is as follows:
.main {
width:100%;
min-height:700px;
height:auto!important;
overflow: hidden;
z-index: 1;
top:3em;
position: relative;
}
.infoPanel {
width:100%;
height:auto!important;
display: block;
padding:0;
}
.innerPanel {
width:90%;
padding:40px 0;
height:auto!important;
margin:0 5%;
display: block;
}
I'm aware that this is a fairly common question but it seems like the answer is always to include a hard-coded height. I would like to avoid this because while that was a perfectly fine solution for the desktop styling this is intended to be displayed on mobile devices and as such I'd like it to be a bit more responsive than a hard-coded height.
Thanks for any insights that you can provide.
EDIT:
The generated HTML as requested:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html"></html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale = 0.8, user-scalable = yes">
// Imports removed
<link href="/assets/css/mvp.css" type="text/css" rel="stylesheet" media="screen and (max-width: 768px)">
<link href="/assets/css/mvp_wide.css" type="text/css" rel="stylesheet" media="screen and (min-width: 769px)">
</head>
<body class="tk-futura-pt koneksa_gray">
<div class="fullNav koneksa_bg_white boxShadow">
<div class="centerPanel">
<div class="mleft2 left khmoniker"></div>
<div class="menu right">customer login</div>
</div>
</div>
<div class="main top0">
<div class="infoPanel koneksa_bg_blue">
<div class="innerPanel mtop0 mbottom0">
<div class="infoCaption font8em koneksa_white">404</div>
<div class="infoCaption koneksa_white">We can't find the page you are looking for</div>
<div class="infoCaption koneksa_white">Don't worry. Just try to go back or home</div>
</div>
</div>
<div class="footer stickyBottom koneksa_bg_gray koneksa_fg_light_gray">
<div class="innerPanel">
<div class="caption left">
<h5 class="konekea_blue_gray mtop2">© template-filler</h5>
<div class="kh_reverse_logo mtop2"></div>
</div>
<div class="caption right">TermsPrivacyCorporate</div>
</div>
</div>
</div>
</body>
One solution that works in all modern browsers is to do the following:
html, body {
height: 100%
}
.main {
position: absolute;
top: 3em;
bottom: 0;
width: 100%;
}
This seems an unusual solution but modern browsers will actually respect all 4 sides being defined at the same time and stretch the element to match. Here is an example jsFiddle: http://jsfiddle.net/nqt7vqs1/2/
You can do the same with all child elements as well because position: absolute implies position: relative for the purposes of positioning child elements.
If this solution doesn't work, another option is to do the following:
html, body {
height: 100%
}
.main {
position: absolute;
top: 0;
height: 100%;
margin: 3em 0 -3em 0;
overflow: hidden;
}
This is a "hidden margin" trick that also works in all modern browsers. Same Fiddle with these settings: http://jsfiddle.net/nqt7vqs1/3/
I am having issues to fix the header. I already manage to make the footer sticky and responsive, now I want the header to be fixed and responsive for different screen size.
This is what I tried so far:
Live Demo http://jsbin.com/vevay/1/edit?html,css,output
HTML code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Responsive Sticky Footer</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body class="container">
<div class="block header_block">
<h1>Responsive Fixed Header</h1>
</div>
<div class="block push body_block">
<h2>Body Content</h2>
</div>
<div class="block footer_block">
<h2>Responsive The Sticky Footer</h2>
<h1>cool</h1>
</div>
</body>
</html>
CSS code
html {
height: 100%;
}
.container {
display: table;
height: 100%;
}
.block {
display: table-row;
height: 1px;
}
.push {
height: auto;
}
.container {
width: 100%;
margin: 0 auto;
}
.block:nth-child(odd) {
}
.header_block{
background: grey;
}
.body_block{
background: lightblue;
}
.footer_block{
background: green;
}
update:
I did some researcher before posting this question, their are this one but the footer is not responsive, that's why I posted this question.
EDIT
I've come up with another solution : http://jsbin.com/gevafi/2/edit but I still have a margin left at the bottom of the footer.
EDIT 2
Temporary solution: http://jsbin.com/vokiqi/1/edit?html,css,output
Decided to have mercy on you and create one from scratch for you: http://jsfiddle.net/yo2ukrua/3/
Instead of using tables, I removed all of it and kept them as blocks. For your setup, you didn't really need any tables and I'm guessing you only used it so that you could make your footer stick to the bottom.
Once they're back to blocks, you can just give the footer and header a fixed position, set the footer to bottom and header to top.
Then apply a top and bottom margin to the body and the margin should be the height of the footer and header.
CSS:
.header_block {
background: grey;
position: fixed;
width: 100%;
top: 0px;
}
.body_block {
background: lightblue;
margin-bottom: 18px; /* height of your footer */
margin-top: 18px; /* height of your header */
}
.footer_block {
background: green;
bottom: 0px;
position: fixed;
width: 100%;
}
HTML:
<body class="container">
<div class="block header_block">
<h1>Responsive Fixed Header</h1>
</div>
<div class="block push body_block">
<h2>Body Content<br>Body Content<br>Body Content <br>Body Content <br>Body Content<br>Body Content<br>Body Content<br>Body Content</h2>
</div>
<div class="block footer_block">
<h2>Responsive The Sticky Footer</h2>
<h1>cool</h1>
</div>
</body>
Alternatively, you can have a better footer
http://jsfiddle.net/yo2ukrua/15/
It uses a div (push) that has a minimum height of the window size but if the window size is smaller than the content (creating a scroll) it then uses the height of the content itself, thus always pushing the footer to the bottom. The footer also retains a position of relative.
Today I came across this code. It works as I would expect in Chrome, but it is adding a margin on a wrong element with Firefox:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Site Title</title>
<style type="text/css" media="screen">
body {
background-color: #aaa;
margin: 0;
}
#header {
background-color: #fff;
}
#logo {
float: left;
}
#menu {
float: right;
}
.container {
width: 960px;
margin: 0 auto;
}
.main {
margin-top: 36px;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div id="header">
<div class="container">
<div id="logo">Logo</div>
<div id="menu">Home</div>
<div class="clear"></div>
</div>
</div>
<div class="container main">
Content
</div>
</body>
</html>
Firefox seems to add the margin in the .main rule to the content div, which was expected, and to the header div too.
If I add some text inside the header it would work as expected and the header won't have that margin:
<div id="header"> Some text here
<div class="container">
<div id="logo">Logo</div>
<div id="menu">Home</div>
<div class="clear"></div>
</div>
</div>
</div>
I can also add some text after the header block and it would also do the trick for Firefox.
I can't figure out why is Firefox adding that margin to the header element.
Very strange problem, I don't see why this happens.
It however seems to help when you add a padding of at least 1px to .container.
Also check this demo.
The problem has something to do with the container with automatic height and floating children...
Adding display:inline-block; to the #header will make it works in every browser (well except old IE), will include in the white box the right-floated div too (that now is not), and will continue to adjust the height automatically.
Fiddle: http://jsfiddle.net/AndreaLigios/VfAq7/1/