CSS - Placing An Accordion Image Viewer Just Right

I am having trouble with placing an image on my page and having that image repeat itself all the way down the page.

Code:

<div id=left> ........ content ...</div>

<div id="image">this is where i want the image</div>

<div id="content">content here</div>

Where the id=image tag is placed i want the image to appear and roll all the way down the screen. I have the following css code

Code:

#left {
	position: absolute;
	left: 0px;
	width: 215px;
	background-color: #efefef;
	border: 1px dotted #ccc;
	}
#image1 {
    background-image: url("http://mydomain.com/image.jpg") 
    background-repeat: repeat-y;
    width: 15px;
    margin-left: 215px;
}
#center {
	
	margin-left: 260px;
             margin-right: 0px;
	overflow: hidden;
	}

The image does not show on the page at all, i need to know if i am doing this correctly or if there is another way without hardcoding the image into the page

Cheers

hey,

have a look here.

In IE6 the page extends waaaaaaay down underneath the content with a blank box 'til the footer. I'm just not really sure what i need to adjust height-wise to get rid of it. Here's what i'm using for the styles:

Code:

/* ACCORDION STYLING */
#basic-accordian{
	border:1px solid #EEE;
	padding:5px;
	width:450px;
	margin-right:30px;
	z-index:2;
	float:right;
}

* html #basic-accordian {
margin-right:15px;
}

.accordion_headings{
	padding:5px;
	background:#002952;
	color:#FFFFFF;
	border:1px solid #FFF;
	cursor:pointer;
	font-weight:bold;
}

.accordion_headings:hover{
	background:#C69A2C;
}

.accordion_child{
	padding:15px;
	background:#f5f5f5;
}

.header_highlight{
	background:#C69A2C;
}

Thanks!

Hello, I have three accordions based on Accordion2 by stickmanlabs on my site. Each of the three accordions (web, motion & print) have nested accordions within that open when clicked to reveal different projects I have done. This works great in Firefox and Safari. In IE the first accordion (web) works properly, opening up to reveal the nested accordions closed up and waiting to be clicked on. However, when I click on either of the following accordions in IE, it opens to reveal that all of the nested accordions are already open at the same time. The nested accordions are open, but also inactive, I can't even click to close them up. I have played with this to no avail, and can't figure it out. I would really appreciate it if someone could tell me how I can get this working properly on IE, or why this might be happening?

Here is essentially what the code looks like for the three nested accordions:

Code:

<div id="vertical_container" >

<h1 class="accordion_toggle">Web</h1>
<div class="accordion_content">
<div id="vertical_nested_container" >

  <h3 class="vertical_accordion_toggle">Company A</h3>
  <div class="vertical_accordion_content">
  <p class="jobinfo"> Art Direction and Design</p> 
  </div>

  <h3 class="vertical_accordion_toggle">Company A</h3>
  <div class="vertical_accordion_content">
  <p class="jobinfo"> Art Direction and Design</p> 
  </div>

</div>
</div>


<h1 class="accordion_toggle">Motion</h1>
<div class="accordion_content">
<div id="vertical_nested_container" >

  <h3 class="vertical_accordion_toggle">Company A</h3>
  <div class="vertical_accordion_content">
  <p class="jobinfo"> Art Direction and Design</p> 
  </div>

  <h3 class="vertical_accordion_toggle">Company A</h3>
  <div class="vertical_accordion_content">
  <p class="jobinfo"> Art Direction and Design</p> 
  </div>

</div>
</div>


<h1 class="accordion_toggle">Print</h1>
<div class="accordion_content">
<div id="vertical_nested_container" >

  <h3 class="vertical_accordion_toggle">Company A</h3>
  <div class="vertical_accordion_content">
  <p class="jobinfo"> Art Direction and Design</p> 
  </div>

  <h3 class="vertical_accordion_toggle">Company A</h3>
  <div class="vertical_accordion_content">
  <p class="jobinfo"> Art Direction and Design</p> 
  </div>

</div>
</div>
                 
                
</div>

I realize this might not be enough info, and I am happy to provide any additional CSS or javascript info. I guess I am hoping someone out there might be familiar with Accordion2. Another strange thing is that I have noticed is that none of the accordions work unless I leave a blank <div id="horizontal_container"></div> in there.

