CSS - Help W/image Header Alignment

Trying to delete my post but no option to delete so just removing content.

hi
i am trying to position some images in this box...

#rightColumn {
float: right;
padding: 0px;
margin:0 12px 0 15px;
background: #F2FCFF;
width: 350px;
}

there are 3 images and i wany them to go from left to right accross the box

using this tutorial as inspiration.

however, rather than use margins to space the images (this screws up what i am trying to achieve) i wanted to use css alignment i.e. leave the first image alone, centre the second and align right the third. I can't figure how to do it though...

i've tried a couple of things but i still pretty wet behind the ears so don't have too much experience to draw upon....

i tried

<div class="button"><img src="images/school-uniform-button.gif" alt="school uniforms" name="uniform" width="107" height="107" id="uniform"><div class="centre"><img src="images/school-equipment-button.gif" alt="classroom equipment" name="equip" width="107" height="107" id="equip"></div>
<div class="jumpmenu"><img src="images/fees-button.jpg" alt="School fees" name="fees" width="107" height="107" id="fees"></div></div>

and also with the <div class="button"> next to each image with the alignment divs.

neither works and advice would be really appreciated

thanks

jim.

Hi guys,

I was hoping someone could help?
I have the following css which controols the style for a larger image on hover function. (thumb - then large pic on hover)

I am having trouble positioning (vertically) the image, what can I usew to control it?

Code:

/* Popup Image Viewer */

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: #669933;
padding: 1px;
left: -1000px;
border: 1px ridged;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;

}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 135px; /*position where enlarged image should offset horizontally */

}

Nevermind, folks over at codingforums helped me.

Hi There,

If you put images in in replacement for standard form buttons they don't align properly.

I have been trying to move away from nested tables with my current work in favour of css layouts and was wondering if there is any quick and easy way to align button images?

If you look at the following URL the 'add to basket' buttons are higher up thean they should be.....

http://www.storesprite.org/taml/vie...l?category_id=3

Thanks

Hi.

K, I have NO idea where to begin on this one. I need to display a series of thumbnails (to be selected dynamically from a database) inside 1 <td> tag. I need them to be organized 3 wide by 3 high, with their titles underneath.

What would I use for this? I"m assuming I just set up a new class for that, but I don't know what to do for it.

Any help is greatly appreciated.

I'm really hung up on what class alignments I need to alter in order to get my thumbnails to align properly. If my thumbnails span the width of my page width, they are justified, but if they do not, they align left. The forum isn't letting me post a link to an example, but my website is at www dot the312hole dot com. The latest post shows an example of what I'm talking about with the thumbnails at the bottom of the post.

Any advice on how to get them to always space evenly? Preferably with a predefined margin and padding that spaces them equally regardless of how many are in each row?

Thanks for the help!

This post can be deleted, I solved my problem.

Hello all,

I am trying to make a horizontal nav bar using a list. Everything was going good until I tried to add an image (essential a line) to seperate each <li>. When I did this, the height of the nav bar expanded and it moved the entire list down about 15 pixels or so. I am attaching an image before I added the image and after I added the image to show.

Here is my css code for before I add the image:
PHP Code:
#navbar {
    height:37px; 
    line-height:33px;
    padding: 2px 0 0 10px;
    vertical-align:top;
    background: url(images/linkbarbg1.png) repeat-x;
    font-family: Tahoma, Georgia, "Times New Roman", Times, serif;
    font-size: 18px;
    color: #FFFFFF;

}

#navbar ul {
    vertical-align:top;
    margin:0;
    padding:0;
    border: 0px solid #000000;
}

#navbar ul li {
    display: inline;

}

#navbar ul li a {
    display: inline;
    text-decoration: none;
    padding-top: 5px;
    padding-bottom: 4px;
    padding-right: 10px;
    padding-left: 10px;
    color:#FFFFFF;

}

#navbar ul li a:hover
{
height: 31px;
background:url(images/linkbarbg1hover.png) repeat-x top left;
background-color: #FF3300;
} 





And HTML:
PHP Code:
<div id="main">
 <div class="leftshadow">
  <div class="rightshadow">
   <div id="header"><img src="images/logo1.png" /></div>
   <div id="navbar">
    <ul>
     <li><a href="#">Milk</a></li>
     <li><a href="#">Eggs</a></li>
     <li><a href="#">Cheese</a></li>
     <li><a href="#">Vegetables</a></li>
     <li><a href="#">Fruit</a></li>
    </ul>
   </div>
  </div>
