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 derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

using # as an ID

Status
Not open for further replies.
autoIT

autoIT

IS-IT--Management
May 10, 2006
68
US
if i have the following rule written within a style tag with "SIGN" referring to an image sign.jpg:


#SIGN {position: absolute; top: 100px; left: 100px;}


how would I write the corresponding line in the body so that the image overlaps the text next to it. The book doesn't explain this part of it.
 
Sort by date Sort by votes
so instead of <img src="...

should be

<img id="sign.jpg"....
 
Upvote 0 Downvote
No, it needs an ID as well as a src...


____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 
Upvote 0 Downvote
so:

<img src id="sign.jpg"....>
 
Upvote 0 Downvote
Don't do anything to the image tag you currently have except add an id.

If it has no src at the moment, then you have no image displaying. I assumed you had a valid image tag when you posted the question.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
What book are you working from?
Have you skipped any of it?


images need a src attribute to know what image to display.

The id attribute is simply a "hook" that you can use to target the element. The id must be applied to a single element in your document. e.g. You can't have 2 things with the same id - things would be confusing otherwise right?

You can do "stuff" to the target with CSS, or javascript for that matter.



<honk>*:O)</honk>
Foamcow Heavy Industries - Web site design in Cheltenham and Gloucester
Ham and Jam - British & Commonwealth forces mod for Half Life 2
 
Upvote 0 Downvote
html for dummies

they explain how to write a rule usin the # and explain it's used for positioning, but then they dont explain how to write the corresponding line in the body. I've been searching all over the web and I'm still not finding it.


<img src="sign.jpg">
<img id="SIGN">


is that right?
 
Upvote 0 Downvote
No. Use:

Code: 
<img src="yourImageSourceHere.jpg" width="imageWidthInPixels" height="imageHeightInPixels" alt="A description of the image" id="SIGN">

If you're working to an XHTML DOCTYPE, you can put a trailing slash at the end:

Code: 
<img src="yourImageSourceHere.jpg" width="imageWidthInPixels" height="imageHeightInPixels" alt="A description of the image" id="SIGN" [!]/[/!]>

Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
does the rule set up for it need to be within the <style> tag or does it just need to be contained withing the header. USing the code you gave me make the image not appear, not even an empty box with the description, very weird.

Adam
 
Upvote 0 Downvote
got it just a little mistake in the coding thanks for the help.


Adam
 
Upvote 0 Downvote
CSS needs to be with style tags OR in an external stylesheet file (more on that later).

Style tags should be in the head of the document

Code: 
<head>
... other head tags ...
<style type="text/css">

#sign {
    border:1px solid red;
}
</style>
</head>


The #sign is refering to a single element that has the id "sign". This can be anything in your document but only 1 thing. ids must be unique

In our case whatver is marked up as "sign" will have a 1 pixel red border around it.
For example:
Code: 
<img id="sign" src="path/to/my/image.jpg" alt="alternative text is important">

or we could put it around a paragraph of text

Code: 
<p id="sign">Here's some text with a red border</p>



Now, remember I mentioned external stylesheet files?
Well, it's often desirable to use one, but if you do then you don't put the <style> tags in the CSS file.

You could link to the file like so:

Code: 
<link rel="stylesheet" type="text/css" href="mystyles.css" media="all">

That will load the stylesheet file which would contain the rules that were between your <style> tags.
There is a "proper" CSS way to import the stylesheet file, but we won't go there right now as there are a few reasons that can make it undesirable.

In short, you apply ids by adding the id attribute to an element as well as the "normal" attributes for that element.

Does that clear things up a bit?

<honk>*:O)</honk>
Foamcow Heavy Industries - Web site design in Cheltenham and Gloucester
Ham and Jam - British & Commonwealth forces mod for Half Life 2
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
206
lmcate
lmcate
198709km
  • Locked
  • Question
Grouping XML key value using XSLT
Replies
0
Views
635
198709km
198709km
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
792
spamjim
spamjim
PeDa
  • Locked
  • Question
Display table td's as block element on mobile phone 1
Replies
3
Views
914
spamjim
spamjim
SitesMasstec
  • Locked
  • Question
How to have an HTML opened automatically in an e-mail
Replies
3
Views
213
spamjim
spamjim

Part and Inventory Search

Sponsor

Back
Top