Learn VBA & Macros in 1 Week!

HTML - Problem With Centered Content

Full Excel VBA Course - Beginner to Expert

Problem With Centered Content	View Content

Hi

I have a page designed to be centered in the browser... not a problem. However, I have just added a drop down menu (taken from http://www.dynamicdrive.com/dynamici...rome/index.htm) and now the divs which contain the drop down content seem to be centering inside the browser as opposed to sitting under the menu titles like they should. In other words, they are behaving independently of the top level menu... not good!

Here's the link - http://www.horizonwebsites.co.uk/snoworks/

I've tried many little changes but I'm definately missing something here. Any help would be great.

Kev

Full Excel VBA Course - Beginner to Expert

Content Centered On A Mac, But Not A Pc?

Similar Tutorials

View Content

Hi all, brand new here. I'm working on a simple website for a project I'm doing with a friend, but I'm having a problem with the layout. The site is www.Project217.com. On my Macbook, the content on all of the pages appears centered, which is where I want it. Firefox, Safari and IE all display properly. However, on my Windows computer at work all of the content within the black section of the pages is aligned to the left.

Is there an issue with my source code that I'm missing?
Thanks for any help,
Aaron

A Simple Page With Content Centered And Two Background Columns (right And Left)

Similar Tutorials

View Content

Hi All,

I have just started my first page and there is a little problem with it that is driving me nuts. Basically, Im trying to make a simple page where the content is centered and there are two background columns on the right and left: we see these pages everywhere.

Here is the code (pseudo) I am trying

<body>
<centered content>
<body_divis>
<pic>
insert picture (top left)
<pic>
</body_div>
</centered content>
<body>

now im using a css file in which we have:

<centetred content> : fix width (1000px), auto left and right margin, gray background.

<body_div>: white background.

<pic>: 0 margins.

So far so good, I get the desired effect: white page in the middle, two side columns in gray. All of this starts at the very top of the page.

Now I just want to move the picture slighlty down. As soon as I do that the whole white centered section moves down with it, creating a horizental gray bar on top of the page that is driving me nuts....

it seems that the white section starts where the first object is placed. I just want it to start at the top and then plance my objects wherever.

All margins are good in my code as I have checked and rechecked.

I appreciate any help.

Thanks,

Kakeez

Centered Swf Problem In Html

Similar Tutorials

View Content

the attached code will properly center (horizontally and vertically) a swf on a mac in safari and firefox, but not on a pc in IE.
please help!
actual site he
Courtland Construction
Code:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>master</title>
<script language="javascript">AC_FL_RunContent = 0;</script>
<script src="AC_RunActiveContent.js" language="javascript"></script>
<style type="text/css">
<!--
body {
	background-image: url(images/backgroundTile2.jpg);
	background-repeat: repeat;
}
-->
</style></head>
<body bgcolor="#ffffff">
<!--url's used in the movie-->
<!--text used in the movie-->
<!-- saved from url=(0013)about:internet -->

<table width="100%" height="100%" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="1000" height="700" align="center" valign="middle"><div align="center">
      <script language="javascript">
	if (AC_FL_RunContent == 0) {
		alert("This page requires AC_RunActiveContent.js.");
	} else {
		AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0','width','1000','height','700','id','images/master','align','middle','src','images/master','quality','best','scale','noscale','wmode','transparent','bgcolor','#ffffff','name','images/master','allowscriptaccess','sameDomain','allowfullscreen','true','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','images/master' ); //end AC code
	}
      </script>
      <noscript>
      <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="1000" height="700" id="master" align="middle">
        <param name="allowScriptAccess" value="sameDomain" />
        <param name="allowFullScreen" value="true" />
        <param name="movie" value="images/master.swf" />
        <param name="quality" value="best" />
        <param name="scale" value="noscale" />
        <param name="wmode" value="transparent" />
        <param name="bgcolor" value="#ffffff" />
        <embed src="images/master.swf" quality="best" scale="noscale" wmode="transparent" bgcolor="#ffffff" width="1000" height="700" name="master" align="middle" allowScriptAccess="sameDomain" allowFullScreen="true" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />      
</object>
      </noscript>
    </div></td>
  </tr>
</table>
</body>
</html>

Centered Text Over Centered Image

Similar Tutorials

View Content

Hi all.
I've been trying to accomplish a simple task with less to no luck, I hope somebody here can help...

I'm trying to create a single page with a solid color background, with a square image (let's say 500px * 500px) centered in the page and above the solid color, with some text centered above the image. All of this should work even resizing the window: I mean, the image should resize mantainig its proportions.

