|
CSS - Picture Viewer Is Acting Funky. Please Help!
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"> </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}
Similar TutorialsI have never been really good at css. It's just not my cup of tea. I'm having a problem with my right-box div. It is not lining up with the left and middle div. heres my code: index.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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="css/index.css" /> <title>Vida La Viva Expo</title> </head> <body> <div id="container"> <div id="header"> English | Espanol </div> <div id="content"> <div id="left-box"> </div> <div id="middle-small"> <h2>Want to get your business known?<br /> Want to help others?</h2> <H1>Join The Expo Today!</H1> </div> <div id="right-box"> </div> </div> </div> </body> </html> index.css Code: body, html {
margin:0;
padding:0;
}
body {
background-color:#23bbe1;
}
#container {
margin-left:auto;
margin-right:auto;
background-color:black;
width:1108px;
height:1064px;
}
#header {
text-align:right;
font-family:verdana;
color:white;
margin-left:auto;
margin-right:auto;
width:1087px;
height:168px;
background-image:url(images/header.gif);
}
#content {
width:1087px;
height:905px;
background-color:white;
margin-left:auto;
margin-right:auto;
padding-top:10px;
}
#middle-small {
width:640px;
height:189px;
margin-left:auto;
margin-right:auto;
background-image:url(images/middle-small.png);
background-repeat:no-repeat;
padding-top:10px;
text-align:center;
font-family:verdana;
color:white;
}
#middle-small h2{
color:white;
}
#middle-small h1{
color:red;
}
#left-box{
float:left;
clear:none;
width:170px;
height:337px;
margin-left:10px;
background-color:#75de12;
}
#right-box{
float:right;
width:170px;
height:337px;
margin-right:10px;
background-color:#75de12;
}
Heres an image of how its turning out: http://img523.imageshack.us/img523/9456/cssproblem.jpg Thanks in advance, any help is greatly apprieciated. I created a dynamic menu with css. It looks great in firefox and IE, but it seems that when users are using safari, the dividers on the menu get screwed up. Is there a hack that can fix this? Is it hopeless? The site is here and the css is here Thanks Look at this in both IE and Firefox: www.sandlotillustrated.com In IE, there's a 2 pixel bar floating underneath the nav buttons. In Firefox it's not there. Any idea what's going on? I've debugged the heck out of it and can't see the problem. Any help would be greatly appreciated! I'm having a funky issue with a page in IE. I've got tables and have css setting the border properties of cells in the table. My issue is when mousing over Anchors in td's in the table the borders of the td's will sometimes dissapear. Its just funky. Its doing it on 2 different machines running IE6 ...Has anyone esle seen this? Is this some variant of the Guillotine Bug? Hi all see here http://www.gaming4linux.com/index.php On the top bit for "latest news" there is a space below the background where the border is on windows, but on linux there isn't, any ideas? I've created a stripped down version of the page he http://www.brovizion.com/testlabaudrey I want the navbar to work in ie the same way it does in firefox. Here is the html: Code: <!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">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Testlab Audrey</title>
<link href="stylesheets/brolayout.css" rel="stylesheet" type="text/css" />
<link href="stylesheets/brostyle.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="page">
<div id="outerwrapper">
<div id="header">
<div id="title">
<h1>Testlab Audrey</h1>
</div>
<div id="title_image">
</div>
</div>
<div id="wrapper">
<div id="navigation">
<ul id="menu">
<li class="current_page_item"><a class="first_menu" href="#">link01</a></li>
<li class="page_item"><a href="#" title="design">link02</a></li>
<li class="page_item"><a href="#" title="development">link03</a></li>
<li class="page_item"><a href="#" title="marketing">link04</a></li>
<li class="page_item"><a href="#" title="hosting">link05</a></li>
<li class="last_menu"><a class="last_menu" href="#">link06</a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
Here is the first CSS file (layout): Code: * {
margin: 0;
padding: 0;
}
#page {
text-align: center;
background: url(../images/page_bg.gif) center #7F7F7F repeat-y;
}
#outerwrapper {
width: 800px;
margin: 0 auto;
}
#header {
width: 800px;
margin-right: auto;
margin-left: auto !important; /* stupid ie... */
margin-left: 1px;
padding: 0;
}
#wrapper {
width: 780px;
margin-right: auto;
margin-left: auto !important; /* stupid ie... */
margin-left: 1px;
margin-left: 11px;
padding: 0px;
text-align: left;
}
#navigation {
margin: 0;
padding: 0;
background-color: #FFCC99;
}
#content {
width: 510px;
margin: 0;
margin-left: 5px;
padding: 0;
float: left;
background: #FFFFFF;
}
#sidebar {
width: 240px;
margin: 0;
margin-right: 5px;
padding: 0;
float: right;
background-color: #FFFFFF;
}
#footer {
width: 800px;
margin-right: auto;
margin-left: auto !important; /* stupid ie... */
margin-left: 1px;
background: url(../images/page_bottom.gif) bottom center transparent no-repeat;
padding-top: 5px;
padding-bottom: 15px;
}
Here is the second CSS file (everything else): Code: /* Basic Styles
-----------------------------------------------------------------------------*/
body {
font-size : 90%;
font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif;
}
hr {
display: none;
clear: both;
}
h1 {
}
h2 {
}
p {
}
a {
color: #515151;
text-decoration: none;
}
a img {
border: 0 none;
}
/* Advanced Styles (by area)
-----------------------------------------------------------------------------*/
/*------HEADER------*/
#title {
background: url(../images/header.gif) top #7F7F7F no-repeat;
height: 76px;
margin: 0;
padding-left: 25px;
clear: both;
text-align: left;
}
#title h1 {
color: #c9e45a;
padding-top: 25px;
font-size: 3em;
letter-spacing: -.1em;
}
#title_image {
margin: 0;
text-align: left;
display: block;
height: 95px;
background: url(../images/header_image6.jpg) center center transparent repeat-y;
}
/*------NAVIGATION------*/
#navigation {
}
#menu {
list-style-type: none;
background: url(../images/menu_bg.gif) 50% 0 #515151 repeat-x;
margin: 0;
padding: 0;
height: 80px;
width: 780px;
border-top: 1px solid #FFFFFF;
overflow: hidden;
}
#menu li {
background: none;
padding: 0;
display: table-row;
vertical-align: middle;
float: left;
height: 80px;
}
#menu li.last_menu {
float: right;
}
#menu li a {
color: #FFFFFF;
line-height: normal !important;
line-height: 80px;
display: table-cell;
vertical-align: middle;
height: 80px;
padding: 0 10px 0 10px;
background: url(../images/menu_triple_lightblue.gif) top left transparent repeat-x;
}
#menu li a:hover, #menu li a:active {
background-position: center left;
color: #FFFFFF !important;
}
#menu li.current_page_item a {
background-position: bottom left !important;
color:#1F3700 !important;
}
#menu li a.first_menu {
padding-left: 35px;
background-repeat: no-repeat;
background-image: url(../images/menu_start_triple_lightblue.gif);
}
#menu li a.last_menu {
padding-right: 35px;
background-repeat: no-repeat;
background-image: url(../images/menu_end_triple_lightblue.gif);
background-position: top right;
}
#menu li a.last_menu:hover, #menu li a.last_menu:active {
background-position: center right;
}
#menu li.current_page_item a.last_menu {
background-position: bottom right !important;
}
/* Basic Lists
-----------------------------------------------------------------------------*/
ul, ol {
list-style-type: none;
list-style-position: outside;
padding: 0;
margin: .2em 0 .2em 0;
}
ul li, ol li {
background: transparent url(../images/puce.png) 2px .4em no-repeat;
padding-left: 15px;
}
ul ul li, ol ol li {
background: transparent url(../images/bullet.gif) 0px .5em no-repeat;
padding-left: 8px;
}
/* Advanced Lists
-----------------------------------------------------------------------------*/
#content ol li {
list-style-type: decimal;
list-style-position: inside;
background: transparent;
padding-left: 0;
}
#content ol li li {
padding-left: 2em;
}
Hello, I'm about to go absolutely crazy; I just can't seem to get a grasp on laying out a simple webpage with css. So I have this div container, #main, and in it I want two more div's left and right. I set the margin-top:20px on the left div and that works fine. Then I set the margin-top:20px on the right div and I get a 40px margin-top on the left and 20px margin-top on the right. The frustrating thing is that dreamweaver displays it the way I want to but chrome, IE, and opera do not. html4strict Code: Original - html4strict 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=utf-8" /> <title>Untitled Document</title> <link href="global.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <div id="banner"></div> <div id="nav"> </div> <!-- #main is a wrapper for the page content --> <div id="main"> <div id="maincontent">this is a test </div> <div id="sideright"></div> </div> </div> </body> </html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> css Code: Original - css Code @charset "utf-8"; /* CSS Document */ body { background-color:#063; margin: 0; padding: 0; text-align: center; } #wrapper { text-align: left; width: 860px; height: 600px; border: solid #000 3px; background-color:#693; margin-top: 5px; margin-right: auto; margin-left: auto; } #banner { width: 860px; height: 120px; background-image: url(images/banner860120.jpg); } #nav { width: 860px; height: 34px; background-color:#663; } #main { width: 860px; height: 446px; } #maincontent { margin-top: 20px; float: left; margin-left: 20px; background-color:#663; width: 500px; height: 380px; border: 4px double #FFF; color: #FFF; } #sideright { margin-top: 20px; margin-left: 540px; width: 300px; height: 380px; background-color: #663; } @charset "utf-8"; I know this code is likely sloppy, but apparently it passed the css validation . I would be very grateful if someone could help me out. so I have a <h2> tag within a <div id="content"> tag, and I want the h2 tag to be about 115px from the top of the content div. Yet everytime I set the margin, it pushes both the <h2> tag AND the <div id="content"> tag down by 115px. Here's my CSS code: #content{ background: #bd1f1f url("images/body_bkgrnd.jpg"); } #content h2{ font: 34px/30px Helvetica; color: black; margin: 115px 0px 0px 0px; width: 544px; } And here's the relevant HTML: <div id="content"> <h2> Great themes, amazing icons, and the best kit of templates. </h2> </div> <!-- end content --> And here's a picture to show what I mean: [IMG]C:\question.jpg[/IMG] Thanks guys! I'm slightly new at CSS, but I've typed out the following code to set up my site. Code:
body { margin: 0px 0px 0px 0px;
}
a:link { font-family:Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
text-decoration:none;
}
a:hover { font-family:Verdana, Arial, Helvetica, sans-serif;
color:purple;
background-color: white}
#leftcontent {
position: absolute;
left: 0px;
top:auto;
width: 144px;
background-color: #9E1817;
border: 0px;
height: 100%;
}
#centercontent { top:auto;
background:white;
margin-left:145px;
margin-right:-1px;
border:0px;
width: 784px;
}
#banner { background:lavender;
height:138px;
border-top:0 solid darkblue;
border-right:0 solid darkblue;
border-left:0 solid darkblue;
margin: 0px 0px 0px 0px;
}
p { margin:0px 10px 10px 10px;
}
#copyright { border-top-color:#990000;
border-top-style:dashed;
border-top-width: 1px;
width: 100%;
position:absolute;
bottom: 20px;
}
My problem is that the 'leftcontent' div is overflowing, and I want it to only do so when the content has to overflow. My copyright div is also acting screwy (I think because of the leftcontent not acting properly). It is setting itself 20 pixels from the bottom, but just the visible area upon first viewing the page. The overflow makes it sit more like 150px fro mthe bottom. Any ideas on how to rid myself of the overflow problems? I've tried overflow:hidden, but it didn't exactly work. Hi, I am seeing an error which I think is because of z-index, the error is really strange. See these two posts in two different sites (while keeping in mind that the data is same only the sites are having different css) Code: 1st site (buggy one) : http://bloghutsbeta.blogspot.com/2012/03/testing-3.html 2nd site (the okay one) : http://www.bloghuts.com/2011/08/wizard-fashion.html To see the error please go to first site then click on PLAY and while keeping it open, kindly go to the 2nd on and then click on PLAY you will see the error that I am talking about, I am not able to understand what's going on? I 'think' style sheets are the answer to my problem. Now I cannot webdesign and so everything is a mishmash but I saw this accordion image viewer made in AJAX for free and wanted to put it on my site, but I need to position it in an exact position on my webpage. How do I do this please? Accordion: http://www [dot] ajaxcrawler [dot] com/2008/01/image-menu-using-moo-tools [dot] html My webpage: http [colon] // lovelago.googlepages [dot] com/test7a.html CSS: http [colon] // lovelago.googlepages [dot] com/main.css Also, I only need a really trim version of this CSS, as it came with the webpage that had the accordion and has all of its 'own style' that I do not need. Thanks to anybody! note to admin: I'm not a spammer, thanks. 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 Hi everyone. I have a header section to my website, and to line up the navigation to the top of the bottom most element, I used absolute positioning to acheive this inside a relative positioned element. The strange thing is is that when first loaded, the absolutely positioned navigation is pulled completely from the parent relative div and shoved to the top of the screen. However, on refresh it jumps to where it should be per the css. Here's the CSS... Code:
#hd {
position: relative;
float: left;
width: 780px;
margin: 30px 0 0 0;
padding: 0;
background-color: #0099CC;
}
#hdlogo {
float: left;
margin: 0 0 18px 0;
padding: 0;
text-align: left;
}
#hdnav {
margin: 0;
padding: 0;
}
#hdnav ul {
position: absolute;
bottom: 16px;
right: 0;
height: 22px;
margin: 0;
padding: 0;
}
#hdnav ul li {
float: left;
margin: 0;
padding: 0;
list-style-type: none;
}
#hdnav ul li a:link img, #hdnav ul li a:visited img {
border: 0;
}
#hdbar {
clear: right;
width: 780px;
margin: 0;
padding: 0;
}
And the HTML... Code: <div id="hd"> <div id="hdlogo"> <img src="images/logo.gif" alt="Home" title="Home"/> </div> <div id="hdnav"> <ul> <li><a href="index.htm"><img src="images/home.gif" alt="Home" title="Home" /></a></li> <li><a href="aboutus.htm"><img src="images/aboutus.gif" alt="About us" title="About us" /></a></li> <li><a href="performance.htm"><img src="images/performance.gif" alt="Performance" title="Performance" /></a></li> <li><a href="aesthetics.htm"><img src="images/aesthetics.gif" alt="Aesthetics" title="Aesthetics" /></a></li> <li><a href="sustainability.htm"><img src="images/sustainability.gif" alt="Sustainability" title="Sustainability" /></a></li> </ul> </div> <div id="hdbar"> <img src="images/hd-bar.gif" alt="" title="" /> <!-- hd-bar is 780px wide by 16px high --> </div> </div> Just for further knowledge, here's the body tag, and the two container wraps for the rest of the site... Code:
body {
margin: 0;
padding: 0;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #555759;
}
body a:link, body a:visited {
text-decoration: underline;
color: #555759;
}
body a:hover {
text-decoration: underline;
color: #555759;
}
#content {
width: 780px;
margin: 0 auto;
padding: 0;
}
#allwrap {
float: left;
width: 780px;
margin: 0;
padding: 0;
}
#content centers everything and #allwrap is a container for all it's child elements. I've also had a colleague that said in IE 6.0 that the navigation stacks, rather than displays inline. Does anyone have any ideas? Thanks a bunch.. -Brian 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 am trying to add a border to my pictures. I read a tutorial about it but however in firefox it escapes from the box. In IE it looks fine. Has anyone had this problem before? Any tips on fixing it? Thank you here is the link http://www.conceptofgravity.com/test/pictures_test.html I have a picture of a city.. then i have transparent pictures of stores and stuff i want to layer ontop of the city.. but i was wondering if someone could go about showing me how to layer them? i found help on layering pictures, but they wont show through to the city.. =/ i have a screenshots page on a website for a peice of software i've written. it has a number of thumbnails on it, when you click a thimnail, the full size image pops up in a new window. <a href="javascript: void window.open('fullSize.jpg', 'pic1', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=660,height=500');"><img src="thumbnail.jpg" width="120" height="90" border="0"></a> i want the thumbnail to have an orange (#EE9515) border, bossibly 4px thick, when the user hovers over it. how do i do this? [http://]blumoney[dot]latestdot[dot]net[/]plb[/]pictures[dot]php You see? I want the thumbnails to pile up underneath the full sized image. Hey all, I've got a gallery of sorts, where teams register and they show up with a thumbnail and team info. You can see what I'm talking about here. In FF, the first team on each page's box drops down to the end of the floated form on the right. I'm sure it's something to do with the floated element, but I can't seem to fix it. It displays the way it's supposed to look in IE7 (note I didn't say 'properly', as i'm sure that's not true). Here's the CSS: Code:
.teamBox {
width:400px;
margin:5px auto;
min-height:200px;
background:white url(images/teamBox_tile.gif) repeat-y center;
}
* html .teamBox {
height:200px;
}
.teamBox h3 {
margin:0;
width:390px;
height:27px;
padding:12px 0 0 10px;
background:white url(images/teamBox_top.gif) no-repeat top center;
border-bottom:1px solid white;
color:white;
}
.teamBox p {
color:#333;
margin:5px 15px;
}
.teamBox p a {
color:white;
}
.teamBox .teamBoxBottom {
width:400px;
height:10px;
background:white url(images/teamBox_bottom.gif) no-repeat bottom center;
}
.teamThumb {
float:right;
width:150px;
height:150px;
margin:5px 10px;
overflow:hidden;
}
My site is a .org that I recently created and I am having picture problems. For some reason that i cant under stand the picture wont link up to my menue as a sub menue and adjust the spacing and type like it does with the regular menu. Ideally I would like to modify it so it is random pick from a file on the server but IDk how and advice on how to make it not cut off my text or have my text over lap it. The site is my name IGADA dot org any suggestions. Really what I need to now is if i should be trying to make this happen in the CSS or in the HTML. I can post the relavent CSS if some one wants me too. |
|||||||