I am using this code for a site I am developing. The problem I am having is scrolling up to the fixed panel div.
HTML:
<div id="wrapper">
<div id="a" class="panels">FIXED PANEL</div>
<div id="b" class="panels">Scrolling-Panel 1</div>
<div id="c" class="panels">Scrolling-Panel 2</div>
<div id="d" class="panels">Scrolling-Panel 3</div>
</div>
CSS:
html,body {
padding:0;
margin:0;
background:black;
}
#wrapper {
position:absolute;
height:100%;
width:100%;
}
.panels {
position:relative;
height:100%;
min-height:100%;
width:100%;
}
#a{
background:#eee;
position:fixed;
color:red;
top:0;
}
#b{
margin-top:100%;
background:yellow;
}
#c{
background:pink;
}
#d{
background:green;
}
Fiddle is here:
http://jsfiddle.net/ygw6b9ga/
Any ideas/help would be much appreciated!!
Clicking link anchor targeting different element in page tells browser to scroll viewport or corresponding wrapper so elements upper left corner (in LTR page) is visible. Fixed elements does not affect scrolling areas so targeting and focussing them does not initiate this routine.
In your example you could either target the #wrapper instead of the #a to re-reveal fixed header (…, fiddle) or resort to javascript (… fiddle).
Related
So I have a header bar that's something like [IMG______TITLE______IMG]
I have something like this, where all 3 elements are in 1 div:
#left_image {
display:block;
width:80px;
height:100%;
float:left;
}
#middle_div {
width:1030px;
height:100%;
text-align:center;
display:inline-block;
}
#left_image {
display:block;
width:80px;
height:100%;
float:right;
}
But for some reason, only on IE, the last picture is on the next line, like:
[IMG_______title__________]
[______________________IMG]
You can see the last image is still going to the far right, but for some reason outside of the containing div...Any idea how to properly horizontally align these?
You can do this without floats, and some simple positioning:
<div class="wrapper">
<div class="left">Left things</div>
<div class="middle">Middle things</div>
<div class="right">Right things</div>
</div>
.wrapper {width:100%;background-color:#eee;position:relative;}
.left,.middle,.right {display:inline-block;padding:10px;}
.middle {text-align:center;}
.right {position:absolute;right:0;}
Here's a link to a demo: http://jsfiddle.net/76t8ca7h/
Updated fiddle: http://jsfiddle.net/76t8ca7h/3/
and new css:
.wrapper {width:100%;min-width:100%;background-color:#eee;padding:0;margin:0;overflow:hidden;}
.left,.middle,.right {display:inline-block;vertical-align:top;float:left;}
.middle {text-align:center;width:60%;}
.left,.right {width:20%;background-color:#ccc;}
.right {float:right;}
i've built a 3 column layout.
I want to place some Text (heading) over the Image in the middlecontent. But everytime i resize the browser window, the text moves. Any suggestions? I thought, while placing the image in an absolute container (which is itself in an relative one) i can position any absolute layers without the elements moving. Any suggestions?
Here a jsfiddle: http://jsfiddle.net/Dkjsc/3/
UPDATE:
If we remove the height attribute from middlecontent, everything works fine. But is this a way to go?
HTML:
<div id="content" class="content">
<!--LEFT-->
<div id="leftcontent" class="leftcontent"> </div>
<!--MIDDLE-->
<div id="middlecontent" class="middlecontent">
<div id="heading" class="heading">Text</div>
<img src="images/Windows/Window_10.png" alt="" style="width:100%;">
</div>
<!--RIGHT-->
<div id="rightcontent" class="rightcontent"> </div>
</div>
CSS:
html, body {
margin:0px;
padding:0px;
width:100%;
height:100%;
}
.content {
position:relative;
width:100%;
height:100%;
}
.leftcontent{
position:absolute;
width:20%;
height:100%;
left:0%;
}
.middlecontent {
position:absolute;
text-align:center;
width:60%;
height:100%;
left:20%;
top:10%;
}
.rightcontent {
position:absolute;
width:20%;
height:100%;
right:0%;
}
.heading{
position:absolute;
text-align:center;
width:100%;
top:12%;
}
You need to put position relative on an element with a fixed size that you want it relative of otherwise it is relative to the window which keeps changing size
I've got a set of side by side divs (actually using HTML5 sections but I'm assuming the solution and behavior is just the same). They sit in a container with the right side holding form fields and left side a summary title and information. The structure looks something like this:
<div id="container">
<div id="left" >Summary here</div>
<div id="right">Form fields here</div>
</div>
The catch is I have to hide or show various fields depending on actions taken with javascript so the actual height of the right side and container are not static. What I need is to get the left side to fill the height of the container so it will match the right. I've tried the numerous solutions on the internet but none seem to be working.
Thanks in advance!
This is a very common question. Take a look at this article... it has all the answers:
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
Now, here's a quick fiddle of putting that to use. Try clicking on any of the "Column #" text elements to remove them from the document... the columns will resize nicely :)
http://jsfiddle.net/UnsungHero97/qUT3d/9/
HTML
<div id="container3">
<div id="container2">
<div id="container1">
<div id="col1">Column 1</div>
<div id="col2">Column 2</div>
<div id="col3">Column 3</div>
</div>
</div>
</div>
CSS
#container3 {
float:left;
width:100%;
background:green;
overflow:hidden;
position:relative;
}
#container2 {
float:left;
width:100%;
background:yellow;
position:relative;
right:30%;
}
#container1 {
float:left;
width:100%;
background:red;
position:relative;
right:40%;
}
#col1 {
float:left;
width:26%;
position:relative;
left:72%;
overflow:hidden;
}
#col2 {
float:left;
width:36%;
position:relative;
left:76%;
overflow:hidden;
}
#col3 {
float:left;
width:26%;
position:relative;
left:80%;
overflow:hidden;
}
I already have seen a couple of questions going in this direction, but nothing helped. Everyone says just set the parent div position to relative and the child ones to absolute. But my problem is that every div is at the 0/0 point of my parent div. It seems the inner elements doesn't know from each other.
Here is what my page should look like:
http://imageshack.us/photo/my-images/854/unbenanntgoc.png/
In my html I just define my divs:
<div id="content">
<div id="header" />
<div id="naviContent" />
<div id="imageContent" />
<div id="tagContent" />
<div id="textContent" />
</div>
So navi image and tag content divs should float.
And this is how my css looks like:
#charset "utf-8";
body {
background-color:#33FF00;
}
#header {
height:100px;
background-color:#FFFFFF;
position:relative;
}
#naviContent {
width:25%;
background-color:#F0F;
float:left;
}
#imageContent {
background-color:#000;
position:absolute;
float:left;
width:800px;
height:600px;
}
#tagContent {
background-color:#900;
position:absolute;
float:left;
width: 25%;
}
#textContent {
background-color:#0000FF;
clear:both;
}
#content {
height:1600px;
width:1200px;
background-color:#999999;
margin-left: auto;
margin-right: auto;
padding:10px;
position:relative;
}
So maybe anyone can tell me why all my elements (black, yellow, red, grey and green) are positioned to the 0/0 point of the pink one?
Thanks in advance
You need to close the DIV properly -
<div id="content">
<div id="header">Header </div>
<div id="naviContent">Nav</div>
<div id="imageContent">Image</div>
<div id="tagContent"> Tags</div>
<div id="textContent">Text </div>
</div>
EDIT: Working Fiddle You need to adjust floated width and you are done!
Position absolute is not the standard way of laying out a page.
What you should do is just remove the position attribute, float everything left and set widths (please note you will need content in the div for it to render correctly).
You might want to look into CSS grid systems such as 960.gs as they handle this part of development for you in a standardised way using pre-defined classes.
you should code like this : - http://tinkerbin.com/J9CCZXRL
CSS
#content {
background:pink;
width:500px;
padding:10px;
-moz-box-sizing:border-box;
overflow:hidden;
}
#header {
background:red;
height:100px;
}
#left {
background:green;
width:100px;
height:400px;
float:left;
}
#middle {
background:blue;
width:260px;
float:left;
height:400px;
margin-left:10px;
}
#right {
background:yellow;
width:100px;
float:right;
height:400px;
}
#footer {
background:grey;
height:100px;
clear:both;
}
HTML
<div id="content">
<div id="header"></div>
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
<div id="footer"></div>
</div>
I'm very new to CSS and have been sitting here for hours trying to figure out why my middle section is not displaying as a column. I've searched the net with apparently no success. I have tried repositioning the divs, clearing everything and floating the bejesus out of everything. It must be something simple, but I don't know what. Could anyone help?
I apologize for the large amount of code if that isn't appropriate, but I don't yet have anything uploaded.
Thanks in advance
HTML
<head><style type="text/css" media="all">#import "css/master.css";</style></head>
<body>
<div id="page-container">
<!-- RIGHT HAND PAGE -->
<div id="navbar">NavBar</div>
<div id="mediaplayer">Meda Player</div>
<div id="sightings">Sightings</div>
<div id="blogheader">Blog Header</div>
<div id="sociallinks">Social Links</div>
<!-- LEFT HAND PAGE -->
<div id="logo">Logo</div>
<div id="mainpic">MainPic</div>
<!-- CENTRE PAGE -->
<div id="headline">Headline</div>
<div id="newsitems">News Items</div>
<!-- FOOTER -->
<div id="footer">Footer</div>
</div>
</body>
</html>
CSS
#page-container {
width:960px;
margin:auto;
background:red;
}
html, body {
margin:0;
padding:0;
}
#logo {
background:purple;
height:150px;
width:270px;
margin-right:450px;
}
#mainpic {
background:darkgrey;
width:270px;
height:450px;
}
#navbar {
float:right;
background:lightblue;
height:50px;
width:690px;
}
#headline {
background:grey;
height:200px;
margin-left:270px;
margin-right:350px;
}
/* News Items Mock - height:350px */
#newsitems {
background:blue;
margin-left:270px;
margin-right:350px;
}
#mediaplayer {
clear:both;
float:right;
background:black;
height:200px;
width:350px;
}
/* Sightings Mock - height:150px; */
#sightings {
clear:both;
float:right;
background:green;
width:350px;
}
#blogheader {
clear:both;
float:right;
background:darkgreen;
height:40px;
width:350px;
}
#sociallinks {
clear:both;
float:right;
background:orange;
height:40px;
width:350px;
}
#footer {
background:yellow;
clear:both;
height:30px;
}
The problem i see is that you're trying to stack a series of divs one in top of the other without any containers to create a three-column page design, while that might be done with css it would be simpler to create a series of containers for each column that you can use to stack your divs under. Take this for example:
If you created a series of column divs you can easily stack all of your page sections inside of its own column, this way you can easily stack as many sections as you want in your page without having to comeback to your css and positioning it the way you're doing it now.
<div class="column">
<section>
<section>
</div>
<div class="column">
<section>
<section>
</div>
<div class="column">
<section>
<section>
</div>
Once you have your columns declared in your markup, you can then float them so they stack next to each other and then you can use a clearfix so they won't go under one another, like so:
.column:before, .column:after {
content:"";
display:table;
}
.column:after {
clear:both;
}
.column {
zoom:1; /* ie hasLayout fix */
float:left;
}
Here is a demo of your code with the columns implemented with the results i think you're looking for: http://jsfiddle.net/wSejZ/1/show/, you can edit the fiddle here: http://jsfiddle.net/wSejZ/1/.
Notice how the sections are stacked inside of a column, this way you can stack as many sections as you want and they will be stacked appropriately inside their container.