Is there any way to do this? I tried both tables and css, but had no luck...

Thank you in advance.
Melmoth

Why Are Headings Sometimes Not Centered In Ie, But Centered In Firefox

Similar Tutorials

View Content

Anyone have any hints about why headings that are perfectly centered in Firefox are sometimes aligned left in IE?

My First Problem Is That I Want To Align Text To The Left Of The Video And Centered

Similar Tutorials

View Content

hi i'm new to htm, infact new to making websites at all.

i spent ages writting an intoduction, but some one deleted it.

i have started writting my first HTML page :

http://normington.superfreehost.org/...age%204.1.html

so far it's just some embeded movies from youtube.

my first problem is that i want to align text to the left of the video and centered vertically.

my second problem is that when i view the page source through mozilla i find some extra text that i cant see if i view the page in wordpad.

"
<script type="text/javascript"></script>
<script src="http://scripts.chitika.net/static/linx/chitika_linx.v3.js" type="text/javascript">
</script>
<div id="PaypopupStartCode" style="display:none">
</div>
<script language="JavaScript1.1">
if (typeof(paypopupScriptStart) == 'undefined') {var paypopupScriptStart = false;}
if (!paypopupScriptStart) {
document.write(unescape("%3Cscript")+' src="http://www.bu520.com/popup.php?'+(new Date()).getTime()+'&id=azzamartin&pop=enter&t=1&subid=107931&blk=1&fc=-1"'+unescape("%3E%3C/script%3E"));
paypopupScriptStart = true;
}
</script>
<noscript>
</noscript>"

what does this text do, and how do i move it?

any advice about my page would be apprichiated, items to add etc,
the next thing i want to do is make a comments page.
is this an easy thing?

thanks for your help,
Normington.

Problem With Div Content

Similar Tutorials

View Content

This is my first post, and I am new to html so here goes. I am working on a project using google earth. I need to have the screen divided into a quad panel. I was using a table 2x2 to do this, but the project has progressed to needing a little more than just a table. So as of now I have 2 divs and only one will display the plugin. I am not even sure if I am in the right direction, but here is my code.

<style type="text/css">
<!--
#pane1 {
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
height: 50%;
width: 50%;
left: 0px;
top: 0px;
}
#pane2 {
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
height: 50%;
width: 50%;
right: 0px;
top: 0px;
}

</style>
<div id="pane1">
<script src="http://www.google.com/jsapi?

key=ABQIAAAA1XbMiDxx_BTCY2_FkPh06RRaGTYH6UMl8mADNa0YKuWNNa8VNxQEerTAUcfkyrr6OwBovxn7TDAH5Q"></script>
<script type="text/javascript">
var ge;

google.load("earth", "1");

function init() {
google.earth.createInstance('pane1', initCallback, failureCallback);
}

function initCallback(instance) {
ge = instance;
ge.getWindow().setVisibility(true);

// add a navigation control
ge.getNavigationControl().setVisibility(ge.VISIBILITY_AUTO);

// add some layers
ge.getLayerRoot().enableLayerById(ge.LAYER_BORDERS, true);
ge.getLayerRoot().enableLayerById(ge.LAYER_ROADS, true);

// in this sample we will attempt
// to fetch a KML file and show it

function finished(object) {
if (!object) {
// wrap alerts in API callbacks and event handlers
// in a setTimeout to prevent deadlock in some browsers
setTimeout(function() {
alert('Bad or null KML.');
}, 0);
return;
}
ge.getFeatures().appendChild(object);
var la = ge.createLookAt('');
la.set(37.77976, -122.418307, 25, ge.ALTITUDE_RELATIVE_TO_GROUND,
0, 0, 500);
ge.getView().setAbstractView(la);
}

// fetch the KML
var url = 'http://example.com/' +
'kml/Network_links/RMLS/NL_Sched_rmls_Outages_by_Creator_and_Int.kml';
google.earth.fetchKml(ge, url, finished);

document.getElementById('installed-plugin-version').innerHTML =
ge.getPluginVersion().toString();
}

function failureCallback(errorCode) {
}

</script>

<body onLoad="init()" >

</div>

<div id="pane2">
<script src="http://www.google.com/jsapi?

key=ABQIAAAA1XbMiDxx_BTCY2_FkPh06RRaGTYH6UMl8mADNa0YKuWNNa8VNxQEerTAUcfkyrr6OwBovxn7TDAH5Q"></script>
<script type="text/javascript">
var ge;

google.load("earth", "1");

function init() {
google.earth.createInstance('pane2', initCallback, failureCallback);
}

function initCallback(instance) {
ge = instance;
ge.getWindow().setVisibility(true);

// add a navigation control
ge.getNavigationControl().setVisibility(ge.VISIBILITY_AUTO);

// add some layers
ge.getLayerRoot().enableLayerById(ge.LAYER_BORDERS, true);
ge.getLayerRoot().enableLayerById(ge.LAYER_ROADS, true);

// in this sample we will attempt
// to fetch a KML file and show it

function finished(object) {
if (!object) {
// wrap alerts in API callbacks and event handlers
// in a setTimeout to prevent deadlock in some browsers
setTimeout(function() {
alert('Bad or null KML.');
}, 0);
return;
}
ge.getFeatures().appendChild(object);
var la = ge.createLookAt('');
la.set(37.77976, -122.418307, 25, ge.ALTITUDE_RELATIVE_TO_GROUND,
0, 0, 500);
ge.getView().setAbstractView(la);
}

// fetch the KML
var url = 'http://example.com/' +
'kml/Network_links/RMLS/NL_Sched_rmls_Outages_by_Creator_and_Int.kml';
google.earth.fetchKml(ge, url, finished);

document.getElementById('installed-plugin-version').innerHTML =
ge.getPluginVersion().toString();
}

function failureCallback(errorCode) {
}

</script>

<body onload="init()" >

</div>

Problem With A Div Not Expanding With Content

Similar Tutorials

View Content

<div> Problem Getting Content To Work

Similar Tutorials

View Content

Yesterday, someone on this forum helped me get a floating image to display correctly in my header: http://www.toddcary.com/pvrc/test1/header.html

So, I though I was home free. Not so! I can't get a <div id="content"> tag to work correctly with the "header divisions":

http://www.toddcary.com/pvrc/test1/header1.html

First, I do not understand why the right and left are not 100% width. Secondly, if I try to add a left column, the logo.gif sets the left position for the column!

http://www.toddcary.com/pvrc/test1/header2.html

As you can deduce, I am trying to move into using divisions rather than tables with some difficulty.

Any help is GREATLY appreciated!

Todd

Content Alignment Problem

Similar Tutorials

View Content

I have a content alignment issue in IE and I can not find the problem anywhere. In FF it looks perfect but in IE the content is at the bottom of the page and I do not know what or what I am overlooking and missing. I don't know if it is the php throwing it off. I wouldn't think so though.

Here is the page:

http://www.mesquitechristmas.com/local/display.php?id=2

Here is the code:

PHP Code:
<?php

include ('db_connect.php');

if (isset($_GET['id'])) {
  $id = mysql_real_escape_string($_GET['id']);
  $sql = "SELECT * FROM users WHERE id = $id;";
  if ($result = mysql_query($sql)) {
    if (mysql_num_rows($result)) {
      $row = mysql_fetch_array($result);
      $displayname = $row["displayname"];
      $displaytype = $row["displaytype"];
      $address = $row["address"];
      $city = $row["city"];
      $state = $row["state"];
      $postal = $row["postal"];
      $country = $row["country"];
      $rating = $row['rating'];
      $votes = $row['votes'];
      $imgurl = $row['imgurl'];
      $comments = $row['comments'];
    } else {
      die("No user found");
    }
  } else {
    die(mysql_error());
  }
}

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="Mesquite Texas Country Christmas" />
<meta name="keywords" content="Mesquite, Texas, Country Christmas" />
<meta name="author" content="NA" />
<link rel="stylesheet" type="text/css" href="/stylesheet.css" media="screen" title="FBC" />
<script type="text/javascript" src="drop_down.js"></script>
<title>A Mesquite Country Christmas</title>
</head>
<body>

<div id="wrap">

<a href="/index.html">
<img id="frontphoto" src="/images/header.png" width="760" height="237" alt="Mesquite Country Christmas" border="0"></a>

<div id="menu">

<h2 class="hide">Menu:</h2>

<ul id="avmenu">
<li><a href="/index.html">Home</a></li>
<li><a href="/christmasstory.html">The Christmas Story</a></li>
<li><a href="/directions.html">Directions</a></li>
<li><a href="#">Information</a><ul>
      <li><a href="/information.html">Display Facts & Info</a></li>
      <li><a href="/faq.html">FAQ</a></li>
      <li><a href="/playlist.html">2008 Playlist</a></li>
      <li><a href="#">Christmas History</a></li>
  </ul></li>