</div> 





And here is what it looks like:


My CSS Code is the same for after, here is my HTML code for after:
PHP Code:
<div id="main">
 <div class="leftshadow">
  <div class="rightshadow">
   <div id="header"><img src="images/logo1.png" /></div>
   <div id="navbar">
    <ul>
     <li><a href="#">Milk</a></li>
     <li><img src="images/linkbarseperator1.png" /></li>
     <li><a href="#">Eggs</a></li>
     <li><a href="#">Cheese</a></li>
     <li><a href="#">Vegetables</a></li>
     <li><a href="#">Fruit</a></li>
    </ul>
   </div>
  </div>
</div> 





and here is what is looks like:


Is there a way to fix this?

UPDATE
I have noticed the same thing happens even when it is not a list. Therefore, it must be due to some other factor...does anyone have any ideas?

Sounds simple... but I can't find an answer.

I've a simple table row with a css background image.

In the row I've my text links and two images that are links.

While in firefox everything lines up nice and straight... in intercrash exploder it's all over the place, the images are almost subtext and the text is almost text top..

Any advice?

The page can be seen at addcolour (co uk extension)

CSS in a folder css the file name is addcolour

Many thanks

d

hi

i have following xhtml

Code:

<body>
<div id="content" class="centrehack">
<div id="header"  class="centrehack">
 <div id="topRightLogin"> 
 <form action="#" method="post">
 <input type="text" name="uname" value="username" />
 <input type="password" name="passwd" value="password" />
 <input type="image" src="images/headerlogin.gif" />
 
 </form>
 </div>

and following css

Code:

.centrehack { margin: 0 auto 0 auto; }
#content { width:960px; text-align:center; height:100%; overflow:visible; background:url(images/headerback.gif) repeat-x; }
#header { width:960px; height:47px; text-align:center; }

#topRightLogin { 
 width:450px;
 height:47px;
 float:right;
 color:#fff;
 font-weight:bold;
 font-family:Verdana, Geneva, sans-serif;
 border:#000 solid 1px;
 height:30px;
 display:block;
 padding:0;
}

#topRightLogin input,submit { 
 display:inline;
 padding:0px;
 margin-left:5px;
 height:21px;
 margin-top:0px;
}

i want to display form fields and submit button in a single line with perfectly aligned horizontally. but the form fields are showing empty area above them and going down than the submit button. the problem remains same in all browser.

i am attaching a screenshot of the problem as well. any help is much apprecated. thanks

What I hope to do is have a header with a left "cap" a right "cap" and a background tiling across connecting the two if that makes any sense whatsoever so if L is the left image B is the background image and R is the right image it would look like this...

LBBBBBBBBBBR

Anyway, I've ALMOST got it working. The only thing missing is the image on the right. I have this code in an html table cell:

Code:

<div id='logographicinner'>
          <div id='logostrip'>
            <div id='logographic'><div id='catname'>{$data['cat_name']}</div></div>
            </div>
            </div>

and this in the css
Code:

#logostrip{
background-color: #ffffff;
background-image: url(images/headerbg.gif);
height: 29px;
margin: 0px;
padding: 0px;
}

#logostripinner{
background-color: transparent;
background-image: url(images/headerright.gif);
background-position: right;
background-repeat: no-repeat;
height: 29px;
margin: 0px;
padding: 0px;
}

#logographic{
background-color: transparent;
background-image: url(images/headerleft.gif);
background-position: left;
background-repeat: no-repeat;
height: 29px;
margin: 0px;
padding: 0px;
}

#catname{
text-align: left;
padding-top: 7px;
padding-left: 20px;
font-weight: bold;
}

Any ideas what I've done wrong?

I'm trying to have a logo in a div next to a navigation menu that can align at a specific height in my logo. but im having a problem with my li background images staying within the ul background image.

Can someone help me fix my code to align this properly?

HTML CODE:

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="style.css" rel="stylesheet" type="text/css" />
<!-- load the typeface.js library and typeface.js fonts -->
<script src="js/typeface-0.14.js"></script>
<script src="fonts/haettenschweiler_regular.typeface.js"></script>
</head>

<body class="oneColFixCtrHdr">

