I have a problem when using negative position(Ex. top:-20px) in absolute div and add overflow auto to the parent div. The text goes to hide in all browser. I want to make it visible. In my application structure its not possible to remove overflow:auto;. Do yo have any idea, how to make it visible? Just copy this code you will get the better idea.
<!DOCTYPE html>
<head>
<title>Untitled Document</title>
<style>
body{
margin:50px;
}
.Relative{
width:200px;
height:200px;
position:relative;
overflow:auto;
background-color:#CCCCCC;
z-index:1;
}
.Abs{
position:absolute;
top:-20px;
right:0;
width:100px;
height:100px;
border:solid 1px;
background-color:#99CCCC;
z-index:99999999 !important;
}
.RemoveOverFlow{
overflow:inherit;
}
</style>
</head>
<body>
<div class="Relative RemoveOverFlow">
<div class="Abs">This is a test text in absolute div</div>
Remove <br />
overflow <br />
from the <br />
relative div
</div>
<br />
<br />
<div class="Relative">
<div class="Abs">This is a test text in absolute div</div>
Add <br />
overflow:auto <br />
into <br />
relative div
</div>
</body>
</html>
Try changing overflow: auto to overflow:visible in .Relative class
Example Fiddle : http://jsfiddle.net/Wpcnx/
Can you have the div .Abs outside the div .Relative if so this would work:
http://jsfiddle.net/9CqUC/1/
Related
I'm working on a webpage and I want it to look like those magnets (or tiles, whatever you like to call them) in the start menu of Windows 8. After some work, I got the following:
html:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<link href='http://fonts.googleapis.com/css?family=Bad+Script|Architects+Daughter|Comfortaa|Handlee' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="banner-div">
</div>
<div class="row">
<div class="magnets">
Some text
</div>
<div class="magnets">
</div>
<div class="magnets">
</div>
</div>
<div class="row">
<div class="magnets">
</div>
<div class="magnets">
</div>
<div class="magnets">
</div>
</div>
</body>
</html>
styles.css
html, body {
background:#f8e4e4;
font-family:'Bad Script';
font-size:medium;
text-align:center;
width:100%;
}
.magnets {
border:5px solid black;
height:300px;
width:300px;
text-align:center;
margin-right:2%;
margin-top:2%;
display:inline-block;
}
.row {
width:100%;
margin-top:1%;
}
But when I open it with IE, something weird happens. The first magnet (The one with Some text) does not align with the other magnets. When I delete the text and run it again it's back to normal again. It seems like that it is the text that pulls the magnet downwards. I think this is very abnormal and clearly this should not happen.
I also tried this with Google Chrome but the result is the same as that of IE.
Add overflow:hidden; in .magnetsDemo
.magnets {
border:5px solid black;
height:300px;
width:300px;
text-align:center;
margin-right:2%;
margin-top:2%;
display:inline-block;
overflow:hidden;
}
I tested the output in Chrome, Mozilla and IE, It worked fine. If you remove width:100%; from html, body , Its giving similar output
Or you could set vertical-align: bottom; on the .magnet class.
EDIT:
The reason for this is that, because the .magnet classed blocks are redefined as being inline-blocks, the blocks are treated as though they were text, so they all have their bottoms line up on a base line by default.
Whenever one of these blocks contains text, the default "anchor" to the base line shifts from the bottom of the block itself to the text inside the block, and the block itself just becomes a kind of border around the text without meaningful anchor points. To force the block to realign with its siblings, you need to override this default behaviour by explicitly defining vertical-align: bottom; on the block so that it will align to the bottom of the base line, just like text will align itself to the bottom of the base line by default, since text is also displayed inline.
Some more reading on this:
http://phrogz.net/css/vertical-align/
https://css-tricks.com/almanac/properties/v/vertical-align/
/EDIT
Link to the result: http://jsfiddle.net/e1og1m8v/, or a local runnable snippet to elaborate:
html, body {
background:#f8e4e4;
font-family:'Bad Script';
font-size:medium;
text-align:center;
width:100%;
}
.magnets {
border:5px solid black;
height:100px;
width:100px;
text-align:center;
margin-right:2%;
margin-top:2%;
display:inline-block;
vertical-align: bottom;
}
.row {
width:100%;
margin-top:1%;
}
<body>
<div id="banner-div">
</div>
<div class="row">
<div class="magnets">
Some text
</div>
<div class="magnets">
</div>
<div class="magnets">
</div>
</div>
<div class="row">
<div class="magnets">
</div>
<div class="magnets">
</div>
<div class="magnets">
</div>
</div>
</body>
This is my code which is working fine but when i change my headline2text to "Sale Price $25 . This is a sample text. $244" then auto logo image changes its position. I do not want logo to change its position but it should remain on its place and should not be affected by the headline2Txt. How to fix this issue?
<div id="wrapper">
<div id="mainContainer">
<p class="copyrights" id="copyrights"></p>
<div>
<img id="Image_Car" src="http://i.share.pho.to/25a090ef_c.png" />
</div>
<div id="headlineText">
<p id="headline1Txt" >Sample bag1</p>
<p id="headline2Txt" >Sale Price $25 </p>
</div>
<div id="disclaimer" >
Details*
</div>
<div id="Image_logo">
<img id="Imglogo" src="http://i.share.pho.to/93578bd4_o.png" />
</div>
<div >
<button class="btn btn-primary" type="button" id="ctaBtn"><div id="fadeIn" > Learn More Now </div></button>
</div>
</div>
#Image_logo img
{
position:relative;
width:140px;
height:30px;
top:-3px;
left:390px;
}
</div>
I may not understand what you're asking, but I think the lack of a float is throwing you. Adding some css like this..
<style>
#Image_logo img {
width:140px;
height:30px;
}
#wrapper {
float:left;
}
</style>
...should work. It should be in a separate .css file of course.
You have position: relative; on #Image_logo img yet you try to position it the "absolute way". Try to change your CSS like this:
#Image_logo img {
position:absolute;
width:140px;
height:30px;
top:40px;
left:390px;
}
Try giving your #Image_logo img position: absolute instead of relative, then modify top, left etc. Then it should be always in the same place;
I've a html page with some div tags in it, I want to put my container div in center of computer screen whether I zoom-in or zoom-out.
I want to modify my html page in such a manner as www.bing.com. The homepage centers on the screen when you zoom-out, whereas, my web page continuously expands while zooming.
My HTML pagecode:
<html>
<head>
<title>
HTML test page
</title>
<style>
.horizontal{
width:100%;
height:100px;
background-color: #bbb;
}
.vertical{
width:100px;
height:70%;
background-color: #bbb;
}
#container{
margin:auto;
width:100%;
height:100%;
}
</style>
</head>
<body>
<div id="container">
<div class="horizontal">
</div>
<div class="vertical" style="float:left;">
</div>
<div class="vertical" style="float:right;">
</div>
<div class="horizontal" style="float:left;" >
</div>
<h1 style="font-size:3em; color:Green; text-align:center;">
HTML Test page
</h1>
</div>
</body>
</html>
How to adjust my CSS code so that I can implement centralized page style same of (www.bing.com)? I want to centralize my container div on pressing Ctrl+-
I just check bing.com. It seems they change position and size of their centered div using JS. It centered while page load and the same when page is re-sized. And do not forget absolute position for #container.
<script>
$(window).resize(function() {
doResize();
}
$(document).ready(function(){
doResize();
}
function doResize() {
var windowHeight = $(window).height();
$('#container').css('top',(windowHeight - $('#container').height())/2);
}
</script>
it has something to do with you using percentages rather than say Pixels or EMs
I got it so that it is staying centered but i still have it sticking to the top of the browser.
<html>
<head>
<title>
HTML test page
</title>
<style>
.horizontal{
width:100%;
height:100px;
background-color: #bbb;
}
.vertical{
width:100px;
height:250px;
background-color: #bbb;
}
#container{
margin:auto auto;
width:750px;
height:400px;
}
</style>
</head>
<body>
<div id="container">
<div class="horizontal">
</div>
<div class="vertical" style="float:left;">
</div>
<div class="vertical" style="float:right;">
</div>
<div class="horizontal" style="float:left;" >
</div>
<h1 style="font-size:3em; color:Green; text-align:center;">
HTML Test page
</h1>
</div>
</body>
</html>
Edit possibility
you could use a MediaQuery and set the top:###px so that the rest of your page sets up with the center. but you would probably have to create several CSS Files or write a lot of CSS code to make it work
Answer to css get height of screen resolution
this answer has a link in it to media queries that takes you to w3.org Media Queries site
After looking that bing page you just referred us, I believe this is what you probably want this
<html>
<head>
<title>
HTML test page
</title>
<style>
body {
width: 100%;
height: 100%;
margin:auto;
}
#container {
vertical-align: middle;
margin:auto;
height:100%;
width:100%;
display: table;
}
span {
display: table-cell;
vertical-align: middle;
text-align:center;
font-size:5em;
color:#fff;
}
#inner {
margin:auto;
width:50%;
height:auto;
border:100px solid #bbb;
color:Green;}
</style>
</head>
<body>
<body>
<div id="container">
<div class="horizontal">
</div>
<div class="vertical" style="float:left;">
</div>
<div class="vertical" style="float:right;">
</div>
<div class="horizontal" style="float:left;" >
</div>
<span><div id="inner">HTML Test page</div>
</span>
</div>
</body>
</body>
</html>
This creates a 100px sized border to your div, which is aligned in center as you want
<div class="con">
<div class="left" id="left">
<input type="button" value="set the height of the left panel" id="open" />
</div>
<div class="right" id="right"></div>
</div>
The left and right panel are both floated left,they work well when no scroll bar exist,however if the height of the left panel changed,and the scroll bar will display,then the right panel will go to bottom.
See exmaple here:
At first,the right div will display beside the left,when you click the button,the right will go to bottom.
How to fix it?
update
In fact I can not set the absolute size of the left and right div,since I want them resize according the content autoly.
Fullcode:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
html,body{
padding:0px;
margin:0px;
height:100%;
}
.con{
float:left;
position:relative;
left:100px;;
top:100px;
border:2px solid red;
max-height:80%;
overflow-y:auto;
}
.left{
background-color:black;
position:relative;
float:left;
}
.right{
background-color:blue;
position:relative;
float:left;
width:300px;
height:200px;
}
</style>
<script type="text/javascript">
window.onload=function(){
document.getElementById("open").onclick=function(){
document.getElementById("left").style.height="900px";
//document.getElementById("right").style.width="300px";
//document.getElementById("right").style.height="500px";
}
}
</script>
</head>
<body>
<div class="con">
<div class="left" id="left">
<input type="button" value="set the height of the left panel" id="open" />
</div>
<div class="right" id="right"></div>
</div>
</body>
</html>
This works...
.con{
float:left;
position:relative;
left:100px;;
top:100px;
border:2px solid red;
max-height:80%;
overflow-y:scroll;
}
The best way is to make the left and/or right panel a bit more "narrow"
Hi I have a problem cosidering a floating div that i can't figure out. I know many people have got the same problem but i have not found a normal solution. maybe you can help me ?
I want that the div on the left will grow on it's height when the one on the right will grow it's height. The one on the right will grow dynamicaly, because the text or other things in it will have diffrent sizes.
This is the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<style>
#content
{
width:600px;
height:auto;
overflow:hidden;
background-color:#FF3399;
}
#content1
{
width:300px;
background-color:#3333CC;
float:left;
}
#content2
{
width:300px;
overflow:hidden;
background-color:#CCFF66;
}
</style>
</head>
<body>
<div id="content">
<div id="content1">
1
</div>
<div id="content2">
2
<br/>
<br/>
<br/>
<br/>
<br/>
</div>
</div>
</body>
</html>
This is the eternal css column height issue. There are some (painful) ways to work around it with pure css, but I've been happy using this jQuery plugin: http://www.cssnewbie.com/equalheights-jquery-plugin/
It's not the "right" way to handle it but in my experience it's the only way that won't drive you insane.
I usually use this snippet of jQuery..
function equalHeight(group) {
var tallest = 0;
group.each(function() {
var thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
equalHeight($('.your-divs'));
Is that ok ?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Untitled Document
<style>
#content
{
width:600px;
height:auto;
overflow:hidden;
background-color:#FF3399;
}
#content1
{
width:300px;
background-color:#3333CC;
}
#content2
{
width:300px;
overflow:hidden;
float: right;
background-color:#CCFF66;
}
</style>
</head>
<body>
<div id="content">
<div id="content2">
2
<br/>
<br/>
<br/>
<br/>
<br/>
</div>
<div id="content1">
1
<div style="clear: both"></div>
</div>
</div>
</body>
this solution is what i was looking for but i have a very important question i want to place a div at bottom of the content1 with a static height and width but i can't do it because the div just wont go there the div can also be an imgage, you can't use position:absolute because the content1 div height will not be static so the div in it will not be in one place all the time. I'm using a solution that helped me a lot and I just want to add to it that div at the bottom on content1. So it looks like this content1 have got 2 divs one in the top as first and the other in the bottom. It is very important to use this code because it fixes the div height problem that I mentioned:
<style>
#content
{
width:600px;
height:auto;
overflow:hidden;
background-color:#FF3399;
}
#content1
{
width:300px;
background-color:#3333CC;
}
#content2
{
width:300px;
overflow:hidden;
float: right;
background-color:#CCFF66;
}
</style>
<div id="content">
<div id="content2">
2
<br/>
<br/>
<br/>
<br/>
<br/>
</div>
<div id="content1">
1
<div style="clear: both"></div>
</div>
</div>