image positioning/wrapping problem (prob easy but ive stared way too long at it..)

Hi all, I am aquiring a little problem considering the placement of images with this site. This isn’t really my code, although I added this images in. If you look at: Sanya China and taiwan Travel China Vacations – China Trip Hotels – Sifang Guesthouse Hotel

And also click the Itinerary hook, and see under heading Rooms you’ll ensure the images " spend time of" the grey boxes that are made to hold them. the grey background can be a style rule for that < p> tags (the text about the images) The border along at the top of every single content block being the superior of each < h4> label.

I have tried adding a < div> all over each block associated with content in firebug, with a grey background, for you to enclose the impression, however this doesn’t apparently work.

The images in addition become misaligned when they are too close to one another: Tailor Made Holidays to China and the Far East (under itineraries tab)

A url to what it’s supposed to look like is usually here: Tailor Made Vacations to China and the Far East

(this is merely fluke; because on the fact theres plenty of text to flow fully round the image, and enough space for that image not for being misaligned due for you to being too close to the last image)

Can anyone help show what the problem is: /

Gives thanks in advance

Hi -I’ve looked at it in each Firefox and IE — took me a minute to choose the ROOMS tab, but the pictures appear to be staying in your grey boxes all right – am I missing something

Gorgeous site, by began seeing –

Thankyou with the reply And yeah its lovely isnt it, not all my work by any means in the least I am simply adding bits at.

I do think i must are actually unclear – i’m sorry. This attached shows (outlined in red) the light grey container, where text can be, that I have the image for being wrapped in.

It is as you said surrounded by the dark grey sorta box but this is only because it has the the background/border from the actual image themselves.

The particular light grey field, as said earlier mentioned, is the background with the < p> tags close to the image.

The problem is because of the floats. Following a last image, decide to put this:

< div style=" obvious: both" > < /div>

That will " clear" this up.

thankyou so that you mean like that:

h4> Rooms< /h4>
< p> < a new title=" The wonderful hotel building on Huangshan mountain. " class=" lightbox" href=".. /images/behai-hotel-1. jpg" > < img alt=" Behai Hotel, Tunxi, China" src=".. /images/behai-hotel-1s. jpg" > < /a> < a new title=" The suites offer stunning opinions. " class=" lightbox" href=".. /images/behai-hotel-2. jpg" > < img src=".. /images/behai-hotel-2s. jpg" alt=" Behai Hotel, Tunxi, China" > < div style=" obvious: both; " > < /div> 

Thats my own code, and this makes the text drop below the actual image, like attached — I guess my business is doing this erroneous

I would get it done like this – place the new div right before the next H4, and set the properties within the CSS

< div id=" itinerary" style=" showcase: block; " >
< p id=" more-detail" > For much more details about this kind of hotel please post us
an electronic mail < a href=" mailto: infosanyachinatravel. com" > infosanyachinatravel. com< /a> < br>
or phone us upon < strong> 01256 863030< /strong> < /p>
< h4> Rooms< /h4>
< p> < a new href=".. /images/sifang-guesthouse-hotel-1. jpg" class=" lightbox" title=" Sifang Guesthouse Hotel building. " > < img src=".. /images/sifang-guesthouse-hotel-1s. jpg" alt=" Sifang Guesthouse Hotel, Shangli Old Community, Yaan, Sichuan, China" > < /a> < a new href=".. /images/sifang-guesthouse-hotel-2. jpg" class=" lightbox" title=" A traditionally decorated room with the hotel. " > < img src=".. /images/sifang-guesthouse-hotel-2s. jpg" alt=" Sifang Guesthouse Hotel, Shangli Old Community, Ya'an, Sichuan, China" > < /a> The particular rooms are very simple, spacious and exotic, and offer the tranquil rural watch over Shangli Old Town utilizing balconies. < /p>
COLOR=Red< div class=" clearboth" > < /div> /COLOR
< h4> Facilities< /h4> 

And then the particular CSS class can be

. clearboth obvious: both;

I can’t produce new class in firebug or I’d try it at this time there, but I know this kind of works for me in several sites I have done, and keeps from needing to use inline kinds.

Yeah, just put it following a text. As Alpha pronounces, you can produce a class for this, too. There probably already is one in your template, in truth (it’s pretty common).

The challenge you’re having is browsers don’t make floated elements for instance inline elements. It is a common misunderstanding associated with how float performs. Wrapper elements really don’t recognize the levels of floated things, so you get the problem you have above.

Obvious: both tells the particular browser to reposition the actual rendering line listed below all elements taken thus far. When you do that into the wrapper, it lets it to place embedded floated features correctly.

Another fix is to use " showcase: inline" instead regarding " float: left" to complete a grid showcase. This isn’t as effortless to do, though, because you lose some important CSS sizing/positioning ability on inline features.

Hi — apologies I didnt reply sooner to the I got simply no notifcation of reply!! Thanks for the exact help, but unfortunately it does not seem to perform. I have up to date the page: Sanya China and taiwan Travel China Vacations – China Trip Hotels – Sifang Guesthouse Hotel

With this particular code:

(I’ve placed the div prior to the Facilities < h4> ) and also added the fashion rule to our stylesheet:

But nothing has happened: / Are I doing one thing really wrong

The sole other thing Allow me to think of is usually to place a div around almost every section of this text (each section marked by just a < h4> with the top.. ) (I would put the style rules just for this div into t

This entry was posted in Web Design and tagged , , , , , , , , , , , , , , , , , , , . Bookmark the permalink.

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *