I'm trying to create a website with the following.
On top there's just a basic horizontal menu. Below that, on the left side, is another subcategory. The content will be on the right of the subcategory and can be very long.
Now what I would like is that when you scroll anywhere on the page, it only scrolls the content div while everything else stays at its original position. I have been thinking about it for some hours now but I cannot really come up with a solution on how to do this.
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<div class="left_side"></div>
<div class="right_side"></div>
</div>
</body>
</html>
.container {
width:1000px;
}
.left_side {
float:left;
width:250px;
height:500px;
background:green;
}
.right_side {
float:right;
width:750px;
height:1500px;
background:yellow;
}
Any idea on how to do this?
Thanks in advance.
Answer was given by #jao's comment. Setting all divs, except for the content one, to position: fixed.
Add the overflow:auto style to its class.
Full explanation: http://www.w3schools.com/cssref/pr_pos_overflow.asp
Related
There are two problems with my site. Firstly, there's the fact that it won't scroll down where there's excess space (See http://www.dragonclub.co.uk/kent.html). The second problem is that my site is unable to recognise its width so it's hard for me to put images or elements in as they don't adjust to site size (See http://www.dragonclub.co.uk/alnmouth.html).
Here's the content element:
#content {
width: 100%;
margin:0 auto;
background:#ffffff;
font-size:1.20em;
min-height:400px;
padding: 0px;
text-align: justify;
line-height:1.5;
}
Here's my site HTML:
<html>
<link rel="stylesheet" href="main-style.css" />
<head><link rel='shortcut icon' href='http://www.weebly.com/uploads/1/5/5/7/1557342/custom_themes/573159643243021653/files/Favicon.png?1394411094538'/>
<meta name="google-site-verification" content="YCJ0yvYRsfDH2J_NdKW-iYnJ5sqe4xPACCFAkOob_NI" />
<div style='display:none'>{title}</div>
</head><body><div id="menu"><nav>{menu}</nav>
<div id="header">{header}</div><div id="content">{content}</div>
<div id="footer-content" style="visibility:hidden">{footer}</div><div id="flexifooter">{flexifooter:content}</div></body>
</html>
It'd be great if you could help me, and other people struggling from the problems I am facing with site dimensions. Thank You!
You have put all your content, footer etc. inside <div id="menu">
You need to move your content outside of this div, as it has position: fixed.
I have seen your Site Please remove position:fixed from "#menu" element your site will start scroll. Please see below screenshot -
I have a navigation div anchored at the top of my page. The div is entirely text, and works fine, however when scrolling over an image or text, it cannot be seen clearly. I tried to remedy this by adding a background color to the div tag, but for some reason, the background color changes the color of the entire page, covering everything.
Is this due to the div being anchored to the top? Is there a way to clear it?
Apologies for lack of code before. Here is a essentially what I am doing:
<html>
<head>
<title>stack overflow</title>
<style type="text/css">
#nav {
position: fixed;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
background-color: #0000FF;
}
</style>
<link href="yotb.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="nav"><center>HEADER</center></div>
<div id="container">
<div id="content">
PAGE CONTENT
</div>
</div>
</div>
EDIT: Karim's answer fixed it. Thank you for your help, everyone.
What you've done here is that you set position:fixed; to the element and you declare it's boundaries to top:0 bottom:0 so it's gonna spread from top to bottom, AND left:0 right:0 so it's gonna spread from left to right, simply remove right and bottom (you really don't need those bro).
Check out this FIDDLE.
<style type="text/css">
.anchored-top
{
float:left;
position:relative; /* Highlight only text in the div by wrapping objects in a span */
}
.anchored-top span
{
background-color: blue;
}
.clear
{
clear:both; /* use an empty div with a class of clear to clear the floats */
}
</style>
<div class="anchored-top">
<span>Stuff in Here</span>
</div>
<div class="clear" />
It is quite hard to provide a question without seeing what you have already, but I would recommend firstly the below. (Firstly let me apologies if you are already familiar with HTML)
Check that the div has been closed
Set a width and height to the div
Make sure you are only changing the background-color of that div and not another element
I hope this helps!
So basically I want a side bar and a navigation bar. But when I set the div2 (the side bar) top margin to 110px it moves div1 down with it. Please help me.
<!doctype html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="Home.css">
<title>Home</title>
</head>
<body>
<div id="div1">
<div id="div2">
</div>
</div>
</body>
</html>
And the CSS...
body {
background-color:#CCC;
}
#div1 {
width:auto;
height:100px;
background-color:gray;
border-radius:10px;
}
#div2 {
width: 150px;
height: 500px;
background-color: grey;
border-radius: 10px;
margin-top:110px;
}
http://jsfiddle.net/shane__kerr/5p8Qr/2/
Fiddle
Now i did a float:left and width:100% to div1 and clear:both to div2.
Dont forget to add clear:both to any div inside the div1
Change the height in #div1 to auto and set margin-top:100px in #div1, not #div2.
When you add a margin-top to div2, the webpage also creates the other elements to 'trap' that element on its position. To fix this you should use display: inline-block; this way all not given margin is gone.
Why not use float?
Well basically float also sets the display to inline-block but will also position the element. With display-inline only the given margin will be used, without reposition it.
jsFiddle
I thinks your CSS looks good. But I think div 1 and 2 should not be inside each other to achieve what you want.
Try this:
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
Demo here
I'm trying to create a website for a gaming community. The website is supposed to be very minimalist, with the Header/Navigation covering 100%x20% of the page and the primary content covering 100%x80%. I get the divs to show up, but I cant seem to make them position themselves correctly. Due to me having to use "position:absolute;" I cant really figure out how to make these things work right. Keep in mind I'm pretty new to HTML/CSS.
<!DOCTYPE html>
<html style="height:100%;">
<head>
<title>ESI | Missioners and Miners Haven</title>
<link rel="stylesheet" type="text/css" href="styles/styles.css" />
</head>
<body style="height:100%;">
<div id="contianer">
<div id="navbar">
<div id="logobox">
<p>ESI Official Site</p>
</div>
<ul>
<li>Sign Up!</li>
<li>ESI Blog</li>
<li>Corp Op's</li>
<li>Home</li>
</ul>
</div>
<div id="content">
</div>
</div>
</body>
</html>
Thats the HTML, heres the important part of the CSS:
#container
{
width:100%;
height:100%;
}
#navbar
{
width:100%;
height:20%;
background:#35291F;
list-style:none;
float:left;
position:absolute;
}
#content
{
margin:10%;
width:90%;
height:80%;
background:grey;
position:absolute;
}
I know this question has been asked many times but none of the solutions I've found on this site worked.
Appreciate any help, thanks.
margin:10% will give 10% to all (top bottom right left).
give margin-top
and there is no need of float if position is absolute.
You can't specify a height with a % that I know of. You'll likely want to use px for this. What you should be asking yourself is, what is 100% to you? Because the height of the window is just as variable as its with. When you specify percentages in CSS, those elements contain that percentage of their parent container. You're not going to want to position those elements absolutely. You also don't need to specify the height of the body or html elements. Without seeing what exactly you're trying to accomplish visually, it's difficult to tell you what your values should be, but start there.
If you want to use absolute positioning for this you need to set top appropriately to move #content down.
Couple of other things:
Don't set styles inline (your html and body tags). Use your stylesheet.
Why the float on #navbar? That element is already positioned absolute.
The margin on #content applies to all directions (also top and bottom).
JS Bin Demo
Is this what you wanted?
#content
{
margin-top:20%;
width:100%;
height:80%;
/* ... */
}
http://jsfiddle.net/WJrW3/
http://jsfiddle.net/rainthinks/t23bD/1/
full screen mode: http://jsfiddle.net/rainthinks/t23bD/1/embedded/result/
html, body, #container {
height:100%;
}
#navbar {
height:20%;
background:#35291F;
list-style:none;
}
#content {
height:80%;
background:grey;
}
This seems incredibly simple but I have no idea why I can't put a div tag inside of a container div tag as it will not show up in Firefox or Chrome properly, but it works in IE6...??? Code is as follows:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="container">
<div id="nav">
<p>Hello</p>
</div>
</div>
</body>
</html>
CSS: style.css
body {
background:white;
font-family: sans-serif;
}
#container {
margin:0 auto;
width:960px;
background:#e3e3e3;
border:1px solid black;
}
#nav {
padding:10px;
margin-top:10px;
float:left;
width: 400px;
height:100px;
background:white;
border:1 px solid black;
}
It's as if the container is not expanding with the DIV tag inside of it..what gives?
This is a common issue people face with CSS. Whenever you float something, it's parent collapses as you are seeing. You can work around it in the following ways:
set an explicit height on the container
put overflow:hidden or overflow:auto on the container
use the clearfix hack: http://nicolasgallagher.com/micro-clearfix-hack/
I find #2 to be the easiest and best in most cases. Use #3 when overflow:hidden/auto has an undesirable side effect.
It is because the #nav div is floated left. Floated elements are just that--floating, and have no height unless something anchors the box below it by clearing the floats.
.clear { clear: both }
and add a div below the floating div to clear it.
<div id="container">
<div id="nav">
<p>Hello</p>
</div>
<div class="clear"></div>
</div>
See this SO question for a very detailed answer on clearfixes: What methods of ‘clearfix’ can I use?
Do overflow: hidden for #container.
This is one known limitation of floating.
Before: http://jsfiddle.net/N669N/
After: http://jsfiddle.net/N669N/1/