Thanks in advance!

I would first like to say that I'm a noob to PHP. The problem that I am having is with my picture viewer. When you click on the thumbs, they show above in the main image viewer. The problem is that it is displaying the thumbnail instead of resizing the original image to fit the main image spot. When you click on the main image, the original pic is to be displayed in a lightbox. How do I go about fixing this issue? Thanks in advance for those who help!

Code:

http://conceptsinmotion.net/store/store?page=shop.product_details&flypage=flypage.tpl&product_id=1&category_id=17

PHP Code:
<?php if( !defined( '_VALID_MOS' ) && !defined( '_JEXEC' ) ) die( 'Direct Access to '.basename(__FILE__).' is not allowed.' ); ?>

<?php echo $buttons_header // The PDF, Email and Print buttons ?>

<?php
if( $this->get_cfg( 'showPathway' )) {
    echo "<div class=\"pathway\">$navigation_pathway</div>";
}
if( $this->get_cfg( 'product_navigation', 1 )) {
    if( !empty( $previous_product )) {
        echo '<a class="previous_page" href="'.$previous_product_url.'">'.shopMakeHtmlSafe($previous_product['product_name']).'</a>';
    }
    if( !empty( $next_product )) {        
        echo '<a class="next_page" href="'.$next_product_url.'">'.shopMakeHtmlSafe($next_product['product_name']).'</a>';
    }
}
?>
<br style="clear:both;" /><center>
<table border="0" style="width: 100%;margin-left: auto;margin-right: auto;">
  <tbody>
    <tr align="right">
      <td colspan="3" align="center">
      <?php  if( $this->get_cfg('showManufacturerLink') ) { $rowspan = 5; } else { $rowspan = 4; } ?>
      <div id="parent_img"><?php echo $product_image ?></div>
        <br/><br/>
        <?php if (count($images)): foreach ($images as $image){$curentwidth += $image->file_image_thumb_width;}?>
        <script type="text/javascript">
      iens6=document.all||document.getElementById
      ns4=document.layers
      var speed=5
      </script>
        <div id="scroll" style="margin-left: auto;margin-right: auto;">
      <div class="box-left" style="width: 15px; float: left;margin:10px 0px 0px 0px"><a class="mouseover_left" onmouseover="movedown()" onmouseout="clearTimeout(movedownvar)" href="#"><img src="<?php echo JURI::root().'components/com_virtuemart/themes/vm_black/images/prev.png';?>" alt="" border="0" /></a></div>
      <span class="box-right" style="float: right;margin:10px 0px 0px 0px"><a class="mouseover_right" onmouseover="moveup()" onmouseout="clearTimeout(moveupvar)" href="#"><img src="<?php echo JURI::root().'components/com_virtuemart/themes/vm_black/images/next.png';?>" alt="" border="0" /></a></span>
      <div id="container" style="overflow: hidden; width: 50%; position: relative; height: 55px;float:center">
        <div id="child" style="position: absolute; width: <?php echo $curentwidth;?>px; left: 0pt; top: 0pt;"> <ilayer name="nscontainer"> <layer name="nscontent" visibility="hidden"> <?php echo $this->vmlistAdditionalImages( $product_id, $images )?> </layer> </ilayer> </div>
      </div>
      <div class="box-right" style="float: right;margin:10px 0px 0px 0px"></div>
      </div>
      <script language="JavaScript1.2">
      if (iens6){
      var crossobj=document.getElementById? document.getElementById("child") : document.all.content
      var contentheight=crossobj.offsetWidth
      }
      else if (ns4){
      var crossobj=document.nscontainer.document.nscontent
      var contentheight=crossobj.clip.width
      
      }
      
      function movedown(){
      if (iens6&&parseInt(crossobj.style.left)>=<?php echo 64*count($images)*(-1)/5-32;?>)
      crossobj.style.left=parseInt(crossobj.style.left)-speed+"px"
      else if (ns4&&crossobj.left>=<?php echo 64*count($images)*(-1)/5-32;?>)
      crossobj.left-=speed
      movedownvar=setTimeout("movedown()",50)
      }
      
      function moveup(){
      if (iens6&&parseInt(crossobj.style.left)<=0)
      crossobj.style.left=parseInt(crossobj.style.left)+speed+"px"
      else if (ns4&&crossobj.left<=0)
      crossobj.left+=speed
      moveupvar=setTimeout("moveup()",50)
      
      }
      
      function getcontent_height(){
      if (iens6)
      contentheight=crossobj.offsetWidth
      else if (ns4)
      document.nscontainer.document.nscontent.visibility="show"
      }
      window.onload=getcontent_height
      </script>
        
     </td>
     <style type="text/css">
          ul.box li{float:left;list-style:none;padding-left:0 !important}
          ul.box{width:100%;margin:0px;padding:0px;}
          li:hover img{opacity:1}
          
      </style>
     
     <script type="text/javascript">
     function show_img(url)
     {
         var output1 = window.document.getElementById('curent').href=url;
         var output2 = window.document.getElementById('img_preview').src=url;
         return true;
         
     }
    
     </script>
     <?php endif;?><br /><br />
      </tr>
    <tr align="right">
      <td rowspan="1" colspan="3" align="right">
      <h1 style="margin-left: auto;margin-right: auto;"><?php echo $product_name ?> <?php echo $edit_link ?></h1>
      </td>
    </tr>
    <?php if( $this->get_cfg('showManufacturerLink')) { ?>
        <tr align="center">
          <td rowspan="1" colspan="3"><?php echo $manufacturer_link ?><br /></td>
        </tr>
        <tr align="center">
          <td colspan="3">&nbsp;</td>
      </tr>
    <?php } ?>
    <tr align="right">
      <td colspan="3" align="center" valign="top">
      <?php echo $product_price_lbl ?> 
      <?php echo $product_price ?><br /></td>
      </tr>
    <tr align="right">
      <td colspan="3" align="center" valign="top"><?php echo $product_packaging ?><br /></td>
      </tr>
    <tr align="center">
      <td colspan="3"><?php echo $ask_seller ?></td>
    </tr>
    <tr id="browseProductDescription">
      <td colspan="3" rowspan="1" align="center"><hr />
          <?php echo $product_description ?><br/>
          <span style="font-style: italic;"><?php echo $file_list ?></span>
      </td>
    </tr>
    <tr align="left">
      <td width="16%" align="left"><?php 
              if( $this->get_cfg( 'showAvailability' )) {
                  echo $product_availability; 
              }
              ?><br />
        </td>
      <td width="17%" align="right"><?php echo $addtocart ?></td>
      </tr>
      <tr align="center">
        <td colspan="4"><?php echo $product_type ?></td>
      </tr>
    <tr align="center">
      <td colspan="4"><hr /><?php echo $product_reviews ?></td>
    </tr>
    <tr align="center">
      <td colspan="4"><?php echo $product_reviewform ?><br /></td>
    </tr>
    <tr align="center">
      <td colspan="4"><?php echo $related_products ?><br />
       </td>
    </tr>
    <?php if( $this->get_cfg('showVendorLink')) { ?>
        <tr align="center">
          <td colspan="4"><div style="text-align: center;"><?php echo $vendor_link ?><br /></div><br /></td>
        </tr>
    <?php  } ?>
  </tbody>
