CSS - Help With Spacing Out Text Between An Image.

Is there a way to decrease a default spacing between bullet and text in <ul>?

Trying to follow "the best practices" I wanted to convert my menu from bunch of <a></a><br> to unordered list. I already display arrows icon next to menu items so I though it would save me some typing on <img>. But there is one problem: I can't decrease the space between bullet and text. There is bullet, around one em of empty space and then text. It breaks my layout, making menu items wrap to another line, and also wastes some space. I tried to play with margins and padding, but bullets still stay at the same place. Also negative margin and padding doesn't seem to work. If I use a background image instead of bullet, I can adjust the spacing but then the bullet position doesn't seem consistent and get cramped on text in longer lines.

Hello, this is my first attempt at a website and first attempt at using CSS as well.

With much reading and the help of an online CSS layout creator I've been able to get pretty far, but have been having many roadblocks recently.


For instance, the second heading in my layout is not displaying correctly in IE, but looks fine in FireFox. Please take a look at

http://www.onlinecasinoboss.com/new_page_1.htm

The second heading should lay directly underneath heading number 1, with a 2px margin in between header 2 and the main page layout.

Also the text in the right, left and center columns starts as if it had a 12px or greater top margin. This problem exists in BOTH IE and FF.

Please help, and thanks for anyone that takes the time to help a newbie web designer out.

This may actually be a css not a javascript question. Those two are so tightly coupled the distinction blurs. My apologies if it is in the wrong forum.

I adapted this social network bookmarking thing that I've seen kicking around.
It uses prototype and scriptaculous that is why I am posting it here.

It basically has an icon for each social network with a custom link to save the current page to the network in question. It appears on the following page

http://demo.tixrus.us/calendar.php?filter=all

below the calendar. The spacing is all wrong when it first renders, I want all the icons to be jam packed together. As you can see, it messes up and puts the last one at the beginning of a new row (not what I want). Now if you hide them and then click Social Networks again, they appear the way I wanted them in the first place. Is it because in the source
each icon is on its own line?
Code:

<a href="xxxxx"><img ....../></a>
<a href="yyyyy"><img ...../></a>

as opposed to jam packing the codes into extremely long lines
Code:

<a href="xxxxx"><img ....../></a><a href="yyyyy"><img ...../></a>

I remember this being an issue with most browsers many yrs ago..
I could run each row together on a huge line but it would make the code template even harder to read and maintain than it already is. So if there is some style thing I can do I would prefer to do that. The stylesheet for this stuff is at the bottom of

http://demo.tixrus.us/styles/tixstyles.css