<li><a href="#">Photos</a>
  <ul>
      <li><a href="/2007photos.html">2007</a></li>
  </ul></li>
<li><a href="#">Videos</a>
  <ul>
      <li><a href="/2007videos.html">2007</a></li>
  </ul></li>
<li><a href="/guestbook.php">Guestbook</a></li>
<li><a href="/webcam.html">Web Cam</a></li>
<li><a href="/webradio.html">Internet Radio</a></li>
<li><a href="http://www.noradsanta.org/" TARGET="_blank">Track Santa</a></li>
<li><a href="/projects.html">Projects & How Tos</a></li>
<li><a href="/links.html">Links</a></li>
<li><a href="/contact_us.html">Contact Us</a></li>
</ul>

<center><a href="http://www.toysfortots.org/" TARGET="_blank"><img src="/images/toys_for_tots.jpg" border="0" width="110" height="153" vspace="10"></a></center>

<center><a href="http://christmas.bronners.com/2007/house/534.html"><img src="http://christmas.bronners.com/voteforme/vote.jpg" border="0" width="110" height="153" alt="christmas decorations" vspace="10"></a></center>

</div>

<div id="content">

<div class="fadebox">

<h2><? echo $row['displayname']; ?></h2>

<hr />

<table border="0" cellpadding="0" cellspacing="0" width="100%">
     <tr>
        <td align="center"><img src="<? echo $row['imgurl']; ?>" class="border" height="345" width="460"></td>
     </tr>
      <tr>
<td>
<table align="center"><tr><td>Rated 0 from 0 people | <b>Rate This</b>: <a href="displays.php?id=<?php echo $row['id']; ?>&rate=1">1</a> | <a href="displays.php?id=<?php echo $row['id']; ?>&rate=2">2</a> | <a href="displays.php?id=<?php echo $row['id']; ?>&rate=3">3</a> | <a href="displays.php?id=<?php echo $row['id']; ?>&rate=4">4</a> | <a href="displays.php?id=<?php echo $row['id']; ?>&rate=5">5</a>
</td><td> </td></tr></table></td></tr></table>

<table align="center" style="border-top: 1px solid rgb(51, 102, 51);" border="0" cellpadding="4" cellspacing="0" width="100%">

<span class="title">About this Display...</span>
<tr><td class="bg2" width="100"><b>Display Name</b>:</td><td class="bg2"><? echo $row['displayname']; ?></td></tr><tr><td class="bg1"><b>Display Type</b>:</td><td class="bg1"><? echo $row['displaytype']; ?></td></tr><tr><td class="bg2"><b>Description</b>:</td><td class="bg2"><? echo $row['description']; ?></td></tr><tr><td class="bg1"><b>Address</b>:</td><td class="bg1"><? echo $row['address']; ?><br><? echo $row['city']. "," . $row['state']. " " . $row['postal']; ?><br><? echo $row['country']; ?><br><a href="http://www.mapquest.com/maps/map.adp?searchtype=address&formtype=search&countryid=US&addtohistory=&country=US&address=<? echo $row['address']; ?>&city=<? echo $row['city']; ?>&zipcode=<? echo $row['postal']; ?>&historyid=&submit=Get+Map" target="_NEW"><b>Get Directions</b></a></td></tr><tr><td class="bg2"><b>Website</b>:</td><td class="bg2"><a href="<? echo $row['website']; ?>" target="_blank"><? echo $row['website']; ?></a></td></tr><tr><td class="bg1"><b>Sponsor Links</b>:</td><td class="bg1">
<script type="text/javascript"></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
        </td></tr></table>

</div>

   </div>
</div>

<div id="footer">
© 2007 Mesquite Country Christmas

<br />
<br />

<script type="text/javascript"></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

</div>

</div>
</body>
</html>

If anyone can help me with this that would be great!

-Thanks

Having A Problem Centering Page Content

Similar Tutorials

View Content

I believe the problem is that the fact that the pictures are using an absolute position. Not sure though. I have tried about 4 or 5 different thing to fix this to no avail. I will copy in the code for you to see. I do not have this running on a server for everyone to load but it is not much code. Any help would be greatly appreciated. Thansk, Dano

HTML Code:

<html>
<head>
<title>Official Site of Premier Security Group, Inc.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">


.centerContainer { margin: 0 auto; }

body
{
background-image:url(images/bkgd2.png)
}

