CSS - Css Poll. Help On Code ... Example Online.

Trying to match up http://kansasoutlawwrestling.com/v3/index.html from http://kansasoutlawwrestling.com/v3/wrestling2.jpg .

Trying to figure how what I should do for css styling for the poll in the bottom right and see what others thing about how that right div looks in general.

Hi, I am working on an online store for the company that I work for and they have me using online shopping cart software to generate the site. It is nice to have the software handle all the back-end work for me but the process of writing html and css is such a pain that I write my code in DW and cut and paste it into the online software. The software gave me one css page to call my own that is automatically referenced on each page.

Here's my site:
http://www.nova-dataonline.com

So, with that said, here's my problem. As you can see, the graphics that I have placed in the center of the page overlap the bottom runner of the software-generated page. I have tried to get the main part of the page to expand with whatever content I have placed there since these are not the only images that will go on this page. But since I am not super experienced, I have been stumped. Part of the problem is that I have limited access to my source html and css. This is the css that I wrote to layout the four images that you see:

PHP Code:
#container{
 position:absolute;
 top:105px;
 left:185px;
 width:580px;
 z-index:0;
 height: 384px;
}

#top_left{
 background-image:  url(images/message/top_left.jpg);
 background-repeat: no-repeat;
 width:374px; 
 height:150px; 
 position:absolute;
 left:5px; 
 top:25px; 
 display:block;
 z-index:0;    
}

#top_left_text{
 text-align:left;
 vertical-align:middle;
 color:#FFFFFF;
 position:relative;
 left:0px; 
 top:0px; 
 width:auto; 
 height:auto; 
 padding:10px;
 z-index:1;    
}

#top_right{
 position:absolute; 
 left:384px; 
 top:25px; 
 width:191px; 
 height:150px; 
 z-index:0;
}

#bottom_left{
 position:absolute; 
 left:5px; 
 top:185px; 
 width:191px; 
 height:150px;
 z-index:0;
}

#bottom_right{
 background-image:  url(images/message/bottom_right.jpg);
 background-repeat: no-repeat;
 position:absolute;
 right:5px;
 top:185px;
 width:374px;
 height:150px;
 z-index:0;
}

#bottom_right_text{
 text-align:left;
 vertical-align:middle;
 color:#FFFFFF;
 position:relative;
 left:0px; 
 top:0px; 
 width:auto; 
 height:auto; 
 padding:10px;
 z-index:0;    
}
    
.header{
 color:#FFFFFF;
 font-size:medium;
} 





and here's the markup:

PHP Code:
<div id="container">
    <div id="top_left">
        <div id="top_left_text">
            <span class="header">Linksys 54Mbps Wireless Router</span><br /><br />Wireless-G is the upcoming 54Mbps wireless networking standard that's almost five times faster than the widely deployed Wireless-B (802.11b) products. Since they share the same 2.4GHz radio band, Wireless-G devices can also interoperate with 11Mbps Wireless-B equipment. Since both standards are built in, you can migrate to the new screaming fast Wireless-G standard as your needs grow.        </div> 
    </div>
    <div id="top_right"><img src="images/message/linksys_WRT54G.jpg" alt="Linksys WRT54" width="189" height="150"></div>
    <div id="bottom_left"><img src="images/message/netgear_WG311.jpg" alt="Netgear WG311" width="189" height="150"></div>    
    <div id="bottom_right">
        <div id="bottom_right_text">
            <span class="header">Netgear 54Mbps Wireless PCI Adapter</span><br /><br />At 54 Mbps, this wireless 2.4 GHz 802.11b/g PCI card is much faster than existing 11 Mbps wireless networks and will supercharge the delivery of media-rich content to your desktop PC as never before. It easily handles huge digital video and MP3 files, firing them through your network at blazing speeds.
        </div>
    </div>
</div> 





I am rather lost and would like to find a way to make this work. The kicker is that I cannot edit the main stylesheet for the page!

Any help would be awesome!

Hello,

hope to ask in the right place.

Do You know of anything similar to this:
h t t p : / / w w w . b r o w s e r p o o l . c o m sorry, but no other way to post the link.

Or any desktop alternative (for the windows user)

Hi

