I have a relatively simple design that is puzzling me. It has 4 large images that need to be stuck to the top left, right and bottom left, right corners. The images are quite large and the content container overlaps them. A little something like this:
Structure http://www.kalleload.net/uploads/nizyjc/zxyagpfrmjqe.png
My problem is that my implementation works fine in all major browsers except IE8 (which I was just starting to respect). Is there a better way I can do this?
I'm using the following markup at the moment:
<div class="corner-top">
<div><img src="./images/top-left-corner.png" /></div>
</div>
<div class="corner-bottom">
<img src="./images/bottom-left-corner.png" />
</div>
<div id="container">
....
</div>
#container {
margin: 60px auto;
width: 488px;
}
.corner-top {
background: url('./images/top-right-corner.png') top right no-repeat;
height: 356px;
min-width: 868px;
overflow: hidden;
position: absolute;
top: 0;
width: 100%;
z-index: -20;
}
.corner-top div {
min-width: 868px;
}
.corner-bottom {
background: url('./images/bottom-right-corner.png') bottom right no-repeat;
bottom: 0;
height: 325px;
min-width: 868px;
overflow: hidden;
position: absolute;
width: 100%;
z-index: -20;
}
.corner-bottom div {
min-width: 868px;
}
There are many approaches to rounded corners (basically the same). I think the most comfortable one to have four divs in each other:
<div id="container" class="topleft">
<div class="topright">
<div class="bottomleft">
<div class="bottomright">
<!-- content -->
</div>
</div>
</div>
</div>
Another advantage is that you don't need the <img> tags.
you could try forcing IE8 into IE7 compatablity mode.
stick
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
in your <head>
Related
UPDATE:
I rebuilt the page with all relatively-positioned elements and the thing is still stuck when I navigate via pageid. I think it's definitely a Safari-specific overlap conflict and it is super annoying. Any ideas out there?
I'm working on a microsite that uses pageid's to navigate through full-page div's, arranged vertically with the overflow hidden. It works just fine on every browser, including mobile, except desktop versions of Safari.
The div's scroll when the page is refreshed to the specific pageid, and will scroll if the text is highlighted and dragged, but if you start at page 01 and navigate to page 02 (like you're supposed to), the content will not scroll.
It seems like it might be an overflow conflict, but I tried to do this with the page div's scrolling horizontally to separate the x- and y-axis issue and I got nothing. It's acting more like there's a transparent layer in between me and the scroll...
Check out the microsite here: http://www.kevinjbeaty.com/trailtool-stackoverflow
Note that it works just fine everywhere else.
This is the basic html:
<div class = "viewbox">
<div id= "page01" class="page">
<div class="content">
**these are photos that do not scroll**
</div>
</div>
<div id= "page02" class="page">
<div class="content">
**these are photos that do not scroll**
</div>
<div class="contentscroll">
**this is text that should scroll**
</div>
<div id= "page03" class="page">
<div class="content">
**these are photos that do not scroll**
</div>
</div>
<div id= "page04" class="page">
<div class="content">
**these are photos that do not scroll**
</div>
<div class="contentscroll">
**this is text that should scroll**
</div>
</div>
and the basic css:
.viewbox {
position: relative;
height: 100%;
width: 100%;
display: block;
overflow: hidden;
background-color: black;
z-index:0;
}
.page {
position: relative;
height: 100%;
width: 100%;
display: block;
z-index:1;
overflow: scroll;
background-color: white;
z-index:10;
}
.content {
position: absolute;
padding: 2%;
background-size: contain;
background-repeat: no-repeat;
display: block;
}
.contentscroll {
position: absolute;
padding: 2%;
overflow-y: scroll;
overflow-x: hidden;
display: block;
z-index: 200;
}
Got it! Wow.
I changed the body "overflow" to "hidden" and got rid of the ".viewbox" wrapper altogether and viola! Stupid simple...
I have a small example, with two adjacent divs with a background image. This divs are tiles in a tile based editor. I want to place an image into the first div and change the position of the image, so that the image overlaps both divs (see http://jsfiddle.net/WRZJe/16/). I've set the z-index of all divs and I've set the z-index of the image. The position attribute for both, divs and image is set to absolute:
<body id="exploration-body">
<div class="dungeon-container" style="left: 1040px; top: 720px;">
<div class="dungeon-canvas-full-screen" id="dungeon_canvas">
<div style="top: -720px; left: -1040px;
background-position: -82px -162px;" class="show-tile">
<img id="token-1" class="token-img"
src="1.png" alt="token1" style="top: 0px; left: 40px">
</div>
<div style="top: -720px; left: -960px; background-position: -82px -162px;" class="show-tile">
</div>
</div>
</div>
</body>
Here is the relevant css-code:
.dungeon-container {
position: absolute;
}
.show-tile {
background-image: url("stone_dungeon.png");
height: 80px;
width: 80px;
position: absolute;
z-index: 5;
}
.token-img {
position: absolute;
z-index: 50;
}
As the z-index of the images is higher then both divs, I expect the image to be drawn in front of both divs. But page behaves like no z-indexes where given. The image hides behind the second div and would be in front of every div before the image containing div.
What might cause the browser (I've tested Safari and FF) to ignore the given z-index?
Update: I've added a screenshot from the actual application (http://robitzki.de/zindex.png) that shows, that the image moves behind those divs, that are placed after the containing div.
Each div.show-tile (which are all siblings) creates an own stacking context! Child elements remain in the stacking context of the parent, thus your img will be hidden if it is adjacent to a div which has a higher z-index as the images parent div. The z-index of the image itself (=child) does not matter in this case.
In order to have the image overlap all the divs, the cleanest solution would be to not put it into one of the divs, but put it separately as a sibling to your .show-tile divs and give it the highest z-index.
Alternatively, you could omit your absolute positioning on the divs - this would make the img having it's position depend on #dungeon_canvas.
If you cannot do so, you have to assure that the div which holds your image always has the highest z-index.
You have to put the second div before the first one so that it comes before the img tag
<body id="exploration-body">
<div class="dungeon-container" style="left: 1040px; top: 720px;">
<div class="dungeon-canvas-full-screen" id="dungeon_canvas">
<div style="top: -720px; left: -960px; background-position: -82px -162px;" class="show-tile">
</div>
<div style="top: -720px; left: -1040px; background-position: -82px -162px;" class="show-tile">
<img id="token-1" class="token-img" src="http://dungeonpilot.com/assets/tokens/1.png" alt="token1" style="top: 0px; left: 40px">
</div>
</div>
</div>
</body>
http://jsfiddle.net/WRZJe/17
If you can move the img tags out of the divs and position them using similar coordinates to the divs then the following will produce the desired display
<body id="exploration-body">
<div class="dungeon-container" style="left: 1040px; top: 720px;">
<div class="dungeon-canvas-full-screen" id="dungeon_canvas">
<img id="token-1" class="token-img" src="http://dungeonpilot.com/assets/tokens/1.png" alt="token1" style="top: -720px; left: -1000px" />
<img id="token-2" class="token-img" src="http://dungeonpilot.com/assets/tokens/1.png" alt="token1" style="top: -720px; left: -930px" />
<div style="top: -720px; left: -960px; background-position: -82px -162px;" class="show-tile">
</div>
<div style="top: -720px; left: -1040px; background-position: -82px -162px;" class="show-tile">
</div>
</div>
</div>
</body>
http://jsfiddle.net/WRZJe/20
Because the second .show-tile has a higher z-index than the image, the image will be cut off
try this:
.dungeon-container {
position: absolute;
}
.show-tile {
background-image: url("stone_dungeon.png");
height: 80px;
width: 80px;
position: absolute;
/*z-index: 5;*/
}
.token-img {
position: absolute;
z-index: 1;
}
Check fiddle to see it work
Now do easily this as like this Live Demo
Html code
<div class="main-container">
<div class="pic-1 pic-5"></div>
<div class="pic-1 pic-3"></div>
<div class="pic-1 pic-2"></div>
<div class="pic-1 pic-4"></div>
<img src="http://dungeonpilot.com/assets/tokens/1.png" alt="" class="pic-change">
</div>
Css
.pic-1 {
background-image: url("http://dungeonpilot.com/assets/stone_dungeon.png");
height: 80px;
width: 80px;
float:left;
position:relative;
background-position: -3px -3px;
}
.pic-2{
clear:left;
}
.pic-change{
position:absolute;
left:40px;
top:40px;
z-index:3;
}
.main-container{
position:relative;
}
.pic-4{
z-index:4;
}
Demo
I'm having difficulty in placing a div containing contact info in my header. I've been reading up on this issue for a few hours & haven't quite found a solution yet. I'm trying to stack my contact info on the top right of my layout.
--
Image of what I'd like to achieve:
http://i45.tinypic.com/2zrgu8o.jpg
Image of what my code is currently producing:
http://i48.tinypic.com/mbhlcz.jpg
--
My HTML:
<html>
<head>
<link rel="stylesheet" href="/css/header.css" />
</head>
<meta http-equiv="Content-Type" content="text/html; charset=big5" /></head>
<body style="margin:0; padding:0;">
<div id="logo">
<img src="/images/logo-top.png">
</div>
<div class="contact">
Email: sadlkj#yahoo.com | Phone: 1 (732) 235-7239
</div>
<div id="header-bg">
</div>
</body>
</html>
My CSS:
#logo {
postion: fixed;
width: 300px;
top: 0;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
z-index: 1;
}
#header-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 50px;
background-image: url("/images/header-bg.png");
background-repeat: repeat-x;
z-index: -1;
}
.contact {
float:right;
margin-left:10px;
margin-bottom:10px;}
}
Your help is much appreciated.
I would suggest using a <span> instead of a div, either that or using <div style="display: inline;">
The problem can be solved by putting the contact div BEFORE the logo div in your HTML.
floats only float to the right or the left, not up. The contact div is below the bottom of the logo div and so floats right at that level. By putting it before the logo it floats right before the logo pushes it down.
use this html structure and change your css
<div id="header-bg">
<div class='center_wrap'>
<div id="logo">
<img src="/images/logo-top.png">
</div>
<div class="contact">
Email: sadlkj#yahoo.com | Phone: 1 (732) 235-7239
</div>
</div>
</div>
can't do more luck of time
You've got it all right, you just have a typeo in your class definition. You have to say 0px rather than just 0 for your positioning
top:0px;
left:0px;
Here... take a look: http://jsfiddle.net/t5LZL/2/
I've been on this for days and read every conceivable article on css, overflow, and layout.
I have a page with a banner (position: absolute), below which is a div containing two block divs. The second block div, in turn has another div containing text.
I would like the inner-most DIV display a scroll bar when the window is resized.
I've read the posting on ensuring height is set on all containing elements, I've set overflow-y: auto in all the right places. Just doesn't work.
The containing DIV looks like this: http://i.imgur.com/oDHM4.png
I want the green part to scroll when the browser window is resized (y-direction only).
Scrollable DIVs in any design are so useful... but shouldn't be this hard.
Any and all help appreciated.
Danny
MARKUP
The markup is very simple:
<body>
<div id="page-header" style='background:blue;'>page-header</div>
<div id="page-content">
<div id="configContent" style='height: inherit; background: steelblue;'>
<h1 id='panTitle'>Panel Title</h1>
<div id='panProbes' class='libPanel' style="background: maroon;">
<p>panProbes</p>
<div id="probesCT1" class="configtable" style='background: red;'>
<p class='pTblTitle'>probesCT1</p>
</div>
<div id="probesCT2" class="configtable" style='background: grey;'>
<p>probesCT2</p>
<div id='pTbl' style='background: green;'>
<div class='pRow'>1st para in pTbl</div>
<div class='pRow'>some data</div>
<div class='pRow'>some data</div>
<div class='pRow'>some data</div>
<div class='pRow'>some data</div>
<div class='pRow'>some data</div>
<div class='pRow'>some data</div>
<div class='pRow'>some data</div>
<div class='pRow'>some more data</div>
<div class='pRow'>some more data</div>
</div>
</div>
</div>
</div>
</div>
</body>
** STYLING **
Here's the CSS cut down to the core essence:
html, body {
position:absolute;
margin: 0px;
padding: 0px;
height: 100%;
width: 1010px;
overflow: hidden;
}
#page-header {
position: absolute;
left: 5px;
top: 5px;
height: 60px;
width: 100%;
}
#page-content {
width: 100%;
height: 100%;
margin-top: 95px;
}
#configContent {
height: 100%;
width: 300px;
padding-left: 0px;
border-width: 3px;
margin-left: 30px;
margin-right: auto;
}
.libPanel { height: 100%; }
#probesCT1 { width: 150px; margin: 0 auto 0 30px; }
#probesCT2 {
width: 200px;
/* height: 100%; */
margin: 0 30px 50px 30px;
padding: 0 10px 10px 10px;
}
#pTbl { overflow-y: auto; }
.pRow { margin-bottom: 10px; }
For overflow-y: auto to work and make scroll bars, that div must have a specific height set. So in this example (with your html above) I set it to 200px, which was less space than necessary to display the content without a scroll bar, and thus shows a scroll bar. However, if set to 100% it does not work, because 1) you need to uncomment the height of the containing divs, and 2) your content in that div is less than needed to fill the height of the div, so no scroll bar shows up. With more content added, you get a scroll bar.
What I think you really want is to insure you always have a scroll bar if needed, but even then, you need to make sure the div does not extend below the bottom of the page or you could still have problems with the scroll bar itself going off the page. I've configured something that is probably more what your intent is, but note that I had to use multiple nested relative or absolute elements to achieve the effect. I also had to guess on some height positioning for the top of elements to clear your titles.
I'm using the jQuery Cycle plugin to rotate images in a slideshow type fashion. That works fine. The problem I'm having is getting these images (of different sizes) to center in the containing div. The images are inside a slidshow div that has it's position set to absolute by the Cycle plugin.
I've tried setting line-height/vertical-align and whatnot but no dice. Here is the relevant HTML and CSS
HTML:
<div id="projects">
<div class="gallery">
<span class="span1">◄</span><span class="span2">►</span>
<div class="slideshow">
<img src="images/img1.png" />
<img src="images/img1.png" />
<img src="images/img1.png" />
</div>
</div>
</div>
CSS:
#main #home-column-2 #projects
{
width: 330px;
background: #fefff5;
height: 405px;
padding: 12px;
}
#main #home-column-2 #projects .gallery
{
width: 328px;
height: 363px;
position: relative;
background: url('images/bg-home-gallery.jpg');
}
#main #home-column-2 #projects .gallery img
{
position: relative;
z-index: 10;
}
And in case you want to see it, the jQuery:
$('#home-column-2 #projects .gallery .slideshow').cycle(
{
fx: 'scrollHorz',
timeout: 0,
next: "#home-column-2 #projects .gallery span.span2",
prev: "#home-column-2 #projects .gallery span.span1"
});
Any ideas on getting these images to center?
Try this:
http://www.brunildo.org/test/img_center.html
Vertical centering is a pain! Here's what the W3C page says about the vertical center:
CSS level 2 doesn't have a property
for centering things vertically. There
will probably be one in CSS level 3.
But even in CSS2 you can center blocks
vertically, by combining a few
properties. The trick is to specify
that the outer block is to be
formatted as a table cell, because the
contents of a table cell can be
centered vertically.
This method involves a little jquery, but works fantastic in most situations...
let me explain:
if all the images of the slideshow are contained within their own element div pos:absolute and those images are pos:relative, then on a $(window).load() you can run a .each() and find each img in the slideshow and adjust it's top positioning to be offset a certain number of pixels from the top..
jcycle automatically sets each parent div containing the image to pos:absolute on every onafter() so it's useless to apply this pos adjustment to them... instead target each img you have set to pos:relative...
Here is the example:
$(window).load(function() {
// move all slides to the middle of the slideshow stage
var slideshowHeight = 600; //this can dynamic or hard-coded
$('.slideImg').each(function(index) {
var thisHeight = $(this).innerHeight();
var vertAdj = ((slideshowHeight - thisHeight) / 2);
$(this).css('top', vertAdj);
});
});
and this is the html it's working on...
<div class="slideshow" style="position: relative; ">
<div style="position: absolute; top: 0px; left: 0px; display: none; width: 1000px; height: 600px; " id="img0">
<img class="slideImg" src="/images/picture-1.jpg" style="top: 0px; "><!-- the style=top:0 is a result of the jquery -->
</div>
<div style="position: absolute; top: 0px; left: 0px; display: none; width: 1000px; height: 600px; " id="img1">
<img class="slideImg" src="/images/picture-1.jpg" style="top: 89.5px; "><!-- the style=top:89.5px is a result of the jquery -->
</div>
<div style="position: absolute; top: 0px; left: 0px; display: none; width: 1000px; height: 600px; " id="img2">
<img class="slideImg" src="/images/picture-1.jpg" style="top: 13px; "><!-- the style=top:13px is a result of the jquery -->
</div>
</div>
just make sure
.slideImg {
position:relative;
}
I think that's everything... I have an example, but it's on a dev site.. so this link might not last.. but you can take a look at it here:
http://beta.gluemgmt.com/portfolio/rae-scarton-editorial.html
The positions are relative according to the style sheet, so did you try setting them to display: block and margin-top: auto; margin-bottom: auto; ?
Another option is to align them manually in javascript based on the containing div's height.
You need to nest two divs inside each cycle item. The first must have the display: inline-table; and the second must have display: table-cell; both these divs have vertical-align: middle.
So the structure would look something like this:
<div class="slide-container">
<div class="slide">
<div class="outer-container">
<div class="inner-container">
Centered content
</div>
</div>
</div>
<div class="slide">
<div class="outer-container">
<div class="inner-container">
Centered content
</div>
</div>
</div>
</div>
With the following css:
.slide-container {
height: 300px;
}
.outer-container {
height: 300px;
display: inline-table;
vertical-align: middle;
}
.inner-container{
vertical-align: middle;
display: table-cell;
}
You can see it working here http://jsfiddle.net/alsweeet/H9ZSf/6/