My goal is to make a layout that is 200% width and height, with four containers of equal height and width (100% each), using no javascript as the bear minimum (or preferably no hacks).
Right now I am using HTML5, and CSS display:table. It works fine in Safari 4, Firefox 3.5, and Chrome 5. I haven't tested it yet on older versions.
Nonetheless, in IE7 and IE8 this layout fails completely. (I do use the Javascript HTML5 enabling script /cc../, so it should not be the use of new HTML5 tags)
Here is what I have:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="UTF-8" />
<title>IE issue with layout</title>
<style type="text/css" media="all">
/* styles */
#import url("reset.css");
/* Generall CSS */
.table
{
display:table;
}
.row
{
display:table-row;
}
.cell
{
display:table-cell;
}
/* Specific CSS */
html, body
{
//overflow:hidden; I later intend to limit the viewport
}
section#body
{
position:absolute;
width:200%;
height:200%;
overflow:hidden;
}
section#body .row
{
width:200%;
height:50%;
overflow:hidden;
}
section#body .row .cell
{
width:50%;
overflow:hidden;
}
section#body .row .cell section
{
display:block;
width:100%;
height:100%;
overflow:hidden;
}
section#body #stage0 section header
{
text-align:center;
height:20%;
display:block;
}
section#body #stage0 section footer
{
display:block;
height:80%;
}
</style>
</head>
<body>
<section id="body" class="table">
<section class="row">
<section id="stage0" class="cell">
<section>
<header>
<form>
<input type="text" name="q" />
<input type="submit" value="Search" />
</form>
</header>
<footer>
<table id="scrollers">
</table>
</footer>
</section>
</section>
<section id="stage1" class="cell">
<section>
content
</section>
</section>
</section>
<section class="row">
<section id="stage2" class="cell">
<section>
content
</section>
</section>
<section id="stage3" class="cell">
<section>
content
</section>
</section>
</section>
</section>
</body>
</html>
You can see it live here: http://www.tombarrasso.com/ie-issue/
Solved!
Turns out there were many issues.
One is that this /*#cc_on'abbr article aside audio canvas details figcaption figure footer header hgroup mark menu meter nav output progress section summary time video'.replace(/\w+/g,function(n){document.createElement(n)});#*/ comment is required in a script tag within the head of the document.
Secondly, IE7 and below to not recognize display:table or the like, see Quirksmode.
Lastly, the html, body elements needed to have height:100% so that IE knows what to refer to.
Anyway, this is fixed and works great.
Related
I wrote this css example, it works fine if the content is not much in number
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<style>
html{
height:100%;
margin:0px;
}
body{
height:100%;
margin:0px;
}
div{
height:100%;
margin:0px;
background-color:red;
width:100%;
}
</style>
</head>
<body>
<div>
<p style="height:300px;width:100px; background-color:blue;margin:0px;">content</p>
</div>
</body>
</html>
But my example fails as soon as you add more content
<div>
<p style="height:300px;width:100px; background-color:blue;margin:0px;">content</p>
<p style="height:300px;width:100px; background-color:blue;margin:0px;">content</p>
<p style="height:300px;width:100px; background-color:blue;margin:0px;">content</p>
</div>
How do I write some css to wrap the content when the content is in a greater number?
When you make your html's height 100%, it will scale the body tag to the 100%, limiting the div's height ultimately, to work around this problem, you have two approaches.
Approach 1
Apply height 100% only to the body tag
body {
height: 100%;
overflow: auto;
margin: 0px;
}
div {
height: 100%;
background-color: red;
width: 100%;
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<style>
</style>
</head>
<body>
<div>
<p style="height:300px;width:100px; background-color:blue;margin:0px;">content</p>
<p style="height:300px;width:100px; background-color:blue;margin:0px;">content</p>
<p style="height:300px;width:100px; background-color:blue;margin:0px;">content</p>
</div>
</body>
</html>
Approach 2
Add overflow:auto to your div to make it's overflow automatic and based on the content, like
body,html {
height: 100%;
overflow: auto;
margin: 0px;
}
div {
height: 100%;
overflow:auto;
background-color: red;
width: 100%;
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<style>
</style>
</head>
<body>
<div>
<p style="height:300px;width:100px; background-color:blue;margin:0px;">content</p>
<p style="height:300px;width:100px; background-color:blue;margin:0px;">content</p>
<p style="height:300px;width:100px; background-color:blue;margin:0px;">content</p>
</div>
</body>
</html>
Fixed widths and fixed heights don't work for modern responsive layouts. If you provide us with more specific information on the widths of the columns in percentages of the viewport width, I will update this answer with a tried-and-true approach to equal height columns.
I am a beginner to HTML and CSS. i have some knowledge of javascript, not jquery and also responsive design.
So I want to make a 3 column grid aligned to center and each with 33.33% width. Also a little space between each horizontally and some space on either side. but i can seem to align it to the center.
here is my html. I also want it to be Responsive. It should be reduced to two columns then to one and stuff like that. How could i achieve this?
Here is my HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="Home.css" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div class="layout" align="center">
<div class="success"> </div>
<div class="success"> </div>
<div class="success"> </div>
<div class="success"> </div>
<div class="success"> </div>
<div class="success"> </div>
<div class="success"> </div>
</div>
</body>
</html>
CSS
#charset "utf-8";
/* CSS Document */
.success {
display:inline-block;
background: tomato;
padding: 5px;
width: 200px;
height: 150px;
margin-top: 10px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center
}
.success li:last-child {
float: none;
width: auto;
}
.layout {
width:75%;
}
You need to start again.
Basically your html structure needs to reflect your 3 column layout. Usually this is achieved with <div> tags.
so something like:
<div id="content">
<div id="contentleft">
your first column content is here
</div>
<div id="contentcenter">
the stuff for the middle goes here
</div>
<div id="contentright">
etc. etc. etc.<br>
...
</div>
</div>
then your .css can do something along the following lines:
#content {
width: 900px;
}
#contentLeft {
width:33%;
float:left;
}
#contentcenter {
width:33%;
padding:1%;
float:left;
}
#contentright {
width: 33%;
float:right;
}
I have a div that will not stay put, it travels outside of the parent. The div I'm having trouble with is marked "6". It travels outside the parent to the right.
Here is my code.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
html{
border:1px solid;
height:99%;
}
body{
height:100%;
margin:0;
padding:0;
}
#pageWrapper{
padding:0;
margin:0;
height:100%;
position:relative;
}
</style>
</head>
<body>
<div id="pageWrapper">
<div style="width:50%;border-right:0px solid;height:100%;float:left;position:relative;">
<div style="width:100%;height:30%;border:1px solid;">1</div>
<div style="width:100%;height:40%;border:1px solid;">2</div>
<div style="width:100%;height:30%;position:absolute;bottom:0;border:1px solid;">3</div>
</div>
<div style="width:50%;border:0px solid;height:100%;float:right;">
<div style="width:100%;height:40%;border:1px solid;">4</div>
<div style="width:100%;height:40%;border:1px solid;">5</div>
<div style="width:100%;height:20%;position:absolute;bottom:0;border:1px solid;">6</div>
</div>
</div>
</body>
</html>
Add position:relative to the parent div or remove position:absolute from the div you marked
Get rid of the position:absolute;bottom:0 on the lower two divs - It's unnecessary and causes your erratic behaviour.
I am interested in putting a survey (using survey monkey) into a website. I want it to be in a fixed position as a side bar on the left and shrink the size of the survey box. I do not know much about CSS at all.
<!DOCTYPE html>
<html dir='ltr' lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<div>
<head>
<title>
Home
| qfo4produce
</title>
<meta content='text/html; charset=utf-8' http-equiv='Content-Type'>
<link href='css/inuit.css' media='all' rel='stylesheet'>
<link href='css/grid.inuit.css' media='all' rel='stylesheet'>
<link href='css/style.css' media='all' rel='stylesheet'>
</head>
<body class='wrapper'>
<div id='header'>
<a href='index.html' rel='home'>
<img src='images/banner.png' alt="" title='Home'>
</a>
</div>
<div>
<style type="text/css">
body{
margin:0;
padding:0 right-sidebar-<length> 0 left-sidebar-<length>;
}
div#left-sidebar{
position:fixed;
top:0;
left:-30;
iframe { width: 250px !important; }
height:100%;
}
</style>
<div id="surveyInfo"> <div><script src="http://www.surveymonkey.com/jsEmbed.aspx?sm=wtvL1HViBjWad5DOwtqu7A_3d_3d"> </script>
</div>
<ul class='nav'>
<li class='first'>
<a href='what-is-qfo.html' title='What Is QFO?'>What Is QFO?</a>
</li>
<li>
<a href='team.html' title='Team'>Team</a>
</li>
<li>
<a href='examples.html' title='Examples'>Examples</a>
</li>
<li>
<a href='technology.html' title='Technology'>Technology</a>
</li>
<li class='last'>
<a href='mailto:info#franwell.com' title='Contact'>Contact</a>
</li>
</ul>
<a class='login' href='qfo.aspx.html' title='Login'>Login</a>
<div id='main'>
<p>
<img src='images/summary.png' alt="Summary of QfO Process" />
</p>
</div>
Copyright © 2011
</div>
</body>
</html>
What you are asking and the code you have presented is extremely unclear. If you are extremely new to html/css then drawing a picture instead of trying to explain it in words often helps.
Here is an example where the sidebar is in a fixed position on the left. Fixed means that it will always be there, no matter where the page scrolls to.
http://jsfiddle.net/Bceat/
Don't make CSS declarations inside of other CSS declarations. They should each be on their own.
/* BAD */
div#left-sidebar{
position:fixed;
iframe { width: 250px !important; }
}
/* GOOD */
div#left-sidebar {
position:fixed;
}
iframe { width: 250px !important; }
You've also declared your styles inside the body of your html. Don't do that. Declare styles between the <head></head> tags.
/* BAD */
<head>
</head>
<style type="text/css">
body{
margin:0;
padding:0 right-sidebar-<length> 0 left-sidebar-<length>;
}
div#left-sidebar{
position:fixed;
}
</style>
/* GOOD */
<head>
<style type="text/css">
body{
margin:0;
padding:0 right-sidebar-<length> 0 left-sidebar-<length>;
}
div#left-sidebar{
position:fixed;
}
</style>
</head>
You also have some invalid declarations like:
/* right-sidebar-<length> means nothing */
padding:0 right-sidebar-<length> 0 left-sidebar-<length>;
I know that you are new, but you are going to have to read up on the basics of html and css. That will allow you to do two things. One is pose questions using language that other developers will understand. The second is presenting at a minimum, code that is properly formatted. That way even if your terminology is incorrect, your code can speak for you. Right now you aren't getting any answers because everything is kind of a mess.
I think you must create a table layout like this
<table width ="100%">
<tr><td></td> </tr>
<tr ><td rowspan="3"></td></tr>
your monkey servey here
<tr><td>nav content</td></tr>
<tr><td> main content</td></tr>
</table>
I have problem of display an hidden image when mouse over to an image by using CSS hover in Chrome and IE, but is working fine in Firefox.
Here is my link: https://www.solarisdutamas.com/fb/Elvieloon/welcome1.php
Here is my coding:
<html>
<head>
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" type="text/css" media="screen" href="css-hover.css" />
</head>
<title>Elvie Loon</title>
<meta content="Professional Makeup Artist and Hair Stylist" name="description">
<style type="text/css">
.over .pic1 {
display:none;
visibility:hidden;
}
.over:hover .pic1 {
display:inline;
visibility:visible;
position:absolute;
top:250px;
left:100px;
z-index:11;
}
</style>
<body style="margin: 0px; width: 520px;">
<img src="landing-page.jpg" usemap ="#fly1map" />
<a class="over">
<map name="fly1map">
<area shape="poly" coords="387,339,433,365,416,376,425,395,371,393,391,369,387,339" href="">
</map>
<img src="pic-1.png" class="pic1">
</a>
</body>
</html>
Please help, thank you.
Instead of visibility try this...
#something:hover
{
opacity:1; //100% opacity
filter:alpha(opacity=100);
}
#something
{
opacity:0; //0% opacity
filter:alpha(opacity=0);
}
P.s Both lines inside the statement do the same thing, the bottom filter, is just IE's way of doing it.
The problem is that you can't hover over a hidden element (see Why isn't CSS visibility working?).
Two ideas...
1. You could use a technique with two images. In addition to your image, create a transparent image of the same size. Then flip them on the mouse hover.
<html>
<head>
</head>
<style type="text/css">
.flipimage { border:solid 1px pink; height:65px; width:65px; background-image:url("blank.jpg"); }
.flipimage:hover { border:solid 1px pink; height:65px; width:65px; background-image:url("truck.jpg"); }
</style>
<body style="margin: 0px; width: 520px;">
<div class="flipimage"></div>
</body>
</html>
2. This approach takes some additional markup, but essentially it places a <div> above the image. When you hover over the <div> it is moved below the image using the z-index.
<html>
<head>
<style type="text/css">
.placeholder{ background-color:pink; height:64px; width:64px; position:absolute; z-index:99; }
.placeholder:hover { z-index:-1; }
.over { position:absolute; z-index:1;}
</style>
</head>
<body style="margin: 0px; width: 520px;">
<div>
<div class="placeholder"></div>
<a class="over"><img src="vcard.jpg" class="pic1"></a>
</div>
</body>
</html>
There is a known bug with Chrome and IE8 related to :hover and z-index on absolute positioned elements.
Chrome: Issue 83533