CSS - Thumbnails In Block Style Alignment ?

[http://]blumoney[dot]latestdot[dot]net[/]plb[/]pictures[dot]php
You see?
I want the thumbnails to pile up underneath the full sized image.

I have a menu bar made up of <a href> elements that have a hover style of: PHP Code:
#mainMenu a:hover {
    color:#000000;
    background-color: #66c74c;
    padding: 1px 4px 1px 4px;
    margin: 1px 1px 1px 1px;
} 



This will provide a green colored rollover visual as the user moves their mouse over the menu bar.

I just added some JS today that will highlight the clicked (selected) menu so there is visual feedback of the section the user is in. For some reason, after setting the background color of the <a href> and color attributes, the HOVER: no longer functions. Here is the code to do the hilite where I pass the ID of the <a href> menu selection in the variable "menu": PHP Code:
//--- Simplify setup by creating an array of the menus and hilight ID's ---
    var menus = ["menu1","menu2","menu3","menu4","menu5",
                "menu6","menu7","menu8","menu9","menu10"];
    
    function J_hiliteMenu(menu) {
        //--- first make sure all the menu are hidden and unhilited ---
        for(i=0; i < menus.length; i++) {
            if (menus[i] == menu) theIndex = i; // Hold on to the chosen index position
            var obj = document.getElementById(menus[i]);
            if (obj == null) continue;             // if menu is not available skip it
            obj.style.color = "#ffffff";
            obj.style.backgroundColor = "#234fd7";
        }
        //--- hilite the menu we're interested in ---
        var obj = document.getElementById(menu);
        obj.style.color = "#000000";
        obj.style.backgroundColor = "#f8f400";
    } 



Prior to hiliting the menu I un-hilite all the menus (since we may be switching from another). I think this is where the problem is. Maybe I need to redefine the rollover "hover" attribute for all elements during the un-hilite loop? Does anyone know how to set a HOVER: attribute using JavaScript?

Thanks!

Hi,

Here is my website: http://www.zombiemod.com/rm/nina2/main.php?g2_itemId=14

I noticed that when I moved my thumbnail box at the bottom up by 40px, I could no longer click on the thumbnails until I clicked on the very bottom.

It seems the thumbnails are on a layer below the main image, and when I hover over the website, you can see the box that appears to sit on top of thumbnails that stop them from being clicked.

Code:

http://i46.tinypic.com/2z7o2hg.jpg

Can someone explain to me how I can get my thumbnails to be clickable again?

Hi all,

I came across a function on a website

http://www.cnn.com/2004/WORLD/europe/09/03/russia.school/index.html

that I would like to use. I tried looking at the source code this is sucker is spread out all over the place in multiple files.

What I want is the Previous / Next image rotator thingy, thats
at the top righthand side of the page.

I'd also like to do the following:
URL

If I click on A,B or C the image refreshes in the main picture.

?

I'm really tired, so this may be a dumb question. I'm having problems keeping thumbnails fixed in their position. I want them to have a 1px yellow border when I hover over them. I can get the border but when I hover over them the other images move slightly. I have the thumbnails set up inside a <ul>. Here's the pertinent CSS:

Code:

#thumbcontainer {
		
			margin-left: auto;
			margin-right: auto;
			margin-top: 10px;
			margin-bottom: 0px;
			padding: 10px 10px 0px 0px;
			width: 840px;
			background-color: #000000;
	
		}
			
		a img {   
           			 border: none;
            			margin: 4px 4px 10px 4px;
        		   }
		
		a img: link  {
			border: 1px solid #000000;
			
			}

		a img: visited {
			border: 1px solid #000000;
			}

		a img:hover { 
			border: 1px solid #e5cb43;   
			}
	
		a img: active {
			border: 1px solid #000000;

			}

		ul.content   {
			list-style-position: outside; 
			padding: 0px; margin: 0px;
			border: none;
			background-color: #000000;
			width: 850px;
			text-align: center;
			
		}

		li.content  {
			margin: 0px;
			padding: 0px;
			list-style-type:none;
			
		}

What are my options? Thanks in advance!

I am an art student, and I'm trying to construct my own portfolio site. I am, however, new to CSS, so I dont really know what I'm doing. I'm using Dreamweaver CS3.

I'm using a fixed 2 column template, with header and footer, and the left column as the side bar. Within the right column, I'm trying to make a scrollbar hovering near the top of the div, with clickable thumbnails of my work. Once the thumbnails are clicked on, a larger version of the image takes up the rest of the column.

Does anyone have any idea how to accomplsh this? Even my web design teacher's stumped with this one. I thought about using frames, but thats html...

http://warcraftpress.com/theme/theme.html

I'm trying to have #footer be pushed down instead of the menu lapping over it. Basically, I want the menu to push it down, but it just overlays it.

Thanks

Hi Guys,

