hi guys,
i have just written some css for displaying thumbnail pics and a caption centered next to it.
here is the page. <!-- w --><a class="postlink" href="http://www.deskjetmodels.co.nz/examples.php">www.deskjetmodels.co.nz/examples.php</a><!-- w -->
is the css and html i wrote ok? or can it be better somehow? i was just wondering. any comments if this is the correct way or not would be good!
thanx guys.
Css
#example {
width: 100px;
float: left;
}
#example_text {
width: 350px;
height: 70px;
float: left;
padding: 20px 0 0 0;
}
html for one thumbnail and caption.
<div id="example">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"JavaScript: void doNothing()" onClick="popUp('1.html', 660, 500)">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/examples_piper.jpg" alt="Piper PA-18 Super Cub" width="82" height="62" class="thumb_image"/> </a>
</div>
<div id="example_text">
<p class="text">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"JavaScript: void doNothing()" onClick="popUp('1.html', 660, 500)" class="link"> Piper PA-18 Super Cub </a>
</p>
</div>I like using a DL for that to show the relationship of the text to the image. Also, you can ditch the javascrip: in the href.
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#" onClick="popUp('1.html', 660, 500);return false;">yip your right i can ditch the javascript for the text link.
whats "I like using a DL for that to show the relationship of the text to the image" ??
thanks raywell, looks OK but it won't validate. This is because you are using the "id" identifier more than once for each "id". The "id" is unique and should only be used once for each (example and example_text). You should change those to be classes.
.example {
stuff: stuff;
}
.example_text {
stuff: stuff;
}
Other than that, looks nice!ahh.. thanks ffurnai,
i did not know that.
so i can only use a id once per page? and if i want to use it two or more times a page then use a class?
is that right?whats "I like using a DL for that to show the relationship of the text to the image" ??
<dl>
<dt><img ...></dt>
<dd>Text describing something about the image in the dt</dd>
</dl>
The DL is a list containing pairs of related list items, originally definition term and definition data I guess. Syntactically it shows the item-pair has some special relationship so some folks like to mark up image/caption pairs that way.thanks ray,
sounds good. will look into ithey ray,
can you tell me why i can get rid of the javascript?
thanxYou can't get rid of it totally, just the "javascrip:xxx" form in your hrefs.
i have just written some css for displaying thumbnail pics and a caption centered next to it.
here is the page. <!-- w --><a class="postlink" href="http://www.deskjetmodels.co.nz/examples.php">www.deskjetmodels.co.nz/examples.php</a><!-- w -->
is the css and html i wrote ok? or can it be better somehow? i was just wondering. any comments if this is the correct way or not would be good!
thanx guys.
Css
#example {
width: 100px;
float: left;
}
#example_text {
width: 350px;
height: 70px;
float: left;
padding: 20px 0 0 0;
}
html for one thumbnail and caption.
<div id="example">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"JavaScript: void doNothing()" onClick="popUp('1.html', 660, 500)">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/examples_piper.jpg" alt="Piper PA-18 Super Cub" width="82" height="62" class="thumb_image"/> </a>
</div>
<div id="example_text">
<p class="text">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"JavaScript: void doNothing()" onClick="popUp('1.html', 660, 500)" class="link"> Piper PA-18 Super Cub </a>
</p>
</div>I like using a DL for that to show the relationship of the text to the image. Also, you can ditch the javascrip: in the href.
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#" onClick="popUp('1.html', 660, 500);return false;">yip your right i can ditch the javascript for the text link.
whats "I like using a DL for that to show the relationship of the text to the image" ??
thanks raywell, looks OK but it won't validate. This is because you are using the "id" identifier more than once for each "id". The "id" is unique and should only be used once for each (example and example_text). You should change those to be classes.
.example {
stuff: stuff;
}
.example_text {
stuff: stuff;
}
Other than that, looks nice!ahh.. thanks ffurnai,
i did not know that.
so i can only use a id once per page? and if i want to use it two or more times a page then use a class?
is that right?whats "I like using a DL for that to show the relationship of the text to the image" ??
<dl>
<dt><img ...></dt>
<dd>Text describing something about the image in the dt</dd>
</dl>
The DL is a list containing pairs of related list items, originally definition term and definition data I guess. Syntactically it shows the item-pair has some special relationship so some folks like to mark up image/caption pairs that way.thanks ray,
sounds good. will look into ithey ray,
can you tell me why i can get rid of the javascript?
thanxYou can't get rid of it totally, just the "javascrip:xxx" form in your hrefs.