</table></center>
<?php 
if( !empty( $recent_products )) { ?>
    <div class="vmRecent">
    <?php echo $recent_products; ?>
    </div>
<?php 
}
if( !empty( $navigation_childlist )) { ?>
    <?php echo $VM_LANG->_('PHPSHOP_MORE_CATEGORIES') ?><br />
    <?php echo $navigation_childlist ?><br style="clear:both"/>
<?php 
} ?>




Code:

/**
* Main CSS file for the "black color" theme for VirtueMart
* @copyright 2006-2008 soeren
* @colortheme (C) 2008 gtwillemsen - surpass.nl
* @license GNU/GPL
*
*/

/* General Shop Styles here please */
.addtocart_button, .notify_button {
	text-align:center;
	background-position:bottom left;
	width:160px;height:30px;
	cursor:pointer;
	border: none;
	font-weight:bold;
	font-family:inherit;
	color: #ffffff;
	vertical-align: middle;
	overflow:hidden;
}
.addtocart_button {
	background: url( 'images/add-to-cart.png' ) no-repeat  center transparent;
}
.notify_button {
	background: url( 'images/notify.png' ) no-repeat  center transparent;
}
.addtocart_button_module {
	text-align:center;
	background-position:bottom left;
	width:160px;height:30px;
	cursor:pointer;
	color: #ffffff;
	border: none;
	font-weight:bold;
	font-family:inherit;
	background: url( 'images/transparent.png' ) no-repeat  center transparent;
	vertical-align: middle;
	overflow:hidden;
	
}

