hdaumier19 Posted August 13, 2017 Share Posted August 13, 2017 I am trying to design my own mockup website based on one of the W3 templates; however, I could not get the photo images to lay out on my website the same way as the W3 template. Here is the W3 template that I was talking about: https://www.w3schools.com/w3css/tryw3css_templates_photo2.htm. And here is the following codes that I came up with for my website. Any feedback will help. HTML <!doctype html> <html> <head> <title>Amy Perrales | Photographer</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css"> <link href="https://fonts.googleapis.com/css?family=Slabo+27px" rel="stylesheet"> <link rel="stylesheet" href="css/font-awesome.min.css"> <!-- !PAGE CONTENT! --> <div class="photography" style="max-width:1500px"> <!-- Header --> <header class="panel" style="padding:128px; 16px;"> <h1 class="ap-xlarge">PHOTOGRAPHER</h1> <h1>Amy Perrales</h1> </head> <body> <div> <id class="introduction"> <a href="Home" style="text-decoration: none;">Home</a> <a href="Portfolio" style="text-decoration: none;">Portfolio</a> <a href="About Amy" style="text-decoration: none;">About Amy</a> <a href="Contact" style="text-decoration: none;">Contact</a> </div> </header> <!-- Photo Grid --> <div class="half-width"> <img src="img/amusement_park.jpg" alt="amusement park" style="width: 599px; height: 424px;"> <img src="img/dock-1365387_640.jpg" alt="dock" style="width:550px; height:633px;"> <img src="img/kaboompics_Black baby chicks.jpg" alt="baby chicks" style="width: 342px; height:513px;"> <img src="img/sunset-114557_640.jpg" alt="sunset" style="width: 275px; height: 550px;"> <img src="img/wedding_couple.jpg" alt="wedding couple" style="width:550px; height:412px;"> </div> <div class="full-width"> <img src="img/ballet-437990_640.jpg" alt="ballet dancer" style="width:424px; height="640px;"> <img src="img/baseball.jpg" alt="baseball player" style="width:424px; height="640px;"> <img src="img/dancer-2471026_640.jpg" alt="dancer" style="width:424px; height="640px;"> <img src="img/pool.jpg" alt="children and pool" style="width:424px; height="640px;"> </div> <!-- Footer --> <footer> <i class="fa fa-facebook-square" style="font-size:36px;"></i> <i class="fa fa-twitter-square" style="font-size:36px;"></i> <i class="fa fa-instagram" style="font-size:36px;"></i> <i class="fa fa-pinterest" style="font-size:36px;"></i> <i class="fa fa-linkedin" style="font-size:36px;"></i> </footer> </style> </body> </html> CSS /* ========================================================================== Base Styles ========================================================================== */ body,h1 { font-family: 'Slabo 45px', serif; text-align: center; letter-spacing: 6px; color: #9aa6b1; } a { color: #a9b3bc; border: 3px solid #fba69d; padding: 8px; margin-left: 3px; margin-right: 5px; } img { margin-bottom: 128px; width: 100%; height: auto; } Link to comment Share on other sites More sharing options...
dsonesuk Posted August 13, 2017 Share Posted August 13, 2017 All the code you don't want seen on page like title,link, style elements are placed between <head> and </head>. You have misplaced closing </style> without opening <style> (which should be in <head>...</head>) All html code that makes up the page like header, h1, div, a elements etc are placed between <body> and </body>, fix this, if problem still remains, then come back. Link to comment Share on other sites More sharing options...
smithers Posted November 7, 2018 Share Posted November 7, 2018 On 8/14/2017 at 9:32 AM, dsonesuk said: All the code you don't want seen on page like title,link, style elements are placed between <head> and </head>. You have misplaced closing </style> without opening <style> (which should be in <head>...</head>) All html code that makes up the page like header, h1, div, a elements etc are placed between <body> and </body>, fix this, if problem still remains, then come back. Hi @dsonesuk I have a similar issue; the coding works perfectly in the W3 tutorial, but when I add this code to my website, it doesn't seem to talk to the back end of my Shopify set up? If I copy+paste the code and publish to my website, it spits the code back at me, however, if simply copy+paste everything from <!Photo-Grid> onwards, the photos appear! ... but not in the grid/tiled effect that I was hoping for. Here is what it currently looks like https://smithers.store/pages/gallery but this is what I want it to look like https://www.w3schools.com/w3css/tryw3css_templates_photo2.htm Have I missed something? Also, I know this is a slightly different topic, but any idea as to why some of my images are razor sharp, whilst others are blurry? The file sizes are all much the same. Any help and guidance you could provide would be very much appreciated! Kind regards, Jake Link to comment Share on other sites More sharing options...
dsonesuk Posted November 7, 2018 Share Posted November 7, 2018 That example uses w3css? yours uses bootstrap, if you don't have link to w3.css and classes that w3css uses to style that layout it will never work. Link to comment Share on other sites More sharing options...
smithers Posted November 8, 2018 Share Posted November 8, 2018 Thanks @dsonesuk ! I don't know the difference between w3css and bootstrap. Is there a way around this? Are you saying if I link all the w3css code into the backend of my website and somehow convert it to bootstrap format it will work? Link to comment Share on other sites More sharing options...
dsonesuk Posted November 8, 2018 Share Posted November 8, 2018 Looking at it again! You don't have bootstrap.css but do have class names associated with it? Class names are with the w3css example 'w3-half' as used with <div class="w3-half"> <img src="/w3images/underwater.jpg" style="width:100%"> <img src="/w3images/ocean.jpg" style="width:100%"> <img src="/w3images/wedding.jpg" style="width:100%"> <img src="/w3images/mountainskies.jpg" style="width:100%"> <img src="/w3images/rocks.jpg" style="width:100%"> <img src="/w3images/underwater.jpg" style="width:100%"> </div> Just pasting this into your page, won't do anything! As specific styling does not exist that is associated with that class name, that is why you require the w3.css file <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> This will contain styling properties such as .w3-row-padding, .w3-row-padding > .w3-half, .w3-row-padding > .w3-third, .w3-row-padding > .w3-twothird, .w3-row-padding > .w3-threequarter, .w3-row-padding > .w3-quarter, .w3-row-padding > .w3-col { padding: 0 8px; } .w3-col.m6, .w3-half { width: 50%; } .w3-col, .w3-half, .w3-third, .w3-twothird, .w3-threequarter, .w3-quarter { float: left; width: 100%; } To style the element using this class name correctly creating a container column of 50% width, with images, you then create a second column of images to sit beside it. Note: You have to be aware using w3css may also cause conflict with some of your present css used. Link to comment Share on other sites More sharing options...
smithers Posted November 8, 2018 Share Posted November 8, 2018 Thank you so, so much! I really appreciate it. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now