CSS - Aligning Texts And Images (vertical)

I'm trying to reduce the amount of real estate that a form and button are taking up in my table. They are expanding the whole row and lining them up with the other contents isn't working in the CSS methods I've tried. Finally I tried reduce the font-size of the cell containing the form and button (all the way down to 1px) which gives the desired result... but I'm a bit concerned about implementing it into all the tables in the site because it seems a bit 'hacky'. Is there a better way to do this?

My Webpage

You'll see in the first table, final column containing the button, that the button and form and pushed up against the top of the cell and the other cells now have more padding.

In the second table, my "font-size:1px" has been applied and gives the desired result. Just curious if there is a better way to do this or if this is will be fine.

Hi,

I'm relatively new to CSS and while I'm aware that you should code for Firefox and fix for IE, I'm having problems with what I am sure is a very simple bit of coding.

The css is just a simple layout:

Code:

body {
font-family : Arial, Helvetica, sans-serif;
font-size : 12px;
text-align : center;
background-image : url(../_images/grad_bkg.jpg);
color : #000000;
}

#wrapper {
text-align : center;
margin-left : auto;
margin-right : auto;
background-color : #ffffff;
padding : 15px 0 0 0;
width : 888px;
}

#header {
text-align : center;
margin-left : auto;
margin-right : auto;
width : 835px;
height : 83px;
background-image : url(../_images/gbc_banner.jpg);
}

#navigation {
text-align : center;
margin-top : 5px;
margin-left : auto;
margin-right : auto;
width : 835px;
height : 25px;
background-image : url(../_images/menu.gif);
background-repeat : no-repeat;
}

#mainimage {
display:inline;
text-align : center;
margin-top : 5px;
margin-left : auto;
margin-right : auto;
width : 835px;
height : 331px;
}

#divide {
text-align : center;
margin-top : 5px;
margin-left : auto;
margin-right : auto;
width : 835px;
height : 5px;
background-color : #000000;
}

#content {
margin-top : 5px;
margin-left : auto;
margin-right : auto;
width : 835px;
}

#footer {
clear : both;
text-align : center;
margin-left : auto;
margin-right : auto;
background-color : #ffffff;
width : 888px;
height : 218px;
background-image : url(../_images/footer.jpg);
}

but in the mainimage div I am inserting the following table and it is not displaying correctly in FF:

Code:

    <table width="835" border="0" cellspacing="0" cellpadding="0"> 
      <tr> 
        <td width="215" height="270"><img src="_assets/_images/rangemaster_img_link.jpg" width="215" height="270" /></td> 
        <td width="190" height="270"><img src="_assets/_images/falcon_img_link.jpg" width="190" height="270" /></td> 
        <td width="232" height="331" rowspan="2"><img src="_assets/_images/aga_img_link.jpg" width="232" height="331" /></td> 
        <td width="198" height="331" rowspan="2"><img src="_assets/_images/rayburn_img_link.jpg" width="198" height="331" /></td> 
      </tr> 
      <tr> 
        <td colspan="2" height="61" bgcolor="#000000"><img src="_assets/_images/companion_txt.gif" width="405" height="61" /></td> 
      </tr> 
    </table>

s anyone able to give me a pointer?

Thanks....

Ok just so you know what I am trying to do here is a link to the problem page. -Problem aligning images-

Well ok what I want is for the position of the images to be displayed in absolute positions to the page and not to the image before it. Since I am really new to CSS I can't seem to find a good way to do this (without using tables UGH!). I have read about using float and div tags but not sure how to go about it. Here is a link to my other page of pics that display as I want them only because the pics are all the same size.

-Images displayed correctly-

This is the only code I have so far for displaying the images. The first img style aligns the image to the left and the 2nd to center and the 3rd to the right.

Code:

/* Set the style for image(s) displayed */
img.left
{
	margin-left: 10em;
}