input.addtocart_button_module:hover  {
	color: #333333;	
}

.addtocart_form {
	width: 100%;
	display: inline;
	white-space: nowrap;
}

/* The quantity box beneath the "add to cart" button  */
.quantity_box {	
	vertical-align: middle;
}
.quantity_box_button {
	width:10px;
	vertical-align:middle;
	height:10px;
	background-repeat: no-repeat;
	background-position: center;
}
.quantity_box_button_down {
	background-image: url(images/down_small.png);
}
.quantity_box_button_up {
	background-image: url(images/up_small.png);
}
.continue_link, .checkout_link {
	margin: 2px;
	padding: 2px 0px 2px 40px;
	vertical-align: middle;
	font-weight: bold;
	font-size: 1.4em;
	width: 40%;
}
.checkout_link {
	margin-left: 40px;
	background: url( 'images/forward.png' ) no-repeat left;
}
.continue_link {
	background: url( 'images/back.png' ) no-repeat left;
}
.next_page {
	background: url( 'images/next_16x16.png' ) no-repeat right;
	padding-right: 30px;
	line-height: 20px;
	float: right;
	width: auto;
}
.previous_page {
	background: url( 'images/previous_16x16.png' ) no-repeat left;
	padding-left: 30px;
	line-height: 20px;
	float: left;
	width: auto;
}

/* This is the text box informing customers about your returns policy */
.legalinfo {
	background: #cccccc;
	border: 2px solid gray;
	margin: 10px;
	padding: 0px 0px 10px 10px;
}

div.pathway {
	margin-bottom: 1em;
}

div.pathway img {
	padding: 0 2px;
}

/* The PDF, Email and Print buttons */
div.buttons_heading {
	margin:10px;
	width:10%;
	float:right;
}

.productPrice {
	font-weight:bold;
	white-space: nowrap;
}
.product-Old-Price {
	color:red;
	text-decoration:line-through;
}
/** BROWSE PRODUCTS STYLES **/
.browseProductContainer {
	width:100%;
	padding: 3px 3px 3px 3px;
	vertical-align: top;
}
.browseProductTitle {
	font-size: 16px; 
	font-weight: bold;
	padding: 3px;
	margin-top: 3px;
	width: 30%;
	float: left;
}
.browseProductImageContainer {
	float: left;
	width: auto;
	margin: 3px;
}
.browseProductImageContainer {
	margin: 3px;
	float: left;
	height:130px;
	width:120px;
}
.browseProductDetailsContainer {
	float: left;
	width: 70%;
}
.browseProductDescription {
	margin-top: 40px;
	width:40%;
}
.browsePriceContainer {
	float: left;
	margin: 5px;
	width:20%;
}
.browseAddToCartContainer {
	width:30%;
	text-align:center
}
.browseRatingContainer {
	float: left;
	width:25%;
	margin: 3px;
	white-space: nowrap;
}

/** Flypage Styles **/
.thumbnailListContainer {
	text-align: center;
	width: 200px;
	height: 200px;
	overflow: auto;
}

/*
General Form Styling
*/
.formLabel {
	float:left;
	width:30%;
	text-align:right;
	font-weight: bold;
	margin: 2px;
	white-space: nowrap;
	clear: left;
	vertical-align: middle;
	margin-top: 8px;
}

#agreed_div {
	white-space: normal;
}

.formField {
	float:left;
	width:60%;
	margin: 2px;
	vertical-align: middle;
	margin-top: 8px;
	
}
.missing {
	color:red;
	font-weight:bold;
}

/**
* Administration Styles
*/
.adminListHeader {
	float:left; height: 48px; background-repeat: no-repeat;
	text-align: left; font-size: 18px; font-weight: bold;
	padding-left: 80px;	
}

