Good I’ll try it next time
1 Like
This is the URL that I used:
http://pintotours.net/Americas/DomRepublic/test3.html
I mentioned that you could add a div around the button image to show some white space at the ends at narrow widths. I rather absent-mindedly forgot that one needs that box around the image anyway if it is to respond to changes in the width of the parent container.
Please add a box around the button image and move the classname to the box.
<div class="booknow">
<img alt="Melia Guarantee" width="304" height="82" src="http://pintotours.net/Pinto/Logos/MeliaGuarantee.jpg">
</div>
Then delete the previous .booknow CSS associated with the image and add the following:
.booknow {
max-width:308px;
padding:0 12px; /* Minimum white space beside button. Add more or less horizontal padding, as desired */
margin:0 auto;
}
.booknow img {
width:100%;
height:auto;
}
#content #box4 .booknow img {
margin:0;
}
Give this a try and let me know how it works.
1 Like
Great!!!
PCs = OK
IE8 = OK
Tablet = OK
Mobile = OK
The only very small things in the mobile is that there slight lateral movement. If I place my finger on the img in #box1 and move it to either side, the header with clock moves, even if the #box1 stays put!
The other little thing is that the map has more margin on the left than on the right where it is flush with the side,
these are not serious problems and I am going ahead publishing the 3 completed pages, and getting on with the next 100 odd in the queue!
Many, many thanks
Excellent, that you for the quick feedback.
Back to the map box now.
The current test page already had code on it, some of which used to exist on the Kyoto page, too, but was deleted because it interfered with the map box or was otherwise not needed.
When you copied the “clean” code from the Kyoto page it was added to the “dirty” code on the current page. You did not delete the “dirty” code first. It’s that simple and that complicated.
I am referring to my code on the current page as band-aid code because it has to work around or in spite of the “dirty” code. I would like for you to clean out the “dirty” code from the current page and all future pages. If it were not for the preexisting “dirty” code, the Kyoto code would work beautifully.
I have prepared some screen shots of Firebug that will show the difference.
The map container consists of 4 objects:
<div class="map">
<a href="MapKyoto.html" target="_blank">
<div class="img-container">
<img width="300" height="165" src="images/MapKyoto.jpg" alt="">
The code for the outer div “map”, the anchor, and the div .img-container is the same on both pages; HOWEVER, the code for the img is very different. You will see in the Firebug screen shots.
On the left side of each panel is the HTML, the CSS is on the right side
The HTML and CSS are the same for the outer 3 containers, but the CSS for the img is different (which is why certain pieces of it were deleted from the Kyoto page).
I suggest that you download both images so you can look at them in your browser or graphics program side-by-side or switch between them in browser tabs.
The first screenshot is of each of the 4 ojects making up the map box in the Kyoto page:
If the CSS in the bottom file looked like the CSS in the Kyoto file, there wouln’t be any problems, but it doesn’t, does it. Do you see those selectors with the double IDs, one of which is uselessly in a media query. The point is that unnecessary or poorly targeted CSS is a handicap to writing a complex page (or site!)
I hope this is meaningful to you.
Hi
Your Firebug shots were taken in dense fog… There’s nothing there!
I hope you are now talking about the TEST2/NEW.css which I am going to rename and take across to be the standard for the next 100 pages.
The earlier test pages are going to be discarded, and there’s no point in cleaning them. Thre will be a hotelSet.css and a hotelUno.css, the latter for the odd hotels that do not belong to a full page, yet (i.e. Japanese)
if there is something obvious in the NEW.css, please let me know.
there is in fact a strange #ttnimage which I believe is no longer needed as there is nothing in the css to go with it.
<div class="booknow">
<img src="/Pinto/Logos/MeliaGuarantee.jpg" alt="Melia Guarantee" width="304" height="82">
</div>
<div class="ad1">
Click on the images to enter the hotel's own website. </div>
<img id="ttnimage" src="/Pinto/Logos/ParadisusLogo.jpg" width="140" height="93" alt="Paradisus Palma Real" />
</a>
</div>
Hi ronpat
It’s never too late to learn…
The screenshots you sent me are vey hard to read even with a magnifying glas.
I have just downloaded Firebug. What’s the next step to see what you are trying to show me?
I assume I open the html page and then what?
Click the images twice or download the images. They are quite large.
I have them on the Desktop but if you try to magnify the letter become so fuzzy that I can’t read them
Now I presed something and can see it quite well…
I opened the test3.html in FF and used Firebug. I thought that it was going to highlight bad code but all looks the same
I chose the HTML tab but underneath (the next line) you ahve lots of choices starting with “Edit”. I only ahve Edit, Body, and HTML
Am I missing something?
As for what you sent me how do I read it? Is it the blue areas that need sorting out?
This of this as “show and tell”.
Open a web page. Open Firebug.
On the left side one selects a tag, on the right side Firebug shows the CSS that affects that tag.
So the highlighted blue tag on the left is using the CSS on the right; or more correctly, the CSS on the right is targeting the HTML on the left.
There is one screenshot of each tag from each of the two pages. Each image is a composite of 4 tags or 4 screen shots of Firebug. These screen shots are side-by-side comparable.
EDIT:
Firebug does not tell you if the code is good or bad. It is just a tool with which to see and manupulate the styles. That is one of the tools that some of us use to troubleshoot web pages. One must have a working knowledge of HTML and CSS to get the most out of it.
On the right there is nothing if you choose Style, like apparently you did.
Anyway, leave it. I am getting a bit tired and need to rest the grey cells for a bit.
many thnanks
I did!
Anyway. I’ve printed what ronpat sent me and will look at it when I recover from all the recoding!
That looks OK - there are no styles associated with the <html> tag.
What happens if you click on a different tag in the left-hand pane?
1 Like
Ok, if i click on a line and it becomes blue, sometimes there is code on the right,
is that good or bad…?
Hee is somthing interesting
what does the strike-through line on the right mean?
That’s good.
You click a tag on the left, it highlights in blue to show which tag is selected, and the styles (if any) associated with that tag show up in the right-hand pane.
Strikethrough means that that particular style is being over-ridden by something else and not applied.
1 Like
…and should be deleted?
Not necessarily. The style may apply to other elements on the page.
For example, you have a style for <p>, but in a particular instance, you give the <p> a class and over-ride the usual styles. You don’t want to delete them, because you still want them to apply to your other paragraphs.
On the other hand, if you’re trying to style something and it isn’t working, seeing the strike-through like that shows that your styling is being over-ridden, and you can set to and hunt down the issue.
1 Like
Well, I learnt something today!
Thanks
1 Like
Here I was blissfully setting up a couple of Firebug screenshots and you guys were hard at work
I’ll toss them in anyway, of course.
The first are the three steps to target a box using Firebug.
And the second is an example of what one might see while hovering over one of the tags… in this case, the <div id="logoimg"> tag, The medium blue is the box, purple is padding, yellow is margin. I also clicked the tag so I could see the CSS in the right panel.
2 Likes
Which you can promptly apply to the screenshots of the code affecting the mapbox on the new page that I sent earlier.