CSS Layout & Background Image

Projects Personal Projects
1

Hello,

I was starting to work on a simple landing page for a B&B.

I have had 2 main issues in terms of styling :

  • i dont know how to automatically center 2 inline blocks H4
  • i dont know how to change the text inside the anchor element, neither the colour
  • i dont know why when i use a background image it becomes multiple images to cover the space of the box

i am pasting here the code :

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Calamurn B&B Ortigia</title>
        <link rel="stylesheet" href="./resources/css/style.css">
    </head>
    <body>
    <div class="nav">
        <h1>Calamùrn Ortigia</h1>
        <img class="logo" src="./resources/images/Logo.png" alt="Calamurn Logo">
    </div>   
    <div class="book">
        <h4><a href="booking link">BOOK ON BOOKING</a> </h4>
        <h4><a href="airbnb link">BOOK ON AIRBNB</a> </h4>
    </div>   
    </body>
</html>


h1{
    text-align: center;
    font-family: cursive;
    padding: 30px 0;
}

.nav{
    background-color: #f2e6d9;
    border: 5px solid white;
}

.logo{
    margin: auto;
    display: block;
    width: 180px;
    height: 180px;
    padding: 30px 0;
}

h4{
    color: black;
    background-color: white;
    display: inline-block;
    border: 5px solid black;
    margin: 50px;
    padding: 50px;
    position:  relative;
    left: 350px;
}

div.book{
    background-image: url(https://p.bookcdn.com/data/Photos/320x200/11818/1181880/1181880142/Calamurn-Ortigia-photos-Exterior-Calam-rn-Ortigia.JPEG);
}
2

For the anchor color, try using

a {
color: (insert your color of choice);
},

in the stylesheet.

3

For starters don’t use H4 or any heading element for how it appears or behaves, and from a semantic pov never use it to wrap links. Use an unordered list, instead.

<ul class="book">
  <li><a href="#">Book on Booking</a></li>
  <li><a href="#">Book on AirBnB</a></li>
</ul>

Clear the default styles from the UL so you can declare your own…

ul {
  list-style: none;
  list-style-type: none;
  width: 10em;
  margin: 0 auto;
  padding: 0;
}

The width above is arbitrarily chosen. The links will be inline, and all the buttons should be the same width. If there are two buttons, their width can be set to half the UL width, or slightly less. The UL will be centered horizontally owing to the automatic R/L margin.

.book li {
  display: inline-block;  /* note that inline blocks have 2px between when rendered */
  box-sizing: content-box;
  width: 50%;
  line-height: 2em;  /* vertical center */
  text-align: center;
}

The default behavior of CSS bg images is ‘tile’, which explains what you see. Look up ‘background-size’ and ‘object-fit’ properties to review the options. If you only want a single image to fit, use the cover value.

As mentioned above, any selector rules that apply to links can be written into an anchor rule. Use American spelling, 'color'.

Given that the text is in the link, not the LI, we can remove the ‘line-height’ property from the LI rule and write it into the anchor rule.

a {
  display: block;
  text-align: center;
  line-height: 2em;
  color: blue;
}

The LI will take the height that the anchor stretches it to. Block elements take up the full width of their parent.

While you still have a simple layout, play around with the CSS and check it in all widths from narrowest to widest.