.labelcell {
	margin-left: auto;
	font-weight: bold;
	vertical-align: top;
	width: 30%;
}
table.adminform td.labelcell {
	text-align: right;
}
.iconcell {
	vertical-align: top;
	width: 5%;
}
.shop_error, .shop_warning, .shop_info, .shop_debug, .shop_critical, .shop_tip {
	background-color:#FAFAD2;
	background-position:left 5px;
	background-repeat:no-repeat;
	border-color:#AACCAA;
	border-style:dotted none;
	border-width:1px 0pt;
	font-weight: 900;
	margin:1pt 1pt 1em 1em;
	padding:0.5em 1em 1.5em 48px;
}
.shop_error {
	background-image: url( images/error.png );
}
.shop_warning {
	background-image: url( images/warning.png );
}
.shop_info, .shop_tip {
  	background-image: url( images/info.png );
}

.shop_debug {
	background-image: url( images/log_debug.png );

}
.shop_critical {
	font-weight: bold;
	background-image: url( images/log_critical.png );
}
/**
* Addtocart detail Styles
*/
.vmCartContainer { /* Cart Container */
	width: auto;
	float: right;
	background: #cccccc;
	border: 1px solid #000;
	padding: 3px;
}

.vmCartChildHeading { /* Header for the cart */
	font-size: 14px;
	font-weight: bold;
	padding-bottom: 3px;
	text-align: left;
}

.vmCartChild { /* Container for the Child Product */
	
	vertical-align: middle;
	border: 1px solid #000;
	padding-left: 2px;
	padding-right: 2px;
	margin-bottom: 2px;
	float:left;	
}

.vmChildDetail { /* Child Detail, description , attributes ,price, quantity etc */
	vertical-align: middle;
	margin-top: 6px;
}

.vmCartChildElement { /* Individual element styling */
	width: 100%;
	vertical-align: middle ;
	height: 25px;
	text-align: left;
	
}

.vmCartAttributes { /* Attributes Div*/
	
	margin-top:8px;
	width:100%;
}

.vmAttribChildDetail {  /* Product Attributes Styling */
	
}
	

.vmMultiple {
	height:35px;
}



.vmChildType { /* Product type div*/

width: 100%;
}

.vmClearDetail { /*Clear the divs afer child types*/
	clear: both;
}

.vmClearAttribs { /*Clear the divs before the attributes*/
	clear:both;
}
.vmRowOne { /* Odd Row One styling */
	background: #cccccc;	
}

.vmRowTwo { /* Even Row Styling */
	background: white;
}

/* Link Details for link to child*/
.vmChildDetail a, .vmChildDetail a:link {
  font-size        : 11px;
  color            : #000000;
  text-decoration  : none;
  font-weight      : bold;
}
.vmChildDetail a:hover {
  font-size        : 11px;
  color            : #333333;
  text-decoration  : none;
  font-weight      : bold;
}
/* Styling for the form elements to enable correct Line Up  */
.inputboxquantity {
	margin-top: 3px;
	vertical-align: middle;
}
.availabilityHeader {
	text-decoration:underline;
	font-weight:bold;
}
.inputboxattrib {
	float: left;
	margin-top: 0px;
	vertical-align: middle;
	margin-bottom: 2px;
}

.quantitycheckbox {
	margin-top: 6px;
	vertical-align: middle;
}	

/**
* Addtocart detail Styles for placing attributes beside product_types
*/
.vmCartContainer_2up { /* Cart Container */
	width: 100%;
	float: left;
	background: #cccccc;
	border: 1px solid #000;
	padding: 3px;
}

.vmCartChildHeading_2up { /* Header for the cart */
	font-size: 14px;
	font-weight: bold;
	padding-bottom: 3px;
	text-align: left;
}

.vmCartChild_2up { /* Container for the Child Product */
	
	vertical-align: middle;
	border: 1px solid #000;
	padding-left: 2px;
	padding-right: 2px;
	
	margin-bottom: 2px;
	float:left;	
}

.vmChildDetail_2up { /* Child Detail, description , attributes ,price, quantity etc */
	vertical-align: middle;
	margin-top: 6px;
}

.vmCartChildElement_2up { /* Individual element styling */
	width: 100%;
	vertical-align: middle ;
	height: 25px;
	text-align: left;
	
}

.vmCartAttributes_2up { /* Attributes Div*/
	float: left;
	padding: 0px 5px 5px 5px;
	margin: 0px 5px 5px 5px;
	width:50%;
}