I already explicitly set the height and width for the icons (they weren't previously) and that is fine but it was never the issue and it doesn't solve the spacing issue.

Is it possible to adjust the line spacing in text using CSS because pressing return in text, the spacing is either too big or too small. I want control of line spacing so that I can have text and paragraph control like I do with Word documents.
eg.
A
B
I want the distance from A to B to be either greater or smaller.

Can you also control the space between letters?
eg.
AB
I want the spacing between A to B further or closer.

Is this all possible on a HTML page without having to use images for text or using tables to seperate each text line on a table to create different line spacing.

If I have a couple of paragraphs of text and would like to adjust the space when you press return to start a new paragraph, how would I add it to my styles code below. Right now, a hard and soft return is too big and I would like the spacing to be about half the font size of the text.

How would I add it to my stylesheet code in this example: Code:

.bodytext {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	text-decoration: none;
	text-align:right;
	font-weight: none;
	background-color: #ffffff;
        line-height:1.5;
        letter-spacing:-0.02em;
}

I haven't tried this before, so if I'm way off beat, I'll take directions.
What I'm trying to do is take a psd file and make a webpage from it.
So far, I think I've got the images cut correctly.
I tried using divs to begin with, but found I had to apply position:relative to compensate for extra spacing coming after images and divs. I'm placing an image then a div then an image. The spacing between the two are different. I've tried padding:0 and margin:0 just about everywhere I could think of putting it, but that didn't fix it.
So, I used RP. But, after getting it to look right in Safari, but not Firefox [just checked before posting here], I found that making the text bigger caused the divs and images to overlap. So, I thought about tables.
Yeah, same thing, so I figure I must not know something pretty basic and was wondering if anyone could help.
Both pairs of files validate.
Here are the links for the:
div based layout and it's css file
AND
table based layout and it's css file
Just in case this looks absolutley nuts on other browsers, here is a picture of where I'm trying to get to.

I'm feeling a little tortured over this one

Good Morning All,

Been having a slight problem with the visual in the screenshot below.

The blue line is our H2, and the purple one is our H3, however, as you can see, the underline spans the entire width of the column, not just underneith the text, which is our requirement.

***As i am not allowed to upload a url as a new user, the underline is as follows. With the text centre aligned.

text
-----------------------------------------------------------

rather than

text
------

and obviously by the css, the underline on the headers is a small image, repeated - x.


Please see relevant css information.

* (line 23)

{

margin-top: 0pt;

margin-right: 0pt;

margin-bottom: 0pt;

margin-left: 0pt;

padding-top: 0pt;

padding-right: 0pt;

padding-bottom: 0pt;

padding-left: 0pt;

}

h2, h3, h4, h5, h6 (line 101)

{

font-size: 1.2em;

font-weight: normal;

padding-bottom: 4px;

margin-top: 0.6em;

margin-right: 0pt;

margin-bottom: 0.8em;

margin-left: 0pt;

text-align: center;

}

.contentArea h2, #secondaryNavigation h2 (line 114)

{

background-color: transparent;

background-image: url("../images/h2_gradient_bg.gif");

background-repeat: repeat-x;

background-attachment: scroll;

background-position: left bottom;

color: #0066cc;

}


Many Thanks in advance.

Marc.

Hi.
See code below. Why does the outer SPAN in TABLE not grow with the image height. If the text is longer so it is forced below image then it looks as it should.
Please also read some comments in the code.

Code:

<html><body><center><br><br>
Why does image not force the outermost span to be at least as high as image?<br>
If the text are long enough and gets below the bottom border of image it look good though.<br><br>
NOTE: I need to put Image and text either within separate span or in same span as the examples below.<br>
In my real application I'm using an <a href=" ...> around the outer span in examples below.<br>

<br><br>
<table border=1 cellpadding=0 cellspacing=0 width=200px><tr><td>
	<span style="display:block; background-color:#ffa827; padding-top:10px; padding-left:10px; padding-right:10px;">
		<span style="display:block; float:left">
			<img src="landscape.jpg" height="40px" width="40px" alt="" border="0">
		</span>
		
		<span style="display: block; color: white;">
			Text here. 
		</span>
	</span>
</td></tr></table>

<br><br>
<table border=1 cellpadding=0 cellspacing=0 width=200px><tr><td>
	<span style="display:block; background-color:#ffa827; padding-top:10px; padding-left:10px; padding-right:10px; color: white;">
			<img src="landscape.jpg" height="40px" width="40px" alt="" border="0" style="float:left">
			Text here.
	</span>
</td></tr></table>

</center></body></html>

Hi. Really hoping someone can help me with this... I'll try and explain this as best I can(!)

Basically I've got a page containing a block of 9 images, with each linking to a video clip. At the moment I've got the CSS coded so that whenever the mouse is hovered over the 'infobar' (at the bottom of each image) it goes from having a transparent background with black text to having a grey background with white text.

What I'm trying to achieve is that same effect whenever the mouse is hovered over any part of the image and infobar. The live online link can be found at:
www.markmcm.co.uk/test/test.html

The CSS is as as follows:

Code:

/*
 *  Page Stylesheet 
 */
body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: #eaeaea;
  border:0; margin:0; padding:0;
  height: 100%;
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
#container {
	margin-left: auto;
	margin-right: auto;
   	min-height: 100%;
	width: 936px;
}
* html #container {
	height: 100%;
}
#content {
	float:left;
	position: relative;
	height: 528px;
	width: 936px;
	z-index: 0;
}
.miniscreen1, .miniscreen2, .miniscreen3, .miniscreen4, .miniscreen5, .miniscreen6, .miniscreen7, .miniscreen8, .miniscreen9 {
	position: absolute;
	float: left;
	display: block;
	width: 312px;
	height: 176px;
}
.miniscreen1 {
	top: 0;
	left: 0;
}
.miniscreen2 {
	top:0;
	left: 312px;
}
.miniscreen3 {
	top: 0;
	left: 624px;
}
.miniscreen4 {
	left: 0;
	top:176px;
}
.miniscreen5 {
	left: 312px;
	top:176px;
}
.miniscreen6 {
	left: 624px;
	top:176px;
}
.miniscreen7 {
	left: 0;
	top:352px;
}
.miniscreen8 {
	left: 312px;
	top:352px;
}
.miniscreen9 {
	left: 624px;
	top:352px;
}
.info {
	height: 30px;
	top:3px;
	left: 40px;
	width: 265px;
	float: left;
	position: absolute;
}
.infobar  {
	left:0px;
	position: absolute;
	top: 140px;
	width: 312px;
	height: 36px;
	outline: none;
	color:#000;
	background: url("data/infobar.png") no-repeat 0 0;
	z-index: 650;
}
.infobar:hover  { 
	background-position: 0 -36px;
	outline: none;
	color:#fff;
}
#infobar span {
	display: none;
	outline: none;
}
.clip_title {
	outline: none;
	font-size: 85%;
	font-weight: 700;
	vertical-align: top;
	text-align: left;
}
.clip_sub {
	outline: none;
	height: 13px;
	font-size: 80%;
	line-height: 13px;
	font-weight: 700;
	vertical-align: top;
	text-align: left;
}