<div id="container">
  <div id="header">
     <div id="navigation" class="menu">
     	<ul id="top-nav">
        	<li class="item4"><a href="#" title="Contact">Contact</a></li>
		<li class="item3"><a href="#" title="About">About</a></li>
		<li class="item2"><a href="#" title="Ideas">Ideas</a></li>
                <li class="item1"><a href="#" title="Portfolio">Portfolio</a></li>
       </ul>
     </div>
     <div id="logo"><span><a href="http://www.nadesignstudio.com/" title="NA Design Studio" rel="home">NA Design Studio</a></span></div>
     <div class="clear"></div>
<!-- end #header --></div>
  <div id="mainContent"><h1 class="typeface-js">Main Content </h1>
    <div class="typeface-js">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. </p>
    </div>
	<!-- end #mainContent --></div>
  <div id="footer">
    <p>na design inc, new york  ::  all right reserved 2010</p>
  <!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>

CSS CODE:

Code:

body {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #FFFFFF;
	margin: 0;
	padding: 0;
	text-align: center;
	color: #FFFFFF;
}
.oneColFixCtrHdr #container {
	width: 800px;
	background-image: url(images/bg-stripe.png);
	background-repeat: repeat;
	margin: 0 auto;
	border: 1px solid #000000;
	text-align: left; 
}
.oneColFixCtrHdr #header { 
	padding: 10px 10px 0 10px;
	background: #000000;
}
.oneColFixCtrHdr #header h1 {
	margin: 0;
	padding: 10px 0;
}
.oneColFixCtrHdr #mainContent {
	padding: 0 10px;
}
.oneColFixCtrHdr #footer {
	padding: 0 10px;
	background: #000000;
	font-family: "Courier New", Courier, monospace;
	font-style: italic;
	font-size: 8pt;
}
.oneColFixCtrHdr #footer p {
	margin: 0;
	padding: 10px 0;
}
.typeface-js {
	font-family: Haettenschweiler;
	font-style: italic;
	letter-spacing: 1px;
	color: #FFFFFF;
}
#logo {
	display: inline;
	float: right;
	text-align: left;
}
#logo a{
	background-attachment: initial;
	background-clip: initial;
	background-color: initial;
	background-image: url(images/logo.png);
	background-origin: initial;
	background-position: 0 0;
	background-repeat: no-repeat no-repeat;
	display: block;
	height: 118px;
	margin-bottom: 10px;
	text-indent: -9000px;
	width: 296px;
}
.msie #blog-title a {
	margin-bottom: -10px;
	position: relative;
}
#navigation {
	background-image: url(images/bg-nav.png);
	background-position: 0 0;
	background-repeat: no-repeat no-repeat;
	float: right;
	height: 22px;
	width: 474px;
	margin-top: 75px;
}
#navigation ul {
}
#navigation li {
	float: right;
	height: 22px;
	position: relative;
	list-style: none;
}
#navigation li a {
	font-family: Haettenschweiler;
	font-style: italic;
	letter-spacing: 1px;
	text-decoration: none;
	text-align: center;
	color: #FFFFFF;
	font-size: 0.95em;
	font-weight: bold;
	background-image: url(images/bg-nav-btn.png);
	background-repeat: no-repeat no-repeat;
	height: 22px;
	display: block;
	width: 69px;
	overflow: auto;
}
#navigation li a:hover {
	background-image: url(images/bg-nav-btn.png);
	background-position: 50% -22px;
	background-repeat: no-repeat;
	color: #000000;
}
#navigation li.item1 a {
	font-family: Haettenschweiler;
	font-style: italic;
	letter-spacing: 1px;
	text-decoration: none;
	text-align: center;
	color: #FFFFFF;
	font-size: 0.95em;
	font-weight: bold;
	background-image: url(images/bg-nav-btn1.png);
	background-repeat: no-repeat no-repeat;
	height: 22px;
	display: block;
	width: 69px;
	overflow: auto;
}
#navigation li.item1 a:hover {
	background-image: url(images/bg-nav-btn1.png);
	background-position: 50% -22px;
	background-repeat: no-repeat;
	color: #000000;
}
.clear {
   height: 0;
   font-size: 1px;
   margin: 0;
   padding: 0;
   line-height: 0;
   clear: both;
}

Example of problem
If Image doesnt show below, view it he http://nadesign.pisigmachi.com/wp-content/uploads/2010/02/example.jpg

URL

Wondering if anyone can tell me why there is a gap above my header image. Surely I am missing something in Firebug?

h**p://www.topofferspage.com