.vmAttribChildDetail_2up {  /* Product Attributes Styling */
	
}
	
.vmMultiple {
	height:35px;
}

.vmChildType_2up { /* Product type div*/
	background: #cccccc;
	padding: 0px 5px 5px 5px;
	margin: 0px 5px 5px 5px;
	float: left;
	width: 40%;
	border: 1px solid #000;
}

.vmClearDetail_2up { /*Clear the divs afer child types*/
	
}

.vmClearAttribs_2up { /*Clear the divs before the attributes*/
	clear:both;
}
.vmRowOne_2up { /* Odd Row One styling */
	background: #cccccc;
}

.vmRowTwo_2up { /* Even Row Styling */
	background: white;
}

/* Link Details for link to child*/
.vmChildDetail_2up a, .vmChildDetail_2up a:link {
  font-size        : 11px;
  color            : #000000;
  text-decoration  : none;
  font-weight      : bold;
}
.vmChildDetail_2up a:hover {
  font-size        : 11px;
  color            : #333333;
  text-decoration  : none;
  font-weight      : bold;
}

.vmCartModuleList  {
  cursor : pointer;
  font-size        : 11px;
  color            : #000000;
  text-decoration  : none;
  font-weight      : bold;
}
.vmCartModuleList:hover {
  font-size        : 11px;
  color            : #333333;
  text-decoration  : none;
  font-weight      : bold;
}
.vmquote {
	margin: 4px;
	border: 1px solid #cccccc;
	background-color: #E9ECEF;
	padding: 10px;
	font-size: 12px;
	color: #254D78;
}
.editable {
	background: #ffff33;
	cursor: pointer;
}
ul.pagination li {
	padding: 2px 1px;
	display: inline;
	background: none;
}
.hr {
  clear:both;
  border:1px solid #FFFFFF;
  height:1px;
  width:100%;
  text-align:left;
}
.hr_div {
        height:10px;
        width:100%;
}
.clr {
  clear: both;
  overflow:hidden;
}
.box img, #child ul li a img {
height:48px;
margin:0 2px 0 0;
width:64px;
}
#parent_img {width: 325px; height: 221px; margin-left: auto; margin-right: auto;}
#parent_img a {text-decoration: none;}
#parent_img a img {width: 325px; height: 221px}

For a project I'm currently doing I'd like a set of quick reference sheets that I can print out of all the Selectors I have created in the various style sheets the site uses.

I'd like to know if there is any program out there that can do this automatically for me, I really like the way TopStyle does it -- see attached image -- but there is no way to print this easily (other than doing a screenshot and making it fit on A4 in photoshop).

I know I could do it by hand as I go but it would be sooooo much easier if there was something to do it automatically for me.

Any help is greatly appreciated.

-D

When viewing my website, the font is too small in IE/Opera/Crazy Browser. I am a Firefox user and the site looks the way I want when viewed in Navigator & Firefox. I don't want to change that.

I'm thinking that I can use java script to make a page link to a specific style sheet, based on the user's browser. Unfortunately, I'm not a scripter and I haven't managed to find one that suits my purpose.

Is there a simpler way to accomplish this?

Thanks

I know this is probably the most asked question here, but I've been playing with it for a while and ...

Anyway, this is my page

This is my CSS

Code:

body {font-family: Arial, Helvetica, sans-serif}
td {font-family: Arial, Helvetica, sans-serif}
th {font-family: Arial, Helvetica, sans-serif}

div.container {
  width:750px;
  margin:auto;
  }
	
div.logo {
  float:left;
  text-align:center;
  width:138px;
  height:138px;
  }

div.header {
  height:65px;
  border:1px solid blue;
  line-height:50%
  }

div.picbar {
  height:65px;
  border:1px solid red;
  line-height:50%;
  }
	
/* The following code creates the navigation items */
#navbar {
  clear:left;
  float:left;
  width:auto;
  padding:0;
  vertical-align:middle;
  }
		
#navbar li{
  margin:2px; /*dictates the space between navbar items */
  padding-right:0.5em;
  width:120px;
  float:left;
  text-align:center;
  }
	
