 HTML Alignment, Alignment not consistent on all machines... |
  |
| tangmere.milli |
 Oct 6 2016, 06:37 AM
Post
#1
|
|
Group: Members Posts: 5 Joined: 4-October 16 Member No.: 24,869  |
Hi all,
Again, apologies for this but i am such a novice when it comes to HTML etc. Can someone please review this code and tell me why it all aligns as expected on my machine on multiple browsers (Edge, Firefox, Chrome), but as soon as i look at it on any other machine, the alignment is out? CODE <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>NewChocolateBox</title> <style> body { background-color: #000000; text-align:center; } </style> </head> <body text="white"> <p style="font-family:agency fb; font-size: 86px; position:absolute; top:165px;left:539px;"> <marquee> Welcome to The Chocolate Box! </marquee></p> <p style="font-family:agency fb; font-size: 24px; position:absolute; top:330px;left:539px;">Here you will find anything from individual chocolates to variety boxes and gifts packs. <br> Please use the tabs above to find out more about our products, learn about the company, contact us with any <br> enquiries or purchase our delicious chocolates! </p> <a href="ChocBoxHome.htm"><center><img src="ChocolateBoxLogo.jpg" alt="CBLogo" style="width:850px;height:180px;"></center></a> <a href="Products.htm"><img style= "position:absolute; top:185px;left:537px;width:210px;height:50px" src="ProductsTab.jpg" alt="CBProducts"></a> <a href="Shop.htm"><img style= "position:absolute; top:185px;left:749px;width:210px;height:50px" src="ShopTab.jpg" alt="CBShop"></a> <a href="AboutUs.htm"><img style= "position:absolute; top:185px;left:960px;width:210px;height:50px" src="AboutUs.jpg" alt="CBAboutUs"></a> <a href="ContactUs.htm"><img style= "position:absolute; top:185px;left:1171px;width:210px;height:50px" src="ContactUs.jpg" alt="CBContactUs"></a> <img style = "position:absolute; top:450px;left:539px;width:843px;height:450px" src="ChocolateHome.jpg" alt="CBChocHome"> </body> <footer> <p style="font-family:agency fb; font-size: 18px; position:absolute; top:900px;left:539px;">Copyright © 2016 The Chocolate Box </p> <p style="font-family:agency fb; font-size: 18px; position:absolute; top:900px;left:1216px;">Designed by TM </p> </footer> </html> The main logo ("ChocolateBoxLogo.jpg" ) is always ok, but everything else seems to be a couple of inches right of where it is on my machine. Any thoughts? Many thanks in advance, TM. |
  |
 
|
| pandy |
Oct 6 2016, 07:18 AM
Post
#2
|
|
🌟Computer says no🌟  Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
It's because of different screen resolution and thus different window sizes. You use absolute positioning. If you say nn pixels from the left, there's where the box will be, no matter the size of the window.
You want things centered. Ditch the absolute positioning and just center things. http://www.w3.org/Style/Examples/007/center.html Don't use AP when it isn't needed. It's really good to have when you need it, but for a simple design like this (I mean that in a good way) it isn't needed. For most pages it's best to leave things be as much as possible. And before you use AP you should be comfortable with it, pretty sure about what it does, or things like this and worse will happen. Save it for later. Let's say it's for the advanced class.  |
|
|
|
| tangmere.milli |
Oct 6 2016, 08:02 AM
Post
#3
|
|
Group: Members Posts: 5 Joined: 4-October 16 Member No.: 24,869 |
Thanks for the quick response pandy.
I am struggling to understand exactly what I do need to do instead though. If i simply center each image, they just go below each other instead or positioning correctly on the screen, even though the 'top:185' is set. Please excuse my stupidity, I have just been staring at this codes for weeks and struggling to complete it successfully. Regards, TM. |
|
|
|
| pandy |
Oct 6 2016, 10:00 AM
Post
#4
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
That's alright. We've all been there. It's hard to explain since things can be done so many ways. I think I'll just show you an example.
First some general things. Avoid presentational HTML attributes and elements. CENTER for instance. We use CSS for things like that now. You use the HTML5 doctype. As written the page won't validate either as HTML5 or HTML 4.01 Strict. You can use the presentational HTML stuff then. If you want to keep using them (I removed them below), switch to HTML 4.01 Transitional. Because you do want to use a validator. It finds errors and mistakes and is the best teacher ever, even if a little hard to understand at first. But it grows on you. It's good you use the alt attribute. But the text replaces the image if it can't be shown. It will actually be printed out on the page, or the text will be read aloud to someone using a screen reader. So think up text that works instead of the image. For example as alt text for your logo your company name may be better than "CBLogo". Avoid the style attribute. It's much easier to make changes if you have everything in one place. If several elements should have the same styling rather give them a class so you can put a CSS rule in your style sheet. Your footer was after </body>. </body></html> always comes absolutely last. One exception from the no presentational attributes rule is width and height for images. The browser draws the page nicer if you use them. It reserves space for the images before they load, so the page doesn't reflow when the images come in. It's most noticeable if the page is large, the images are heavy and/or you are on a slow connection, but nevertheless it's a good rule to follow. MARQUEE is sort of a no-no. It's non standard. The page won't validate with it. But it's no big harm either. If you want it, keep it for now and accept the error. OK, here's one way to do it. The CSS could be shorter, but I tried to stick to basic selectors so you can follow. I take the HTML first. Basically place things in the order you want them to appear on the page. Oh, I changed your images to one I could see, so you need to put yours in again. HTML <div id="header"> <a href="ChocBoxHome.htm"><img src="1.gif" width="850" height="180" alt="CBLogo"></a> <div id="nav"> <a href="Products.htm"><img src="1.gif" width="210" height="50px" alt="CBProducts" class="first"></a> <a href="Shop.htm"><img src="1.gif" width="210" height="50px" alt="CBShop"></a> <a href="AboutUs.htm"><img src="1.gif" width="210" height="50px" alt="CBAboutUs"></a> <a href="ContactUs.htm"><img src="1.gif" width="210" height="50px" alt="CBContactUs"></a> </div> </div> <p><marquee>Welcome to The Chocolate Box!</marquee></p> <p class="blurb">Here you will find anything from individual chocolates to variety boxes and gifts packs.<br> Please use the tabs above to find out more about our products, learn about the company, contact us with any<br> enquiries or purchase our delicious chocolates!</p> <img src="1.gif" width="843" height="450" alt="CBChocHome"> <footer> <p>Copyright © 2016 The Chocolate Box</p> <p>Designed by TM</p> </footer> The biggest change is that I grouped the images at the top together in a couple of DIVs so they can be handled as a group rather than individual items, for example for the centering. The CSS. CODE body { background-color: #000; color: #fff; font-family: "agency fb", sans-serif; text-align: center } #header { width: 850px; margin-left: auto; margin-right: auto } #header img { float: left } #nav img { margin-left: 3.33px } #nav .first { margin: 0 } footer { font-size: 18px } marquee { font-size: 86px } .blurb { font-size: 24px } The body rule: If things are common for all of the page or most of it, put it here rather than repeating them again and again. #header rule: By grouping all the images in a container and make it as wide as the top image, we limit the total width of the smaller images. And we can center the whole lot by giving the container equal left and right margins (read the page I linked to before). #header img rule: This is a contextual selector AKA descendant selector. It matches any image that's inside another element with the id 'header'. http://htmlhelp.com/reference/css/structure.html To float the images is a trick to avoid gaps that can otherwise occur between images next to each other like this. There are other ways, but this fitted the situation. #nav img rule: This matches the small images only. I gathered you wanted them spread out so I I gave them a little margin (width of large image minus total width of small images divided with 3). Note that using decimals for pixel values can result in rounding errors, but usually it sort of adds up. #nav .first rule: This is to remove the left margin on the leftmost image since we want it to line up with the top image and with it left the total width of the small images and their margins would be 3.33px larger than the box they are in. As you can see in the HTML I've given that IMG the class 'first'. I probably didn't manage to expain very well, so if you don't understand something, just ask.  |
|
|
|
| tangmere.milli |
Oct 7 2016, 03:31 AM
Post
#5
|
|
Group: Members Posts: 5 Joined: 4-October 16 Member No.: 24,869 |
Pandy.... this is absolute fantastic!
Thank you so much for going into so much detail. It actually makes a great deal of sense to me now. Thank you, thank you, THANK YOU!!! |
|
|
|
| pandy |
Oct 7 2016, 04:47 AM
Post
#6
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
You are welcome. Glad if it helped.
 I made a mistake though. Or half a mistake anyway. If you keep the HTML5 doctype it's OK, but if you go for HTML 4.01 Strict you must have a DIV or something around the last large image. In strict inline elements can't be loose on the page, they must be in a block level element. I think that makes sense. Don't know why HTML5 changed that. You can read about block and inline elements here http://htmlhelp.com/reference/html40/block.html . And the w3c validators are here http://validator.w3.org/ for HTML and here https://jigsaw.w3.or/css-validator/ for CSS. A link to the WDG HTML validator is at top and bottom of all pages here. I prefer this one, and not because I'm biased, but alas it doesn't handle HTML5. Another thing I forgot to mention. If you want things spaced out differently it's just a matter of adding a little margin where it's needed. For instance, if you want the CBChocHome image a bit lower you either give it a top margin or you give .blurb a bottom margin. |
|
|
|
| pandy |
Oct 8 2016, 01:37 PM
Post
#7
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
And yet another thing. Always use a generic font family, in this case sans-serif. The use may not have the font you want installed, so you need a fallback. I didn't have it. I think I got Times New Roman. Also, if the font name have spaces in it, quote it.
There. I'm done. I think. |
|
|
|
|
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 19th April 2024 - 06:30 PM |
Invision Power Board
© 2024 IPS, Inc.
Licensed to: HTMLHelp.com, LLC