HTML/CSS force images to same line
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)
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:
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:
hope that helps
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:
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...
Thanks again to Dimitri and all my favourite cows!!
Original page - http://www.meandmyguitar.com/
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:
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 ?
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
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:
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??