CSS - Leader Lines Linking Text To Graphics

Normally when I want to vertically align some text to the middle of a div I use

line-height: 40px; and vertical-align: middle;

However that only seems to work on single lines of text because with multiple lines of text the line height of each line means there is a large gap between the text rather than centreing the whole lot vertically. How do I get around this?

I thought something like the following would work but it doesn't.

<div style="line-height: 60px; vertical-align: middle;">
<span style="line-height: normal;">line1<br />line 2</span></div>

I've downloaded a free CSS website template with the idea of just swapping out the graphics and text using Notepad. All is going well with one major exception - I cannot seem to change the graphics in the sidebar or main body. I put the new graphics in the same folder as the original graphics then just changed the img tag to reflect the new filename.

This results in the image spacer icon displaying but the new image does not. What is strange is that the alt tag will change correctly, just no image.

I know I'm overlooking something simple, but I seem to have hit the proverbial brick wall. Any help would be most appreciated!

I tried to attach the files but don't see that option and evidently I'm not permitted to post the url. Just google "templatemo 050 metal" to pull up the files.

Thanks for reading this and offering any help!

Hi

I am haveing some trouble implimenting a sub menu on some of my pages. I want to have a menu that mirrors the titles rounded edges by placing a graphic at either end of the menu with the text set in the centre.

So far i can produce the title no problem but the menu is proving a little more tricky.

Example page with the issues

My css:

Code:

#services-menu ul{
	margin :0;
	white-space :nowrap;
	color: #FFFFFF;
	line-height: 30px;
	height: 30px;
	padding: 0px;
	background-image: url(/graphics/service_menu_back.gif);
	background-repeat: repeat-x;
}
#services-menu ul li{
	display : inline;
}
#services-menu ul li a{
	color:#FFFFFF;
	text-decoration:none;
	margin: 0px;
	padding-left: 4px;
}
#services-menu ul li.services_menu_right {
	background-image: url(/graphics/services_menu_right.gif);
	background-repeat: no-repeat;
	background-position: right top;
	height: 30px;
	float: right;
	width: 10px;
}
#services-menu ul li.services_menu_left {
	background-image: url(/graphics/service_menu_left.gif);
	background-repeat: no-repeat;
	background-position: left top;
	height: 30px;
	float: left;
	width: 10px;
}

My HTML is:

Code:

<div id="services-menu">
     <ul>
	<li class="services_menu_left"></li>
	<li><a href="/index.html">Assets</a></li>
	<li><a href="/pages/company.html" target="_self">Risk</a></li>
	<li><a href="/pages/services.html" target="_self">Surveillance</a></li> 
	<li><a href="/pages/humanitarian.html">Counter Terrorism</a></li>
	<li><a href="/pages/forms/procure.php" target="_self">Close Protection</a></li>
	<li><a href="/pages/forms/recruit.php" target="_self">Contingencey</a></li>
	<li><a href="/pages/forms/contact.php" target="_self">Training</a></li>
	<li class="services_menu_right"></li>
      </ul> 
</div>

Ps - i have tried producing the menu in the same way as i have made the title but the right hand graphic continues to drop down a line.

ANY IDEAS - I'M REALLY STUCK NOW!!!!

Hi,

First, before you get on my case, I'm using a table, because that's what the teacher wanted. And as I've never worked with CSS, let alone divs, I was more comfortable with it anyhow.

Okay, the question I have is probably very dumb, and the answer very simple, but I'm not getting it. I'm just trying to get an image aligned to the top of a cell.

http://esdcar.org/web/test/templatem2.html

I could use valign in the cell tag, and it almost works (but it doesn't quite align at the top, about 5px short), but I'd like to do it with CSS, especially as I'm going to have a different header image on every page.

The cell has its own id of contentm. Inside the img src tag, I put class="pageheader." In the stylesheet, I gave .pageheader an attribute of vertical-align: top.

But, it's not working. What am I doing wrong?

It's times like this when I want to give up on CSS.

Everything is fine in both Firefox and IE on my local until I use the code in Miva Merchant 5.5 on the server.

In Firefox, everything looks good and displays as it should.

But in IE (6.0) NO MENUS! The Header div (logo etc) displays fine, so it must be something with the list.


#main-nav { height: 23px; background: #CCCCCC;}

#main-nav dl { margin: 0;
padding: 0;
content-box;
}
#main-nav dt { float: left; }

#main-nav dt a {
height: 0px !important;
padding: 5px 0 0 0;
display:inline
}

#store-nav { height: 22px;
background: #EBEBEB;

}
#store-nav dl { margin: 0;
padding: 0;
content-box;
}

#store-nav dt { float: right;
padding: 0 20px 0 10px;
}

#store-nav dt a {
height: 0px !important;
padding: 0;
display:inline
}

What could it be? Is it the <dl> <dt> tags?

<div id="header">
<h1> <img src="home.gif" width="208" height="63" alt="Home" border="0" /> </h1
</div>

<div id="main-nav">
<dl>
<dt id="line"><img src="store-line.gif" border="0" width ="209" /></dt>
<dt id="company"><a href="#"><img src="company.gif" border="0" /> </a></dt>
<dt id="products"><a href="#"><img src="products.gif" border="0" /> </a></dt>
<dt id="contact"><a href="#"><img src="contact.gif" border="0" /> </a></dt>
</dl>
</div>

<div id="store-nav">
<dl>
<dt id="checkout"><a href="#"><img src="checkout.gif" border="0" /> </a></dt>
<dt id="cart"><a href="#"><img src="cart.gif" border="0" /> </a></dt>
<dt id="midspans"><a href="#"><img src="midspans.gif" border="0" /> </a></dt>
</dl>
</div>

