|
CSS - Centre Column Wont Centre
Hi I have been battling with this and have tried some solutions on the net but they dont seem to work this may be simple still got my l plates on.
My center column wont center in ff its fine in ie my code is as follows body <div class="bgcolumn"> </div> <div class="leftcolumn"> </div> <div class="rightcolumn"> </div> <div class="centrecolumn"> </div> styles .leftcolumn { padding: 10px; width: 20%; float:left; } .centrecolumn { padding: 10px; width: 50%; background-image:url(images/house.png); margin-right:auto; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #000000; text-decoration: none; padding: 0px; text-align: justify; position:relative top; } .rightcolumn { padding: 30px; width: 20%; float: right; position:relative top; } .searchs { float: right; padding: 0px; width: 400px; position: relative; } .bgcolumn { width: 100%; padding: 0px; position: relative; clear: both; } Similar TutorialsMy site has three columns. left-middle-right The middle column in IE is right underneath the header as it should be. On firefox the middle coumn is as far below the header as the height of the right column. I have tried everything but i cant get it to look right in both browsers. It is all done with floated divs and doesn't use any tables at all. Please can someone help me! www.datahq-online.co.uk Thank you! I'm trying to use a dead centre script: Code:
div {
font-family: Arial, Helvetica, sans-serif;
position:relative;
}
#horizon
{
background-color: #0ff;
text-align: center;
position: absolute;
top: 50px;
left: 20px;
}
/* following rules are invisible to IE 5 \*/
#horizon
{
background-color: #0ff;
text-align: center;
position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: 1px;
overflow: visible;
visibility: hidden;
display: block;
}
/* end IE 5 hack */
#content
{
font-family: Verdana, Geneva, Arial, sans-serif;
background-color: #ffffff;
margin-left: -400px;
position: absolute;
top: -230px;
left: 50%;
width: 800px;
height: 459px;
visibility: visible;
border:1px solid #999999; width:800px; height:459px;
}
And found a hack that is supposed to work with mac IE5 (the /* IE5 note there), but dont know what it's doing for safari. Does anyone know any workarounds for safari or know a browser detection script that can lead non-mac browsers to my dead center page and mac browsers to another page that is maybe only simply centered. I have looked on countless web pages for help with positioning a image using CSS. I have a logo that I want to appear in the middle of the page regardless of what sized browser the person is using so basically ro replace the <center> tag. I know all about aboslute positioning etc but this means it will not ajust with the size of the browser. Can anyone help me to just position an image in the middle of a page using purely CSS? Thanks hi.. i am totaly new to this and don't know what I'm doing! can anyone help me centre my games with css not with tables? at the momment it looks fine in firefox and ok in some resolutions on internet explorer http://www.free-online-games-player.co.uk/police-chopper-game.html thanks Hi, I have a div which is centered in the area right of the menu. However, I am trying to get it so it sits absoultly center. The width of the menu is forcing its center line to be 180px right of true center. Here is the link: http://www.zombiemod.com/rm/nina2/about.html Here is the HTML: Code: <div id="main-image-container"> <h5><b>ME: SWEDE & TAURUS</b> - It must be a good combination<br /><br /> Patient, reliable, persistent & determined. They will do their jobs to perfection, or at least as close to it as possible. </h5> </div> Here is the CSS: Code: #main-image-container {
position: relative;
overflow: hidden;
width:600px;
margin-left:auto;
margin-right:auto;
}
Can anyone help me with this please? I tried to offset the main image container by -180px but that didnt work. I can't seem to get the search box to centre on my site. Everything else is fine but for some reason the search box isn't. I've tried to create a container for it (that didn't work) I've tried numerous different codes in my css file and still no joy. I could put the css file up here but it's over 1000 lines long. Not advertising my site just need a professional opinion: http://trisearch.co.uk You'll see the problem. Thanks for any help or advice I'm having a bit of mental block. How do I achieve the following: 100% width div LEFT SPAN (left aligned) | MIDDLE SPAN (centre aligned) | RIGHT SPAN (right aligned) I thought it was possible in one div rather than having to go the three column layout route? Hi all i am just wondering exactly how you get a div to stay in the center of a page no matter what screen resolution. 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>
Seems 99% of CSS questions are related to centre-aligning content, which does beg the question of why the heck it isn't easier?! Anyway, I have kind of unusual site-layout, which is essentially a set of layout images that form a pie-interface. I've laid it out fine on the left of the page, but I want it to be in the centre of the screen: The page in question is my home-site which I'm re-designing: http://haravikk.com/ Currently the interface spans a couple of HTML pages, but will use AJAX in future with the HTML pages as back-up, but that's another story entirely. So anyway, here's the basic HTML of the page, including the pie "slices": Code: <?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="content-type" content="text/html;charset=ISO-8859-1" /> <meta name="author" content="Haravikk.com" /> <title>Haravikk.com</title> <link rel="stylesheet" href="style/style.css" /> </head> <body> <div class="root"> <div class="main"> <img class="logo" src="style/images/main/logo.png" alt="" /> <a href="menu.html" title="View Menu"> <img class="logoFlame" src="style/images/main/logoFlame.png" alt="" /> </a> </div> <div class="menu"> <a href="soon.html" title="Haravikk's Links"> <img class="links" src="style/images/menu/links.png" alt="" /> </a> <a href="soon.html" title="Contact Haravikk"> <img class="contact" src="style/images/menu/contact.png" alt="" /> </a> <a href="soon.html" title="Haravikk's Gallery"> <img class="gallery" src="style/images/menu/gallery.png" alt="" /> </a> <a href="index.html" title="Close"> <img class="centre" src="style/images/menu/centre.png" alt="" /> </a> <a href="soon.html" title="Haravikk's Projects"> <img class="projects" src="style/images/menu/projects.png" alt="" /> </a> <a href="soon.html" title="About Haravikk"> <img class="about" src="style/images/menu/about.png" alt="" /> </a> <a href="soon.html" title="Read Haravikk's Blog"> <img class="blog" src="style/images/menu/blog.png" alt="" /> </a> </div> </div> </body> </html> I'm hoping people can help without me having to post the lengthy CSS as well, but if you do need it can be found here (WARNING: It's a bit messy!). To try and explain: The root div is a wrapper, with the main div being the primary structure of the site based upon the logo.png image; that image is a large square-aspect-ratio image which has a height of 100%, and automatic width. All other images are designed to layer on top of it when aligned by the top-left corner (i.e - I've trimmed away any transparency to the right or bottom of the image). Ideally I would have positioned them to right or bottom as appropriate so I could trim them more, but I can't get that to work. Can anyone help in figuring out how in the heck I would go about centring this site-layout? I'm shying away from the use of tables, but can use them if I have-to. Also, while all major browsers should work, some may look a little weird; I'll be adding browser-specific style-info later-on. Hi All, Been a while since I have been here, been doing other jobs in place of website design sadly! Something I enjoy a great deal! Anyway, I am in the process of making a new website and I have discovered overlays - what a great idea. They look fantastic. Now I have designed an overlay for my site: http://www.wellandpower.net/website2/index.php The bottom link on this page makes an overlay appear with a new specification sheet in it. The dotted grey background (soon to be changed to another design) is held in the #overlay div, the specification sheet is housed in the '#overlayholder' div. The overlay div has a property of text-align: center; - but the overlayholder div is not aligning to the centre. I have posted the CSS of the two elements below. It works in IE7, but not in FF. Secondly, when the overlayholder appears and content is added to it, the overlay DIV does not stretch in either browser, why not? I found this strange. CSS Code: Original - CSS Code #overlay { visibility: hidden; position: absolute; left: 0px; top: 0px; width:100%; height:100%; text-align: center; z-index: 1000; background-image:url(/images/checkerboard.png); } #overlay #overlayholder { margin-top: 50px; padding: 10px; width: 850px; text-align: center; background-color: #FFFFFF; }
#overlay {
Any help greatly appreciated. I'm trying to do something that probably isn't as difficult as it's becoming for me. I want to have a 100% height page, which I've managed okay with so far. I want the header and menu to be a fixed height, and a footer of fixed height too, with the middle section being what expands to fit the whole design. This middle section, however, is a div containing an image that needs to get its height somehow. I've reverted back to my old fixed code, which loaded a stylesheet depending on the users screen resolution, but it's too limited and I'd like to know how to go about incorporating the 100% height idea. http://www.ryanbuckley.ca/BRIT/drawings.php what i would like to do is centre my website on any monitor any resolution but i dont know how. could someone explain what i would need to do. im taking a guess but the way i thought you could do it is by putting a div around the whole thing and settinga fixed height and width on auto but i dont think thats right. thanks Using CSS, is it possible to vertically align centrally text to an image as you can using tables? A simple example using a table would be <table border="0" width="100%"> <tr> <td><img border="0" src="image.gif" width="609"height="115"></td> <td valign="middle">Ray did this</td> </tr> </table> Using CSS so far I've got... <p><img class="imglft" border="0" src="img.jpg" width="434" height="400" alt="my image">Ray did this> The CSS for imglft is... .imglft{ float: left; margin-right: 30px; } I've tried putting the whole lot in a DIV and using text-align: middle and vertical-align: middle but that doesn't work. You can see what I mean by comparing http://brisray.com/grad.htm or http://members.lycos.co.uk/brisray/grad.htm with http://brisray.com/ray/rgrad.htm or http://members.lycos.co.uk/brisray/ray/rgrad.htm Ray Hi guys I'm in the process of getting my site together, and it's coming along fairly well. I've been using Firefox for testing, and haven't noticed anything wrong. However, when I checked it in IE8, text that I have explicitly left-aligned is now sitting centred on my page. I have validated the code, and there are no problems. I'm just confused... Here is my code: Code: <span style="text-align:left;">Jarryd Pearson</span><br /><br />
<table align="left">
<tr class="rule">
<td colspan="2">
<hr />
</td>
</tr>
<tr>
<td class="contact">
Phone:
</td>
<td class="contact">
####
</td>
</tr>
<tr class="rule">
<td colspan="2">
<hr />
</td>
</tr>
<tr>
<td class="contact">
Mobile:
</td>
<td class="contact">
####
</td>
</tr>
<tr class="rule">
<td colspan="2">
<hr />
</td>
</tr>
<tr>
<td class="contact">
Email:
</td>
<td class="contact">
####
</td>
</tr>
<tr class="rule">
<td colspan="2">
<hr />
</td>
</tr>
<tr>
<td class="contact">
Postal Address:
</td>
<td class="contact">
####
</td>
</tr>
<tr class="rule">
<td colspan="2">
<hr />
</td>
</tr>
</table>
And here's my CSS: Code: @charset "utf-8";
/* CSS Document */
body {
background: #0d1866;
color: #CCCCCC;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
}
a {
color: #FFFFFF;
text-decoration: underline;
}
a:hover {
color: #FFFFFF;
text-decoration: none;
}
paypal {
border: none;
}
img.footer {
border: none;
width: 88px;
height: 31px
}
td.contact {
vertical-align:top;
}
tr.rule {
padding: 0px;
}
/* DIVS */
div#main {
padding: 2px;
margin: 2px;
}
div#text {
width: 650px;
height: 370px;
vertical-align: top;
overflow: auto;
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 10px;
}
I apologise if this has been posted before. I did a search, and couldn't seem to find this particular issue. If someone has already posted this, please point me in their direction! Thanks Jarryd In firefox with a maximised window my main background gets shunted right by 2px. If I de-maximise the window it puts the image centre. It always works in IE. Any ideas? I am trying to centre my web contents with the following code via css: .fixcenter { width: 775px; margin: 0px auto; background: #ffffff; color: #000000; text-align: center; } It is working fine in both IE and Firefox. Problem [FireFox Only]: It center's the content in firefox, but when scroll bar appears, my contents jumps to left a little. It looks bad that , contents jumps little left after loading. Is there any solution: Hi all, I've tried searching around for this issue, but I've not found any help so far and it's driving me nuts. I hope someone here can advise. This is an abridged version of the site's code for example: Code: <style type="text/css">
<!--
#main1 {
padding: 0px;
margin: 0px;
}
#left {
width:260px;
margin:0;
padding:0;
float: left;
}
#left-top {
background-image: url(../images/panel-top-left.gif);
background-repeat: no-repeat;
background-position: center top;
height: 16px;
margin: 0px;
padding: 0px;
}
#left-middle {
background-image: url(../images/panel-middle-left.gif);
background-repeat: repeat-y;
padding-right: 20px;
padding-left: 20px;
padding-bottom: 2px;
}
#left-bottom {
background-image: url(../images/panel-bottom-left.gif);
background-position: center;
height: 18px;
}
#logo {
background-image: url(../images/swalingslogo.gif);
background-position: center top;
width: 260px;
height: 120px;
background-repeat: no-repeat;
}
/* Navigation List */
#navlist
{
padding-left: 0;
margin-bottom:10px;
width: 217px;
}
#navlist li
{
list-style: none;
margin-bottom:4px;
padding: 0;
font-size:1.2em;
line-height:1.8em;
width:217px;
height:32px;
background-image:url(../images/nav2.gif);
background-repeat:no-repeat;
margin-top: 0;
margin-right: 0;
margin-left: 0;
}
#navlist li a:link, #navlist li a:visited {
display:block;
text-decoration: none;
color:#039;
width:207px;
height:32px;
font-weight:bold;
padding-top: 2px;
padding-right: 5px;
padding-bottom: 2px;
padding-left: 5px;
}
#navlist li a:hover {
text-decoration: none;
color:#FF6600;
}
/* Testimonials */
div#fscroller {
width:200px;
height:200px;
background-image:url(../images/bg-testimonials.gif);
background-repeat:no-repeat;
margin-left:8px;
}
div#fscroller p {
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 5px;
}
/* Middle Column */
#middle {
margin-top: 0;
margin-right: 0px;
margin-bottom: 0;
padding-right: 0px;
padding-left: 0px;
padding-top: 0px;
text-align: justify;
margin-left: 260px;
}
#middle #top-left {
background-image: url(../images/panel-top-rightleft.gif);
height: 16px;
font-size: 2px;
background-repeat: no-repeat;
}
#middle #top-right {
float: right;
margin-top: -16px;
background-image: url(../images/panel-top-rightright.gif);
height: 16px;
width: 20px;
font-size: 2px;
}
#middle a {
color: #003399;
}
#middle a:hover {
text-decoration: none;
}
/** Country Titles **/
#middle h2#unitedkingdom {
background-image: url(../images/title-unitedkingdom.gif);
background-repeat: no-repeat;
height: 26px;
width: 201px;
margin-bottom: 6px;
}
#middle h2#antigua {
background-image: url(../images/title-antigua.gif);
background-repeat: no-repeat;
height: 26px;
width: 128px;
margin-top: 16px;
margin-bottom: 6px;
}
/* Minisite Links */
div.minisite {
float: left;
}
div.minisite span {
display: none;
}
div.minisite a {
background-position: top;
background-repeat: no-repeat;
height: 168px;
width: 190px;
display: block;
}
div.minisite a:hover {
background-position: bottom;
}
a#minisite-swimminglessons {
background-image: url(../images/swimming-lessons-uk.jpg);
}
.clear {
clear:both;
}
.hidden {
display: none;
}
.notopgap {
margin-top: 0;
}
.nobottomgap {
margin-bottom: 0;
}
.inside {
background: #EFEFEF;
padding-left: 10px;
padding-right: 10px;
}
-->
</style>
<div id="main1">
<div id="left">
<!-- Logo -->
<div id="logo"></div>
<div id="left-top"></div>
<div id="left-middle">
<!-- Navigation -->
<!--#include file="../inc/nav2.asp" -->
<!-- Testimonials -->
<!--#include file="../inc/testimonials.asp" -->
<!--#include file="../inc/special-offers.asp" -->
</div>
<div id="left-bottom"></div>
</div>
<!-- Middle Column -->
<a name="skipnav" class="hidden"></a>
<div id="middle">
<div class="top-left"></div><div class="top-right"></div>
<div class="insideleft"><div class="insideright"><div class="inside"><div class="gap-saver"></div>
<!-- UK Sites -->
<h2 id="unitedkingdom"><span class="hidden">United Kingdom</span></h2>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swimming Lessons</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Training</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Residential Courses</span></a></div>
<div class="clear"></div>
<!-- Antigua Sites -->
<h2 id="antigua"><span class="hidden">Antigua</span></h2>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Soccer</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Parties and Events</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings International School of Swimming</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Babysitting and Nanny Agency</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings School of Rugby</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings School of Volleyball</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Training</span></a></div>
<div class="clear"></div>
<div class="gap-saver"></div>
</div></div></div>
<div class="bottom-left"></div><div class="bottom-right"></div>
</div>
<!-- End Middle Column -->
</div>
I've placed the Country Title in an H2 tag, then beneath that, each anchor is enclosed in a DIV, and is set as a left-floated block. Then I placed a spacer DIV (clear: both) to create a new line, then repeated with H2 and links. This all works fine in Firefox, IE7 and Opera, but of course IE6 is being a pig as usual. The spacer DIV is pushed to sit alongside the bottom of the left column, and I can't figure out how to (or if I can) stop this. I can't add in links properly, so I hope this is acceptable under the rules -- The site in question is: www.swalings .com/swalings/index4.asp and here's a screenshot of IE6 behaviour: www.swalings .com/images/swalings-ie6-troubleshoot.jpg Hopefully that's enough information to go on, please let me know if there's something I missed out. Thanks a lot! Rob |
|||||||