FORUMS: list search recent posts

HTML/CSS force images to same line

COW Forums : Web Design

<< PREVIOUS   •   FAQ   •   VIEW ALL   •   PRINT   •   NEXT >>
Nick SommersHTML/CSS force images to same line
by on Dec 17, 2013 at 3:31:25 pm

Hi my favourite cows! I am more of a Photoshop guy than an HTML/CSS dude, but I do my best to learn of fantastic forums such as this one :)

I have spent a lot of time on my site. I always used to use tables, but facebook etc cannot see images inside of tables, so the issue I am having is that there are three images on one horizontal line, outside of a table, that will move onto two separate lines if you look at the site in a small window, or on a cell/mobile phone for instance :)

My site is: http://www.meandmyguitar.com/
How can I change this code so that the following are forced to be on the same line? Thanks in advance you crrraazzzy cows!! :D (obviously the code is long due to the image map but as you can see it is just three jpgs)

<div align="center"><img src="buttons/b1home.jpg" alt="Jono Home Page Pic" width="596" height="207"><img id="tst" src="buttons/navbara.jpg" width="425" height="207" border="0" useMap="#MyMap" /><map name="MyMap" ><AREA SHAPE="rect" COORDS="2,125,78,164" href="index.html" alt="Home Page" title="Home Page" onmouseover="Swap('tst',1);" onmouseout="Swap('tst',0);" /><AREA SHAPE="rect" COORDS="81,119,142,158" href="gigs.htm" alt="Gigs" title="Gigs" onmouseover="Swap('tst',2);" onmouseout="Swap('tst',0);" /><AREA SHAPE="rect" COORDS="145,113,209,152" href="biog.htm" alt="Biography" title="Biography" onmouseover="Swap('tst',3);" onmouseout="Swap('tst',0);" /><AREA SHAPE="rect" COORDS="212,108,272,147" href="pics.htm" alt="Pictures" title="Pictures" onmouseover="Swap('tst',4);" onmouseout="Swap('tst',0);" /><AREA SHAPE="rect" COORDS="275,102,336,141" href="vids.htm" alt="Videos" title="Videos" onmouseover="Swap('tst',5);" onmouseout="Swap('tst',0);" /><AREA SHAPE="rect" COORDS="339,95,423,135" href="merch.htm" alt="Merchandise" title="Merchandise" onmouseover="Swap('tst',6);" onmouseout="Swap('tst',0);" /><AREA SHAPE="rect" COORDS="160,163,203,206" href="https://itunes.apple.com/gb/album/sentimental-anarchist/id282839339" alt="iTunes" title="iTunes" target="_blank" onmouseover="Swap('tst',7);" onmouseout="Swap('tst',0);" /><AREA SHAPE="rect" COORDS="204,159,247,202" href="http://www.facebook.com/meandmyguitar" alt="Facebook" title="Facebook" target="_blank" onmouseover="Swap('tst',8);" onmouseout="Swap('tst',0);" /><AREA SHAPE="rect" COORDS="248,155,292,198" href="http://www.myspace.com/jonoaudio" alt="Myspace" title="Myspace" target="_blank" onmouseover="Swap('tst',9);" onmouseout="Swap('tst',0);" /><AREA SHAPE="rect" COORDS="293,152,336,195" href="https://twitter.com/jonoaudio" alt="Twitter" title="Twitter" target="_blank" onmouseover="Swap('tst',10);" onmouseout="Swap('tst',0);" /><AREA SHAPE="rect" COORDS="337,148,380,191" href="//www.youtube.com/soularpowerrecords" alt="YouTube" title="YouTube" target="_blank" onmouseover="Swap('tst',11);" onmouseout="Swap('tst',0);" /><AREA SHAPE="rect" COORDS="381,144,424,187" href="MAILTO:list@meandmyguitar.com?subject=I%27m%20joining%20the%20mailing%20list" alt="Mailing List" title="Mailing List" target="_blank" onmouseover="Swap('tst',12);" onmouseout="Swap('tst',0);" /></MAP><img src="buttons/bmargin.jpg" width="19" height="207"></div>