I have finished my transparency box backgrounds.. and, thanks to some help here.. have them working in multiple browsers..

Now, I have received a call.. that one person sees "black lines" through the boxes on the transparent boxes on the attractions and info pages.. (user is using IE and 1024x768) -I cannot recreate this problem on any machine.. is there some little strange bug that causes this on certain browsers?

http://www.tkwebbiz.com/Gina2

Thanks so much.. *again*.. *Smiles*

Anyone knows of a method to cause a vertical line to come all the way down ? Currently it stops where the text stops. but i want it to go all the way to the buttom of the document regardless of the text. (right now i use box border on one side)



Thanks!

I need some help. I am a relative beginner with CSS and have a problem that is eluding me.

Specifically in the right-hand sidebar on this page (FriendsAcrossTheWater.org/blog), you will note that all the links are on separate lines by themselves.

I do not want this behavior and I am not sure what is causing it nor what to do to correct it.

Can you help?

Thanks,
Bob Ross

Ok, so I've finally made a design that I think looks OK, and the one last problem that I've come across is that IE(7) is adding some space at the edges of my divs, but it looks just how it should in Firefox: http://chipchamp.awardspace.com/webtemps
Look at it in firefox and IE, and you'll see what I mean..

Here is the entire code for the page:

Code:

<html>
<head>
<style type="text/css">
body {
	background-image: url(images/design_5x1.gif);
	text-align:left;
}

div {
	border-width:0px;
	margin:0px;
	padding:0px;
}

#main-wrapper {
	background-color:transparent;
	width:800px;
	margin-top:50px;
}

#header {
	background-color:transparent;
	background-image:url(images/design_3x3.gif);
	width:800px;
	height:102px;
}

#content {
	background-color:#ffffff;
	width:100%;
	height:700px;
}
#menu {
	background-color:#ffffff;
	width:33%;
	float:left;
}
#content2 {
	background-color:#ffffff;
	width:60%;
	float:right;
}

#footer {
	background-color:transparent;
	background-image:url(images/design_7x2.gif);
	width:100%;
}
#footer-content {
	background-color:transparent;
	background-image:url(images/design_7x2.gif);
	width:680px;
	height:40px;
}

img.left {
	float:left;
}
img.right {
	float:right;
}

</style>
</head>
<body>
<center>
<div id="main-wrapper"><div id="header"><img class="left" src="images/design_3x2.gif">
</img><img class="right" src="images/design_3x6.gif"></img>
<img class="right" src="images/design_3x5.gif"></img>
<img class="right" src="images/design_3x4.gif"></img></div>
<div id="content"><div id="menu"><img class="right" src="images/design_4x2.gif"></img></div>
<div id="content2">hi again</div></div>
<div id="footer"><img class="left" src="images/design_7x1.gif"></img>
<img class="right" src="images/design_7x4.gif"></img><div id="footer-content">Copyright (c) 2008 ChipChamp Studios</div></div></div>
</center>
</body>
</html>

I have found out that if I comment out the background-image lines in #header and #footer, then the ugly white lines on the sides go away -- but so does some of the background image in the middle of the header/footer. So, does anyone have any idea how to fix this? It would be a great help!

If you can fix the problem for either the header or the footer, I should be able to fix it for the other, so you don't have to fix both.

Thanks!

When printing pages from this site http://www.sorensteensen.dk/kvl/ one or two lines disappear when the pages break.

I have no idea why. Anyone knows about it?

Soren Steensen

I have a repeating background image, that is very much driving me crazy.

There is a line when the image repeats. I cannot figure out what the problem is.

Below is an example, the image in the box is slightly shorter which is where you see the line.

(URL address blocked: See forum rules)
Thanks for any help.

Hi there,

I would like to get some opinions on what would be the best way, or even a good way, to display a list of lines from a database, such as product descriptions (a link), prices (text) and buy now links.

For example:
Segate Hard Drive 250gb $150.00 Buy Now
Maxtor Hard Drive 300gb $200.00 Buy Now
etc

I thought it would be best to have a <ul> with each line being an <li>. Further to this, I tried having each line as a <li> element, with each column (price, buy now etc) an <li> element, displayed inline. This actually worked well, but I had trouble doing an alternate background color thing, which I think was due to my funny css code. I gave each <li> a class selector, so that different formatting could be applied, and I had each <li> float:left; and a width, to give a column style display.

Would a table be the best way to display the 3 (or more) columns? I've removed tables from the site layout, and can see how they would make sense for this, as it basically is tabular data, repeated over and over again.

Or would having each line as a <p> with say each column having its own <label> possibly be best? Or some variation on of the 3, or something else all together?

I realise everyone would have their preferred style and there is no 'best', 'right or wrong' way etc. I'm trying to find a way that I can work with, one that could be considered 'the norm', or 'best practise'.

I haven't posted any code, but can if people need more of an idea of what I am trying to do.

Cheers
Scott

Am I commenting lines incorrectly?

If I prefix a line with two slashes // in the CSS, firefox will ignore it.

IE will recognize it and perform the CSS styling.

For instance: Code:

table.myTable tr td
{
    background-color: red;
    //background-image: url('mypic.jpg');
}

The TD element will not have a background in firefox. It WILL have the background image in IE.

P.S. I am using IE8 on Win7 RC1 (build 7100).
Thank you

I was wondering if anyone knows how to get a space between blocks in a list. If you have list that have more that one line in a block it looks better to have gaps greater than the leading to separate them.

I can't figure how to accomplish this, does anyone have any ideas.