img.center
{
	margin-left: 3em;

img.right
{
	margin-left: 3em;
}

Hope that makes sense,
Gerbill

After putting a js slideshow at the top of the page I am having trouble getting anything to right of it. Every defaults to the next line.

Any tips?

Thank you!

tinassweetshop.com

Hi!

I'm trying to implement an image drop-down menu. Everything seems to be working but there is an element that is pushing my second image button down and I can't seems to figure where it's coming from. It seems to be my link that is causing it but i'm stumpped.

I've set up a test page so you can see what is happening.
the site is at test .sylvaindelisle .com

Thanks for taking the time to take a look.

I know a lot of people have made posts about vertical aligning but nearly all were involving text. I'm trying to vertically align a small image, but every time i do it within the img tag it screws up the adjacent text on IE and only IE. I know it has to do with how vertical align is supposed to be used, specific blocks or inline or something.

How would I go about vertically aligning that small arrow image on the top properly.
http://chics.onivertneb.com/align.htm

The image that is set to align right keeps moving down some. Is there anyway to get it to be level with the image that's left aligned without using a negative margin or tables?
The problem occurs in Netscape 7 and IE 6. Mysteriously enough it is displayed correctly in Opera 7.
Code:

#title {
	margin-left: 170px;
	background: url(./imgs/title_mdl.gif) repeat-x;
	width: auto;
	height: 40px;
}
#title span {
	font-size: large;
	text-align: center;
}
#title img {
	width: 82px;
	height: 40px;
}

Code:

<div id="title"><img src="./imgs/title_lft.gif" alt="" align="left"><span>Hello</span><img src="./imgs/title_rgt.gif" alt="" align="right"></div>

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>

I've been having problems trying to vertically align an image within a div. I'm trying to align it to the bottom of the div. CSS as follows:

#col1r1 {
float: left;
height: 40%;
width: 33%;
display: inline;
text-align: right;
}
div#col1r1 div#image {
bottom: 66%;
left: 60%;
color: black;
vertical-align: bottom;
}
div#col1r1 div img.pagegr {
width: 60%;
}

HTML:

<div id="col1r1">
<div id="image"><img class="pagegr" src="images/blah.gif" alt=""></div>
</div>

Unfortunately this code will be appearing on multiple pages with a different image on each page - some portrait, some landscape, and of varying sizes - otherwise, I would have added some blank space to the top of image itself to make it fit and sit nicely aligned with the bottom of the box.

I'd really appreciate some help. Thanks in advance.

Hello,

Thank you for reading my post

This is what I try to create.
A Vertical Navigator column with images, without knowing their size, as links and javascript actions. The images should be Horizontally centered.
I want to set the width of the div 'navBar' dynamically so that the images inside the 'navElement's grows or shrink but stays in center.
The images could be between 55 - 90 pixels width. And I want to have them grow or shrink between 40 - 80 px width.

What I already got :
The links and javascript actions are working. Also have a column working where the images are centered with a known size, but not working with images without knowing the size.

I did try and search for several hours, but couldn't find a good solution.

Mainly my question would be, how I can shrink or grow an image without knowing his size.


Basicly my html code is

Code:

<div id="navBar">
  <div class="navElement" id="nav1">
	<img class="navImg" src="images/home.gif" />
  </div>
  <div class="navElement" id="navN">
	<img class="navImg" src="images/notHome.gif" />
  </div>
</div>

my latest css for unknown image size

Code:

#navBar { /* main page navigation container */
	height: 460px;
	width: 70px; /* 1. this will be dynamically set */
	left: 100px;
	top: 151px;
	position: absolute;
	visibility: visible;
	}
.navImg {
	height: auto;
	width: auto;
	/*	height: 60px;*/
	/*width: inherit;*/
	position: relative;
	top:0px;
margin:0 auto;
}
#navElement1 {
	position: relative;
	width: auto;
	height: 70Px;
	top:0px;
margin:0 3px;
	visibility: visible; }

With javascript I add a onclick event handler on each navImg wich trigger the action. This works to.

Please, Is someone willing to help with pointers.

Thanks in Advance
SC

