CSS - Aligning Images To Right Of Slideshow

Hello,

I am trying to get two images aligned inside a table cell as a top and bottom background element. I know with CSS you can't have two background elements, so I was playing with relative and absolute positioning. Unfortunately, I was unsuccessful, as the positioning wouldn't refer to the diameter of the cell.

I have an image demonstrating what I am looking for. The shaded area represents the two images (a bottom and top quote) that I want to align to the top and bottom. I can't simply make this a single image since the information on the left will be different heights. I also noted the table layout in the lower example if there are any questions in that regard.

http://www.forma3.com/stuff/css_question.png

Thanks so much!

Hello,

I'm looking for some help with this problem and would really appreciate some guidance. I'm teaching myself layout with CSS (just picked up the dummies book, so you can guess my current level) but am currently stumped.

I'm looking to have a header, with a central image and two link images positioned either side. The central image would be exactly centred, with the link images aligning to the sides of the central image: [PORTFOLIO] [ABOUT] [CENTRED IMAGE] [BLOG] [CONTACT]. As the link images are different widths, I'm unable to simply centre everything in one go, as then the central image is not viewed as exact centre.

I need a way to centre the image and then float the link images to the relevant sides but have it so they align either left or right against the centred image. Also, the centre image height is greater than the link images, so as well as aligning either left or right I'm trying to get them to align to the middle, like this:

Code:

		                    [             ]
----------------[PORTFOLIO] [ABOUT] [CENTRED IMAGE] [BLOG] [CONTACT]-----------------
                                    [             ]

---- variable empty space depending on browser width

I currently have a div to centre using left-margin: auto; right-margin: auto; text-align: center; and have another div inside this with the centred image. I've also created a left div and right div to contain the link images on either side using the float tag: left/right and aligned left or right, but I don't know where to go from there. I know it's probably simple but I can't seem to find the answer. Any help would be great.


Code:

#header {
    	margin-left: auto;
	margin-right: auto;
	text-align: center;
	}
	
#title {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	width: 400px;
	}
	
#imgleft {
	float: left;
	text-align: right;
	width: 30%
	}
	
#imgright {
	float:right;
	text-align: left;
	width: 30%
	}

<div id="header">
			<div id="imgleft">
			<a href="portfolio.html"><img src="l_portfolio.gif" alt="Portfolio"></a>
			<img src="l_about.gif" alt="About">
			</div>
			<div id="imgright">
			<img src="l_blog.gif" alt="Blog">
			<img src="l_contact.gif" alt="Contact">
			</div>
			<div id="title">
			<img src="title.gif" height="84" width="400" alt="Title">
			</div>
			
		</div>

http://www.kafadrian.com/juggernaut/index.html
is what i have so far
I want it to look like:
http://www.kafadrian.com/juggernaut/layout.jpg

The problem im having is that the image links that have mouseover effects dont align (touch) the blue bar below them and apparently in some browsers the image links themselves have gaps between them

I spent hours, and yes im relatively noobish about all this, trying all sorts of different display commands and border/margin commands to try and get rid of any spaces, the way the site is now (10.01.08) is the best i could get it. in IE7 the mouseover images connect horizontally but not vertically with other images.

am i going about this all wrong? my experience in building websites is mostly from the early eras of netscape when IE was new, back when you put stuff in a table a certain way with no cellpadding/spacing/border and everything aligned no problem.

I appreciate any help with this as I undertand it will take time to give me an answer that no only makes sense (to me) but will work.

the code for the site is:

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>Juggernaut - Monolith - Order</title>
</head>
<body marginheight="0" marginwidth="0" leftmargin="0" rightmargin="0" topmargin="0">

<script type="text/javascript">
<!--

var image1 = new Image();
image1.src = "news1.jpg";
var image2 = new Image();
image2.src = "news2.jpg";
var image3 = new Image();
image3.src = "news3.jpg";

var image4 = new Image();
image4.src = "roster1.jpg";
var image5 = new Image();
image5.src = "roster2.jpg";
var image6 = new Image();
image6.src = "roster3.jpg";

var image7 = new Image();
image7.src = "forums1.jpg";
var image8 = new Image();
image8.src = "forums2.jpg";
var image9 = new Image();
image9.src = "forums3.jpg";

var image10 = new Image();
image10.src = "files1.jpg";
var image11 = new Image();
image11.src = "files2.jpg";
var image12 = new Image();
image12.src = "files3.jpg";

var image13 = new Image();
image13.src = "info1.jpg";
var image14 = new Image();
image14.src = "info2.jpg";
var image15 = new Image();
image15.src = "info3.jpg";

var image16 = new Image();
image16.src = "founded.jpg";

