Kimidori Posted February 28, 2007 Share Posted February 28, 2007 Hello,I'm new to html and css so please help meHow can I position several images as links/embedded videos in the center of a page so it may look like this: Image1 Image2 Image3 Image4 Thank you in advance. Link to comment Share on other sites More sharing options...
LifeInBinary Posted February 28, 2007 Share Posted February 28, 2007 Hello,I'm new to html and css so please help meHow can I position several images as links/embedded videos in the center of a page so it may look like this:Image1 Image2 Image3 Image4 Thank you in advance. No problem Kimidori, that's really easy.Here is code that should do that:<center><a href="whatever_you_want_to_link_to.ext"><img src="image1"></a><a href="whatever_you_want_to_link_to.ext"><img src="image2"></a><a href="whatever_you_want_to_link_to.ext"><img src="image3"></a><a href="whatever_you_want_to_link_to.ext"><img src="image4"></a></center> If you want to center it vertically, I suggest adding <br><br><br><br><br> on a line before that code. Each <br> will bring the images down by one line.There are probably much better ways of doing this, but that's what I use.Hope that helps,LifeInBinary. Link to comment Share on other sites More sharing options...
PrateekSaxena Posted February 28, 2007 Share Posted February 28, 2007 This would be more W3C complliant <html><head><style>p.center{ align:center;}</style></head><body><p class="center"><a href="whatever_you_want_to_link_to.ext"><img src="image1"></a><a href="whatever_you_want_to_link_to.ext"><img src="image2"></a><a href="whatever_you_want_to_link_to.ext"><img src="image3"></a><a href="whatever_you_want_to_link_to.ext"><img src="image4"></a></p></body></html> Link to comment Share on other sites More sharing options...
LifeInBinary Posted February 28, 2007 Share Posted February 28, 2007 This would be more W3C complliantThanks Prateek.LifeInBinary. Link to comment Share on other sites More sharing options...
PrateekSaxena Posted February 28, 2007 Share Posted February 28, 2007 No Problem Link to comment Share on other sites More sharing options...
Kimidori Posted February 28, 2007 Author Share Posted February 28, 2007 Thank you for the replies :)I tried but there was no difference, all the images as links were still on the left side...Below is what I typed:______________________________<html><head><style>p.center{align:center;}</style></head><body><p class="center"><a href="http://www.geocities.com/versaillesrosas/Anime.html"><img src="http://www.geocities.com/versaillesrosas/Images/tab-anime1.jpg"></a><a href="http://www.geocities.com/versaillesrosas/Manga.html"><img src="http://www.geocities.com/versaillesrosas/Images/tab-manga1.jpg"></a><a href="http://www.geocities.com/versaillesrosas/Movies.html"><img src="http://www.geocities.com/versaillesrosas/Images/tab-movie1.jpg"></a><a href="http://www.geocities.com/versaillesrosas/Takarazuka.html"><img src="http://www.geocities.com/versaillesrosas/Images/tab-takarazuka1.jpg"></a></p></body></html>__________________________________________________________Did I make a mistake? Sorry, I just started learning html and css a few days ago Link to comment Share on other sites More sharing options...
roondog Posted February 28, 2007 Share Posted February 28, 2007 Instead of the first <style> you want <style type="text/css"> Link to comment Share on other sites More sharing options...
Kimidori Posted February 28, 2007 Author Share Posted February 28, 2007 Instead of the first <style> you want <style type="text/css">I changed <style> to <style type="text/css"> but nothing changed All the images are still on the left. Link to comment Share on other sites More sharing options...
croatiankid Posted February 28, 2007 Share Posted February 28, 2007 Prateek's code was slightly incorrect. change "align" to "text-align".Here is a fully w3c valid html 4.01 strict document <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><title>Page title here</title><style type="text/css">p.center{text-align:center;}</style><p class="center"><a href="whatever_you_want_to_link_to.ext"><img src="image1" alt="alternative text"></a><a href="whatever_you_want_to_link_to.ext"><img src="image2" alt="alternative text"></a><a href="whatever_you_want_to_link_to.ext"><img src="image3" alt="alternative text"></a><a href="whatever_you_want_to_link_to.ext"><img src="image4" alt="alternative text"></a></p> Link to comment Share on other sites More sharing options...
croatiankid Posted February 28, 2007 Share Posted February 28, 2007 <script type="text/javascript" src="urltoscript.js"></script> for html<script type="text/javascript" src="urltoscript.js" /> works in xhtml. Link to comment Share on other sites More sharing options...
LifeInBinary Posted February 28, 2007 Share Posted February 28, 2007 <script type="text/javascript" src="urltoscript.js"></script> for html<script type="text/javascript" src="urltoscript.js" /> works in xhtml.Was that supposed to be on my post? Link to comment Share on other sites More sharing options...
PrateekSaxena Posted February 28, 2007 Share Posted February 28, 2007 Yup the text-align works! Link to comment Share on other sites More sharing options...
LifeInBinary Posted February 28, 2007 Share Posted February 28, 2007 Yup the text-align works!Nice, glad you got that working Prateek!LifeInBinary. Link to comment Share on other sites More sharing options...
jlhaslip Posted February 28, 2007 Share Posted February 28, 2007 Hers is another method to centre the pictures using a div and is xhtml valid. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head> <title>An XHTML 1.0 Strict standard template</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /><style type="text/css" >div.center{margin: 0 auto;text-align:center;}</style></head><body><div class="center"><a href="whatever_you_want_to_link_to.ext"><img src="image1" alt="alt here" /></a><a href="whatever_you_want_to_link_to.ext"><img src="image2" alt="alt here" /></a><a href="whatever_you_want_to_link_to.ext"><img src="image3" alt="alt here" /></a><a href="whatever_you_want_to_link_to.ext"><img src="image4" alt="alt here" /></a></div></body></html> Link to comment Share on other sites More sharing options...
croatiankid Posted February 28, 2007 Share Posted February 28, 2007 yeah you might want to use DIV instead.QUOTE(croatiankid @ Feb 28 2007, 07:12 AM) *<script type="text/javascript" src="urltoscript.js"></script> for html<script type="text/javascript" src="urltoscript.js" /> works in xhtml.Wase that supposed to be on my post?yeah lol Link to comment Share on other sites More sharing options...
Kimidori Posted March 1, 2007 Author Share Posted March 1, 2007 Prateek's code was slightly incorrect. change "align" to "text-align"Oh, Thanks a lot, it worked - finally! Thanks also to all who helped, I appreciate it ^^I want to use DIV but I'm just a beginner in this stuff, I couldn't understand much about DIV at the moment but I'll study about it. Link to comment Share on other sites More sharing options...
jlhaslip Posted March 1, 2007 Share Posted March 1, 2007 Div's will be your best friend once you get to using them. Check the html Tutorial over at w3schools.com. They are generic 'containers' and are better suited for what you are doing instead of the <p> paragraph tag. IMHO. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now