If I have a content area with a width of 1225px how do I make it so that when you shrink the page to less than that width a horizontal scroll bar appears so that that center content will always be visible (at least have the option for scrolling)? Would it involve using fixed or absolute positioning?
In this site, you can see when you shrink the page, the horizontal scroll bar appears: http://www.websitecodetutorials.com/
I don't know if it helps, but here is some of my code:
<body class="fullbackground">
<img class="fullbackground" src="background.png" />
<div class="topbackground">
<div class="top">
<div class="topleft">
<img class="pf_logo" src="pathfinder_logo.png"/>
</div>
<div class="topmiddle">
<h1 class="title">Pathfinder is Temporarily Unavailable</h1>
</div>
<div class="topright" ></div>
</div>
</div>
<div class="bar"></div>
<div style="width:1225px; height:870px; padding-top:0px; margin-top:0px; margin-left:auto; margin-right:auto;">
<div class="contentcontainer">
I used a CSS reset. Here is some of my CSS:
.bar {
background-color:#365C8C;
height:30px;
width:auto;
position:relative;
padding:0 0 0 0;
margin:0 0 0 0;
overflow-x:hidden;
}
body {
position:relative;
padding:0 0 0 0;
margin:0 0 0 0;
overflow-x:hidden;
height:100%;
width:100%;
background-color:#ADCCEB;
/*background-color:black;*/
/*background: url(background.png);*
/*background-size:100%;*/
}
.bold {
font-weight:bold;
}
.contentcontainer {
width:825px;
height:870px;
margin-left:auto;
margin-right:auto;
margin-top:0px;
padding-top:0px;
/*background-color:red;*/
}
.extcontentcontainer {
width:825px;
height:645px;
margin-left:auto;
margin-right:auto;
margin-top:0px;
padding-top:0px;
/*background-color:red;*/
}
img.fullbackground {
position:absolute;
z-index:-1;
top:0;
left:0;
width:100%;
height:100%;
padding: 0 0 0 0;
margin: 0 0 0 0;
}
img.extfullbackground {
position:absolute;
z-index:-1;
top:0;
left:0;
width:100%;
height:100%;
padding: 0 0 0 0;
margin: 0 0 0 0;
}
You may try adding this property to the body tag:
overflow-x:auto;
try this:
<div style="width:1225px; height:870px; padding-top:0px; margin-top:0px; overflow-x: scroll;">
overflow property should give you your scroll bar.
Related
i have simple issue with HTML positions
in the following code i have one wrapper div> Container in this div
i have 2 more divs name is side_bar_wrap and left_wrap in left_wrap div i have
4 thumbnails divs name are same as thumbnails my issue is how can i align this 4 thumbnails div with space between right and left but no on first and last div of this group
following is my code, please help me..
<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>
.container
{
width:100%;
max-width:1170px;
margin:0 auto;
}
*
{
margin:0;
padding:0;
}
.side_bar_wrap
{
width:29%;
height:300px;
background:#148b23;
margin:0 10px 0 0;
float:left;
}
.left_wrap
{
width:70%;
float:right;
}
.thumbnails{
width: 22%;
margin: 0 11px;
position: relative;
overflow: hidden;
height:300px;
border:1px solid #cfcfcf;
float:left;
}
.inner_task
{
}
.clear
{
clear:both;
}
<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>
<div class="container">
<div style="width:29%; float:left; height:400px; background:gray; margin:40px 11px 40px 0;"></div>
<div style="width:70%;float:left; height:400px; background:gray; margin:40px 0;"></div>
<div class="side_bar_wrap"></div>
<div class="left_wrap">
<div class="thumbnails">
<div class="inner_thumb">
<div style="width:100%; height:200px; background:#efefef;"></div>
</div>
</div>
<div class="thumbnails">
<div class="inner_thumb">
<div style="width:100%; height:200px; background:#efefef;"></div>
</div>
</div>
<div class="thumbnails">
<div class="inner_thumb">
<div style="width:100%; height:200px; background:#efefef;"></div>
</div>
</div>
<div class="thumbnails">
<div class="inner_thumb">
<div style="width:100%; height:200px; background:#efefef;"></div>
</div>
</div>
</div>
<div style="width:100%; float:left; height:400px; background:gray; margin:40px 0;"></div>
</div>
You can use the first-child and last-child that css provides for you
Basically first-child allow you to make style changes to the first div, and last-child allows you to make changes to the last div
so something like this:
.thumnails:first-child {
/*NO SPACE ON ONE SIDE*/
margin-left:0px;
}
.thumnails:last-child {
/*NO SPACE ON ONE SIDE*/
margin-right:0px;
}
If you want advance alittle more you can use :nth-child(), for when you you want to change the style of the third div or whatever, so
.thumnails:nth-child(3) {
background-color:#ff0000;
}
Is there a way to hide the overflow of a div "at the top" rather than "at the bottom"?
This jsFiddle illustrates what I mean. The enclosing div has overflow-y:hidden, but this hides the lower part of its content. I want to hide the upper part of it.
The obligatory source code (verbatim from the jsFiddle):
*{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
*{margin:0;padding:0;border:0;}
#centered{
margin:20px auto 0;
overflow-y:hidden;
height:150px;
outline:5px solid green;
}
#centered,
#top,
#bottom{width:150px;}
#top {height:120px;background-color:red;}
#bottom{height:150px;background-color:#555;}
#top,#bottom{
color:white;
text-align:center;
padding:0 10px;
}
#top{padding-top:50px;}
#bottom{padding-top:60px;}
<div id="centered">
<div id="top">
this div should be "overflowed away"
<em>at the top!</em>
</div>
<div id="bottom">
this content should show
</div>
</div>
See this FIDDLE, you need to wrap the content in an absolute positioned DIV with bottom set to 0, whilst the parent container is given a position of relative
HTML
<div id="centered">
<div id='content'>
<div id="top">this div should be "overflowed away" <em>at the top!</em>
</div>
<div id="bottom">this content should show</div>
</div>
</div>
CSS
*{
box-sizing:border-box;
margin:0;
padding:0;
}
#centered {
margin:20px auto;
overflow-y:hidden;
height:150px;
border:5px solid green;
width:150px;
position:relative;
}
#content {
bottom:0px;
position:absolute;
}
#top {
min-height:120px;
background-color:red;
padding-top:50px;
}
#bottom {
background-color:#555;
padding:60px 10px 0 0;
}
#top, #bottom {
color:white;
text-align:center;
}
I have some problem with my layout. It looks good on my computer when I zoom to 100%. But when I zoom in or out the layout breaks. I tried several ways to wrap the layout but it didn't work so far. Since I need the layout to be responsive, any help is appreciated.
html:
<body>
<div class="low_wrapper">
<div id="intro" class="category">
<p><span class="category_description"><h1>Intro</h1></span></p>
<div class="low_info_header" >head</div>
<div class="low_info_element_big"></div>
<div class="low_info_element_big"></div>
<div class="low_info_header" >head</div>
</div>
<div id="women" class="category">
<h1>Women</h1>
<div class="low_info_header" >head</div>
<div class="low_info_element_big"></div>
<div class="low_info_element_big"></div>
<div class="low_info_header" >head</div>
</div>
</div>
</body>
css:
body{
margin: 0 0 0 0 ;
}
.category h1{
float:left;
width:940px;
font-family:'Open Sans';
}
.low_wrapper{
position:absolute;
margin-left:30px;
margin-top:30px;
position:absolute;
}
#low_info{
margin: 0 0 0px 33px;
width:940px;
background-color: #ccc;
float:left;
}
.low_info_header{
width:940px;
height:120px;
background-color:#FF0A83;
float:left;
position:relative;
}
.low_info_element_big{
height:400px;
width:460px;
background-color:#FF0A83;
margin-top:10px;
margin-right:20px;
margin-bottom:10px;
float:left;
position:relative;
}
http://jsfiddle.net/MsUTp/1/
In your .css you are giving your elements specfic sizes with px. If you want your layout to resize with your screen you should apply size to your elements using % (i.e a percent of the screen size). This way when your screen size changes, your elements will resize relative to it keeping your layout the same.
Try this
body {
margin: 0 0 0 0 ;
}
.category h1 {
width:940px;
font-family:'Open Sans';
}
.low_wrapper {
position:absolute;
margin-left:30px;
margin-top:30px;
position:absolute;
}
#low_info {
margin: 0 0 0px 33px;
width:940px;
background-color: #ccc;
float:left;
}
.low_info_header {
width:100%;
height:120px;
background-color:#FF0A83;
position:relative;
}
.low_info_element_big {
height:400px;
width:460px;
background-color:#FF0A83;
margin-top:10px;
margin-right:20px;
margin-bottom:10px;
position:relative;
}
I'd add in a .wrapper class and change .low_wrapper { position:relative} instead of absolute
.wrapper {
width:960px;
}
.low_wrapper {
position:relative;
margin-left:30px;
margin-top:30px;
}
see example: http://jsfiddle.net/MsUTp/2/
My code is viewable at http://jsfiddle.net/ATbA5/2/ code will also be at the end of this post
I am trying to make content-wrapper 100% height however for it to be centered. I have looked at other theards on stackoverflow and Can't find a solution. Also A fixed footer at the end of the page not the bottom of the broswer window
HTML
<head>
<link rel="stylesheet" type="text/css" href="primary-resources/css/main-styles.css"/>
</head>
<body>
<div class="content-wrapper">
<!-- Header -->
<div class="header">
<div class="threetwentyleft">
<img src="primary-resources/imgs/header-logo.png" />
</div>
<div class="sixfortyright">
<div class="gameAdBanner">
<img src="game-resources/gameone/imgs/banner.png"/>
</div>
</div>
</div>
<!-- Content -->
<div class="gameLeft"></div>
<div class="gameRight"></div>
</div>
</body>
</html>
CSS
body ,html {
background-color:#000000;
height:100%;
top:0px;
bottom:0px;
clear:both;
padding:0px;
margin:0px;
}
.content-wrapper {
margin:auto;
background-color:#ffffff;
width:960px;
padding:0px;
bottom:0;px;
top:0px;
margin:auto;
box-sizing:border-box;
height:100%;
box-sizing:border-box;
clear:both;
box-sizing:border-box;
}
.header {
width:100%;
}
.threetwentyleft {
width:320px;
float:left;
padding:2px;
}
.threetwentyleft img{
width:320px;
padding:2px;
border:0px;
}
.sixfortyright {
width:630px;
float:right;
height:130px;
}
.gameAdBanner {
width:610px;
margin-top:2px;
margin-left:auto;
margin-right:auto;
}
.center {
margin-left:auto;
margin-right:auto;
}
.gameLeft {
width:700px;
padding:5px;
float:left;
}
.gameRight {
width:260px;
background-color:#CCC;
float:right;
padding:5px;
height:100%;
margin-right:3px;
}
.footer {
width:960px;
background-color:#FC6;
bottom:0px;
height:25px;
position:absolute;
}
Sounds like you want normal html behaviour, no need for any css, just add a div, or any block element after the content.
Trying to implement "sticky" footer but its not working as planned. It throws it at the bottom and on first scroll it works as supposed to (except that it shows an inner-scroll bar). When scrolling back up, the stick footer doesn't disappear right away, it takes a few scrolls then it seems to go back to the "bottom". So my question is how do I keep the footer at the bottom at all times and eliminate the inner scroll bar. I am wondering if my absolute positioning is problematic on the main-content-inner. That div is expandable in height.
Here is the code:
<div id="page-wrap">
<div id="main-content>
<div id="main-content-inner></div>
</div>
<div class="footerpush"></div>
</div>
<div id="footer">copyright info</div>
#page-wrap {
width:100%;
min-height:100%;
height:auto;
height:100%;
margin-bottom:-20px;
position:relative;
overflow:auto;
}
#main-content {
width: 100%;
height:100%;
margin-left: -295px;
position:relative;
}
#main-content-inner {
left: 560px;
border-radius:8px;
border-style:solid;
border-width:2px;
border-color:#53D8FF;
padding:20px;
padding-bottom:0;
background-color:#000000;
position:absolute;
top:100px;
min-width:60%;
max-width:60%;
}
#footer {
text-align: right;
padding-top: 20px;
padding-bottom: 20px;
padding-right: 20px;
color: #A7A9AC;
font-size: 12px;
height:20px;
}
.footerpush
{
height:20px;
}
If I remove overflow auto from page-wrap, the footer actually moves to the bottom of my page-wrap div. So it appears that because of my absolute main-content-inner being absolute, it is expanding outside of my wrapper? If I set a fixed value on the height of page-wrap, the footer moves to the bottom as it should. So this is the real question, how do I keep my footer at the bottom of the page even with expandable content?
Further research shows that when i set overflow to hidden on page wrap, that my absolute content "main-content-inner" gets cut off. How do I get the height of page-wrap expand to the height of main-content-inner, no matter what it is?
As I answered here, you can use http://www.cssstickyfooter.com/:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body {
height: 100%;
padding: 0;
}
#wrap {
min-height: 100%;
}
#main {
overflow:auto;
padding-bottom: 150px; /* must be same height as the footer */
}
#footer {
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
}
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/
}
</style>
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->
</head>
<body>
<div id="wrap">
<div id="main">
<div id="content">
<!-- Main content here -->
</div>
</div>
</div>
<div id="footer">
<!-- Footer content here -->
</div>
</body>
</html>
You can see a working example here: http://jsfiddle.net/dZDUR/
Resize the right-hand "Result" pane to be shorter/taller than the text
to see the scroll bar appear / disappear.
As per the CSS Sticky Footer how-to, you can insert your normal
'column' layout inside the main div.
Try this :
Rewrite your HTML code like this :
<div id="page-wrap">
<div id="main-content">
<div id="main-content-inner">
</div>
</div>
<div class="footerpush"></div>
<div id="footer">copyright info</div>
</div>
And rewrit your CSS file style properties :
html,body
{ height:100%;
padding:0;
margin:0;
}
#page-wrap {
width:100%;
min-height:100%;
position:relative;
overflow:auto;
}
#main-content {
background:#FF0;
padding-bottom:40px;
}
#main-content-inner {
border-radius:8px;
border-style:solid;
border-width:2px;
border-color:#53D8FF;
padding:20px;
padding-bottom:0;
background-color:#000000;
}
#footer {
text-align: right;
color: #A7A9AC;
font-size: 12px;
height:20px;
position:absolute;
bottom:0;
width:100%;
}
.footerpush
{
position:absolute;
bottom:20px;
height:20px;
width:100%;
}