|
CSS - Content Centering Problem
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;
}
Similar TutorialsHi, 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. 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;
}
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 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 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! 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 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;
}
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, 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 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 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;} 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... 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??? Hi, I am wanting a site that is vertically and horizontally centered. I have achieved to vertically center in both FF and IE but now I am having horizontal centering problems which is usually the easy part. I have tried many different methods and I am not able to center it in FF but I am able to center in IE. If someone could help me that would be great. Here my page: jacenta.com/TESTING/ Here is the code: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<head>
<title>Welcome Canada - Immigration Services Inc.</title>
<style type="text/css">
body, html
{
height:100%;
}
body
{
background-color:#dddddd;
}
#outer
{
display:table;
height:100%;
#position:relative;
overflow:visible;
}
#inner
{
#position:absolute;
_top:50%;
display:table-cell;
vertical-align: middle;
text-align:center;
}
#inner2
{
#position:relative;
#top:-50%;
}
#container
{
width:100%;
}
#box
{
background-color:#FFFFFF;
width:700px;
height:500px;
text-align:left;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner">
<div id="inner2">
<div id="container">
<div id="box">
Text
</div>
</div>
</div>
</div>
</div>
</body>
</html>
howdy, i've been workin on a site using some good CSS for the first time. i usually get fed up but it seems to be working pretty well this time. i have one little problem http://www.bnymusic.com/lairsite/ when i check it in firefox, safari and IE on mac there's a little offset between the text area and the main image.... any clue on what is happening and how to fix it? also noticed that in IE on pc the hover over Home doesn't extend into the padded area....but it works sometimes...crazy hopefully this ls small and i will continue to convert to CSS...sadly my photo area stumped me on the CSS and i used a table....oh well. prethanks, B 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. Currently my site, http://www.kasiaozga.com , works correctly in Firefox on mac and Windows and in ie for mac and Windows. However, in Safari, the mid section of the navigation bar on the main page (index.html) appears incorrectly on the page. I would really appreciate it if any Safari users could take a look at the page and recommend a solution to enable the page to display correctly. Thanks! -Kasia 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 |
|||||||