Im am stuck with a couple of things on my website, I am completly new to HTML and CSS and need some help please

1st problem is pages are desplaying fine in every browser I have tried barr IE 6 any ideas what would be wrong, its seems to be aligning to the left (just the text not the heading banner or menu)

2nd problem I have is I am trying to use a lightbox (lightview) which works fine on the local computer but once uploaded to my test site it stops working

cant post URL so code as follows:

HTML
Code:

<!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" xml:lang="en" lang="en"> 
 
<head> 
<title>Quay Cargo Services</title> 
 
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" /> 
<meta name="author" content="" /> 
<meta name="description" content="Quay Cargo Services" /> 
<meta name="keywords" content="Quay Cargo Services, Shipping Belfast, Hapag Lloyd Belfast" /> 
<meta name="robots" content="index, follow, noarchive" /> 
<meta name="googlebot" content="noarchive" /> 
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />


<link href="css/andy.css" rel="stylesheet" type="text/css" /> 

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.1/prototype.js'></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.2/scriptaculous.js'></script>
<script type='text/javascript' src='js/lightview.js'></script>

<link rel="stylesheet" type="text/css" href="css/lightview.css" />

</head> 
 
<body> 
<div id="header-wrap"> 
  <div id="header-photo"> <img alt="header photo" src="images/banner.jpg" width="890" height="195" /> 
  </div>
  <div  id="nav"> 
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="european.html">European Trailers</a></li>
      <li><a href="hapaglloyd.html">Hapag Lloyd</a></li>
      <li><a href="qcnews.html">QCS in the community</a></li>
      <li><a href="library.html">Library</a></li>
      <li><a href="faq.htm">FAQ</a></li>
      <li id="current"><a href="contacts.html">Contacts</a></li>
    </ul>
  </div>
</div> 
<!-- header ends here --> 
	  
	  
<!-- content starts --> 



<div id="content-outer" class="clear"> 
	<div id="content-wrapper"> 
		<div id="content">
	  		<div class="centerwrap"> <br />
				<h1> Meet the Team</h1>
				<br /><br /><br />
				<style>
					table  {
						text-align:center;
						margin-left:auto;
						margin-right:auto;
					}
				</style>
				<table align="center">
					<tr>
						<th>



<a href="contacts/andycontact.htm" rel="iframe" title=' :: :: width: 530, height: 330' class='lightview'>
<img src="images/andy.jpg" width="100" height="148" border="0"/>
<br />Andy - Hapag Lloyd Operations&nbsp;</th>




						<th><a href="contacts/arroncontact.htm" rel="iframe" title=' :: :: width: 560, height: 320'  class='lightview'><img src="images/arron.jpg" width="100" height="148" border="0"></a><br />Arron - Hapag Lloyd Operations&nbsp;</th>
						<th><a href="contacts/carolinecontact.htm" rel="iframe" title=' :: :: width: 560, height: 320'   class='lightview'><img src="images/caroline.jpg" width="100" height="148" border="0"></a><br />Caroline - Hapag Lloyd Operations&nbsp;</th>
						<th><a href="contacts/catherinecontact.htm" rel="iframe" title=' :: :: width: 560, height: 320'  class='lightview'><img src="images/catherine.jpg" width="100" height="148" border="0"></a><br />Catherine - Hapag Lloyd Rates&nbsp;</th>
						<th><a href="contacts/charlenecontact.htm" rel="iframe" title=' :: :: width: 580, height: 350'  class='lightview'><img src="images/charlene.jpg" width="100" height="148" border="0"></a><br />Charlene - Accounts / Admin&nbsp;</th>
						<th><a href="contacts/dianecontact.htm" rel="iframe" title=' :: :: width: 560, height: 320'  class='lightview'><img src="images/diane.jpg" width="100" height="148" border="0"></a><br />Diane - Hapag Lloyd Operations&nbsp;</th>
						<th><a href="contacts/garycontact.htm" rel="iframe" title=' :: :: width: 560, height: 320'  class='lightview'><img src="images/gary.jpg" width="100" height="148" border="0"></a><br />Gary - European Sales&nbsp;</th>
					</tr>
				</table><br /><br />

				<table align="center">
					<tr>
						<th><a href="contacts/gillycontact.htm" rel="iframe" title=' :: :: width: 560, height: 320'  class='lightview'><img src="images/gilly.jpg" width="100" height="148" border="0"></a><br />Gillian - European Operations&nbsp;</th>
						<th><a href="contacts/jacquicontact.htm" rel="iframe" title=' :: :: width: 560, height: 320'  class='lightview'><img src="images/jacqui.jpg" width="100" height="148" border="0"></a><br />Jacqui - Hapag Lloyd Sales&nbsp;</th>
						<th><a href="contacts/lynseycontact.htm" rel="iframe" title=' :: :: width: 560, height: 320'  class='lightview'><img src="images/lynsey.jpg" width="100" height="148" border="0"></a><br />Lynsey - Accounts / Admin&nbsp;</th>
						<th><a href="contacts/patriciacontact.htm" rel="iframe" title=' :: :: width: 560, height: 320'  class='lightview'><img src="images/patricia.jpg" width="100" height="148" border="0"></a><br />Patricia - Admin&nbsp;</th>
						<th><a href="contacts/tommycontact.htm" rel="iframe" title=' :: :: width: 560, height: 320'  class='lightview'><img src="images/tommy.jpg" width="100" height="148" border="0"></a><br />Tommy - European Operations&nbsp;</th>
						<th><a href="contacts/wendycontact.htm" rel="iframe"  title=' :: ::width: 560, height: 320'  class='lightview'><img src="images/wendy.jpg" width="100" height="148" border="0"></a><br />Wendy - Hapag Lloyd Customer Services&nbsp;</th>
					</tr>
				</table>
			</div><br /><br /><br />
