|
CSS - This Should Be Simple (centre)?
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 Similar TutorialsHi 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; } 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 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. 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. 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 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? 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 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>
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 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 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? My 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 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: I've never used one line of CSS every before tonight. I'm learning how to use HTML and CSS Properly and the CSS thing is completly new to me. The book gives an example: Code: <HTML>
<HEAD>
<TITLE>StarBuxx Coffee</TITLE>
<style type="text/css">
body {
background-color: #d2b48c;
margin-left: 20%;
margin-right: 20%;
border: 1px dotted gray;
padding: 10px 10px 10px 10px;
font-family: sans-serif;
}
</STYLE>
</HEAD>
<BODY>
<H1>StarBuxx Coffee Beverages</H1>
<H2>House Blend, $1.49</H2>
<P>A smooth, mild blend of coffees from Mexico, Bolivia, and Guatemala.</P>
<H2>Mocha Cafe Latte, $2.35</H2>
<P>Expresso, steamed milk and chocolate syrup.</P>
<H2>Cappuccino, $1.89</H2>
<P>A mixture of espresso, steamed milk and foam</P>
<H2>Chai Tea, $1.85</H2>
<P>A spicy drink made with black tea, spices, milk and HHUUHHHHNAY!</P>
</BODY>
</HTML>
In The picture in the book, it shows a 1px border around the entire Content, but when I open it up in IE I don't see the border around the content. Why is this? Is the book out-dated? Also, Did anybody know Gray and Grey are both the same thing? g-r-a-y is simply an American derivation of the original spelling g-r-e-y. Gray is a color. Grey is a *colour* |
|||||||