#navcol {
  clear:left;
  float:left;
  width: 125px;
  padding: 0;
  margin: 10px 0 0 0;
  font-family: 'Trebuchet MS', 'Lucida Grande',
  Verdana, Lucida, Geneva, Helvetica, 
  Arial, sans-serif;
  color: #99CCFF;
  }
	
#navcol ul, #navbar ul{
  list-style:none;
  margin:0; /* removes indent in IE and Opera */
  padding:0; /* removes indent in Mozilla and Netscape 7 */
  border:none;
  list-style-type:none; /*turns off display of bullet */
  }

#navcol li {
  border-bottom:1px solid #003366;
  margin:0; /*dictates the space between navbar items */
  }

#navcol li a, #navbar li a {
  display: block; /* enables the entire link box to be clickable */
  padding: 5px 0 5px 5px;
  border-left: 10px solid #003366;
  border-right: 0px solid #508fc4;
  background-color: #2175bc;
  color: #fff;
  text-decoration: none;
  width: 100%
  }
	
#navcol li a:hover, #navbar li a:hover {
  border-left: 10px solid #99CCFF;
  border-right: 0px solid #5ba3e0;
  background-color: #2586d7;
  color: #fff;
  }
	
div.intro{
  margin-left:145px;
  position:relative;
  padding-top:1px;
  font-family:Verdana,Lucida;
  font-size:12px;
  line-height:150%;
  }

div.google{
  float:right;
  margin-top:10px;
  width:305px;
  height:255px;
  padding:0 0 5px 10px
  }
	
div.footer {
  margin-top:50px;
  width:750px;
  word-spacing:100px;
  text-align:center;
  float:center;
  height:20px;
  background-color:#1c64d1
  }

div.copyright {
  width:750px;
  text-align:center;
  float:center;
  height:20px;
  }	


a.ft:link { color: white; text-decoration: none }
a.ft:active { color: red; text-decoration: none }
a.ft:visited { color: white; text-decoration: none }
a.ft:hover { color: yellow; text-decoration: underline }

h1.logo{padding:20px;margin:10px}
h2.header{color:blue;font-size:1.2em;padding:20px;margin:10px}
h3.title{font-family:arial;color:green;font:courier}
h4.ftlinks{padding:10px;font-size:12px;color:"dark blue"}
b.subtitle{font-variant:small-caps;font-size:12px;font-weight:bold;after-content:" - "}

What I want to do is have the navbar div be positioned in the center of the red box that I have defined as the picbar div...it should be under the "Funkyfoof - Smarter Spending..."

Thanks for your time

i want to place images:
top right,
middle right,
bottom left,
these images should float above any other images or content that is on the page, the must also stay in there positions when the browser is resized.

I'm still new to css so can any body help me pls

I have a scrolling DIV and a button which when clicked gives the user the option to insert another such DIV below the existing one. How can I position a new DIV directly below another regardless of the length or height of the first DIV. How would margins play a role?

Hello all.. trying to do something that should be pretty simple (I'm not the best CSS person). Instead of using a table am trying to use just CSS. I want to place a form button styled as a link and some text into a colored box but my css is not working.


html is...

<span class="yellowbox">
<form name="view constituent" method="post" action="constituents_viewm.php">
<input type=submit name=submit value=$lname, $fname" class="link_submit"> </form> <br /><br />text </span>

and css is...

.yellowbox {
background-color:#fdffe3;
margin:10px;
padding:10px;
border: 1px #000;
font-size:13px;
width:420px;
height:100px;
}

.link_submit {
color:#116500;
font-size:17px;
font-family:Calibri, Arial, Helvetica, sans-serif;
background:none;
border:none;
display:block;
text-decoration:underline;
cursorointer;
float:left;
}

any help will be greatly appreciated.

Well, it's been an extremely long night. I've been trying to get this bottom bar element working for at least a couple nights now, and I feel so very close.

I've been trying to use footerStickAlt, which would allow me to put this baby down on the bottom of my page and would not overlap or screw up the scrolling when installed.

However, as you might be able to tell from my website, http://www.brianmooremedia.com, it's not working too well.

Here is my CSS: http://www.brianmooremedia.com/style.css

If anybody can help me make this red bar stop and stay down once the window size has gotten smaller than it, please let me know!

Thanks a ton,

Brian

Hey everyone

I'm a beginner at CSS. I'm trying to place divisions exactly where I want, but when I attempt to overlap them it doesn't render the way I intend it to (inconsistent in different browsers as well.) Does anyone have any tips?
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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<?php 
//variables

//title
$title_ = "Title";
?>
<style type="text/css">
*{
  padding: 0;
  margin: 0;
}
#myhr {
width: 90%;
}