<font face="impact" size="+2"><CENTER>Quay Cargo Services<br /><br />Victoria House<br /><br />28 Westbank Road<br /><br />Belfast<br /><br />BT3 9JL</CENTER></font><br />
		</div>
	</div><br /> 
</div><br /><br />



<!-- contents end here -->


<!-- footer starts here -->


<div id="footer-bottom"> 
<img src="images/localpeopleblue.jpg" width="463" height="100"/>
<br />
<a href="http://www.bifa.org/content/Home.aspx"> <img src="images/bifa.gif" width="80" height="50"/></a>
<a href ="http://www.rha.uk.net"> <img src="images/rha_logo.jpg" width="80" height="50"/> </a>


</br></br> 

  <p class="bottom-right" >
  <font color="#999999">Quay Cargo Services: Telephone: +44 (0)28 90 371195 | Fax: +44 (0)28 90 371195 | Email: <A title="Contact Quay Cargo by E-Mail" href="mailto:info@quaycargo.co.uk ">
  <font color="#999999">info@quaycargo.co.uk </A></font></font>
     
	</p>
	
</div>


<!-- footer ends here -->

</body> 
</html> 
 

CSS

Code:

* { margin: 0; padding: 0; outline: 0 }

body {
	font: 11px/165% "Georgia", Geneva, Verdana, Arial, Helvetica, sans-serif;
	color: #000000; 	
	margin: 0; padding: 0 0 50px 0; 
	text-align: center;
	background: #2f25dc url(images/bg.jpg) repeat-x;
}

/* Images */
img {
	background: #2F25DE;
	border: 0px solid #dcdcdc;
}


code {
  	margin: 5px 0;
  	padding: 15px;
  	text-align: left;
  	display: block;
  	overflow: auto;  
  	font: 500 1em/1.5em 'Georgia', 'courier new', monospace ;
  	border: 1px solid #EBEBEB;
	background: #000000;  
}

/* ------------------------------------------
   LAYOUT
------------------------------------------- */ 
h1 {font-family: Georgia, sans-serif; font-size: 25px; text-align: center;} 

p {font-family: Tahoma, sans-serif; font-weight: bold; color: black; font-size: 18px; }

p1 {font-family: Georgia, sans-serif; color: white; font-size: 50px; }


.black_overlay{
	display: none;
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: black;
	z-index:1001;
	-moz-opacity: 0.8;
	opacity:.80;
	filter: alpha(opacity=80);
}
 