Return to posts index

demetri tashieRe: HTML/CSS force images to same line
by on Dec 18, 2013 at 4:49:45 pm

Hi Nick,

This is done by CSS. the parent container ( in this case the div) is given a fixed width - at least equal to combined widths of the 3 images plus any extra elements, margins, etc)

there are quite a few things wrong with the given code that i suggest you examine and clean up. i always suggest to run your page through a HTML and CSS validator to start with:
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.meandmyguitar....
and
http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=ht...

some quick hints/tips:
- don't use align="center" inside tags. that is not used anymore. do that with CSS by setting the width of the element, and setting it's left and right margins to auto ( see attached example)
- img tags do not get closed ( your second one has a clsoing tag)

here's a simple example to illustrate:
6924_3images2.html.zip

hope that helps


Return to posts index

Nick SommersRe: HTML/CSS force images to same line
by on Dec 21, 2013 at 9:49:01 pm

Hi Demetri and thanks very much for your suggestions! I fixed some of the coding that your links identified.

I tried inserting your STYLE code into the header:

<style type="text/css">
div { width: 1044px; margin: 0 auto;}
p {font-family: Verdana, Arial, Helvetica, sans-serif;}
A:link {color: #3366CC; font-weight:bold; text-decoration: underline;}
A:visited {color: #3366CC; font-weight:bold; text-decoration: underline;}
A:active {color: #3366CC; font-weight:bold; text-decoration: none;}
A:hover {color: #FFFFFF; font-weight:bold; text-decoration: none;}
</style>


But it seems to throw my tables off below, and I can't figure it out... http://www.meandmyguitar.com/indey.html

:::scratches head in grateful confusion::: :D

Hoping for a bit more help to prevent these images from separating onto different lines...

<div><img src="buttons/btop.jpg" width="1040" height="30"><img src="buttons/b1home.jpg" alt="Jono Home Page Pic" width="596" height="207"><img id="tst" src="buttons/navbara.jpg" width="425" height="207" border="0" useMap="#MyMap" /><map name="MyMap" ><AREA SHAPE="rect" COORDS="2,125,78,164" href="index.html" alt="Home Page" title="Home Page" onmouseover="Swap('tst',1);" onmouseout="Swap('tst',0);" /><AREA SHAPE="rect" COORDS="81,119,142,158" href="gigs.htm" alt="Gigs" title="Gigs" onmouseover="Swap('tst',2);" onmouseout="Swap('tst',0);" /><AREA SHAPE="rect" COORDS="145,113,209,152" href="biog.htm" alt="Biography" title="Biography" onmouseover="Swap('tst',3);" onmouseout="Swap('tst',0);" /><AREA SHAPE="rect" COORDS="212,108,272,147" href="pics.htm" alt="Pictures" title="Pictures" onmouseover="Swap('tst',4);" onmouseout="Swap('tst',0);" /><AREA SHAPE="rect" COORDS="275,102,336,141" href="vids.htm" alt="Videos" title="Videos" onmouseover="Swap('tst',5);" onmouseout="Swap('tst',0);" /><AREA SHAPE="rect" COORDS="339,95,423,135" href="merch.htm" alt="Merchandise" title="Merchandise" onmouseover="Swap('tst',6);" onmouseout="Swap('tst',0);" /><AREA SHAPE="rect" COORDS="160,163,203,206" href="https://itunes.apple.com/gb/album/sentimental-anarchist/id282839339" alt="iTunes" title="iTunes" target="_blank" onmouseover="Swap('tst',7);" onmouseout="Swap('tst',0);" /><AREA SHAPE="rect" COORDS="204,159,247,202" href="http://www.facebook.com/meandmyguitar" alt="Facebook" title="Facebook" target="_blank" onmouseover="Swap('tst',8);" onmouseout="Swap('tst',0);" /><AREA SHAPE="rect" COORDS="248,155,292,198" href="http://www.myspace.com/jonoaudio" alt="Myspace" title="Myspace" target="_blank" onmouseover="Swap('tst',9);" onmouseout="Swap('tst',0);" /><AREA SHAPE="rect" COORDS="293,152,336,195" href="https://twitter.com/jonoaudio" alt="Twitter" title="Twitter" target="_blank" onmouseover="Swap('tst',10);" onmouseout="Swap('tst',0);" /><AREA SHAPE="rect" COORDS="337,148,380,191" href="//www.youtube.com/soularpowerrecords" alt="YouTube" title="YouTube" target="_blank" onmouseover="Swap('tst',11);" onmouseout="Swap('tst',0);" /><AREA SHAPE="rect" COORDS="381,144,424,187" href="MAILTO:list@meandmyguitar.com?subject=I%27m%20joining%20the%20mailing%20list" alt="Mailing List" title="Mailing List" target="_blank" onmouseover="Swap('tst',12);" onmouseout="Swap('tst',0);" /></MAP><img src="buttons/bmargin.jpg" width="19" height="207">

Thanks again to Dimitri and all my favourite cows!!
Original page - http://www.meandmyguitar.com/


Return to posts index


demetri tashieRe: HTML/CSS force images to same line
by on Dec 21, 2013 at 11:09:43 pm

that should work fine - for the simple example I sent along.

but by just saying 'div' in the styles, it is now telling EVERY div to be 1040px, which is probably not what you want done.

so give that div an id (for example id="threeImageDiv") and then in the head styles, you do this instead:

#threeImageDiv{ width: 1044px; margin: 0 auto;}



try that and see how it works for you. and remember, I just choose 1040 as I thought that would be right for those images. you might need to adjust that per your layout.

hope that helps

ps: tables? really ?


Return to posts index

Nick SommersRe: HTML/CSS force images to same line
by on Dec 22, 2013 at 5:18:00 pm
Last Edited By Nick Sommers on Dec 22, 2013 at 5:19:29 pm

Thanks so much Dimitri. After some further reading about giving an ID to a DIV and applying it correctly, I have managed to rectify the issue so that the front page appears correctly on a cell phone.

I now have at least some understanding of how these DIV commands actually work to control the layout of a webpage, and I can now go in to correct further alignment issues on some of the back pages using the same technique :o)

TABLES? REALLY? Yes haha cos I am self taught and I use Excel and then Photoshop to lay out my website templates. I am open to free and extensive tuition in how to build websites without using tables at all hahaha...

Seriously though, thanks very much indeed.
I get the whole DIV thing now!
All the best for the New Year


p.s. if you would like a complimentary CD sent for your assistance just email any of the addresses at the foot of the page of the website




Return to posts index

Nick SommersRe: HTML/CSS force images to same line
by on Dec 22, 2013 at 6:35:14 pm
Last Edited By Nick Sommers on Dec 22, 2013 at 6:37:04 pm

My Bad haha, ok I have just spent the last few hours since my post trying to adjust the back page http://www.meandmyguitar.com/biog.htm so that the cell with the main body of text stays at a fixed size across browsers. I have searched through a number of forums and websites to no avail.

Amongst other things, I tried:
.tdbiog { width: 968; align: justify; margin: 0 auto; overflow: hidden !important; }
and
<td width="968" align="left" valign="top"><div class='tdbiog'><font color="10315a" size="2" face="Verdana, Arial, Helvetica, sans-serif"><strong><em>
&quot;One of the finest singer/songwriters to emerge in recent years&quot;
- Jim Gellatly, John Peel Award Winner</em></strong><br>

...etc

If I can get help to sort out this page then I imagine I will be able to suss out the rest of them :o) The problem is, on my cell phone browser, the cell with the text comes up a lot narrower, so the text goes onto new lines very early, and therefore goes off the bottom of the page.

The width my cell phone browser allows for that text cell seems makes no mathematical sense - I cannot see what the given width is relating to or where it is taking instructions from. Any (hopefully final) tips??


Return to posts index

<< PREVIOUS   •   VIEW ALL   •   PRINT   •   NEXT >>
© 2017 CreativeCOW.net All Rights Reserved
[TOP]