Layout with "Ears" addition, working in IE7, with the basement "nailed" to the bottom
good day
This post is written based on the post "Layout c" Ears "." From the comments in this post, I realized that people have a real problem with making this kind of layout for IE7. So I decided to propose a solution that I have been using for a long time in my work, and which fully meets the requirements voiced in the above mentioned post.
')
The rubber version works in FF3.5 + (you can make it work in FF3.11), IE7 +, Opera 9.64+, Chrome, Safari.
The fixed version works in IE6 +.
HTML has the following structure:
This is what comes out of it - dl.dropbox.com/u/585674/test/index.html
If necessary, the layout can be converted into a fixed one and it will work in IE6 + (I just could not find a stable working fix for fixing min-width + max-width).
This post is written based on the post "Layout c" Ears "." From the comments in this post, I realized that people have a real problem with making this kind of layout for IE7. So I decided to propose a solution that I have been using for a long time in my work, and which fully meets the requirements voiced in the above mentioned post.
')
So, the layout allows you to meet these requirements:
- regardless of the permission, the informative part of the site should be in the middle;
- graphic blocks (ears) should remain on the right and left, and these ears should be visible only when the browser screen size is enlarged, and when reduced, the part that does not fit should hide (ideally so that there is no horizontal scroll bar);
- The page should be rubber from 600px to 1000px;
- basement is always pressed to the bottom.
The rubber version works in FF3.5 + (you can make it work in FF3.11), IE7 +, Opera 9.64+, Chrome, Safari.
The fixed version works in IE6 +.
Actually the decision:
HTML has the following structure:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<html xmlns= "http://www.w3.org/1999/xhtml" xml:lang= "ru" >
<head>
<title> c «» 7 </title>
<meta http-equiv= "Content-Type" content= "text/html;charset=UTF-8" />
<!--[ if gt IE 7]><!-->
<link rel= "stylesheet" media= "screen" type= "text/css" href= "styles/main.css" />
<!--<![endif]-->
<!--[ if lt IE 8]>
<link rel=stylesheet media= "screen" type= "text/css" href= "styles/ie.css" />
<![endif]-->
</head>
<body>
<div class = "wrapper" >
<div class = "base" >
<div class = "main_row" >
<div class = "content_row" >
</div>
</div>
<div class = "header" >
<p>header</p>
<div class = "b_left ie" >left</div>
<div class = "b_right ie" >right</div>
</div>
</div>
<div class = "footer" >
</div>
</div>
</body>
</html>
* This source code was highlighted with Source Code Highlighter .CSS
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100.01%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1.2;
}
/*---------------------------------------------------------------------------reset*/
html, body {
color: #968c79;
height: 100%;
font: normal 12px / 16px Tahoma,Geneva,sans-serif;
}
.wrapper{
position: relative;
max-width: 6000px; /* Chrome, Safari - 50% 0*/
width: 100%;
min-width: 600px;
height: 100%;
margin: 0 auto;
overflow: hidden;
}
.base {
min-width: 600px;
max-width:1000px;
padding: 200px 0 166px;
margin: 0 auto;
}
/*---------------------------------------------------------------------------global*/
.ie{
display: none;
}
/*---------------------------------------------------------------------------global*/
.header {
z-index: 5;
position: absolute;
min-width: 600px;
max-width:1000px;
width: 100%;
height: 200px;
top: 0;
text-align: center;
color: #000;
background: #fff;
margin: 0 auto;
}
.header:before, .header:after{
z-index: 5;
position: absolute;
width: 100px;
height: 200px;
top: 0;
text-align: center;
font-size: 20px;
color: #000;
}
.header:before{
left: -100px;
background:#ddd;
content: "left";
}
.header:after{
right: -100px;
background:#ddd;
content: "right";
}
.main_row {
z-index: 2;
position: relative;
width: 100%;
background: #ddd;
overflow: hidden;
}
.content_row {
position: relative;
width: 100%;
height: 300px;
overflow: hidden;
}
.footer {
z-index: 10;
position: absolute;
width: 100%;
height: 166px;
bottom: 0;
margin: 0 auto;
background: url(../i/footer.jpg) 0 0 repeat-x;
overflow: hidden;
}
CSS for IE
@import "main.css";
ie{
display: block;
}
.b_left, .b_right {
z-index: 5;
position: absolute;
display: block;
width: 100px;
height: 200px;
text-align: center;
font-size: 20px;
color: #000;
top: 0;
}
.b_left{
left: -100px;
background:#ddd;
}
.b_right{
right: -100px;
background:#ddd;
}
This is what comes out of it - dl.dropbox.com/u/585674/test/index.html
If necessary, the layout can be converted into a fixed one and it will work in IE6 + (I just could not find a stable working fix for fixing min-width + max-width).
Source: https://habr.com/ru/post/107072/
All Articles