And the HTML 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">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Test Page</title>
		<meta name="description" content=" " />
		<meta name="keywords" content=" " />
		<meta name="generator" content=" " />
		<link rel="stylesheet" type="text/css" href="page.css" media="screen" />
	</head>
<body>

<div id="container">

	<div id="content">
		<span class="miniscreen1">			
		<a href="#"> <img src="img/clip1.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 1<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
					
		<span class="miniscreen2">
		<a href="#"><img src="img/clip2.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 2<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
		
		<span class="miniscreen3">
		<a href="#"><img src="img/clip3.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 3<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
			
		<span class="miniscreen4">
		<a href="#"><img src="img/clip4.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 4<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
	
		<span class="miniscreen5">
		<a href="#"><img src="img/clip5.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 5<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
	
		<span class="miniscreen6">
		<a href="#"><img src="img/clip6.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 6<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
	
		<span class="miniscreen7">
		<a href="#"><img src="img/clip7.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 7<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
	
		<span class="miniscreen8">
		<a href="#"><img src="img/clip8.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 8<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
	
		<span class="miniscreen9">
		<a href="#"><img src="img/clip9.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 9<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
				
	</div>
</div>
	
</body>
</html>

There must be a better (and easier?) way to do this. Any help would be very-much appreciated - and save an old bloke from tearing too much of his hair out(!)

Figured this was simple, but I can't seem to figure it out.

Using CSS, I want to put an image on the left with text to the right aligned to the bottom. I could easily do this with a table, but I'd like to find a CSS way.

With CSS like:

.imginfo {float:none;clear:both;margin-top:1em;}
.imginfo img {float:left;margin-right:1em;}

and code like:

Code:

<div class="imginfo">
  <img src="..." />
  Line of Text<br />
  Line of Text<br />
  Line of Text<br />
</div>

I get the image on the left and the text on the right, but, the text starts at the top of the image. I want it to end up aligned to the bottom of the image.

Attempting to use vertical-align: bottom doesn't do anything with the text.

The effect I am looking for is like below. If you assume the XXX are the image...

Code:

XXXXXXXXXXXX
XXXXXXXXXXXX
XXXXXXXXXXXX
XXXXXXXXXXXX
XXXXXXXXXXXX Line of Text
XXXXXXXXXXXX Line of Text
XXXXXXXXXXXX Line of Text

Hi
I am redesigning my blog and took it down completely. I want to place the day's text post on the day's photo post on top of the latter, while graying out the photo. Is that possible without using flash?

Hello.

So I have this situation (on the right):
h t t p : / / img339.imageshack.us/img339/6958/1stb.png

and when I change my browser resolution, I get this (on the right):
h t t p : / / img35.imageshack.us/img35/3892/2ndhw.png

Is it possible to do that the image wouldn't change the place on a screen even you when change the resolution of the browser? And yes, the image must be behind the text.

Thanks in advance for any suggestions and tips.

I am trying to put labels below images on my new site design. See: www.jwsuretybonds*com/jw09


I figured out how to get them vertically aligned, but I am having problems with the horizontal, as when I change the browser size, they move.


Here is one of the examples:
Code:

#homepage-bar h2.construction {
	position:fixed;
	top:225px;
	left:505px;
}

I tried changing to position: absolute; I also tried to use percentages on the left:


I know this is easy, but I can't find the fix after googling for 30 minutes. Help!

Hi there,

I am having trouble making a nimage appear on the top of some text. I have a transperent image, but the text is appearing ontop... I need the image to appear on top.

This is the code:

Code:

<table cellspacing="0" cellpadding="0" align="center" border="0">
  <tbody>
    <tr>
      <td style="BACKGROUND-IMAGE: url(img/template/bg_one.jpg); WIDTH: 357px; " align="center">
        <div style="position: relative; z-index: 1000; BACKGROUND-POSITION: right bottom; BACKGROUND-IMAGE: url(img/template/image_to_appear_on_top.gif);  WIDTH: 357px; height: 275px; BACKGROUND-REPEAT: no-repeat;"> <table cellspacing="0" cellpadding="0" width="100%" border="0">
          <tbody>
            <tr>
              <td  valign="top" align="center">
				<div style="z-index:-900;">
				  <p>test text </p>
                  <p>test text </p>
                  <p>test text </p>
                  <p>test text </p>
                  <p>test text </p>
                  <p>test text </p>
                  
</div>

				</td>
            </tr>
          </tbody>
      </table>
	  </div>
	  </td>
    </tr>
  </tbody>
</table>

Any ideas what I have wrong?

I'm trying to do a layout like this: wink zone. net / ap.jpg

I know how to do the header part of it but the end of the image of the person and the text parts are bit harder. Could you give me some help? I guess the best way to do this is use floats?