|
CSS - Almost Full Screen Div In Ie
I've run into yet another IE "feature" that i'd like to ask you, dear colleagues, how to solve.
I have a relatively positioned div and i need to absolute position another div inside of it to fill almost all width and height of the parent. I need it to have a 20px margin from top and bottom. Here's what works in real browsers: Code:
.somediv{
position: absolute;
left: 0;
top: 20px;
bottom: 20px;
right: 0;
}
Now how do i make it work in a developer's nightmare IE? There are 2 more divs in top and bottom both 20px high so the new div shouldn't overlap with them. Similar TutorialsI have seen a design which I find pretty interesting where in the main site is aligned left and fixed width at say 700px wide. Yet the footer seems to span the entire screen. The header also seems to use the entire screen width but that is beign accomplished with the background image, but this footer goes all the way to end of the screen and naturally adjusts itself under all the content. Is there a way to get this effect? Hi, I am a wannabe css compiler... Have the following problem. wrote css for a square screen monitor and placed css box in an area to the right of center, my partner called and told me it sat to the left over the side menu onher wide screen. I cannot figure out how to compensate the (top/left) position to cover both type screens... Anyone help me? Hello all! My first post here. I have recently started working with wordpress with the catalyst dynamik child theme. I am trying to "copy" some theme i found on the internet just to see if i can and maybe learn something on the way. I know some basic CSS and HTML but nothing fancy im learning as i go. My problem is that i have used custom widget area hook to create a widget area after header (catalyst_hook_after_after_header) named it selected a layout (homepage so it shows on the home page) and i have named or assigned "sshook" class to it. The widget are appeared under the header and i added php text widget to it so i can use shortcode like [easingslider] for my slideshow plugin. So ok all that worked out and now i have a slideshow hooked in the widget area under the header. The problem is as follows. The container (?) that is behind the slideshow (.sshook) should be as wide as the page but it isnt. If i set the width to 100% it looks like it ignores it (nothing happens) i have also tried adding !important to it just to make sure it didnt inherit the width from some other element but it didnt work. This is the code i made: .sshook { width: 100% !important; margin: 0px 0px 0px -500px; padding: 0px 0px 0px 500px; background: rgb(226, 227, 227); } Margin goes -500 so that it pulls the background behind the slideshow all the way to the left border of the page and the padding 500 places the slideshow back at the center of the page but the only way i can get the background to show on the right side of the slideshow is to change width from % to px like 1400px but then it is not always spaning the whole page for people with higher resolution and if someone has lower resolution it adds a scroll bar at the bottom of the page because it goes more to the right. I hope someone understands what i am trying to ask here. If anyone needs clarification on any of this let me know and ill clarify. I am building a template page, this has the header only stored in the page, then a php page is loaded from a different file as the body of the page, how do i set a full path to my css style sheet via the template page: i.e. http://mysite.com/styles/mycss.css for some reason this doesn't work! I can't set the path using '../../styles/mycss.css' because the template file will be stored in many different depths of my site, SO: How can i set some sort of path to the css file? any help will be appreciated! Cheers, Alex. Hi all! After trying more then a few things I'm about to give up, so I hope someone here has the answer. The problem is the following: * A website contains 3 DIV columns and an header at the top, this is all inside a single wrapper DIV which centers the webpage. * All three columns should have the same length as the longest column. * When the content in the 3 DIV columns is shorter then the height of your browser window, the DIV elements should fill-out until the bottom of the screen. Point 2 is doable. Point 3 is doable. But the combination of point 2 and 3 seems quite hard. Hope someone has an idea . Thanks! Hi all, I have this headache problem ... check it out here on my site You see that menu ? it should be all over the #bar, but it just minimizes it to that small size. It should be all over the #bar Thanks !!! I'm trying to create a full width bar across the page. My current attempt is at: http://www.mixicon.com/dev/test.html It is currently working in Safari, but not in Firefox.I'm open to opinions in what I might be missing here, any thoughts? I'm mostly happy with how it looks in Safari, so I need any help to get it there in other browsers. The attached image shows what it should look like. sorry cant work out while the site will not centre have a full div id wrap with margin 0px auto. Still wont centre something so simple. all as i can think is it is the float:left; but removing sends the layout wild and ont know what to reaplce it with. Code:
<style type="text/css" media="screen">
#wrap {
width:960px;
margin:0px auto;
}
#header {
float:Left;
width:950px;
margin:5px;
height:180px;
border:#000 1px solid;
}
#off1 {
float:Left;
width:310px;
height:120px;
margin:5px;
border:#000 1px solid;
}
#off2 {
float:Left;
width:310px;
height:120px;
margin:5px;
border:#000 1px solid;
}
#off3 {
float:Left;
width:310px;
height:120px;
margin:5px;
border:#000 1px solid;
}
#main_content {
float:Left;
overflow:hidden;
width:960px;
height:auto;
margin:auto;
}
#leftcol {
float:Left;
margin:5px;
border:#000 1px solid;
width:590px;
height:auto;
}
#rightcol {
float:Left;
margin:5px;
border:#000 1px solid;
width:350px;
height:auto;
}
#footer {
float:Left;
width:950px;
height:auto;
border:#000 1px solid;
margin:5px;
}
</style>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Super Saver Ltd</title>
</head>
<body>
<div id="wrap">
<div id="header"></div>
<div id="off1"></div>
<div id="off2"></div>
<div id="off3"></div>
<div id="main_content">
<div id="leftcol"></div>
<div id="rightcol"></div>
</div> <!---main content end--->
<div id="footer"></div>
</div>
</div><!---main container end--->
</body>
</html>
I am looking for some examples on making this layout: ----------HEADER---------- nav content - - - - - - - - - - - - ----------FOOTER0--------- The page needs to be 100% the height of the browser window with header at top, footer at bottom and the content/nav being a minimum height of enough to fill the screen vertically and should be expandable. Anyone got any pointers? I have a DIV which I have set the height to 100%. I understand that height: 100% means that it will fit up to 100% of the viewable screen area. How would I define it so that it expands to fit 100% of the content area? Meaning that if the content scrolls more than 100% of the height of the screen, the background will stretch to fit the whole content height. The URL with an example of the site I'm working on is: http://hawaiihomebrew.com/os_comm/index.php?cPath=50_51 The site is not complete so please bare with some of the broken images and all that. When my products extend beyond the height of the screen the white background stops at the point before you have to start scrolling and I want it to extend the whole height of the content. My css is below. The right_col class is the one that contains the content in question. Code:
/* CSS Document */
body {
font-family:Geneva, Arial, Helvetica, sans-serif;
color: #000000;
font-size: 80%;
background-color: #ffffff;
margin: 0px 0px 0px 0px;
background-image: url(../images/hw_back.gif);
}
#left_col {
position: absolute;
top: 0px;
left: 0px;
padding: 10px 10px 10px 10px;
height: 100%;
width: 18%;
background-color: #63782B;
background-image:url(../images/hw_back.gif);
}
#right_col {
position: absolute;
top: 0px;
left: 18%;
height: 100%;
width: 82%;
background-color:#FFFFFF;
}
#cart_rt {
position: absolute;
top: 0px;
right: 0px;
padding: 10px 10px 10px 10px;
height: auto;
width: 35%;
text-align: right;
}
#cart_lt {
position: absolute;
top: 0px;
left: 0px;
padding: 10px 10px 10px 10px;
height: auto;
width: 35%;
text-align: left;
}
#content {
position: absolute;
top: 20px;
left: 0px;
padding: 10px 10px 10px 10px;
height: auto;
width: 100%;
}
This seems like it should be very easy to do but something is preventing it from working. I was following the guide at http://www.alistapart.com/articles/negativemargins but with my navigation column on the left. A summary of my layout right now is: <div id="wrapper"> <div id="container"> <div id="content"> </div> </div> <div id="navigation" <div id="navlist"> </div> </div> <div id="clearing"> </div> </div> my css: #container { float: right; margin-left: -16.8em; width: 100%; background-color: #2586d7; } #navigation { float: left; width: 14em; background: #90bade url(navimage.jpg) repeat-y: right; } #wrapper { background: #90bade url(navimage.jpg) repeat-y: right; } #navlist is a div containing a styled ul for navigation. #clearing { clear: both; height: 0; } So basically the navigation div is supposed to extend to the bottom as far as the container div goes. According to the guide at AListApart it should be working but is something else in my code interfereing? If everything above should work fine, I can post a link to the test file so you can see the rest of the code. Thanks for any help! Hi, I am trying to better understand how column heights are displayed, and how to create full height columns. On this page http://tapmeister.com/layout_test/index.html, the column which drives the height of the page is <div id="main">, and the left and right columns do not span the entire column height, and the red <div id="content"> shows at the bottom of both side columns. On this page http://tapmeister.com/layout_test/index2.html, I put less stuff in the center <div id="main"> so it wouldn't drive the height of the page. The green <div id="main">, however, did cover the entire column unlike the left and right column on the earlier page. Can anyone help me understand what is going on, and why one column has full height color yet not the other one? Also, what is the best way to make the left and right column have full height color? I know I can apply a repeating background graphic to <div id="content"> which mimics the appearance of the left and right column, however, it would be nice to do differently if possible. My code is listed below (sorry about the ugly colors!) Thanks Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Layout Test</title>
<style type="text/css">
* {margin: 0; padding: 0;}
body {background-color: olive;}
#wrapper
{
width: 100%;
background-color: blue;
margin: auto;
}
#main
{
margin: 0 180px;
background-color: green;
}
#content {background-color: red;}
#side1
{
width:180px;
float:left;
background-color:yellow;
}
#side2
{
width: 180px;
float:right;
background-color:yellow;}
#footer
{
clear:both;
background-color:lime;
border-top: 10px solid black;
}
#header {background-color: purple;}
.clear
{
clear:both;
}
</style>
</head>
<body id="page_bg">
<div id="wrapper">
<div id="header">My Header</div>
<div id="content">
<div id="side2">
<p>Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here.</p>
</div>
<div id="side1">
<p>Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here.</p>
</div>
<div id="main">
<p>Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff.</p>
<p><img style="margin: 5px; float: left; width: 250px;" src="lady.jpg" alt="" width="250"></p>
<p>Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff.</p>
<div class="clear"></div>
</div>
</div>
</div>
<div id="footer">My Footer</div>
</body>
</html>
I'm wanting to extend a div all the way to the bottom of the page to give the effect of a white column. How can I make it extend all the way to the bottom if the content is too short to make it do this? The example is at http://www.wattersisere.co.uk/devshed. Thanks, Watters I have 2 div columns on a web page, they are positioned using css... the right column is taller than the left column, but the left column does not expand to the full height of the right column... I require this, because the left column has a background color that I want to go right to the bottom of the page. I have height: 100%; in the css style for the left column, but that only makes it 1 screen high... does anyone know of a way to make it the full height of the other column, ie stretch? I have tried height: auto; but that doesnt work either. I'm learning CSS and creating a blog at annieagarwal.com/blog (again, work in progress!) I want to recreate the shadow on the sides of the main container of this blog the url is blocked just google robin cornett and then find the style sheets How do I do that? The blog has two style sheets My style sheet is at annieagarwal.com/blog/wp-content/themes/tofurious/style.css I created a png of the shadow that is 1000px wide at annieagarwal.com/blog/wp-content/themes/tofurious/images/shadow.png But I can't seem to get the code right. I want to use a background image/color along with the container having a drop shadow. I'd like to be able to grab blocks of text from a plain-text file and present them in a web page, not only preserving the original spaces and line breaks, but also nicely and neatly justifying them (i.e. "full" justification). I tried setting the innerHTML of a div equal to the Ajax'ed responseText, formatted thusly: <div style="blah:blooey; ...;white-spacere-wrap; text-align:justify;">but no joy</div> The pre-wrap worked, but undid the justify. Sounds weird, but you know us designers are always looking for fresh ways to present content. I've not actually managed to make this work, even though it seems ridiculously simple; in effect it would just be full justification except any orphaned lines would be right-justified, not left. Any ideas? Hi, I have a border around the content of my page which is limited in width but not height. Some of the pages have more content then others so the height adjusts. I also have a left column and a black background with and image in this column but I have 2 problems 1. In IE I can't seem to get this black column(div) to extend to the full height of the column so that it reaches the border. 2. In Firefox this left column extends all the way down the page and the border doesn't surround the text it sort of collapses The column is left floated and in a div and the content is right floated and in a div as well which is all surrounded by a div with a border. I would appreciate any help that you might offer. Thanks Anyone has a code for a good way to show a semi transparent announcement on a full browser window that can be dismissed by the user to show the content ? something that works like this: http://jquery.com/demo/thickbox/#sectiond-2 scroll up a little and click on the demo and then show.... I tried to figure out how they did it but it's too complicated (so it seems) I'm looking for a simple dedicated solution. |
|||||||