Jump to content
hdaumier19

Problem with Photo Image Layout

Recommended Posts

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;
}

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now

×