|
CSS - Centering My Content On Ie Resize?
Found lots of similar threads, but not exactly the same problem... Any ideas how I can get the main content to stay centered along with the background on my site:
http://gumbald.co.uk It works fine in FF, but not in IE, so I'm guessing it's a CSS issue My CSS: Code: /*Default CSS file*/
/*Formats <html> tag*/
html {
height: 100%;
overflow: -moz-scrollbars-vertical;
background-color: #BBF;
}
* html #wrap {
height: 100%;
}
/*Formats links to set colors, actions*/
#wrap a:link {
color: #0054A6;
text-decoration: none;
}
#wrap a:visited {
color: #0054A6;
text-decoration: none;
}
#wrap a:hover {
color: #828282;
text-decoration: none;
}
#wrap a:active {
color: #000000;
text-decoration: none;
}
/*Formats <body> tag*/
body {
font: 65% 'trebuchet ms', arial, helvetica, sans-serif;
min-height: 100%;
width: 640px;
margin: auto;
padding: 0;
background-color: #FFFFFF;
border: 0px solid red;
}
/*Formats <h1> tag*/
h1 {
font: 300% 'trebuchet ms', Arial, Helvetica, sans-serif;
color: #00f;
padding-top: 0px;
margin: 0;
}
h2 {
font: 130% 'trebuchet ms', Arial, Helvetica, sans-serif;
padding-top: 6px;
}
/*Formats images, is class so can be reused on same page*/
.imgLeft {
float: left;
padding-right: 10px;
padding-bottom: 0px;
margin-top: 0px;
}
.imgRight {
float: right;
padding-left: 10px;
padding-bottom: 0px;
margin-top: 0px;
}
/*Wraps all Divs Up*/
#wrap {
position: relative;
min-height: 100%;
width: 640px;
margin: auto;
background: top left repeat-y;
}
/*Deals with head navigation bar*/
#headwrap {
}
#logo {
padding-left: 0px;
text-indent: 10px;
width: 100%;
height: 42px;
background: #BBF repeat center;
text-align: left;
}
#navbar {
text-indent: 10px;
padding-left: 0px;
width: 100%;
font: 110% 'trebuchet ms', Arial, Helvetica, sans-serif;
margin: auto;
height: 16px;
padding-top: 2px;
padding-right: 0px;
color: #000;
text-align: left;
background: #DCDCDC repeat-x;
border-bottom: 1px solid #ccc;
}
#navbar li {
display: inline;
padding-right: 10px;
margin: 0;
}
#navbar ul {
padding: 0;
margin: 0;
}
/*Deals with side navigation bar*/
#sidenavbar {
float: left;
width: 100px;
margin-top: 0px;
text-align: center;
background: #DCDCDC;
}
/*Deals with main page content*/
#mainwrap {
padding-bottom: 0px;
}
#mainwrap:after {
display: block;
clear: both;
}
#content {
position: relative;
margin-left: 6px;
margin-right: 6px;
padding: 0 10px;
text-align: justify;
}
/*Deals with the footer*/
#footwrap {
clear: both;
height: 68px;
}
#footer {
position: absolute;
bottom: 0;
height: 40px;
background: #0054A6 repeat center;
width: 100%;
color: #FFF;
text-align: center;
margin: 0 auto;
}
#footnavbar {
position: absolute;
bottom: 40px;
font: .95em 'trebuchet ms', Arial, Helvetica, sans-serif;
width: 100%;
height: 28px;
padding-top: 8px;
color: #000;
text-align: center;
background: #DCDCDC repeat-x;
border-top: 1px solid #ccc;
}
#footnavbar li {
display: inline;
padding-right: 10px;
margin: 0;
}
#footnavbar ul {
padding: 0;
margin: 0;
}
Similar Tutorialsi thought it was easy but i cant seem to get a div fit the space it has on my page like.....the size of my page depend on 1 table...the div has to grow till the bottom of that table if i put 100% in the div and things it grows too big maybe im forgetting something Hi, I know this may be a basic question, but I'm apparently one of the last converts from tables to css and I've been searching how to center my site within the browser window. I've currently done all my layout using css and absolute positioning... it looks great, and it sure is easier than tables... but it's as if the site is aligned to run on the left of the browser rather than the preferred center. Should I use something other than "absolute" positioning (too bad if so, because I liked the ease)? Any advice? Thanks in advance for any help. Hi: I am having trouble centering divs properly. The code I am using is below, but it seems redundant to me. I am sure there is a better way to do it. Code: <div class="clearfix">
<div style="float: left; width: 25%;">
<a href="the-family.html"><img src="images/stories/demo/mom_dad.png" width="162" height="110" style="border: 0;" /></a><br />
<h3 align=center>The Family</h3>
<a href="the-family.html">Read more...</a>
</div>
<div style="float: left; width: 25%;">
{arifancybox activeType="flickr" type="customtext" source="photoset" photosetId="72157624434792497" apikey="166cd0f079225ba7aa06e3ec838f6e62"}<img src="images/stories/galleries/tehran-gallery.png" width="220" height="110" alt="tehran-gallery" title="Click for a slideshow." />
<h3 align=center>The City of Tehran</h3>
<p align=center>View the Gallery</p>{/arifancybox}
</div>
<div style="float: left; width: 25%;">
{arifancybox activeType="flickr" type="customtext" source="photoset" photosetId="72157624564172740" apikey="166cd0f079225ba7aa06e3ec838f6e62"}<img src="images/stories/galleries/rasht-gallery.png" width="220" height="110" alt="rasht-gallery" title="Click for a slideshow." />
<h3 align=center>The City of Rasht</h3>
<p align=center>View the Gallery</p>{/arifancybox}
</div>
<div style="float: left; width: 25%;">
{arifancybox activeType="flickr" type="customtext" source="photoset" photosetId="72157624427151309" apikey="166cd0f079225ba7aa06e3ec838f6e62"}<img src="images/stories/galleries/gilan-gallery.png" width="220" height="110" alt="gilan-gallery" title="Click for a slideshow." />
<h3 align=center>Gilan Province</h3>
<p align=center>View the Gallery</p>{/arifancybox}
</div>
</div>
Basically, I have a div which encloses 4 other divs. These 4 divs are each defined as "width: 25%", thus combined they take up 100% of the enclosing div. What I want is to center the content of each of those 4 divs. The content is both text and image. Should be a rather simple thing to do, and thus eliminate my need to individually center each element within the small 25% wide div. Any help would be appreciated. Thanks. Hello, I recently constructed a web page that used z-index property's to stack some transparent PNG files on top of each other. This worked great for me, however there was one thing that bothered me. I couldn't properly center my content after the z-index property was used. I could only manually position the content using left and right x,y co-ordinates. Has anyone discovered a proper way for centering z-index content? -Ben I'm working on my first website. Its a simple portfolio site. I have it mostly completed, but i would like to center all the content in the browser. I found several soulutions to this and I can not seem to get any of them to work. I think it might be stemming from my use of absolute posistioning, but idk, just a newbie here. here is the html; Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Rot</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style type="text/css">
</style>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" >
</head>
<body>
<div id="wrapper">
<div id="logo"><a href="index.html"><img border="no" src="text/logo.png" alt="logo"></a></div>
<div id="rot"><a href="index.html"><img border="no" src="text/rot.png" alt="rot"></a></div>
<a href="info.html" class="info" title="info"><span class="displace">info</span></a>
<div id="work"><a href="index.html"><img border="no" src="text/worksolid.png" alt="work"></a></div>
<a href="projects/dreaming_again.html" class="thumb1" title="thumb1"><span class="displace">project1</span></a>
<a href="projects/futility.html" class="thumb2" title="thumb2"><span class="displace">project2</span></a>
<a href="projects/grid_dreams.html" class="thumb3" title="thumb3"><span class="displace">project3</span></a>
<a href="projects/transgress.html" class="thumb4" title="thumb4"><span class="displace">project4</span></a>
<a href="projects/curls.html" class="thumb5" title="thumb5"><span class="displace">project5</span></a>
<a href="projects/city_sleeps.html" class="thumb6" title="thumb6"><span class="displace">project6</span></a>
<a href="projects/inner_turmoil.html" class="thumb7" title="thumb7"><span class="displace">project7</span></a>
<a href="projects/transitions.html" class="thumb8" title="thumb8"><span class="displace">project8</span></a>
<a href="projects/detritus.html" class="thumb9" title="thumb9"><span class="displace">project9</span></a>
<a href="projects/emerald_city.html" class="thumb10" title="thumb10"><span class="displace">project10</span></a>
</div>
</body>
</html>
and here is the CSS Code:
#wrapper {
text-align: left;
width:990px;
margin:0px auto; /* Right and left margin widths set to "auto" */
text-align:left; /* Counteract to IE5/Win Hack */
padding:0px;
border:1px dashed #333;
background-color:#eee;
}
a {
outline: none;
}
#logo{
position:absolute;
top:15px;
left:645px;
}
#rot{
position:absolute;
top:30px;
left:733px;
}
#work{
position:absolute;
top:375px;
left:15px;
}
#info{
position:absolute;
top:285px;
left:15px;
}
a.info {
position: absolute;
top:285px;
left:15px;
display: block;
width: 75px;
height: 75px;
text-decoration: none;
background: url("text/info.png");
}
a.info:hover {
background-position: 0 -75px;
}
.displace {
position: absolute;
left: -5000px;
}
a.work {
position: absolute;
top:375px;
left:15px;
display: block;
width: 75px;
height: 75px;
text-decoration: none;
background: url("text/work.png");
}
a.work:hover {
background-position: 0 -75px;
}
.displace {
position: absolute;
left: -5000px;
}
/*
* thumb1+++++++++++++++++++++++++++++++++++
*/
a.thumb1 {
position: absolute;
top:105px;
left:105px;
display: block;
width: 615px;
height: 75px;
text-decoration: none;
background: url("images/thumbs/dreaming_again.jpg");
}
a.thumb1:hover {
background-position: 0 -75px;
}
.displace {
position: absolute;
left: -5000px;
}
/*
* thumb2+++++++++++++++++++++++++++++++++++
*/
a.thumb2{
position: absolute;
top:195px;
left:105px;
display: block;
width: 615px;
height: 75px;
text-decoration: none;
background: url("images/thumbs/futility.jpg");
}
a.thumb2:hover {
background-position: 0 -75px;
}
.displace {
position: absolute;
left: -5000px;
}
/*
* thumb3+++++++++++++++++++++++++++++++++++
*/
a.thumb3{
position: absolute;
top:285px;
left:105px;
display: block;
width: 615px;
height: 75px;
text-decoration: none;
background: url("images/thumbs/grid_dreams.jpg");
}
a.thumb3:hover {
background-position: 0 -75px;
}
.displace {
position: absolute;
left: -5000px;
}
/*
* thumb4+++++++++++++++++++++++++++++++++++
*/
a.thumb4{
position: absolute;
top:375px;
left:105px;
display: block;
width: 615px;
height: 75px;
text-decoration: none;
background: url("images/thumbs/transgress.jpg");
}
a.thumb4:hover {
background-position: 0 -75px;
}
.displace {
position: absolute;
left: -5000px;
}
/*
* thumb5+++++++++++++++++++++++++++++++++++
*/
a.thumb5{
position: absolute;
top:465px;
left:105px;
display: block;
width: 615px;
height: 75px;
text-decoration: none;
background: url("images/thumbs/curls.jpg");
}
a.thumb5:hover {
background-position: 0 -75px;
}
.displace {
position: absolute;
left: -5000px;
}
/*
* thumb6+++++++++++++++++++++++++++++++++++
*/
a.thumb6{
position: absolute;
top:555px;
left:105px;
display: block;
width: 615px;
height: 75px;
text-decoration: none;
background: url("images/thumbs/city_sleeps.jpg");
}
a.thumb6:hover {
background-position: 0 -75px;
}
.displace {
position: absolute;
left: -5000px;
}
/*
* thumb7+++++++++++++++++++++++++++++++++++
*/
a.thumb7{
position: absolute;
top:645px;
left:105px;
display: block;
width: 615px;
height: 75px;
text-decoration: none;
background: url("images/thumbs/inner_turmoil.jpg");
}
a.thumb7:hover {
background-position: 0 -75px;
}
.displace {
position: absolute;
left: -5000px;
}
/*
* thumb8+++++++++++++++++++++++++++++++++++
*/
a.thumb8{
position: absolute;
top:735px;
left:105px;
display: block;
width: 615px;
height: 75px;
text-decoration: none;
background: url("images/thumbs/transitions.jpg");
}
a.thumb8:hover {
background-position: 0 -75px;
}
.displace {
position: absolute;
left: -5000px;
}
/*
* thumb9+++++++++++++++++++++++++++++++++++
*/
a.thumb9{
position: absolute;
top:825px;
left:105px;
display: block;
width: 615px;
height: 75px;
text-decoration: none;
background: url("images/thumbs/detritus.jpg");
}
a.thumb9:hover {
background-position: 0 -75px;
}
.displace {
position: absolute;
left: -5000px;
}
/*
* thumb10+++++++++++++++++++++++++++++++++++
*/
a.thumb10{
position: absolute;
top:915px;
left:105px;
display: block;
width: 615px;
height: 75px;
text-decoration: none;
background: url("images/thumbs/emerald_city.jpg");
}
a.thumb10:hover {
background-position: 0 -75px;
}
.displace {
position: absolute;
left: -5000px;
}
Seems to be a recurring theme today. I'm trying to skin osCommerce to match the site. If you go into the front page of the store you'll see the problem. All content is correctly centered in FF, but not in IE. I tried putting a "wrapper" div around all the content (starts immediately after body tag and ends immediately before endbody tag), and set its margins to 0 auto, but no luck. Code: #wrapper {
width: 760px;
margin: 0 auto;
}
Any ideas? the contents of a div have an undetermined size, it varies. I need to vertically center it as well as horizontally, which I can do the latter of. I can't use padding or margins because I don't know the size. How do I do this? I have just moved to working with layers as opposed tables/cells. Previously i had a table with three cells, at 86%, 4%, and 16% widths so it spanned the screen. The first cell's content only partly fills the cell, so when the browser is resized (made smaller), each cell stays on the same line and the table happily resize to the point where it can no longer get smaller before it wraps text I have tried to replicate this using 3 div's of the same width as the cells, with float left, however, the browser can hardly be resized at all from full screen without the third div moving onto the next line. If i make the 2nd and third divs larger it works slightly better, however the content does not look right in the layers Therefore can anyone point out how i might be able to achieve better DIV resize when the browser resizes please. Thanks very much Ed Hi there, I have a content glider script, but I have added it to a wrapper with a background image. The css is using a white background colour so when a new layer is glided up, it covers the one underneath it. However, I want the background to be transparent to show the background image underneath.... If I remove the white background, they layers become transparent and overlay each other, so you can see all text in the layers on top of each other making it impossible to read. Is there anyway I can make it so it has a transparent background, but so it will not show the content under the new slide? This is my CSS: PHP Code: .glidecontentwrapper{ position: relative; /* Do not change this value */ height: 230px; /* Set height to be able to contain height of largest content shown*/ overflow: hidden; } /* Total wrapper width: 350px+5px+5px=360px Or width of wrapper div itself plus any left and right CSS border and padding Adjust related containers below according to comments */ .glidecontent{ /*style for each glide content DIV within wrapper.*/ position: absolute; /* Do not change this value */ background: white; visibility: hidden; width: 330px; } /* Total glidecontent width: 330px+10px+10px=350px Or width of wrapper div itself (not counting wrapper border/padding) */ .glidecontenttoggler{ /*style for DIV used to contain toggler links. */ width: 360px; margin-top: 6px; text-align: center; /*How to align pagination links: "left", "center", or "right" background: white; /*always declare an explicit background color for fade effect to properly render in IE*/ } Any help would be great! Thanks. Hi all, I am trying to replace the frames with CSS on my tree menu page. Was just wondering if it is possible to bring the resize funcationality to the menu as I had in frames (i.e, user could menually resize the frame if required) OR mayb some auto fit- content solution i.e the pane would automatically grow if possible. Thanks, Sameer. Well I managed to find a partial solution by adding "clear" to the "statusDiv" like so: Code:
.statusDiv {
clear: both
background-image: url(../png/disclosure_triangles/blue_block.png);
height: 20px;
margin-bottom: 1px;
}
This kicks sibling divs onto their own line (which is what I wanted) but the spacing between divs is 2 pixels and I can't seem to find any combination of padding, margins etc to get the spacing down to one pixel. Does anyone know of a way to control the inter-div spacing when "clear" is defined? Thanks Ken --------------------------------------------------------------- Original post --------------------------------------------------------------- I'm trying to make a few divs to create the same basic functionality as an outline (with disclosure triangles etc...) and am having alignment problems. The first row renders perfectly but the text of subsequent rows overlaps the text of first row. Here's the html: Code: <div id="contentBlock" class="bodyText"> <div class='statusDiv'> <div class='disclosureCollapsed'></div> <div class="disclosureDivLabel">New</div> </div> <div class='statusDiv'> <div class='disclosureCollapsed'></div> <div class="disclosureDivLabel">Open</div> </div> </div> And here's the CSS: Code:
#contentBlock {
position: absolute;
top: 130px;
left: 200px;
height: 101%; /* Hack to force vertical scroll bars */
right: 280px;
min-width: 400px;
visibility: visible;
display: block;
}
.statusDiv {
clear: both
background-image: url(../png/disclosure_triangles/blue_block.png);
height: 20px;
margin-bottom: 1px;
}
.disclosureCollapsed {
background-image: url(../png/disclosure_triangles/blue_collapsed_wide.png);
display: block;
text-align: right;
/*position: absolute;*/
float: left;
top: 0px;
left: 0px;
width: 18px;
height: 20px;
}
.disclosureCollapsed:hover {
cursor: pointer;
}
How would I make the text in each subsequent row (statusDiv) line up? Thanks for any help Ken Hi I am rather novice at CSS and what it can do but thought I would see if anyone can offer any feedback. I have been asked to resize the following website: http://www.Ihaveone.org Currently it takes up a third of the window and it is requested to take up the whole window. Is there an easy way to do this? I have downloaded all the files to Adobe GoLive, but am unclear if or how this can be done without redesigning the entire site. Please, any help is greatly appreciated! bufhal I want to have a web page with a list on it that dynamically resizes to fit the browser viewport with a minimum distance between list items. Here's an example I faked in TextPad: Normal view: User enlarges browser: User shrinks browser: How would I accomplish this in HTML/CSS? Thanks! hi all, i'm doing a content management system front end form that worked perfectly until i tried the last bit of debugging and found that when resizing the browser it distorted the page... is there a way around this? im fairly new to CSS and have been using relative positioning for my divs. I have the following situation: I have a scrolling table, split in two divs. One div contains the header table with column headers, and the data div contains the actual data table. Both divs are fixed in height, but what I would like to do is have the data div resize depending on the number of rows in the data table. I have tried playing with divs' min-height and max-height and these seem to work fine for IE7, FF2 and Safari, but not for IE6 and Opera. Is there any workaround that would be compatible with all mentioned browsers? Thanks! Hi, I am using html and css to design a website. My problem is that when I resize the web browser, all of the elements reposition themselves accordingly. Is there some to keep them all fixed in position? Thanks! Hello I need to display an image as a background for a table cell I am using the style background-image and it is working fine Here is my problem My table cell has a specific width of 100 pixels The image that I need to display may have a width greater than 100. Is there a way to tell the browser to resize the image to width of 100 pixels and then to display it as a background image? Currently, it just displays the first 100 pixels of the image inside the cell and the rest of the pixels are cut off I must use a background image (background-image) and not an image tag (img) regards Hello, I have a menu to the right and the main content is on the left. When I resize the window the content drops below the menu. Is there anyway to stop this from happening? [Do you need to see code?] Cheers |
|||||||