.white_content {
	display: none;
	position: absolute;
	top: 25%;
	left: 25%;
	width: 50%;
	height: 50%;
	padding: 16px;
	border: 16px solid orange;
	background-color: white;
	z-index:1002;
	overflow: auto;
}


#header-wrap {
	position: relative;
	background: #fff url(images/wrap-bg.jpg) no-repeat;
	margin: 0 auto;
	width: 940px;
	height: 285px;
	text-align: left;	
}
#header-photo {
	position: absolute;
	top: 90px; left: 24px;	
	padding: 0;		
	height:195px; 
	width: 890px;
	clear: both;

}
#header-photo img {
	border: none;
	margin: 0; padding: 0;
} 

/*  Navigation  */
#nav {
	position: absolute;
	margin: 0; padding: 0;		
	width: 880px;	
	left: 25px;	top: 0px;	
}
#nav ul {
	float: left;
	list-style: none;
	width: 880px;		
	height: 40px;
	margin: 0; padding: 0;	
	display: inline;
}
#nav ul li {
	display: inline;
	margin: 0; padding: 0;
}
#nav ul li a {
	float: left;
	margin: 0;	padding: 18px 11px 0 11px;
	font: bold 14px/35px 'Georgia', Tahoma, Helvetica, Arial, Geneva, Sans-serif;
	text-decoration: none;	
	color: #999999;	
}
#nav ul li a:hover, 
#nav ul li a:active {
	color: #080091;
	background: none;
	border: none;
}
#nav ul li#current a {	
	color: #999999;	
	background: #d5d3d6 url(images/nav-current.jpg) repeat-x;
	
}

#header-wrap h1#logo-text a {
	position: absolute;
	margin: 0; padding: 0;
	font: normal 62px Georgia, 'Verdana', Times, serif;
	letter-spacing: -1.5px;
	color: #000000;
	text-decoration: none;
	top: 135px; left: 48px;	
}
#header-wrap h1#logo-text a:hover {
	background: none;	
	border: none;
}
#header-wrap p#intro {
	position: absolute;
	margin: 0; padding: 0;
	font-family: Georgia, 'Verdana', Times, serif;
	font-weight: normal;
	font-size: 18px;
	line-height: 1.6em;
	font-style: italic;
	text-transform: none;
	color: #000000;
	top: 205px; left: 60px;		
}

#content-outer {
	background: #fff;
	width: 100%;
}

#content-wrapper {
	width: 940px;
	margin: 0 auto;	
	text-align: left;

}

#content {
	float: left;
	width: 100%;
	background: #fff url(images/content-bg.jpg) no-repeat;	
}

.innerwrap {
	margin-top: 10px;
	margin-right: 250px;
	width: 865px;
	padding-left: 25px;
}




.floatimgleft {
float:left;
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
}

.floatimgright {
float:right;
margin-top:10px;
margin-right:10px;
margin-bottom:100px;
margin-left:10px;
}

.textright {
float:right;
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;
}
.textmid {
    display: block;
    margin-left: auto;
    margin-right: auto

}.textleft {
float:left;
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
}

.floatimgcentre {
    display: block;
    margin-left: auto;
    margin-right: auto
}

.centerwrap {

text-align: center;
	margin-top: 10px;
	margin-right: 250px;
	width: 865px;
	padding-left: 25px;
}

/* footer */

#footer-bottom {
	clear: both;
	border-bottom: 1px solid #111;
	width: 880px;
	margin: 0 auto;	
}

/* clearing  - required */
.clearer { clear: both; }
.clear {	display:inline-block; }
.clear:after {
	display:block; 
	visibility:hidden; 
	clear:both; 
	height:0; 
	content: "."; 
}

any help would be much appriciated


Thanks

Andy

I have a rather perplexing problem. I just created a website locally in CSS and it works fine when I open it locally (i.e., from my harddrive) in either Firefox or IE. But when I upload the HTML, images, and CSS to my webserver, the formatting breaks rather badly.

I've checked that the files are exactly the same, so I do really don't know what the problem is.

Here is the disfunctional online version: http://www.forma3.com/fs/jmf/index_v0.1.html

And what it looks like locally: http://www.forma3.com/fs/jmf/local.png