|
CSS - [thesis] Centering Problem Within Ie After Adding A New Layout Div Around 'container'
I am working on a project based around the Thesis Wordpress theme where I have had to add a sidebar on the lefthand side of a site, which didn't seem like a real big deal. My approach to this task was to essentially create a new series of div layout tags to encompass Thesis' core "container" id through OpenHook... here's what I did:
With the 'Before HTML' hook, I added: Code: <div id="headerrunner">
<div id="footerrunner">
<div id="externalwrap">
<div id="gutter">
<div id="gutter-upper">
<? include get_bloginfo('template_url').'/custom/gutter.php'; ?>
</div>
</div>
And with After HTML I added: Code: <div class="clear"><!-- --> <!-- end id="externalwrap" --> </div> <!-- end id="footerrunner" --> </div> <!-- end id="headerrunner" --> </div> Pertinent CSS is he Code: .custom #externalwrap {
width: 97.7em;
margin:0 auto;
}
.custom #container {
margin: 0;
float: left;
}
.custom #gutter {
background: #ffcb19 url(images/gutter.png) repeat-y center bottom;
float: left;
padding: 0;
margin-top: 63px;
position: relative;
}
.custom #headerrunner {
background: url(images/back.png) repeat-x;
}
.custom #footerrunner {
background: url(images/footer.png) repeat-x 0 bottom;
}
.custom #gutter-upper {
background: url(images/gutter-top.png) no-repeat center top;
padding-top: 45px;
}
So this works like a champ, with the sole exception that in Internet Explorer, the layout no longer remains centered, but rather is left justified. I'm kind of beating my head against a brick wall on this one now... anybody maybe have an idea? Similar TutorialsI am having some trouble using float to align containers on my page. Here is what it looks like. http://filebox.vt.edu/users/kfalcon...less_broken.JPG In this image the blue area is the "content" id, the red area is the "rostercontainer" and the cream color is the "profilecontainer". I would like the profilecontainers to appear in two columns instead of one as in this image. The problem is when i add 'float : left' to the profilecontainer or rostercontainer I get the following: http://filebox.vt.edu/users/kfalcon...scrn_broken.JPG The two profile containers are now next to each other, but the rostercontainer seems to be missing, and the profilecontainers are not being loaded into the content area. From the index.php page i am using javascript to load the roster.php page into the content area. Code:
<div id="main-nav">
<dl>
<dt id="roster"><a class="loadinto-content" href="roster.php">Roster</a></dt>
</dl>
</div>
<div id="content">
<h2>Main Page</h2>
</div>
The roster.php page looks like this: PHP Code: <div class="rostercontainer"> <?php // Go through all profiles while($profile = mysql_fetch_assoc($profiles)) { ?> <div class="profilecontainer"> <img src="image3.gif" class="floatLeft" width="150" height="115" alt="image 3" /> <strong><h3 class="profile"><?php echo $profile['name']; ?></h3></strong><br/> <?php echo $profile['active']; ?><br/> <?php echo $profile['status']; ?><br/> <?php echo $profile['ride']; ?><br/> <?php echo $profile['major']; ?><br/> <?php echo $profile['hometown']; ?><br/> <?php echo $profile['info']; ?><br/> <div class="editlink"> <a href="roster_admin.php?idx=<?php echo $profile['id']; ?>">edit</a> </div> </div> <?php } ?> </div> And here is my css file, ive only included the important parts. Code:
#page-container {
width: 760px;
margin: auto;
}
#content {
font-family: Tahoma, Arial, Helvetica, Sans-serif;
background: blue;
border-top: 1px solid #efefef;
padding: 25px;
}
div.profilecontainer {
position: relative;
width: 325px;
height:200px;
margin: 10px;
padding: 5px;
background-color: #ffe;
border: 1px dashed black;
}
div#content div.rostercontainer {
background-color:red;
float : left;
}
I am not sure if this is a CSS issue or some problem with the javascript library(HTMLHttpRequest) i am using to load pages into my content area. It is really odd the adding the float to the roster/profile container would cause such a behavior. Any ideas on how i can fix this? Thanks for any help, Karl I am trying to center the page layout horizontally. I used margins: 0 auto; align: center; and it works properly in foxfire, but in IE it is aligned left. How can I make it center in IE too?? Thanks! With my limited knowledge of css, html, etc. I can mold my page to look just the way I desire on my given screen size (1280x1024) and browser (mozilla) but can not seem to get a fix for all variables (1024x768, etc.). I've tried containing divs & percents and a few other solutions to no avail. Just want to know if you guys know any quickfix or a recommended strategy in tackling this issue going further. id post code here, but the site wont allow it due to external links. so please check it out here and let me know http://needaputer.com css is at same url just located at .com /css/styles.css my goal: -- auto center content on page horizontally - (based on screen size - cross browser compatible) -- make sure header and footers are absolute top and bottom of page always (based on page size and cross-browser compatible) -- toggle "page zoom" for entire page via buttons (if needed and possible to adjust content for each screen size) Hi, I'm having a strange problem. I finally got my layout designed so that it works in both IE and FF and will work scale correctly in relation to screen resolution but now with one aesthetic defect. I have it set up so that the side navigation and the body are scaled 25%:75% but I would like a "thin solid" border between the two. My problem is that when i add the border it exceeds 100% and pushes the main content area underneath the menu. Heres the code for the page; and yes the styles will eventually be moved to the external CSS. right now the only thing the external CSS provides is the body's background image. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title> TEST PAGE 2 </title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" > <link rel="stylesheet" type="text/css" href="stylesheets/default.css"> </head> <body> <!-- LOGO ROW --> <div id="logorow" style="background-color: #FFFFFF; height: 100px; border-bottom: medium solid #7D5D10;"> <img src="/Images/owlstreelogo.jpg" height="100px" width="300px" alt="Welcome to Owl's Tree"> </div> <!-- END OF LOGO ROW --> <!-- TOP NAVIGATION ROW --> <div id="topnavigationrow" style="background-color: #FFFFFF; padding: 0px 0px 0px 0px; font-weight: bold; text-align: center; border-bottom: thin solid #7D5D10;"> INSERT TOP NAVIGATION ROW LINKS HERE </div> <!-- END OF TOP NAVIGATION ROW --> <!-- CHANGING CONTENT AREA --> <div id="changingcontent" style="background-color: #FFFFFF;"> <!-- SIDE NAVIGATION AREA --> <div id="sidenavigation" style="background-color: #FF0000; width: 25%; float: left;"> </div> <!-- END OF SIDE NAVIGATION AREA --> <!-- BODY CONTENT AREA --> <div id="bodycontent" style="background-color: #0000FF; width: 75%; float: left;"> </div> <!-- END OF BODY CONTENT AREA --> </div> <!-- END OF CHANGING CONTENT AREA --> </body> </html> I want to add "border-right: thin solid #7D5D10" to the side navigation section but when I do i'm faced with this problem. Any idea on a solution to this problem? Oh yeah and as a side not all these sections will eventually have a white background so i'm not worried about the height of them not matching because it will be unnoticable, the sections are just colored so I can see where each section starts and ends. And another random question i'm not too worried about: If i fill a section (eg. the main content section) with a single character over and over past the width of the section without spaces it overflows and displays outside the div tags boundaries. Why does it do that? and is there anyway to make sure the text wraps in the extremely rare case this would happen? Thanks in advance to anyone reading this Hi, I have the following css: Code: #container { background: url(../images/page.gif) repeat-y center;
position:relative;
width:100%;
height:100%;
}
#banner {background:url(../images/banner.gif) no-repeat center;
height:108px;
width:100%;
position:relative;
}
#menu {background:url(../images/menu.gif) no-repeat top center;
height:124px;
width:100%;
position:relative;
}
#content {
margin-left: 240px;
font-family:'Helv', Arial, Helvetica, Geneva, sans-serif;
font-size:14px;
letter-spacing:1px;
color:#000;
text-align:justify;
width:580px;
position:relative;
}
#footer {background:url(../images/pgfooter.gif) bottom center no-repeat;
height:46px;
width:100%;
position:relative;
}
all background are fixed width for 1024x768 and i have the following html <div id="container"> <div id="banner"></div> <div id="menu"></div> <div id="content"> All text goes here </div> <div id="footer"></div> </div> now the problem is that if i set the #container width to let say 1000px; it works fine (only resizeing the browser instantly ihave the horizontal scroller). So i want to set thethe container width to 100%. As soon as i set that and resize the browser the page flows well But the text in the #content div remains static and doesn't move along with the bkgrounds, thus flowing "out" of the text area. the links is here Code: http://ocdmonline.org/michael/ username: ocdmonline pass:4yGx3fM Any ideas? 10x As you can see on http://www.angelicscans.com/weblog/index.php I am trying to make my own blog. I would like to have all the contents of my page/blog inside a frame (like a table, but I'd like to make it in css). This is my css code for the frame: #frame { margin: 14px auto 0px auto; padding: 0; text-align:left; border: 1px solid black; width: 730px; } The probem is (and I don't know why) only the title and subtitle are inside that frame. This is the html: <body> <div id="frame"> here comes the content of the page <!-- end of 'frame' --></div> </body> </html> Anyone knows why only the title is inside tha frame and not the whole page? Thanks. i have created a profile at www.studavis.co.uk/audio - all done in css. The site renders fine in Internet Explorer (as expected) but when shown in Firefox there are problems. Firstly, I can't see why the border only goes along the top, despite specifying that it should go all the way round. I have a suspicion it has something to do with the floats on the two columns, though I am not certain on that. Also, the #conatainer id, despite having a background colour specified, it doesn't show through. Secondly, i need to fill the bottom of teh right column, so that it fills the same height as the larger left column. I have been racking my brain on these for the past few hours so any help is GREATLY appreciated. thanks stuart Hi I am quite familiar with CSS but am stumped on how I could do the following. Basically I need a template with a header, body and footer, I know, sounds simple right, but I need to have the middle body section of the page stretching to the height of the browser, so that the space in between the header and footer is filled in with the middle container. The middle container that stretches to the required height needs to have a background image that cannot be covered over by the header or the footer. This is the problem, because if the middle container is set to 100% height, then a scroll bar is always present because of the header and footers height. I have been able to create what I am trying to do with a table, but obviously I want to avoid using a table for a layout. Is there any way to recreate this but via CSS? Take a look at the table layout and change the size of your browser to see the effect I am aiming for, but in CSS http://labwaves.com/temp/index3.php This is an attempt in CSS, but It requires me to set the headers and footers background image to the same as the bodys background image, with I can't have . http://labwaves.com/temp/index2.php Congratulations on making it to the end of this long, but hopefully un-confusing post Thanks and any reply's are really, really appreciated as I am so stuck on this one! Hi There - Have a simple container div containing two other divs, top and content. My problem is that I can't get the colorboxtop to stick to the top of its container. There's a wayward space. Can't find any stray margins or padding hanging around. Perhaps fresh eyes can see what I cannot. Please let me know. Any help you can give me would be greatly appreciated. Thanks! Code:
<body>
<div class="colorbox">
<div class="colorboxtop">
<h2>title goes here</h2>
</div><!-- /colorboxtop -->
<div class="boxcontent">
<p>You should read this and <a href="#">Click Here</a>.</p>
<a title="Go Here!" href="#">[button]</a>
</div><!-- /boxcontent -->
</div><!-- /colorbox -->
</body>
No great complexity there...here's the CSS: Code:
body {
color:#666666;
font-family:Lucida Grande,Verdana,sans;
font-size:10px;
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:13px;
}
.colorbox {
margin-bottom:9px;
padding-bottom:15px;
width:300px;
border:thin solid #CCCCCC;
}
.colorbox h2 {
color:#FFCC33;
}
.colorbox {
color:#CC6633;
padding:0px 20px 15px;
margin-top:0;
margin-bottom:10px;
}
.colorboxtop {
background-color: #dddddd;
height:50px;
color:#666666;
background-image: url(images/bg_Tiles/stripe-dk-blue-green.png);
padding:auto 20px;
}
.colorbox a {
color:#C5DBE9;
font-weight:bold;
text-decoration:none;
}
Hi, I have a problem getting this to work in IE 5. It works in IE 6+, FF, etc but not IE 5. Anyone know why? Code:
#centerMe {
position: relative;
margin-left: auto;
margin-right: auto;
width: 760px;
}
And if there's any other IE 5 tips I should know... Hi, centering problem I have this small box (table) which shows up when a user didn't decide yet which stylesheet he or she prefers. Everything works fine but I would like the first two lines, which are in bold, to be centered within that red box. I've done so much fun and great stuff with css but this last simple thing doesn't seem to work out. Any help? http://www.jefspalace.be/digital/index.htm stylesheets at: http://www.jefspalace.be/css/print.css http://www.jefspalace.be/css/visualstyel2.css http://www.jefspalace.be/css/visualstyle3.css http://www.jefspalace.be/css/warningtable.css IE problem have a look for yourself, i don't seem to find the problem. It used to be correct, but then, over time, I made some changes, never checking in IE and now I'm stuck. Thanks a lot Kind regards, Jef http://www.viportals.com/ the ad under the categories is on the left. i tried position:center; and <center> which i know i shouldnt, but how do i center it??? I got a problem trying to center the image called white.gif I would like it if there is some one on here that could take a look at the code. HTML Code:
<html>
<head>
<title>Backtrack tutorials.</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<center>
<?php include('includes/header.php'); ?>
<img src="images/box_top.gif" />
<p class="white">Test</p>
<img src="images/box_bottom.gif" />
<?php include('includes/footer.php'); ?>
</center>
</body>
</html>
CSS Code:
body {
background-color:#000000;
}
img {
border:0px;
}
.mainbox {
background-color:#777777;
width: 960px;
border-style:none;
border-width:0px;
}
p.white {
background-image:url('../images/white.gif');
background-repeat:repeat-y;
margin-top:0px;
margin-bottom:0px;
}
I have a lblock, mblock and rblock div tags inside the content div tag. I am trying to center block tags so there will be 10px free space on each side of content div tag. You can check it at: http://www.refinethetaste.com/html/ PHP Code: #content { width:796px; margin: auto;} #lblock { width:198px; float:left; } #mblock { width:200px; float:left; margin-left:2px;} #rblock { width:375px; float:left; margin-left:1px;} The code below is to put a flash banner from left to right above a myspace page. It works with Firefox but aligns to the left in Explorer? Really havent a clue about this so any help would be much appreciated Thanks for any insight. Heres a link to the page. Opened in i.e the problem occurs. http://www.myspace.com/electricpicnicofficial Code:
<style>
body
{
background-color:white;
}
.masthead { display: block; width: 750px; height: 252px; position: absolute; left: 50%; margin-left: 0px; top: 0px; background: url(http://img40.imageshack.us/img40/1126/picnick.jpg) no-repeat; }
body table { margin-top: 530px; } body td table, body div table { margin-top: 0; }
</style>
<div style="position:absolute;top:240px;margin-left:50%;left:-484;">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="504" width="968">
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="internal" />
<param name="movie" value="http://www.electricpicnic.ie/electricpicnic09.swf" />
<param name="wmode" value="transparent" />
<embed type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" src="http://www.electricpicnic.ie/electricpicnic09.swf" height="504" width="968" wmode="transparent" />
</object>
</div>
I'm having a problem centering the table so that its centered in the browser. Below is the code. Code: <html>
<head>
<title>Untitled-3</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
#Table_01 {
position:absolute;
left:0px;
top:0px;
width:1196px;
height:892px;
}
#TopAdLeft {
position:absolute;
left:0px;
top:0px;
width:140px;
height:415px;
}
#LeftSpace {
position:absolute;
left:140px;
top:0px;
width:8px;
height:840px;
}
#LogoSpace {
position:absolute;
left:148px;
top:0px;
width:900px;
height:177px;
}
#index-04 {
position:absolute;
left:1048px;
top:0px;
width:148px;
height:1px;
}
#RightSpace {
position:absolute;
left:1048px;
top:1px;
width:8px;
height:839px;
}
#TopAdRight {
position:absolute;
left:1056px;
top:1px;
width:140px;
height:415px;
}
#CenterMiddleSpace {
position:absolute;
left:148px;
top:177px;
width:900px;
height:5px;
}
#CalendarSpace {
position:absolute;
left:148px;
top:182px;
width:900px;
height:658px;
}
#LeftMiddleSpace {
position:absolute;
left:0px;
top:416px;
width:140px;
height:9px;
}
#RightMiddleSpace {
position:absolute;
left:1056px;
top:416px;
width:140px;
height:9px;
}
#BottomAdLeft {
position:absolute;
left:0px;
top:425px;
width:140px;
height:415px;
}
#BottomAdRight {
position:absolute;
left:1056px;
top:425px;
width:140px;
height:415px;
}
#BottomLeftSpace {
position:absolute;
left:0px;
top:840px;
width:148px;
height:52px;
}
#EmailSpace {
position:absolute;
left:148px;
top:840px;
width:900px;
height:52px;
}
#BottomRightSpace {
position:absolute;
left:1048px;
top:840px;
width:148px;
height:52px;
}
-->
</style>
<!-- End ImageReady Styles -->
</head>
<body style="background-color:#000000; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; ">
<!-- ImageReady Slices (Untitled-3) -->
<div id="Table_01">
<div id="TopAdLeft">
<img src="images/LeftTopAd.jpg" width="140" height="415" alt=""> </div>
<div id="LeftSpace">
<img src="images/LeftSpace.jpg" width="8" height="840" alt="">
</div>
<div id="LogoSpace">
<img src="images/logo.jpg" width="900" height="175" alt=""> </div>
<div id="index-04">
<img src="images/index_04.jpg" width="148" height="1" alt="">
</div>
<div id="RightSpace">
<img src="images/RightSpace.jpg" width="8" height="839" alt="">
</div>
<div id="TopAdRight">
<img src="images/TopAdRight.jpg" width="140" height="415" alt="">
</div>
<div id="CenterMiddleSpace">
<img src="images/CenterMiddleSpace.jpg" width="900" height="5" alt="">
</div>
<div id="CalendarSpace">
<iframe name="I1" id="I1" title="Hollywood Drink Specials" src="http://www.calendarwiz.com/" align="center" frameborder="0" height="658" width="900"></iframe>
</div>
<div id="LeftMiddleSpace">
<img src="images/LeftMiddleSpace.jpg" width="140" height="9" alt="">
</div>
<div id="RightMiddleSpace">
<img src="images/RightMiddleSpace.jpg" width="140" height="9" alt="">
</div>
<div id="BottomAdLeft">
<img src="images/BottomAdLeft.jpg" width="140" height="415" alt="">
</div>
<div id="BottomAdRight">
<img src="images/hob.jpg" width="140" height="415" alt=""> </div>
<div id="BottomLeftSpace">
<img src="images/BottomLeftSpace.jpg" width="148" height="52" alt="">
</div>
<div id="EmailSpace">
<img src="images/EmailSpace.jpg" width="900" height="52" alt="">
</div>
<div id="BottomRightSpace">
<img src="images/BottomRightSpace.jpg" width="148" height="52" alt="">
</div>
</div>
</body>
</html>
I have been learning css and have got my page together but i want my page to be centered and i just cant seem to get it to move.It is stuck close to the left and I have tried to mess around with it with no joy.Can anyone help me please.Here is the css I have used:- DIV.wrap_page { PADDING-RIGHT: 9px; PADDING-LEFT: 9px; BACKGROUND: #b4ad9b repeat-x; PADDING-BOTTOM: 8px; WIDTH: 772px; PADDING-TOP: 8px } DIV.wrap_page2 { PADDING-RIGHT: 9px; PADDING-LEFT: 9px; BACKGROUND: #b4ad9b repeat-x; PADDING-BOTTOM: 8px; PADDING-TOP: 8px; POSITION: relative } Any help would be very appreciated many thanks,stevo! Hi guys, I've set the following CSS class: Code: .configureSystem{
padding : 3px;
width : 760px;
height : 90%;
overflow : auto;
}
In a hope to act much like the CODE tag on this forum - I basically want to have scrollable content without invoking the browsers scrollbars. I've implemented is just with: Code: <span class="configureSystem"> HTML Code Here </span> The problem is, I want to center this content, though I'm not sure how. I tried the old fashioned (and very bad) centered table with the <span> nested inside, however the scrollbar style function doesn't work then. How can I modify that class to ensure it's centered horizontally on the page? Thanks in advance. Hi, I don't realy know where this post belongs, html or css, so i posted it in both topics. I leave it up to an op to decide and delete on of the two posts if necessary. There seems to be a centering problem in IE5.0 on a Win98 pc on my site. When i checked my site at my girlfriends pc this problem arose. I must say that the machine is quite spoiled with spyware and other bad stuff, i don't know if that has anything to do with it. Can anyone confirm this problem and maybe offer a solution? http://users.pandora.be/jef_patat/index.htm I would also appreciate if forum visitors would leave a small note if the site works fine on their system. I would like to know on which systems it works fine and on which errors occur. On the site i mention which systems work fine, so if you have different settings, PLEASE, leave a reply. As yet, the only problem i know of is the one mentioned above. Thanks for any help, de Jef I am trying to center the blocks into the middle of the page but all the traditional methods seem to be failing. I've tried centering the body, making a wrapper and aligning and many other methods but the page still clings to the left of the page. If anyone could give help it would be appreciated. It probably requires the most simple of solutions but, as a relatively new user of CSS, even these seem to be hard to discover... CSS Code Code:
/* Usual Selectors */
div.wrapper {
margin-left: auto;
margin-right: auto;
height: 100%;
text-align: center;
}
body {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
color: #FFFFFF;
background-color: #000000;
text-align: center;
}
p {
width: 100%;
text-align: left;
}
h1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
font-weight: bold;
color: #FFFFFF;
}
h2 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
font-weight: bold;
color: #FFFFFF;
border-bottom: 1px solid #E0E0E0;
}
/************************* Identification *************************/
#header {
position: absolute;
width: 950px;
height: 46px;
margin: 0;
margin-top: 50px;
padding: 0 0 50px 0px; /*top right bottom left*/
text-align: left;
}
#footer {
width: 950px;
text-align: center;
}
#t_navigation {
position: absolute;
z-index: 10;
width: 50%;
height: 50px;
margin: 0;
margin-top: 68px;
padding: 0 0 50px 250px; /*top right bottom left*/
font-weight: normal;
text-align: left;
}
#search_frame {
position: absolute;
z-index: 10;
margin: 0;
margin-top: 35px;
padding: 0 0 0 250px; /*top right bottom left*/
width: 740px;
text-align: left;
}
#search_box {
background-color: #FFFFFF;
height: 28px;
text-align: left;
}
#search_box #s {
float: left;
padding: 0;
margin: 6px 0 0 6px;
border: 0;
background-color: #FFFFFF;
font-color: #000000;
width: 70%;
text-align: left;
}
#search_box #go {
float: right;
margin: 3px 4px 0 0;
font-color: #000000;
text-align: left;
}
#l_navigation {
position: absolute;
z-index: 10;
width: 210px;
height: 600px;
margin: 0;
margin-top: 100px;
padding: 0 0 50px 0px; /*top right bottom left*/
border-right: 1px solid #E0E0E0;
font-weight: normal;
text-align: left;
}
#centerDoc {
position: absolute;
z-index: 15;
padding: 0 0 50px 250px; /*top right bottom left*/
margin-top: 100px;
margin-right: 10%;
text-align: left;
width: 740px;
}
Thanks. |
|||||||