I just completed (for now) the ‘Best Macross Restaurants‘ page on my South Ataria Island website, I based the design on this LA Eater website. This was a task that has taken me about a week to do as I turned a simple layout into something far more complicated. Below I’ll share some of the features and challenges I had with coding this page.
Background Image Swap
The LA Eater used Google Maps, instead I used an extremely large background cover image for this page (2000px wide). There is no need to download such a large image if you are viewing the website on a small screen like your phone. I used a media query for when the screen’s width was below 500px to replace the large background image with asmaller one that was only 500px wide. Unfortunately there wasn’t much of a difference in the file size so that is something I’ll surely want to revisit later.
Position Absolute
With all my work learning how to build a drop down menu I’ve become a bit more comfortable understanding and using the ‘position: absolute’ property. I wanted a block of text on top of the main restaurant photo to inform the user they could ‘view more’ restaurant photos. I used the ‘position: absolute’ property to position a div on top of the restaurant photo in the upper left hand corner. This isn’t really complex, but it was my first time using this property like this.
Here is the code for how it works:
CSS:
.container {position: relative;}
.view {background-color: pink; color: white; position: absolute;}
HTML:
<div class=”container”>
<div class=”view”>view more</div>
<img src=”restaurant picture.jpg”>
</div>
I didn’t need to add any more for the positioning of the absolute div since it’s natural position is ‘top:0’ and ‘left:0’ (the upper left hand corner). If I wanted to position it somewhere else I could have changed those properties. Also, remember when you are placing a div with a ‘position: absolute’ inside a parent div, that parent div must have ‘position: relative’ in order for things to work properly. Read more about that principle here.
::Before & ::After
The ‘::before’ and ‘::after’ properties are not really hard to understand, but again those were features I had never used before. I wanted to do something a little extra for the menu buttons for ‘Directions’, ‘Website’ and ‘Reservations’ beyond just a color change via ‘:hover.’ I added a ‘<‘ before and a ‘>’ after on the text in the menu options. Below is the basic code:
CSS:
.button {text-align: center; color: white; font-family: arial; padding: 4px 0 4px 0; background-color: #BBA89D; text-decoration: none;}
.button:hover::after {content: “>”; background-color: #6d6d6d; }
.button:hover::before {content: “<“; background-color: #6d6d6d; }
HTML:
<a href=”#” class=”button”>Directions</a>
Hopefully you can follow the above code. Basically it is just saying when the mouse pointer hovers over the ‘class’ change the background color and add a ‘<‘ before and a ‘>’ after via ‘content:’. Very simple.
One small thing, because the menu buttons were set in a row with their width’s set at a percentage, on really small screens that didn’t provide a great deal of real estate for the text. Plus adding two new characters (<,>) didn’t help with the situation. I had to use media queries to reduce the button’s text size when the screen was below 500px in width. That way I could ensure all the text fit inside the allotted space without out any line breaks or anything else unexpected happening to the layout.
Hover Over Image Gallery
I added an image gallery to each restaurant listing, the gallery is hidden until the user ‘hovers over’ the main restaurant image with the mouse pointer. Once they hover over it a gallery of three pictures appear on top of the main image. I wouldn’t have been able to build this feature just 3 or 4 days ago – I needed a lot of the knowledge I gained from learning how to code a drop down menu.
I used the same principles of the drop down menu: A) when the mouse pointer hovers over element XYZ, B) that action triggers a ‘shell space’ to display (the default is that its hidden) and then C) put some content in that shell space. Let me provide a bit more detail for how I achieved this:
- A) I placed the main restaurant picture inside a div with ‘position: relative.’ This div would be hover trigger.
- B) I coded a shell space with a set height, set width, white background color as well as ‘position: absolute.’ This is basically a white space positioned on top of the main restaurant photo. This white space is set to ‘display: none‘ by default, a therefore is hidden. Only when the mouse pointer hovers over the image does it trigger the white space to be displayed.
- C) Within the white space I inserted the three additional restaurant photos. I added various properties like padding and borders to improve the presentation. This portion was tricky, I tried a number of things including a flex box, centering the images, etc. I spent hours on this (far too much time), but I don’t want to bore anyone with every little oddball detail. In the end I had to use media queries because I needed to reduce the image sizes for smaller screens. I tried a number of other methods to try to avoid using media queries (percentages and calc), but none of them really worked for a variety or reasons.
One major thing missing is the navigation menu. I’m still learning how to build one, but hopefully I’ll be able to make that addition soon. The only other thing worth mentioning about this page is that the layout, although simple, was still a bit tricky. I came across a few issues when it came to viewing it on small screens – a few overlooked margins/padding values I didn’t account for in my width calculations. When resizing your browser window and a horizontal scroll bar appears in one of your website’s divs you know you’ve made a mistake somewhere. In the end to remedy it all I needed was a sheet of paper, a pen and a close examination of the code.
I don’t know if this page will be the final version but I like the look of it so far, hopefully I’ll like it just as much over time. At least I was able to put some of my newly learned CSS skills to good use.