Hi,
Below is part of my code. Sorry could not upload everything otherwise code would look cumbersome, also could not load images but each image is 234 X 110. What I have is a left column. I firstly want to place a list and then three divs, each div containing an image (with text), that is also a link. I assumed with normal flow the list would appear first and then the divs, one after another. For some reason the divs go to the top of the column and are hidden by the list. I want a normal flow so that the list appears first and then the divs. Any suggestions? I would be grateful for all help.

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" lang="en">
<head>
<title>Test Page</title>
<style type="text/css">
h1, h2, h3, h4, h5, h6, p{
margin:0;
padding:0
}
img { border:none }
a{color:#000;text-decoration:none}
a:hover { text-decoration: underline; }
body {
color:#000;
font-family:Verdana, Geneva, sans-serif;
}
#wrap {
min-width: 71.08em;
margin:auto;
overflow:hidden;
}
#left 
{  width: 17.38em; 
   padding: 0;
   border: 0.125em solid #FF0000;
}
#left.column 
{  text-align: justify;
}
#left ul
{  margin: 0;
   padding: 0;
}
#left ul li
{  list-style-type: none;
}
#left ul li a, #left ul li a.first_in_list
{  float: left;
   display: block;
   width: 16em;
   margin-left: 0.4em;
   padding: 0.28em 0 0.28em 0.25em;
   background-color: #FFD700;
   border-top: 1px dotted #FFFFFF;
   font-family: arial, verdana, sans-serif;
   font-size: 1em;
   font-weight: normal;
   color: #000000;
}
#left ul li a:hover
{  text-decoration: none;
}
#left ul li a:hover span
{  text-decoration: underline;
}
#left ul li a.first_in_list
{  width: 16em;
   font-size: 1em;
   font-weight: bold;
   margin-top: 1.8em;
   padding: 0.8em 0 0.8em 0.25em;
   border-top: none;
}
#leftVLink, #leftSLink, #leftGLink
{  text-align: right; 
   border: none;
   margin: 0.3em 0 0 1em; 
}
#leftVLink a:link,#leftSLink a:link,#leftGLink a:link
{  color: #333;
   width: 15em;
   height: 7em;
   display: block;
   font-size: 0.95em;
   font-family: Verdana;
}
#leftVLink a:hover,#leftSLink a:hover,#leftGLink a:hover
{  color: #000;
   text-decoration: underline;
}
#leftVLink
{  min-width: 14em;
   background: #fff url(leftVLink1.gif) no-repeat left top;
   margin: 1.5em 0 0 1em;
   padding: 0.6em 0.5em 0 0;
}
#leftSLink 
{  background: #fff url(leftSLink1.gif) no-repeat left top;
   padding: 0.6em 0.5em 0 0;
}
#leftGLink 
{  background: #fff url(leftGLink1.gif) no-repeat left top;
   padding: 1.4em 0.5em 0 0;
}
</style>
</head>
<body>
<div id="wrap">
      <div id="left" class="column">
        <ul>
          <li><a class="first_in_list" href="#">
                   &nbsp;Shopping Directory</a></li>
          <li><a href="#">►&nbsp;<span>Latest</span></a></li>
          <li><a href="#">►&nbsp;<span>Phone Finder</span></a></li>
          <li><a href="#">►&nbsp;<span>iPhone finder</span></a></li>
          <li><a href="#">►&nbsp;<span>Deal Finder</span></a></li>
          <li><a href="#">►&nbsp;<span>Phones + FREE gifts</span></a></li>
          <li><a href="#">►&nbsp;<span>Shop by brand</span></a></li>
          <li><a href="#">►&nbsp;<span>Sim free phones</span></a></li>
          <li><a href="#">►&nbsp;<span>Coming soon</span></a></li>
          <li><a href="#">►&nbsp;<span>New and exclusive</span></a></li>
          <li><a href="#">►&nbsp;<span>Trade in</span></a></li>
          <li><a href="#">►&nbsp;<span>Compare phones</span></a></li>
          <li><a href="#">►&nbsp;<span>Mobile services</span></a></li>
        </ul>
       <div id="leftVLink"><a href="#" title="voucher codes and offers">Voucher codes<br />and offers</a></div>
       <div id="leftGLink"><a href="#" title="gift ideas: be inspired by our gift ideas">Be inspired by<br />our gift ideas</a></div>
       <div id="leftSLink"><a href="#" title="safe shopping: advice for safe shopping">Advice for<br />safe shopping</a></div>
    </div>
</div>
</body>
</html>

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>

Hi,

Can something like this be constructed using just CSS?

It's an autoscroll div with checkboxes and slightly rotated text.

My efforts so far look pretty grim!

I'm not able to make the div spacing be 8px in height? I can do that for Seamonkey but not IE...

Code:

<div style="margin:0px;padding:0px;height:8px;"></div>

So, what is the workaround to it??