body {
  padding: 15px 0px 15px 0px;
  margin-left:auto;
  margin-right:auto;
  margin-top:auto;
  margin-bottom:auto;
  width: 904px;
  background-color:#CCCC66;
}
#container {
  padding:
  float: left;
  width: 898px;
  height: 900px;
  background-color:#999999;
  border: solid rgb(250,0,255);
  border-width: 2px 2px 2px 2px

}  
#link1{
margin: 0px 0px 0px 0px; 
float: left;
width: 222px;
background-color:#CCCC66;
height: 25px;
border: solid rgb(250,0,255);
border-width: 2px 1px 2px 1px;
z-index:1;
}
#link2{
float: left;
height: 25px;
margin: 0px 0px 0px 0px;
width: 223px;
background-color:#CCCC66;
border: solid rgb(250,0,250);
border-width: 2px 1px 2px 1px;
z-index:1;
}
#link3{
float: left;
margin: 0px 0px 0px 0px;
height: 25px;
width: 223px;
background-color:#CCCC66;
border: solid rgb(250,0,250);
border-width: 2px 1px 2px 1px;
}
#link4{
float: left;
height: 25px;
width: 222px;
margin: 0px 0px 0px 0px;
background-color:#CCCC66;
border: solid rgb(250,0,250);
border-width: 2px 1px 2px 1px;
z-index:2;
}
#innerbox{
  width:136px;
  height:177px;
  margin: 0px 0px 0px 68px;
  z-index:0;
  background: #CCCC66;
  border: solid rgb(250,0,250);
  border-width: 2px 2px 2px 2px;

}
#innerbox2{
  width:136px;
  height:177px;
  margin: -182px 0px 0px 275px;
  z-index:0;
  background: #CCCC66;
  border: solid rgb(250,0,250);
  border-width: 2px 2px 2px 2px;

}
#innerbox3{
  width:136px;
  height:177px;
  margin: -182px 0px 0px 482px;
  z-index:0;
  background: #CCCC66;
  border: solid rgb(250,0,250);
  border-width: 2px 2px 2px 2px;

}
#innerbox4{
  width:136px;
  height:177px;
  margin: -260px 0px 0px 689px;
  z-index:1;
  background: #CCCC66;
  border: solid rgb(250,0,250);
  border-width: 2px 2px 2px 2px;

}


</style>
<title><? echo $title_; ?></title>
</head>

<body>
<div id="container"><br />
<h1 id="myh1" class="h1color_" align="center"><? echo $title_; ?></h1>
<div align="center">
<hr align="center" id="myhr" />
</div>
<br />
<div id="link1" style="background-color:#CCCC66"><p>link1</p></div>
<div id="link2">link2</div>
<div id="link3">link3</div>
<div id="link4">link4</div>
<!--<button onclick="positioning_width_other()">pos other</button>-->
<br />
<br />
<br />
<br />
<div id="innerbox"><p align="center">Box</p></div>
<div id="innerbox2"><p align="center">Box2</p></div>
<div id="innerbox3"><p align="center">Box3</p></div>
<div id="innerbox4"><p align="center">Box4</p></div>
</div>
</body>
</html>

Sorry folks, css novice here.

But i'm trying to get this div into the center of my browser. It works vertically, but each time I try to sort it out horizontally it goes all over the place - any thoughts on this?

Code:

<html>
<head>
  <title></title>
  <style>
    .greenBorder {border: 1px solid green;} 
	 .redBorder {border: 1px solid red;} 
  </style>
</head>

<body>
 
    <div class="redBorder " style=" #position: absolute; _top: 50%;display: table-cell; vertical-align: middle; text-align:center;">
      <div class="greenBorder" style=" #position: relative; #top: -50%; " >
       stuff
      </div>
    </div>

</body>
</html>

what am I doing wrong? recommend any good css books?

Is there a way to define a text style where a dash and a space is automatically inserted after the text?

If I want this:

Subtitle and then content

To look like this:

Subtitle - and then content

How can I do that?

Thanks