Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

background images for inline elements or img content 2

Status
Not open for further replies.
1DMF

1DMF

Programmer
Jan 18, 2005
8,795
GB
Hi,

I'm working on a new design for one of the websites I webmaster for.

It contains some white arrow images, currently they are physical content on the page.

I tried to use span and a background image but the size attributes don't work on inline elements.

then of course if you display:block they force newline.

Now i know I could go to the hasle of wrapping a div with a space character and apply size attributes and float it etc. etc. which is a bit of a mess of code.

Is it worth it to remove all 'non-content' images from the source?

Or should I not worry too much about images that are purely design forming actual page content?

And if you feel it is worth removing them from page content, any suggestions on the best way to do it.

here is the test URL
Code: 
[URL unfurl="true"]http://dev.bfms.co.uk/[/URL]

many thanks 1DMF.



"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!
 
Sort by date Sort by votes
isn't it funny how you write a question, and as soon as you submit, you realise the answer.

Code: 
[URL unfurl="true"]http://dev.justlifecover.co.uk/[/URL]

there is the way i've changed it, using <a> , display:block; and width attributes with a bg image.

sorted.

I know how to do it so really just your input on how important it is to remove all images from content where possible is appreciated.

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!
 
Upvote 0 Downvote
Just put some padding on it.
You can pad inline elements.

--
Tek-Tips Forums is Member Supported. Click Here to donate

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.

 
Upvote 0 Downvote
true, so you would go with a (no block, no width) and padding, d'oh even easier.


Do you beleive in removing all images as content?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!
 
Upvote 0 Downvote
Try this out ... tested in *gasp* IE 7.0 and *cheers* Firefox 2.0

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en">
<head> 
    <title>Demo</title>
	<style type="text/css">
	  * {
	    margin: 0 ;
	    padding: 0 ;
	  }
	  
	  body  { background-color: #000; }
	  
	  #links  {
		width: 300px ;
		background-color: #f00 ;
          }
	  
	  #links dt, #links dd {
	    float: left; 
	    width: 98% ;
	    padding: 1% ;
	  }
	  
	  #links a {
	    padding-right: 31px ;
	    background: transparent url(right_arrow.gif) top right no-repeat ;
	    color: #fff ;
	    text-decoration: none ;
	  }
	  
	  #links a:hover {
	    text-decoration: underline ;
	  }
	  
	  #links dd {
	    clear: left; 
	  }
	  
	  .app { 
	    background:#265290;
            color:#fff;
	  }
	  
	  .adv {
  	    background:#cccc98;
            color:#333;
	  }
	  
	  .clc {	
	    background:#ccc;
            color:#333;
	  }
	  
	</style>
</head>
<body>
  <div id="links">
    <dl>
	  <dt class="app"><a href="#">Apply Now</a></dt>
	  <dd class="app">Take the steps towards a more rewarding lifestyle</dd>
	  
	  <dt class="adv"><a href="#">Advantages</a></dt>
	  <dd class="adv">Why would I want a seniors money lifetime loan</dd>
	  
	  <dt class="clc"><a href="#">Calculator</a></dt>
	  <dd class="clc">Enter a few brief details and find out how much you could borrow instantly</dd>
	</dl>
  </div>        
</body>
</html>

Uses a definition list to display the markup, and a little more CSS for the presentation, but does what you're looking for. Sorry if the fonts and sizes weren't correct ... just a demo for you though.

HTH

Greg
 
Upvote 0 Downvote
Man ... writing this code and a pile of replies magically appear ... lol.

To answer your one question though: I believe if the image is not part of the content (ie part of the "presentation"), then remove the image from the content. I prefer to have any HTML written to contain only content, and use CSS to present all the elements on the screen.



Greg
 
Upvote 0 Downvote
can you make a dd smaller width than a dt?

or would you have to add padding to the dd to give that effect/

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!
 
Upvote 0 Downvote
ok i've had a play and got it working fine on the bfms.co.uk link but why are the fonts different sizes , flick between the justlifecover and the bfms sites and the text is different? why?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!
 
Upvote 0 Downvote
Try setting the line-height or font-size for the dd element specifically.

Greg
 
Upvote 0 Downvote
I don't know whats going on but the font sizes don't match either, the text in a DIV is being diplayed different than text in DL/DD

I've put .5em on DIV and nearest I can get is .7em for the DD and the font still isn't rendered the same?

What is going on?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!
 
Upvote 0 Downvote
If you put .5em for the div, and set .7 for the DD, remember that values of .5 for the div "cascades" (I think that's the first time I've used that in a sentence) into the DD ... so what you're really doing is setting the DD to .7em of the .5em of the div ... make sense? :|

I think you'd be better off explicitly setting the font sizes for the dt and dd elements individually ... or use a % font size for the dd element.

Greg
 
Upvote 0 Downvote
I understand what your saying in terms of the value being inherited, however.

there is no div to inherit from, remember we replaced the div with a dl

also the dt set @ 1.2em looks the same as the div with it set @ 1.2

it's just the dd that seems to look different?

Also how do you mean i'm better off explicitly setting the font? if you mean use pt, then this doesn't work for accessibility, and I understood it to be standard practice to use em measurements on fonts.



"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!
 
Upvote 0 Downvote
Did you fix it? The fonts look the same size to me.

--
Tek-Tips Forums is Member Supported. Click Here to donate

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.

 
Upvote 0 Downvote
I gave up worrying about it and just went with the DL.

Dunno why the font was behaving the way it was, but decided it wasn't worth worrying about.

Cheers.



"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!
 
Upvote 0 Downvote
By explicitly setting, I should have said setting the font size for each element individually ... my bad ... or whatever it is the kids are saying these days.


Greg
 
Upvote 0 Downvote
I should have said setting the font size for each element individually
Click to expand...
that's what confused me, I was setting them individually.

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
699
3esolar
3
PeDa
  • Locked
  • Question
Media query: display = none/inline/block 1
Replies
1
Views
714
PeDa
PeDa
Alt255
  • Locked
  • Question
Searching for a string that contains brackets
Replies
0
Views
201
Alt255
Alt255
Lets Code
  • Locked
  • Question
Inline element into a block level element
Replies
1
Views
236
spamjim
spamjim
Camila James
  • Locked
  • Question
Shopify vs. WooCommerce – Which Platform To Use For Your Online Store?
Replies
3
Views
163
lucasbrown
lucasbrown

Part and Inventory Search

Sponsor

Back
Top