 |  |  |  |  |  |  |  |
html images
Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
 |
Guys I am trying to do the following in html
can you please help :cry:
I am having problems positioning images as follows
http://img230.imageshack.us/img230/5721/image5qg.jpg
can you please help :cry:
I am having problems positioning images as follows
http://img230.imageshack.us/img230/5721/image5qg.jpg
theres a couple of ways to do it.
the easy way is to just use a table, or else you could do it via css.
img.whateveruwanttocallit
{
position:absolute;
left:0px;
top:0px;
}
<img class="whateveruwanttocallit" src="whatever.jpg" width="100" height="180" />
the easy way is to just use a table, or else you could do it via css.
img.whateveruwanttocallit
{
position:absolute;
left:0px;
top:0px;
}
<img class="whateveruwanttocallit" src="whatever.jpg" width="100" height="180" />
what is wrong with this??
<html>
<head>
<title>images positioning</title>
<body>
<div.container { position:relative; /* etc. */ }
img.positioned { position:absolute; height:63px; width:122px; }
img#topleft { top:0; left:3; }
img#topright { top:0; right:6; }
img#bottomleft { bottom:0; left:7; }
img#bottomright { bottom:0; right:0; }>
<div class="container">
<img src="pic1.jpg" class="positioned" id="topleft">
<img src="pic2.jpg" class="positioned" id="topright">
<img src="pic3.jpg" class="positioned" id="bottomleft">
<img src="pic4.jpg" class="positioned" id="bottomright">
<!-- etc. -->
</div>
</body>
</html>
<html>
<head>
<title>images positioning</title>
<body>
<div.container { position:relative; /* etc. */ }
img.positioned { position:absolute; height:63px; width:122px; }
img#topleft { top:0; left:3; }
img#topright { top:0; right:6; }
img#bottomleft { bottom:0; left:7; }
img#bottomright { bottom:0; right:0; }>
<div class="container">
<img src="pic1.jpg" class="positioned" id="topleft">
<img src="pic2.jpg" class="positioned" id="topright">
<img src="pic3.jpg" class="positioned" id="bottomleft">
<img src="pic4.jpg" class="positioned" id="bottomright">
<!-- etc. -->
</div>
</body>
</html>
place your css in your head part
<style>
div.container { position:relative; /* etc. */ }
img.positioned { position:absolute; height:63px; width:122px; }
img#topleft { top:0; left:3; }
img#topright { top:0; right:6; }
img#bottomleft { bottom:0; left:7; }
img#bottomright { bottom:0; right:0; }
</style>
</head>
take away the <> parts in the css u done.
then it should work fine
<style>
div.container { position:relative; /* etc. */ }
img.positioned { position:absolute; height:63px; width:122px; }
img#topleft { top:0; left:3; }
img#topright { top:0; right:6; }
img#bottomleft { bottom:0; left:7; }
img#bottomright { bottom:0; right:0; }
</style>
</head>
take away the <> parts in the css u done.
then it should work fine
|
Similar Threads
- modify script (Perl)
- .jpg files increasing size when fwding (OS X)
- IE 6.0 Problem (Web Browsers)
Other Threads in the HTML and CSS Forum
- Previous Thread: Major confusion
- Next Thread: want to print a html document in landscape orientation
| Thread Tools | Search this Thread |
You need to join our community in order to build your list of favorite forums. You can visit the forum index for a listing of all forums.
Latest HTML and CSS Posts
- Today's Posts
- Unanswered Threads
Related Forum Features
appointments asp background backgroundcolor beta browser bug calendar cart cgi code codeinjection corporateidentity css design development displayimageinsteadofflash dreamweaver emailmarketing epilepsy explorer firefox flash form format google griefers hackers hitcounter hover html ide ie7 ie8 iframe image images internet internetexplorer intranet iphone javascript jpeg layout macbook maps marketshare microsoft mozilla multimedia navigationbars news offshoreoutsourcingcompany opacity opera optimization perl pnginie6 positioning problem scroll seo shopping studio swf swf. textcolor timecolor titletags url urlseparatedwords visual visualization web webdevelopment webform website windows7 xml xsl