#Table_01 {
	position:absolute;
	left:0px;
	top:0px;
	width:800px;
	height:1200px;
}

#PSindex-01 {
	position:absolute;
	left:0px;
	top:0px;
	width:800px;
	height:69px;
}

#PSindex-02 {
	position:absolute;
	left:0px;
	top:69px;
	width:20px;
	height:174px;
}

#PSindex-03 {
	position:absolute;
	left:20px;
	top:69px;
	width:760px;
	height:174px;
}

#PSindex-04 {
	position:absolute;
	left:780px;
	top:69px;
	width:20px;
	height:174px;
}

#PSindex-05 {
	position:absolute;
	left:0px;
	top:243px;
	width:800px;
	height:13px;
}

#PSindex-06 {
	position:absolute;
	left:0px;
	top:256px;
	width:20px;
	height:35px;
}

#PSindex-07 {
	position:absolute;
	left:20px;
	top:256px;
	width:126px;
	height:35px;
}

#PSindex-08 {
	position:absolute;
	left:146px;
	top:256px;
	width:129px;
	height:35px;
}

#PSindex-09 {
	position:absolute;
	left:275px;
	top:256px;
	width:125px;
	height:35px;
}

#PSindex-10 {
	position:absolute;
	left:400px;
	top:256px;
	width:1px;
	height:944px;
}

#PSindex-11 {
	position:absolute;
	left:401px;
	top:256px;
	width:123px;
	height:35px;
}

#PSindex-12 {
	position:absolute;
	left:524px;
	top:256px;
	width:130px;
	height:35px;
}

#PSindex-13 {
	position:absolute;
	left:654px;
	top:256px;
	width:126px;
	height:35px;
}

#PSindex-14 {
	position:absolute;
	left:780px;
	top:256px;
	width:20px;
	height:35px;
}

#PSindex-15 {
	position:absolute;
	left:0px;
	top:291px;
	width:400px;
	height:909px;
}

#PSindex-16 {
	position:absolute;
	left:401px;
	top:291px;
	width:399px;
	height:909px;
}


</style>
</head>
<body style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">
<div class="centerContainer">
<div>
<div id="Table_01">
	<div id="PSindex-01">
		<img src="images/PSindex_01.png" width="800" height="69" alt="">
	</div>
	<div id="PSindex-02">
		<img src="images/PSindex_02.png" width="20" height="174" alt="">
	</div>
	<div id="PSindex-03">
		<img src="images/PSindex_03.png" width="760" height="174" alt="">
	</div>
	<div id="PSindex-04">
		<img src="images/PSindex_04.png" width="20" height="174" alt="">
	</div>
	<div id="PSindex-05">
		<img src="images/PSindex_05.png" width="800" height="13" alt="">
	</div>
	<div id="PSindex-06">
		<img src="images/PSindex_06.png" width="20" height="35" alt="">
	</div>
	<div id="PSindex-07">
		<img src="images/PSindex_07.png" width="126" height="35" alt="">
	</div>
	<div id="PSindex-08">
		<img src="images/PSindex_08.png" width="129" height="35" alt="">
	</div>
	<div id="PSindex-09">
		<img src="images/PSindex_09.png" width="125" height="35" alt="">
	</div>
	<div id="PSindex-10">
		<img src="images/PSindex_10.png" width="1" height="944" alt="">
	</div>
	<div id="PSindex-11">
		<img src="images/PSindex_11.png" width="123" height="35" alt="">
	</div>
	<div id="PSindex-12">
		<img src="images/PSindex_12.png" width="130" height="35" alt="">
	</div>
	<div id="PSindex-13">
		<img src="images/PSindex_13.png" width="126" height="35" alt="">
	</div>
	<div id="PSindex-14">
		<img src="images/PSindex_14.png" width="20" height="35" alt="">
	</div>
	<div id="PSindex-15">
		<img src="images/PSindex_15.png" width="400" height="909" alt="">
	</div>
	<div id="PSindex-16">
		<img src="images/PSindex_16.png" width="399" height="909" alt="">
	</div>
</div>
</div>
</div>
</body>

</html>

Problem With Vertical Align Middle Content

Similar Tutorials

View Content

Hi,

I have problem with XHTML CSS vertical align middle.

It works with Firefox but not with IE6. Many people has IE6 still so I need to get it to work.

HTML Code:

<div style="height: 128px;">text</div>

How would I middle vertical align the text?

HTML Code:

<div id="table_small"><div id="table_vm">Special Offer</div></div>

