I'm currently working on a new website: http://maartenlodewijk.nl/2013/
The light-grey bar on the right side (with the word "test" in it) is supposed to be my nav bar. I've been trying for days to get its height to fill the page height (not just browser height, but the entire page). Just as in this mockup I've made: http://i.imgur.com/Knjlc.jpg
I've tried multiple ways now, from simple ones such as setting body and html height to 100% (No luck there) and a CSS hack such as here: ejeliot.com/samples/equal-height-columns/example-7.html (Which works, but a hack is really a last-resort option for me)
Here is my HTML and CSS code. In case youre wondering: Yes, I have both a wrapper and a container div, the wrapper centers the container, while the container maintains a fixed position within the wrapper.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Maarten Lodewijk // Home</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="navigation">
test
</div> <!-- end navigation -->
<div id="wrapper">
<div id="container">
<div id="header">
<img src="images/headerpng.png" alt="Logo" border="0" />
</div> <!-- header -->
<div id="weclome">
<img src="images/homemessagepng.png" width="645" height="203" alt="Maarten Lodewijk, Communication & Multimedia Designer" /></div><!-- end welcome -->
<div id="content">
<div id="leftcolumn">
<h1>HEADER</h1>
<p>TEXT</p>
<p>TEXT</p>
<p>TEXT</p>
</div><!-- end leftcolumn -->
<div id="rightcolumn">
<h1>Contact</h1>
<table width="286" border=0>
<tbody>
<tr>
<td width="96">Mail:</td>
<td width="180" class="rightalign">mail#maartenlodewijk.nl</td>
</tr>
<tr>
<td>Telefoon:</td>
<td class="rightalign">+31 6 348 268 52</td>
</tr>
</tbody>
</table>
<h1>HEADER</h1>
<p>TEXT</p>
<p>TEXT</p>
<p>TEXT</p>
</div><!-- end rightcolumn -->
</div> <!-- end content -->
</div> <!-- end container -->
</div> <!-- end wrapper -->
</body>
</html>
CSS
/* ----- TAGS -------*/
body {
font-size: 100%;
padding: 0px;
margin: 0px;
font-family: Georgia, "Times New Roman", serif;
background: #e8e8eb url(images/bg.png) repeat-y;
color: #666666;
}
html{
}
h1{
font-size: 150%;
color: #ff3366;
padding-top:30px;
}
/* ----- LAY OUT -----*/
#wrapper{
width:955px;
margin-left:auto;
margin-right:auto;
}
#container{
width:645px;
margin-left:20px;
}
#content{
padding: 0px 20px 0px 20px;
}
#navigation{
position:absolute;
top:0;
right:0;
width: 16%;
min-width: 163px;
max-width:233;
background-image:url(images/navbarbg.jpg);
height: 100%;
}
#leftcolumn{
width:286px;
float:left;
}
#rightcolumn{
width:286px;
float:right;
}
/* ----- CLASSES -----*/
.rightalign{
text-align:right;
}
If i saw your layout so it's good if you give position:fixed instead of position:absolute; to your #navigation DIV. Write like this:
#navigation{
position:fixed;
top:0;
right:0;
width: 16%;
min-width: 163px;
max-width:233;
background-image:url(images/navbarbg.jpg);
height: 100%;
}
If you want your menu to be ALWAYS visible you might wanna use the solution from a previous answer.
If you would simply like to extend your sidebar after a scroll - you need to use the so-called css equal height columns - here is an example of them: http://www.vanseodesign.com/css/equal-height-columns/
There is big problem in this layout you are using background image on body tag which is 1920x99 so your body is reacting to this section only.
some quick changes make this working fine.
please see my attached output i did these quick changes with developer tool.
you should restructure the layout put everything inside wrapper and use float,position for the navigation and other section.
nothing is working together in your layout you should re-build it and use proper style for the every section
if you want equal height #navigation and #wrapper apply this class .equal_height and
use this jquery function with library file
function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
$(document).ready(function() {
equalHeight($(".equal_height"));
});
May it will help you.
Please add a background color to #wrapper and see your #leftcolumn and #rightcolumn are not in the #wrapper area. Maybe this is an issue in your template. Please check after fixing that.
If that won't work you can use jQuery to get heights dynamically and set the navigation height.
Related
I'm making a website and in the header I need a logo and a horizontal set of links. The logo must be on the left and the links must be on the right. The problem I'm running into is that if I add too many links to the list, it will wrap to the next line, but I need it to be closely attached to the right side of the page. Both the banner and the list of links are in the header. My CSS is as follows.
header{
width:100%;
height:10%;
background-color:#AC222A;
color:white;
}
links{
position: relative;
height: 10;
width: 10%;
float: right;
top: 35%;
display: inline;
}
banner{
position: absolute;
padding: 1%
left: 1%;
height; 10;
width: 15%
float: left;
}
And the HTML is as follows:
<html>
<head>
<link rel="stylesheet" href="index.css">
</head>
<div id="header">
<div id = "banner">
<img src="pictures/logo_logo.png">
</div>
<div id = "links">
home
|
About
|
Contact Us
</div>
</div>
<body>
</body>
</html>
It's missing the # on the id names in the CSS. In fact the whole layout can be done with a simple float, so move links before banner in the HTML.
#header {
background-color:#AC222A;
color:white;
}
#links {
float:right;
}
<div id="header">
<div id="links">
home | About | Contact Us
</div>
<div id="banner">
<img src="pictures/logo_logo.png"/>
</div>
</div>
Edit: (transferring the comments into this) - to fix the problem based on your existing code, you have #links{width:10%;} set there, just remove that.
After taking out the Width attribute, the link menu shows up nicely formatted with no problems.
I am relatively new to StackOverflow and am experiencing some difficulties while making a webpage
So what I require is a one page website divided into different sections, which are full-width divs (i.e 100% width of the screen)and are consecutive with different background colors.
The problem I am facing is that the divs do not take up the full width of the screen and have white space not only on the sides, but also between 2 divs
Also, when the window size reduces, the gap between divs increases
The desired result is as observed in the following websites:
http://classrebels.com/
http://startbootstrap.com/templates/freelancer/
The code I am using is as follows:
i) HTML:
<html>
<body>
<div class="full" id="one">
<h1>Just something</h1>
</div>
<div class="full" id="two">
<h1>Just something</h1>
</div>
</body>
</html>
ii) The CSS:
.full{
width= 100%;
}
#one{
background-color: #fff;
}
#two{
background-color: #f13;
}
Please do tell me where I am going wrong
Demo
html
<div class="full" id="one">
<h1>Just something</h1>
</div>
<div class="full" id="two">
<h1>Just something</h1>
</div>
css
body, html {
width: 100%;
height: 100%;
margin:0; /* default margin set to 0 */
padding:0; /* default padding set to 0 */
}
.full {
width: 100%;
}
#one {
background-color: gray;
height: 50%; /* whatever you want to give height */
}
#two {
background-color: #f13;
height: 50%; /* whatever you want to give height */
}
.full h1 {
margin:0; /* default margin of h1 tag set to 0 */
padding: 20px 10px 10px 20px; /* padding if you want to give spaces between borders and content of div */
}
Demo Fiddle
To remove the default margin/padding on the viewport (which is giving you the whitespace), you need to add the following CSS:
html, body{
width:100%; /* <-- also a good idea to add */
margin:0;
padding:0;
}
and change:
.full{
width= 100%;
}
to:
.full{
width:100%;
}
CSS style property/value pairs are seperated with a colon : and not an equals =
have you tried setting margin and padding 0 in full and in body tag too
like
.full
{
width :100%;
margin:0px;
padding:0px;
}
similarly your heading also takes some margin so set the margin of heading as required.
for better please consult this link w3schools
You have to change the body and h1 margins, since they have default values in the browser.
I've fixed it for you in this fiddle:
h1{
margin: 0px;
}
body{
border: 0px;
padding: 0px;
margin: 0px;
}
http://jsfiddle.net/pWLgb/
the problem is that you dont give the whole div a background color but only the text.
if you ad a border you can see the real size of the div and it will fill the whole div with color.
check out the fiddle i made for that
border: 1px solid black;
http://jsfiddle.net/2h4kQ/
you can set the border to 0px so it is not shown and it will give you the right result
The demo's that you linking to aren't using full width divs. They actually use a full width <section> element which has the background color set on it.
Then, they have an inner row <div> which then has a container and column <div>. So in the Freelancer example it looks like this:
<section class="success" id="about">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>About</h2>
<hr class="star-light">
</div>
</div>
<div class="row">
<div class="col-lg-4 col-lg-offset-2">
<p>Freelancer is a free bootstrap theme created by Start Bootstrap. The download includes the complete source files including HTML, CSS, and JavaScript as well as optional LESS stylesheets for easy customization.</p>
</div>
<div class="col-lg-4">
<p>Whether you're a student looking to showcase your work, a professional looking to attract clients, or a graphic artist looking to share your projects, this template is the perfect starting point!</p>
</div>
<div class="col-lg-8 col-lg-offset-2 text-center">
<a href="#" class="btn btn-lg btn-outline">
<i class="fa fa-download"></i> Download Theme
</a>
</div>
</div>
</div>
</section>
Sample of the CSS:
section.success {
color: #fff;
background: #18bc9c;
}
.container {
width: 1170px;
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}
Download that template, it uses Bootstrap, and play around with it to get the look you want.
I need to create a landing page which consists of an image with text at the top, a couple of videos under that and a strip line image of 2 pixels which I need it so stick to the bottom.
<html>
...
<body>
<img src="topimage.png" alt="" />
<table>
<tr>
<td>Video 1 here</td>
<td>Video 2 here</td>
<img src="2pixelhightimage.png" alt="" />
I basically need it to be centered and look relative to the size of the screen so basically resize to compensate the screen resolution.
How can I do this?
You can do it preatty easelly by adding a wrapper to your content and setting left and right margin to auto. Use % instead of pixel.
<div class="wrapper">
<img src="topimage.png" alt="">
<!-- No need to use table here. Just use divs for layout stuff. -->
<table>
<tr>
<td>Video 1 here</td>
<td>Video 2 here</td>
</tr>
</table>
<img class="fixed" src="2pixelhightimage.png" alt="">
</div>
And then the CSS:
.wrapper { margin: 0 auto;}
img { max-width:100%; height:auto;}
.fixed {position:fixed; bottom:0;}
something like this for the general layout?
<div class="wrap">
<div class="content">content goes here</div>
</div>
.wrap
{
width:100%;
background:gray;
}
.content
{
width:80%;
margin:0 20%;
background:green;
}
http://jsfiddle.net/k25gU/
Create a wrapper div around the content
<div id="wrapper">
<!-- content here -->
</div>
and style it like this
#wrapper {
width: 980px /* Maximum width of the content */
max-width: 100% /* responsive width */
margin: 0 auto; /* center the wrapper */
}
also don't use tables for the videos. Table columns will not break on small screens. Use
<ul class="videos">
<li class="video">
<!-- content here -->
</li>
<li class="video">
<!-- content here -->
</li>
</ul>
then css them
.videos {
list-style: none; /* no bullets */
}
.videos .video {
display: inline-block; /* videos side by side as long as there is space */
width: 245px; /* 980px site width /4 = 245px = 4 videos in one row */
}
A sticky strip line at the bottom could be:
<div class="strip-line-bottom"></div>
and css for it
.strip-line-bottom {
position: fixed;
bottom: 0;
width: 100%;
height: 2px;
background: url(path/to/image.jpg) repeat-x;
}
For detailed information you'll have to provide some more info ;-)
I have some html...
<html>
<body>
<div id="outfit-wrapper">
<div class="ui-droppable" id="outfit-area"> <!-- drop to this area -->
content...
</div>
<div id="products-area"> <!-- drag from this area -->
content...
</div> <!-- end products-area -->
</div>
</body>
</html>
Selected relevant parts of css looks like this:
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#outfit-wrapper {
position:absolute;
width:98%;
margin-left:1%;
margin-right:1%;
height: auto !important; /* ie6 ignores !important, so this will be overridden below */
min-height: 100%; /* ie6 ignores min-height completely */
height: 100%;
border-left:1px solid #dfdfdf;
border-right:1px solid #dfdfdf;
padding:0;
}
#outfit-area {
position:absolute;
height:100%;
float:left;
width:60%;
overflow: hidden;
border-right:1px solid #dfdfdf;
}
#products-area {
float:right;
width:40%;
}
It works perfectly and outfit-wrapper is 100% of the webbrowsers height. #outfit-area and #products-area fills upp 100% of the #outfit-wrapper div as expected.
Now I want a div with some content at the top of the #outfit-wrapper:
<html>
<body>
<div id="outfit-wrapper">
<div id="header">content</div>
<div class="ui-droppable" id="outfit-area"> <!-- drop to this area -->
content...
</div>
<div id="products-area"> <!-- drag from this area -->
content...
</div> <!-- end products-area -->
</div>
</body>
</html>
I want the wrapper to have the same height as before, I just want to add the header-div. I need the height of header-div and "#outfit-area and #products-area" to be 100% together. How do I achieve this? Do I have to add a div-element like this?
<html>
<body>
<div id="outfit-wrapper">
<div id="header">content</div>
<div id="content-area">
<div class="ui-droppable" id="outfit-area"> <!-- drop to this area -->
content...
</div>
<div id="products-area"> <!-- drag from this area -->
content...
</div> <!-- end products-area -->
</div> <!-- end content-area -->
</div>
</body>
</html>
For some strange reason - if I set #products-area to position:absolute, then I can't use draggable functionaliy. Please take that in account if you have a good answer to my question :-)
When you set <div id="outfit-area"> to height:100%, it takes on 100% of the height of the parent element - in this case <div id="outfit-wrapper">.
When you add the header, outfit-area is STILL taking 100% of outfit wrapper which now includes the header. You need to either:
A. Give <div id="header"> a percentage height and then subtract that height from 100% and use this value as the percentage height for <div id="outfit-area">, like this:
#header {
height: 10%;
}
#outfit-area {
height: 90%;
}
Edit: Here's a fiddle demonstrating: http://jsfiddle.net/CVwCr/
-OR-
B. Nest the header inside of <div id="outfit-area"> so that it's height isn't being added to ` like so:
<div class="ui-droppable" id="outfit-area"> <!-- drop to this area -->
<div id="header">
content
</div>
content...
</div>
I am attempting to create a webpage layout template my aim is header, footer and 2 column between, the 2 columns are what are giving me the biggest headache, I want the left column to be a fixed width, and the right column to fill the remaining area, I have successfully completed this also. But I also want both columns’ to fill the raining space vertically also and when the content fills more than the space I am looking each column to be scolded separately and not use the normal Brower scroll bar
My current html code is as follows
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1 /DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="./style/default/style.css" />
</head>
<body>
<div class="container">
<div class="header">
HEADER
</div>
<div class="content">
<div class="content-contain">
<div id="content-col1">
COLUMN 1
</div>
<div id="content-col2">
COLUMN 2
</div>
</div>
</div>
</div>
<div class="footer">
FOOTER
</div>
</body>
</html>
CSS
* {
margin: auto;
}
html, body {
height: 99%;
background-color: #FFFFFF;
font-family:sans-serif;
}
.container {
min-height: 100%;
height: auto !important;
height: 99%;
margin: 0 auto -1em;
}
.header {
color:#FFFFFF;
background-color:blue;
border-bottom:3px solid blue;
}
div#content-col1{
float:left;
width:220px;
padding:3px;
display:block;
padding-left:5px;
overflow-y: auto;
background-color: red;
}
div#content-col2{
margin-left: 230px;
margin-bottom:40px;
padding: 3px;
overflow-y: auto;
background-color: green;
}
.footer {
background-color:yellow;
clear:both;
}
If anyone has a better or know what I can do to make this work sucessfully please let me know
Vip32
To fill the entire width with two columns where one has a fixed with, please refer to this question.
Vertical filling is a little different. On default, the body and block elements have a dynamic height. Because the body is dynamic too, you have to set it an height in order to make the content full vertically as well.
body, div#container, ... { height: 100%; }
Some people think it's best to apply an height to the html element as well. I have my doubts, because that tag is not visible.
If you have an element that requires some height as well, like an header, or footer, please refer to the same solution for fixed width's but apply it on the height instead.