I have a generic Question/Problem to do with a Block Element (in this case a div) in an li tag. This seems to be a problem in browsers like IE8 and Safari but not IE7 and the latest FireFox version. Where with the div item 'drops down' a line from the li bullet.

Like this (. is the li):
.
Here is My Div Content

I want it to be like this:
. Here is My Div Content

Now this only doesn't happen if I just have plan text between the div with no class, so I'm thinking that something in my css dragHandle class may be at fault. Either that or I need to add something to it to do with float or display: line or block etc? Any thoughts or ideas are most appriciated (note I'm using a div in an li as I'm using the AJAX reorder list control and need something for a 'drag handle' to select an item in the list. The reorderlist uses ul and li to display itslef to I have to use this markup structure).

Here is my markup.

<ul>
<li>
<div class="dragHandle">
</div>
</li>
</ul>

DragHandle class is as follows
.dragHandle
{
width: 20px;
height: 25px;
background-image: url(/styles/icons/selectarrow.JPG);
background-position: center;
background-repeat: no-repeat;
cursor: move;
}

I would like to have a table with 6 td's across and the 7th td to break line and default to under neath the first td.
I tried using display block and firebug outline the area where my content should be but it is still to the right of the 6th td.
I would just like to do this to keep it in the same row so i can hide and show it dynamically outside of those first 6 td's.

i coudnt find the forum search feature...?

but anyone help with wht i am doing wrong? much appreciated

In the attached gif, you should be able to see exactly what I mean, if I don't explain it well enough.

I have a containing block, #content_main, defined as such:
Code:

#content_main
{
	margin-left: 170px;
	padding: .5cm .25cm 50px;
}

Headers (h1, h2, h3, etc) are used inside #content_main and are defined like this:
Code:

h1, h2, h3, h4, h5, h6
{
	font-family: georgia, serif;
	border-bottom: 1px solid #009;
}

If you look at the attached gif, you'll see the problem. The top one is what happens. It extends the border-bottom to the width of the containing block, even though it places the text correctly. The second one "Something Else" is what I want it to look like. I edited that with Fireworks.

Since it renders the same in Firefox and IE, I figure it's my code that's wrong. Any thoughts?

MPEDrummer

I have this CSS for my "globalNav" class:

.globalNav {width: 217px; background-image:url(images/barbackground.jpg); background-color: #1B619E; background-repeat: repeat-x; border-right: 1px solid #075284; position: absolute; left: 0px; top: 125px; height: 450px}

.globalNav A {background-color: #004E82; border-top: 1px solid #407AA1; border-bottom: 1px solid #00375C; border-right: #00406B; color: white; font-weight: bold; padding: 2px 5px 2px 5px; text-decoration: none; display: block}

This is my code for globalNav:

<div class="globalNav">
<a href="#">Global 1</a>
<a href="#">Global 2</a>
<a href="#">Global 3</a>
<a href="#">Global 4</a>
<a href="#">Global 5</a>
<a href="#">Global 6</a>
</div>


For whatever reason, display block won't work in IE unless I remove the width, height, and positioning. Anyone know any tricks to make this work?

Hi, im trying to create a block of colour of various width. Im trying to do it with <span> like so

<span style="background-color:#336699; width:100px"></span>

Now why wouldnt that work and is there a better way to do what im trying to achieve?

Hi guys,

can you give me some tips to centering a block (<div>) of code? I would like it centered vertically and horizontally and I would also like the background of the element centered (so the whole thing).
text-align doesn't work, it only centers the text, not the element.

Thanks,
Josh

Hi guys

I was just wondering why cant i see these two <b></b> "blocks" on each side of my <UL> block in ie6 but in Firefox i can?

Screenshot of situation:


here is my code for the <b> blocks:
PHP Code:
.navbar b.lefty {
display:block; position:absolute; z-index:604; 
height:100%; width:20px; 
top:0px; left:-20px; 
padding:0; margin:0;  
background-color:#ffffff;
}

.navbar b.righty {
display:block; position:absolute; z-index:604; 
height:100%; width:20px; 
top:0px; left:136px; 
padding:0; margin:0; 
background-color:#ffffff;
} 





Here is my code for the <UL> block:
PHP Code:
.navbar :hover ul {
z-index:604; 
width:136px; 
top:40px; left:0px; 
padding:0; margin:0; 
background-color:#333333; 
text-align:left;} 





Now here is my HTML:
PHP Code:
<ul> 
      <b class="lefty">d</b>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li>            
      <b class="righty">d</b>
</ul> 

I have several <a>'s on my page, where their display is set to block, and I want to put a submit button in each of them. When I put the <button> in the <a></a>, though, the submit button doesn't go to the processing page, it just goes where the <a> was headed.

How to I get the submit button to go to the processing page and not where the <a> was headed? I could put the submit button below the <a> block, but that's very unattractive, and I want the user to be able to click anywhere in the block to go to the next page (except for where the submit button is.) Any help much appreciated!