CSS - Css Full Site Centre

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.

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

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.

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,


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 {


      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;      


 } 

Any help greatly appreciated.

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

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'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.

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.