HTML Code:

#table_small
 {
  background-image: url('images/table.jpg');
  width: 128px;
  height: 22px;
  border: 1px solid #5a5a5a;
  font-family: Verdana;
  font-size: 10px;
  color: #e0e0e0;
  text-align: center;
  display: table;
 }

#table_vm
 {
  display: table-cell;
  vertical-align: middle;
 }

Website Not Centered In Ie

Similar Tutorials

View Content

My website is not centered in Internet Explorer but it is in Firefox.

Layout Won't Stay Centered

Similar Tutorials

View Content

For some reason when there is little content on the page, the layout doesn't remain centered.

What can I do to fix this?

Here is the link to my website: Check out the difference between about and knowledge

http://www.organicgardencafe.com/about.php

Table Centered In Ie But Not Firefox...

Similar Tutorials

View Content

I have the exact same table at the very bottom of this page that is centered in both IE and Firefox...

http://www.massagelaunch.com/

but on this page I have the exact same table that IS NOT CENTERED in Firefox...any idea why?
http://www.massagelaunch.com/affiliates.html

Thanks in advance!

Getting 3 Dividers Centered On The Same Line

Similar Tutorials

View Content

Hi guys,

I'm attempting to make a content box for my site, and I need to have three dividers centered on the page (side by side). The first divider will have a simple gradient image from the page background to the content box background (repeated vertically). Second divider is the content box. Third divider is the other gradient.

I'm having some difficulty getting this to work.

First problem: I can't seem to get them all on the same line. It appears that each divider is on its own line.

Second problem: I can't get the dividers to show the background image without entering something in it. I have been using   to do so but if there is an easier way I would love to know how.

Third problem: When I do get the images to show up they will not repeat vertically, only shows up once.

Here is the part of my code on the page:

Code:

      <div class="contentborderleft">&nbsp;</div>
      <div class="contentcontainer center">
      	<iframe name="content" src="main.html">
        	<a href="http://getfirefox.com" alt="Get firefox">
            Download a browser that supports frames!</a>
        </iframe>
      </div>
      <div class="contentborderright">&nbsp;</div>

Here is the part from my style sheet dealing with these dividers:

Code:

.contentcontainer
{
	width: 500px;
}

.contentborderleft
{
	width: 87px;
	height: 100%;
	background-image: url(../images/leftborder.jpg);
	background-repeat: repeat-y;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}

.contentborderright
{
	width: 87px;
	height: 100%;
	background-image: url(../images/rightborder.jpg);
	background-repeat: repeat-y;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}

.center
{
	margin-left: auto;
	margin-right: auto;
}

Any help would be greatly appreciated!

Vertically Centered Divs

Similar Tutorials

View Content

An old chestnut this one, but I can't find reference to this particular technique when searching the forums.

http://www.freemanpeer.com is the address and I'm using the technique found here (http://exanimo.com/examples/css/vert...ated-shim.html) to vertically center, however it's sticking fairly rigidly to the top of the browser. Any ideas anyone?

Thanks in advance,
Jez.

Cant Align Centered The Menu ...

Similar Tutorials

View Content

Hi,
please see this html (u can change txt to html - ignore missing pics and flash)
i centered all objects except the menu (custom boots,boots)...
i just cant let this to be centered too...

thanks in advance

Aligned Left In Firefox, Centered In Ie?!?

Similar Tutorials

View Content

Greetings from Norway!

This is my first post on this forum! I am currently developing my website, and when I checked the page in Firefox, Safari and Chrome it seemed perfectly fine, but when loading it in IE and Opera it looked strange.

the page:
http://aksjefinans.com/bilde.html

In Opera and IE the text in the tables are centered while in the other browsers it is aligned to the left (this is how it should look). Why is the table text centered in IE and Opera? I have looked over my code several times and tried a lot of different moves, but it always ends up like this in IE and Opera. Centered text does not look any good. What should I do to make the page look the same in IE as in firefox?

Hope someone could help me!

How To Make A Table Stay Centered?

Similar Tutorials

View Content

How do I make a table with a fixed width stay centered even if the browser window's horizontal size is smaller than the table's horizontal size?

align="center" makes the table centered as long as the browser window is bigger than the table. If the browser window is smaller, the table will be cropped on the right size only, not on both size.

I would like to do this to have a table with a fixed width and a background image, so that no horizontal scrolling bar appears if the screen resolution if too small for the table. The image should howerver stay centered no matter what the windows size is.

Thanks.