//-->
</script>
<script type="text/javascript">
<!--

function roll(img_name1, img_src1, img_name2, img_src2)
   {
   document[img_name1].src = img_src1;
   document[img_name2].src = img_src2;
   }

//-->
</script>
<table border="0" cellspacing="0" cellpadding="0" style="margin:0">
  <tr height="34">
    <td rowspan="4">
      <img style="display:block" src="juggernaut.jpg" width="560" height="110"/>
    </td>
    <td>
    </td>
  </tr>
  <tr>
    <td>
      <a href="index.html" style="display:inline-block"
        onmouseover="roll('news','news2.jpg','text','news3.jpg')" onmouseout="roll('news','news1.jpg','text','founded.jpg')">
        <img style="display:inline-block" src="news1.jpg" name="news" width="48" height="48" border="0"/>
      </a>
      <a href="index.html" style="display:inline-block"
        onmouseover="roll('roster','roster2.jpg','text','roster3.jpg')" onmouseout="roll('roster','roster1.jpg','text','founded.jpg')">
        <img style="display:inline-block" src="roster1.jpg" name="roster" width="48" height="48" border="0"/>
      </a>
      <a href="index.html" style="display:inline-block"
        onmouseover="roll('forums','forums2.jpg','text','forums3.jpg')" onmouseout="roll('forums','forums1.jpg','text','founded.jpg')">
        <img style="display:inline-block" src="forums1.jpg" name="forums" width="48" height="48" border="0"/>
      </a>
      <a href="index.html" style="display:inline-block"
        onmouseover="roll('files','files2.jpg','text','files3.jpg')" onmouseout="roll('files','files1.jpg', 'text','founded.jpg')">
        <img style="display:inline-block" src="files1.jpg" name="files" width="48" height="48" border="0"/>
      </a>
      <a href="index.html" style="display:inline-block"
        onmouseover="roll('info','info2.jpg','text','info3.jpg')" onmouseout="roll('info','info1.jpg','text','founded.jpg')">
        <img style="display:inline-block" src="info1.jpg" name="info" width="48" height="48" border="0"/>
      </a>
    </td>
  </tr>
    <tr>
    <td>
      <img style="display:block" src="line_right.jpg" width="240" height="4"/>
    </td>
  </tr>
  <tr>
    <td>
      <img style="display:block" src="founded.jpg" align="right" name="text" width="144" height="20"/>
    </td>
  </tr>
</table>
</body>
</html>

I am trying to create an image gallery/slideshow effect using hover .....however, it isn't working to well. What I want to accomplish is have a user 'hover' over a thumbnail, and have the background-image for that particular tag come into view(it's currently background-positioned off screen.)

Has anybody had success with this? Let me know.

This isn't working:
Code:

<html>

<head>
<title>New Page 1</title>

<style type='text/css'>
	#test {
		background-image: url('test.jpg');
		background-repeat: no-repeat;
		background-position: -4000px;
		font-weight: bold;
		color: red;
		border-style: solid;
		width: 400px;
		height: 400px
	}
	#test:hover {
      background-position: 200px 200px;
	}
</style>

</head>

<body>

<div id='test'>This is a test.</div>

</body>

</html>

www.devwebsites.com/index.php is my site. in order to view this problem you must register at www.devwebsites.com/register.php
Once you do go back to the home page and you will see the ul out of the login box. Any help is greatly appreciated. Tell me what I should do to fix it please.

CSS LINK

http://www.devwebsites.com/estilos.css

Hi I have an issue aligning some links. i have it perfect in FF but it is not the same in IE.

http://www.sun-awnings-direct.co.uk/the-carino-p-29.html

It is the white breadcruumb trail in question. Can anyone advise what IE is doing differently and how I can solve it?

Thanks a lot

Hi everyone,
I am having trouble aligning my content to the edge of the table somehow it shows 20pixels down and I cann't figuere out how to bring it up. Any help will be greatly appreciate. thanks
Code:

<style>
ul { list-style-type: none; margin: 1.0em 0 0 0px; padding: 0; position:relative; overflow: visible; height: auto; text-decoration: none; color: #33FF00;}
ul li { text-decoration: none; width: 230px; color: #000; }
ul li a, ul li a:visited {height: 1.2em; width: 200px; display: block; text-decoration: none; background: blue; margin: 0.1em 0 0 0; text-indent: 10px; padding: 3px; color: #000;}
ul li a:hover { height: 1.2em; display: block; background-color:#FF0000; color: #fff000;}
ul li a.currentpage, ul li { height: 1.2em; text-decoration: none; background: #00ffff; padding: 3px; color: #fff;}
</style>
<table width="234" border="1">
  <tr>
    <td width="230" height="85">
	<ul><li><a href="">HOME</a></li>
        <li><a href="">LINK TWO</a></li>
    </ul>
	</td>
  </tr>
  <tr><td></td></tr>
</table>

After browsing through w3schools and learning most of what css has to offer I for some reason can't figure out a way to align items using css.

I was just wondering if someone could help me with the correct tag.

Hello everyone.

I'm going to try this as a general question first. In the event you guys do need to see the page, then I'll put up the info as needed.

My issue is this:

The site I am making uses a javascript slideshow. I need to have CSS div boxes overlay over it (the header and menu bar).

In IE, I am not having any issues. Doesn't matter what I try - no issues at all. Putting the divs after the java (which is also in a css div) in the code, using "z-index" to put it on top, float, etc, doesn't matter - WORKS.

What is NOT working is FireFox and all the rest. What's truly interesting is if I use z-index, the header does show up on top....for a few minutes, and then the javascript takes over the top position. What the?

Some examples:

.header {
float: left;
width: 716px;
height: 150px;
background-color: transparent;
background-image: url("images/header.jpg");
position: absolute;
z-index:100;
}

#mainimage {
position: absolute;
}



Or:

.header {
float: left;
width: 716px;
height: 150px;
background-color: transparent;
background-image: url("images/header.jpg");
position: absolute;
}

#mainimage {
position: absolute;
}

With HTML:

<div id="mainimage">
<script type="text/javascript">
new fadeshow(fadeimages, 650, 825, 0, 2000, 0)
</script>
</div>
<div class="header"></div>


Again, IE - no issues. But I can't seem to find ANY method to get the dang header on the TOP of the java for any other browser.

I am very much pulling out my hair.

If you can assist:

ive searched google throughout and im blank on how to do this

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled</title>
<style type="text/css">
*
{
	margin:0;
	padding:0;
}

div
{
	width:70%;
	margin:0 auto;
	height:20em;
	border:.4em solid black;
}
p
{
	border:.4em solid black;
	margin:0 auto;
	line-height:8em;
	display:inline;
	width:55%;
	height:8em;
}
span
{
	display:block;
	color:red;
	font-size:2em;
	width:60%;
	margin:0 auto;
	text-align:center;
}
</style>
</head>
<body>
<div>
	<p>
		<span>X</span>
	</p>
</div>
</body>
</html>

I need the outer box to be vertiacllly aligned within the viewport, the other boxes vertically aligned within each other. does that make sense? I thought u could do it with line-height but i can't get it working. fresh eyes?

Edit: New code there.

I started out working out a page thinking this *should* do what I want and lo and behold it did work in IE6

http://www.fogcat.co.uk/example/test002.html

But when looking at Firefox it goes all odd. If you remove all the internal "imagediv" div from the "imagechunk" div it nearly works but doesn't algin the "link text" like IE.

I'm told that display:inline-block is not properly supported, which is probably the root of my problems.

What I want a set of divs down the page (the "imagedivs") Each div will contain

An image - but that image will be nested inside a div - it's returned that way from a php function. Images may be of varying height so I can't use pixel values at top margins or anything like that. A link to another page The link should be positioned to the right of the image and aligned vertically with the centre of the image.

This is one of those things that's a doddle with tables, but I'm
trying to train myself to think CSS.

What obvious thing am I over looking?

Code:

+--------------------------------------+
| +----------------+                   |
| | .............. |                   |     ---  <div>
| | :            : |                   |     ...  <img>
| | :            : |   Link here       |
| | :            : |                   |
| | .............. |                   |
| +----------------+                   |
+--------------------------------------+
   
+--------------------------------------+
| +----------------+                   |
| | .............. |                   |    
| | :            : |                   |    
| | :            : |   Link here       |
| | :            : |                   |
| | .............. |                   |
| +----------------+                   |
+--------------------------------------+

I am redesigning my site, changing it from 2 columns to 3. I can't seem to get the 3rd column where I want it. See: http://www.jwsuretybonds.com/jw09/surety-bonds/commercial-bonds/


My goal is to make the grey "Get Started Now" box to the far right, the text in the center, and the nav buttons to the left.



Is it possible to do this by only modifying the CSS? If I have to change the HTML it will create a TON of work in recoding my templates.

I'm having trouble aligning headings in CSS.

I've tried creating a class like this -

Code:

.rightalign {
   text-align:right;
}

and applying it like this -

Code:

<h1> <span class="rightalign" /> Heading </span> </h1>

but it doesn't work, any help?

Thank you.

Can anyone tell me why the navigation does not align with the logo on the left? I would like the bottom of each element to be along the same line. I can't figure out what is pushing it up.

Thanks