Here's a screenshot of how it looks like How do I align these icons to the h2? I want them on the left of those h2, and I would also like to increase their size. Of course, if possible, without destroying the layout I've built.
I tried using float right but I am really struggling in having them looking properly on the left of my H2.
Please help!
* {
margin: 0;
padding: 0;
font-family: "Roboto", sans-serif;
}
#main-content {
background-color: #000000;
background-image: linear-gradient(147deg, #000000 0%, #04619f 74%);
color: white;
padding: 2%;
}
#header-content h1 {
font-size: 70px;
font-weight: 500;
}
#header-content p {
font-size: 20px;
font-weight: 500;
opacity: 0.8;
}
#content-icons {
opacity: 0.8;
display: inline;
}
#content-icons i {
float: left;
font-size: 30px;
line-height: 20px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>
<div class="row align-items-center" id="main-content">
<div class="col fade-in" id="header-content">
<h1>UK Bridging Loans</h1>
<p>Your Bridging Finance Partner</p>
</div>
<div class="col float-right" id="content-icons">
<ul class="fa-ul">
<li>
<span class="fa-li"><i class="far fa-building"></i></span>
<h2>Commercial Bridging Loans</h2>
<p>
Find out more about our commercial bridging loans to fund your
project here.
</p>
</li>
<li>
<span class="fa-li"><i class="fas fa-store-alt"></i></span>
<h2>Secured Bridging Loans</h2>
<p>
Secured bridging loans are the most popular form, securing the
loan against an existing property brings better interest rates and
more interest from lenders. Find out more here.
</p>
</li>
<li>
<span class="fa-li"><i class="fas fa-warehouse"></i></span>
<h2>Unsecured Bridging Loans</h2>
<p>
Unsecured bridging loans are harder to get hold of as banks
normally insist on securing your loan against a property/asset of
some kind. However, we are approved to offer this option to
customers. Find out more here.
</p>
</li>
</ul>
</div>
</div>
I would suggest using a flex box. Wrap everything that you want to display in a single line and assign display property to flex.
Related
I'm trying to customize some of the font colors for the Hestia theme. The section subtitles and card descriptions are #999999, which is very hard to read on a white background.
In the Features section, for example, I've tried inserting:
.hestia-features .description {
color: #000000;
font-size: 18px;
}
.hestia-features .hestia-features-content .feature-box p {
color: #000000;
font-size: 16px;
}
to no avail. Any thoughts?
Here are examples of the HTML:
<div class="col-md-8 col-md-offset-2 hestia-features-title-area"> <h2 class="hestia-title">Title</h2><h5 class="description">This text needs to be black instead of gray</h5> </div>
or
<div class="hestia-info"> <div class="icon" style="color:#180de2"> <i class="fa fa-check"></i> </div> <h4 class="info-title">Title</h4> <p>This text needs to be black</p> </div>
After checking the working demo the first selector should be:
section.hestia-features h5.description {
color: #000000;
font-size: 18px;
}
And the second should be:
section.hestia-features .hestia-info p {
color: #000000;
font-size: 16px;
}
If you are using Wordpress one more suggestion I have is to check if the theme is using a cache plugin. If it does make sure to delete the cache.
I would like to do a space between 2 words in css for example:
1 RUNNING DAYS ADMIN#SUPER.BIZ
In HTML there is   but it's not correct to use   I think?
<div class="bandeau-blanc">
<div class="sous-titre-bandeau-blanc"><i class="far fa-calendar"></i> 1 RUNNING DAYS <i class="far fa-envelope"></i>ADMIN#SUPERBTC.BIZ</div>
</div>
How to do that in CSS ?
.sous-titre-bandeau-blanc{
font-family: 'Open Sans', sans-serif;
font-size: 13.3333px;
color: #474747;
padding-top: 14px;
padding-left: 28px;
padding-bottom: 15px;
}
Thank you
You can wrap your text in a p tag, and you can add a margin to that after making it inline-block.
Alternatively, you can make the container a flexbox, and use justify-content: space-between; but you'll need to group each icon with its respective text inside another div or span.
For example:
<div class="bandeau-blanc">
<div class="sous-titre-bandeau-blanc">
<span>
<i class="far fa-calendar" />
<p>1 RUNNING DAYS</p>
</span>
<span>
<i class="far fa-envelope" />
<p>ADMIN#SUPERBTC.BIZ</p>
</span>
</div>
</div>
<style>
.sous-titre-bandeau-blanc {
display: flex;
justify-content: space-between;
width: 450px;
}
</style>
I would do something like this, if I'm understanding you correctly
<style>
.space-between {
display: inline-block;
padding-left: 3em;
}
.space-between:first-child {
padding-left: 0;
}
</style>
<div class="bandeau-blanc">
<div class="sous-titre-bandeau-blanc">
<div class="space-between"><i class="far fa-calendar"></i> 1 RUNNING DAYS</div>
<div class="space-between"><i class="far fa-envelope"></i>ADMIN#SUPERBTC.BIZ<div>
</div>
</div>
Since you already have a .fa icon in the right part of your div just add it some left margin:
.sous-titre-bandeau-blanc .fa.fa-envelope { margin-left: 30px; }
Also, change your far for fa class to correctly display font-awesome icons
I'm designing an AMP page. I'm having trouble getting the text Perfect Imprints in the menu to be centered and on the same line as the hamburger icon.
I can only seem to EITHER get it centered, but on a seperate line
-- OR --
get it left-aligned on the same line.
How can I resolve this issue?
Ideally, the text could be a logo image if desired. But if not, that's okay too.
<!DOCTYPE html>
<html ⚡ lang="en">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="canonical" href="https://www.perfectimprints.com/custom-promos/20417/Foam-Fingers.html">
<title>Custom Foam Fingers from Perfectimprints.com</title>
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}#-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}#-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}#-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}#-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}#keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<style amp-custom>
.text-centered {
text-align: center;
}
.sku {
color: gray;
}
.margin-minus-1 {
margin-top: -1em;
}
.wrapper-link {
text-decoration: none;
color: inherit;
}
.wrapper-link:visited {
text-decoration: none;
color: inherit;
}
.wrapper-link:hover {
text-decoration: none;
color: inherit;
}
.product {
border: 1px solid #DDDDDD;
border-radius: 1%;
margin-bottom: 1em;
}
.hamburger {
font-size: 1.5em;
padding: 0.1em 0 0.2em 0.3em;
display: inline;
}
.headerbar {
background-color: black;
color: white;
}
.site-name--container {
display: inline-block;
text-align: center;
width: 100%;
margin-left: auto;
margin-right: auto;
}
.sidebar {
padding: 2em;
margin: 0;
}
.sidebar > li {
list-style: none;
margin-bottom:10px;
}
.sidebar a {
text-decoration: none;
}
.close-sidebar {
font-size: 1.5em;
padding-left: 1em;
padding-top: 1em;
}
body {
font-family: 'Open Sans', sans-serif;
}
.container {
margin: 1em;
}
</style>
</head>
<body>
<header class="headerbar">
<div role="button" on="tap:sidebar1.toggle" tabindex="0" class="hamburger">☰</div>
<div class="site-name--container"><div class="site-name">Perfect Imprints</div></div>
</header>
<amp-sidebar id="sidebar1" layout="nodisplay" side="left">
<div role="button" aria-label="close sidebar" on="tap:sidebar1.toggle" tabindex="0" class="close-sidebar">✕</div>
<ul class="sidebar">
<li>Example 1</li>
<li>Example 2</li>
<li>Example 3</li>
</ul>
</amp-sidebar>
<div class="container">
<h1 class="h1">Foam Fingers</h1>
<p>
Custom foam fingers and hands are great spirit items to cheer on your sports team.
Choose from our large assortment of various shaped foam hands and foam finger cheering
accessories to show your school spirit. These foam fingers and foam hands are great for
booster club fundraising. Whether you choose a giant foam finger, or a foam claw or
talon, these custom foam cheering fingers will really help generate team spirit. These
imprinted foam hands can be personalized with your custom mascot and make great spirit
items to sell to the crowd.
</p>
<div class="product" style="padding-top: 1em;">
<a class="wrapper-link" href="https://www.perfectimprints.com/custom-promos/20417/Foam-Fingers.html">
<amp-img
alt="Foam Finger Test"
width="1000"
height="1000"
src="https://542c324650a2b8b39f64-e6578149d8b8b981b8afdc5812eb6a36.ssl.cf5.rackcdn.com/thumb/1606-RED&CHARCOAL_INHAND-U.jpg"
layout="responsive"
></amp-img>
<h3 class="product-name text-centered">
12" #1 Foam Deluxe Hand
</h3>
<h4 class="text-centered sku margin-minus-1">#PI-109-1606</h4>
<p class="text-centered price">As low as: <strong>$2.82</strong></p>
</a>
</div>
<div class="product" style="padding-top: 1em;">
<a class="wrapper-link" href="https://www.perfectimprints.com/custom-promos/20417/Foam-Fingers.html">
<amp-img
alt="Foam Finger Test"
width="1000"
height="1000"
src="https://542c324650a2b8b39f64-e6578149d8b8b981b8afdc5812eb6a36.ssl.cf5.rackcdn.com/thumb/1606-RED&CHARCOAL_INHAND-U.jpg"
layout="responsive"
></amp-img>
<h3 class="product-name text-centered">
12" #1 Foam Deluxe Hand
</h3>
<h4 class="text-centered sku margin-minus-1">#PI-109-1606</h4>
<p class="text-centered price">As low as: <strong>$2.82</strong></p>
</a>
</div>
<h2 class="h2">Foam Fingers Are #1</h2>
<p>
A cheap #1 foam finger can make a great for giveaway while the giant foam fingers are great
for selling to the fans. If you want to raise some funds for your booster club or your school,
selling custom printed foam fingers is a great fundraiser. Choose from dozens of different
foam hands or even foam claws to best match your school mascot. If you can't find the shape
you want, we can create a customized shape for you with a minimum order as low as 250 pieces.
If you plan on selling foam fingers for fundraising, be sure to check out our Guide for
<a target="_blank" href="https://www.perfectimprints.com/blog/custom-foam-fingers/amp">Buying Custom Foam Fingers</a>.
</p>
</div>
</body>
</html>
https://codepen.io/anon/pen/KBGzre
Your class site-name--container has width: 100%; causing your text to jump to the next line. If you set your width to auto for that section your text Perfect Imprints would be on the same line.
To keep your text centered and vertically aligned middle just add:
.headerbar {
display: flex;
align-items: center;
}
The display flex is to fill your headerbar with the content and the align-items: center is to keep your content vertically aligned in the flex box.
Add some CSS properties in your .headerbar class -
.headerbar {
display: flex;
align-items: center;
}
I'm in the process of building a small website for my Roleplay group, and was overjoyed to figure out how to create a vertical navigation bar, but I'm noticing that on every display, the text falls behind it.
Is there a way to set where text begins and navigation ends?
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #d9d9d9;
height: 100%;
position: fixed;
display: inline-block;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
font-family: "Arial"
}
.active {
background-color: #990000;
color: white;
}
li a:hover {
background-color: #990000 color: white;
}
#titletext {
text-align: center;
font-family: "Arial";
font-size: 52;
}
#welcome {
text-align: center;
font-family: "Arial"
}
#intro {
text-align: center;
font-family: "Arial"
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="HOME_PAGE.css">
<title>FFXIV RP Database</title>
<style>
div.head {
background-color: #000000;
color: white;
text-decoration: none;
margin: 5px 0 5px 0;
padding: 20px;
}
</style>
</head>
<body>
<!--NAVIGATION BAR-->
<div class="Navigation">
<ul>
<li id="first"><img src="xiv logo.png" width="200px"></li>
<li>Home</li>
<li>Characters</li>
<li>Story</li>
<li>Stats</li>
<li>Contact
<li>
</ul>
</div>
<!--HEADER-->
<div class="Head">
<h1 id="titletext">FFXIV RP Database</h1>
</div>
<!--BELOW HEAD CONTENT-->
<div class="Welcome">
<p>
<h2 id="welcome">Welcome to Eorzea!</h2>
<div style="text-align:center;">
<img src="group.png" width="40%">
</div>
<div class="IntroParagraph" style="text-align:center;" id="Intro">
<p><i>"Such a marvel proof not only that the gods exist, but that they love, and that profoundly."</i>
<br/><b>Orrick Ballard (Explorer and Map-Maker)</b><br/>
<br/>
<b>Eorzea</b> is the setting of Final Fantasy XIV. It is a vast region of <b>Hydaelyn</b>, and consists of the continent <b>Aldenard</b>, as well as its outlying islands. The realm has known many unique civilizations throughout its long history,
and harbors many starkly different ones to this day. In the North, mountains loom tall overhead, buried under feet of snow and constantly lashed at by icy winds. And to the South, a vast expanse of unforgiving desert harbors few willing to brave
its scalding heat.</p>
<p>Despite its unique geography and vastly different regions, Eorzea holds the hearts of many for its expansive currents of <b>aether</b>, the very stones of the land rich with veins of the power-infused crystals. </p>
<!--WRITE-UP: "EORZEA"-->
<div class="Welcome">
<p>
<h2 id="welcome">City-States of Eorzea</h2>
<div style="text-align:left;">
<img src="eorzea.jpg" width="40%">
<p>Due to its size, the region of Eorzea has been divided into six major city-states, each with their own unique cultures and climates:</p>
<ol type="I">
<li><b>Limsa Lominsa</b> is seated across a multitude of islands across the Southern Coast of the island <b>Vylbrand</b>, each connected into a single city by bridge.</li>
<li><b>Gridania</b> stands to the east of Aldenard, its forests lush and vibrant. Its dense woodlands know many agriculturists and crafters, all whom seek to refine their craft. The city-state greatly emphasizes the harmony of man and nature,
its resident <b>White Mages</b> keeping the peace between the forest’s <b>Elementals.</b></li>
<li><b>Ul’dah</b> sits buried in the sands of southern Aldenard, popular for its more hedonistic pleasures; ranging from fierce Gladiator fights to its gambling halls. Claimed sovereign by the <b>Sultana</b>, its rule truly belongs to the
wealthiest among its residents; affluence holds the reigns of the city, allowing the rich and influential to determine the fate of the city’s citizens. </li>
<li>
</div>
</p>
</body>
</html>
To start, I would suggest pinning through your code and making some adjustments tot he structure. There looks to be a lot of missing tags (which I tried to correct in the fiddle). One tip would be to add comments to your closing div tags so you can see where each section ends.
With that said, what you can do is apply a margin-left: 200px; to your .Welcome class in order to shift everything over from the left side of the page. Since 200px is the width of your fixed navigation, you want to compensate that width. And since your Welcome class is wrapping your body content, you would add the margin to this class
https://fiddle.jshell.net/kez8aLam/
.Welcome {
margin-left: 200px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #d9d9d9;
height: 100%;
position: fixed;
display: inline-block;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
font-family: "Arial"
}
.active {
background-color: #990000;
color: white;
}
li a:hover {
background-color: #990000 color: white;
}
#titletext {
text-align: center;
font-family: "Arial";
font-size: 52;
}
#welcome {
text-align: center;
font-family: "Arial";
}
#intro {
text-align: center;
font-family: "Arial"
}
<div class="home-wrap">
<div class="Navigation">
<ul>
<li id="first"><img src="xiv logo.png" width="200px"></li>
<li>Home</li>
<li>Characters</li>
<li>Story</li>
<li>Stats</li>
<li>Contact
<li>
</ul>
</div>
<!--HEADER-->
<div class="Head">
<h1 id="titletext">FFXIV RP Database</h1>
</div>
<!--BELOW HEAD CONTENT-->
<div class="Welcome">
<p>
<h2 id="welcome">Welcome to Eorzea!</h2>
<div style="text-align:center;">
<img src="group.png" width="40%">
</div>
<div class="IntroParagraph" style="text-align:center;" id="Intro">
<p><i>"Such a marvel proof not only that the gods exist, but that they love, and that profoundly."</i>
<br/><b>Orrick Ballard (Explorer and Map-Maker)</b>
<br/>
<br/>
<b>Eorzea</b> is the setting of Final Fantasy XIV. It is a vast region of <b>Hydaelyn</b>, and consists of the continent <b>Aldenard</b>, as well as its outlying islands. The realm has known many unique civilizations throughout its long history,
and harbors many starkly different ones to this day. In the North, mountains loom tall overhead, buried under feet of snow and constantly lashed at by icy winds. And to the South, a vast expanse of unforgiving desert harbors few willing to brave
its scalding heat.</p>
<p>Despite its unique geography and vastly different regions, Eorzea holds the hearts of many for its expansive currents of <b>aether</b>, the very stones of the land rich with veins of the power-infused crystals. </p>
</div>
</div>
</div>
<!--WRITE-UP: "EORZEA"-->
<div class="Welcome">
<p>
<h2 id="welcome">City-States of Eorzea</h2>
<div style="text-align:left;">
<img src="eorzea.jpg" width="40%">
<p>Due to its size, the region of Eorzea has been divided into six major city-states, each with their own unique cultures and climates:</p>
<ol type="I">
<li><b>Limsa Lominsa</b> is seated across a multitude of islands across the Southern Coast of the island <b>Vylbrand</b>, each connected into a single city by bridge.</li>
<li><b>Gridania</b> stands to the east of Aldenard, its forests lush and vibrant. Its dense woodlands know many agriculturists and crafters, all whom seek to refine their craft. The city-state greatly emphasizes the harmony of man and nature,its
resident <b>White Mages</b> keeping the peace between the forest’s <b>Elementals.</b></li>
<li><b>Ul’dah</b> sits buried in the sands of southern Aldenard, popular for its more hedonistic pleasures; ranging from fierce Gladiator fights to its gambling halls.
<li>Claimed sovereign by the <b>Sultana</b>, its rule truly belongs to the wealthiest among its residents; affluence holds the reigns of the city, allowing the rich and influential to determine the fate of the city’s citizens. </li>
</ol>
</div>
</div>
The reason of why "text falls behind navigation" is: the ul element's position is fixed, which makes it detached from document (moved to another layer and does not occupy any space in the page). Thus the text occupies all page space and part of them falls behind ul.
As you may need fixed ul for good reason, the below code only adds one css rule -- define left padding for text, which leaves space for ul element display:
.Head, .Welcome {
padding-left: 200px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #d9d9d9;
height: 100%;
position: fixed;
display: inline-block;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
font-family: "Arial"
}
.active {
background-color: #990000;
color: white;
}
li a:hover {
background-color: #990000
color: white;
}
#titletext {
text-align: center;
font-family: "Arial";
font-size: 52;
}
#welcome {
text-align: center;
font-family: "Arial"
}
#intro {
text-align:center;
font-family: "Arial"
}
.Head, .Welcome {
padding-left: 200px;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="HOME_PAGE.css">
<title>FFXIV RP Database</title>
<style>
div.head {
background-color: #000000;
color: white;
text-decoration: none;
margin: 5px 0 5px 0;
padding: 20px;
}
</style>
</head>
<body>
<!--NAVIGATION BAR-->
<div class="Navigation">
<ul>
<li id="first"><img src="xiv logo.png" width="200px"></li>
<li>Home</li>
<li>Characters</li>
<li>Story</li>
<li>Stats</li>
<li>Contact<li>
</ul>
</div>
<!--HEADER-->
<div class="Head">
<h1 id="titletext">FFXIV RP Database</h1>
</div>
<!--BELOW HEAD CONTENT-->
<div class="Welcome">
<p>
<h2 id="welcome">Welcome to Eorzea!</h2>
<div style="text-align:center;">
<img src="group.png" width="40%">
</div>
<div class="IntroParagraph" style="text-align:center;" id="Intro">
<p><i>"Such a marvel proof not only that the gods exist, but that they love, and that profoundly."</i>
<br/><b>Orrick Ballard (Explorer and Map-Maker)</b><br/>
<br/>
<b>Eorzea</b> is the setting of Final Fantasy XIV. It is a vast region of <b>Hydaelyn</b>, and consists of the continent <b>Aldenard</b>, as well as its
outlying islands. The realm has known many unique civilizations throughout its long history, and harbors many starkly different ones
to this day. In the North, mountains loom tall overhead, buried under feet of snow and constantly lashed at by icy winds. And to the
South, a vast expanse of unforgiving desert harbors few willing to brave its scalding heat.</p>
<p>Despite its unique geography and vastly different regions, Eorzea holds the hearts of many for its expansive currents of <b>aether</b>, the
very stones of the land rich with veins of the power-infused crystals. </p>
<!--WRITE-UP: "EORZEA"-->
<div class="Welcome">
<p>
<h2 id="welcome">City-States of Eorzea</h2>
<div style="text-align:left;">
<img src="eorzea.jpg" width="40%">
<p>Due to its size, the region of Eorzea has been divided into six major city-states, each with their own unique cultures and climates:</p>
<ol type="I">
<li><b>Limsa Lominsa</b> is seated across a multitude of islands across the Southern Coast of the island <b>Vylbrand</b>, each connected into a single city by bridge.</li>
<li><b>Gridania</b> stands to the east of Aldenard, its forests lush and vibrant. Its dense woodlands know many agriculturists and crafters, all whom seek to refine their craft.
The city-state greatly emphasizes the harmony of man and nature, its resident <b>White Mages</b> keeping the peace between the forest’s <b>Elementals.</b></li>
<li><b>Ul’dah</b> sits buried in the sands of southern Aldenard, popular for its more hedonistic pleasures; ranging from fierce Gladiator fights to its gambling halls.
Claimed sovereign by the <b>Sultana</b>, its rule truly belongs to the wealthiest among its residents; affluence holds the reigns of the city, allowing the rich and influential
to determine the fate of the city’s citizens. </li>
<li>
</div>
</p>
</body>
</html>
This is my first post, and I apologize- pretty much a newbie. I have tried every technique that I can think of, and cant figure out how to create borders around three specific pictures in my site. My site is glh222.github.io
You will notice 6 images, three of which are bordered and sized appropriately and the other 3 which are enormously big. I have edited all pictures to be 285px, and my code in the HTML and CSS is consistent. I will post the code to both the relevant sections of the html and css below, please let me know if anyone can help. Thanks in advance!
<section id="GT">
<a href="#">
<img src="Images/gtsport.jpg" alt="Granturismo on an open road">
<p>Granturismo</p>
</a>
</section>
<section id="GTC">
<a href="#">
<img src="Images/GTC.jpg" alt="Granturismo Convertible">
<p>Granturismo Convertible</p>
</a>
</section>
<section id="GHIBLI">
<a href="#">
<img src="Images/GhibliSnow.jpg" alt="Ghibli in the snow">
<p>Ghibli</p>
</a>
</section>
<section id="GHIBLISQ4"
<a href="#">
<img src="Images/GTSLogo1.jpg" alt="SQ4 Logo">
<p>Ghibli SQ4</p>
</a>
</section>
<section id="QP"
<a href="#">
<img src="Images/QPblur1.jpg" alt="QP blurred">
<p>Quattroporte</p>
</a>
</section>
<section id="QPS"
<a href="#">
<img src="Images/GTSrear1.jpg" alt="Rear Facing in the snow">
<p>Quattroporte GTS</p>
</a>
</section>
CSS
#GT img {
width:100%;
padding:.5em, auto;
margin: .5em;
background-color:#c7ccf;
border: 20px black solid;
font-size: 1.5em;
font-family: 'Roboto', sans-serif;
text-align: center;
font-weight: 800;
font-weight: bold;
color: white;
float: left;
}
#GTC
img {
width:100%;
padding:.5em, auto;
margin: .5em;
background-color:#c7ccf;
border: 20px black solid;
font-size: 1.5em;
font-family: 'Roboto', sans-serif;
text-align: center;
font-weight: 800;
font-weight: bold;
color: white;
}
#GHIBLI
img {
width:100%;
padding:.5em, auto;
margin: .5em;
background-color:#c7ccf;
border: 20px black solid;
font-size: 1.5em;
font-family: 'Roboto', sans-serif;
text-align: center;
font-weight: 800;
font-weight: bold;
color: white;
}
#GHIBLISQ4
img {
width:100%;
padding:.5em, auto;
margin: .5em;
background-color:#c7ccf;
border: 20px black solid;
font-size: 1.5em;
font-family: 'Roboto', sans-serif;
text-align: center;
font-weight: 800;
font-weight: bold;
color: white;
}
#QP
img {
width:100%;
padding:.5em, auto;
margin: .5em;
background-color:#c7ccf;
border: 20px black solid;
font-size: 1.5em;
font-family: 'Roboto', sans-serif;
text-align: center;
font-weight: 800;
font-weight: bold;
color: white;
}
#QPS
img {
width:100%;
padding:.5em, auto;
margin: .5em;
background-color:#c7ccf;
border: 20px black solid;
font-size: 1.5em;
font-family: 'Roboto', sans-serif;
text-align: center;
font-weight: 800;
font-weight: bold;
color: white;
}
a:hover {
background-color: #aaaaaa;
Looks like you aren't getting the borders on the bottom 3 because your code is broken in multiple areas.
First, you have an extra:
<link href=
near the top of your page and
you are missing a > at the end of these three lines:
<section id="GHIBLISQ4"
should be:
<section id="GHIBLISQ4">
same goes for:
<section id="QP"
should be:
<section id="QP">
and
<section id="QPS"
should be:
<section id="QPS">
Your full code should look like this:
<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="styles.css">
<title>"Maserati of Long Island"</title>
</head>
<body>
<header>
<h1> Welcome to Maserati of Long Island, A Division of The Experience Auto Group
Maserati...The Absolute Opposite of Ordinary</h1>
</header>
<div id="slogan">
<h2>Long Island's only factory authorized dealership</h2>
</div>
<section id="GT">
<a href="#">
<img src="Images/gtsport.jpg" alt="Granturismo on an open road">
<p>Granturismo</p>
</a>
</section>
<section id="GTC">
<a href="#">
<img src="Images/GTC.jpg" alt="Granturismo Convertible">
<p>Granturismo Convertible</p>
</a>
</section>
<section id="GHIBLI">
<a href="#">
<img src="Images/GhibliSnow.jpg" alt="Ghibli in the snow">
<p>Ghibli</p>
</a>
</section>
<section id="GHIBLISQ4">
<a href="#">
<img src="Images/GTSLogo1.jpg" alt="SQ4 Logo">
<p>Ghibli SQ4</p>
</a>
</section>
<section id="QP">
<a href="#">
<img src="Images/QPblur1.jpg" alt="QP blurred">
<p>Quattroporte</p>
</a>
</section>
<section id="QPS">
<a href="#">
<img src="Images/GTSrear1.jpg" alt="Rear Facing in the snow">
<p>Quattroporte GTS</p>
</a>
</section>
</nav>
<section id="about">
<div class="wrapper">
<h2>Operating from a state-of-the-art facility that's located in the heart of Long Island, our expertly trained staff is committed to serving each of your needs from the moment you walk through our doors, keeping one tenet in mind above all else: treating you like a member of our "family" from the moment you walk through the doors</h2>
</div>
</section>
<footer>
<p> You can contact us by calling (516) 665-1665, or if you prefer, you can stop by 65 South Service Rd, Plainview, New York 11803 and speak with us in person.</p>
</footer>
</body>
</html>
This will make your page look like the following:
Additionally, you may want to one single CSS class for your images, and then apply that class to all images instead of using separate classes for each image. This way, all your photos will be uniform and styled identically, and you won't have to write as much code.
You may also want to resize/crop your photos as well, as they are uneven right now, partially due to the fact that while they are all the same width, they are not all the same height, so some are taller than others.
AND
if you want to get rid of that gray box around your first image, remove the float:left; on the #GT img CSS
Your HTML was broken. Some of your section tags weren't closed with a >.
If you want to apply same rules to several elements, give them a class. I gave the elements class of .cars in my fix below.
You shouldn't be applying text formatting rules to an img tag, but instead the elements that actually contain some text.
You might want to use display:inline-block; and vertical-align:top; instead of float:left; because your elements have different heights.
Remove width:100% from your image if you want it to retain its original size. If you want each of the elements to have the same width, apply a width to the container (the section element) and and give the img a max-width of 100%.
.cars{
display:inline-block;
font-size: 1.5em;
font-family:'Roboto', sans-serif;
text-align: center;
font-weight: 800;
font-weight: bold;
vertical-align:top;
}
.cars a{
display:block;
padding: .5em;
color: white;
text-decoration:none;
}
.cars p{
background-color: #aaaaaa;
}
.cars img {
background-color:#c7ccf;
border: 20px black solid;
box-sizing:border-box; /* so the sizing of the image will include its border */
}
.cars a:hover {
background-color: #aaaaaa;
}
<section id="GT" class="cars">
<a href="#">
<img src="http://glh222.github.io/Images/gtsport.jpg" alt="Granturismo on an open road">
<p>Granturismo</p>
</a>
</section>
<section id="GTC" class="cars">
<a href="#">
<img src="http://glh222.github.io/Images/GTC.jpg" alt="Granturismo Convertible">
<p>Granturismo Convertible</p>
</a>
</section>
<section id="GHIBLI" class="cars">
<a href="#">
<img src="http://glh222.github.io/Images/GhibliSnow.jpg" alt="Ghibli in the snow">
<p>Ghibli</p>
</a>
</section>
<section id="GHIBLISQ4" class="cars">
<a href="#">
<img src="http://glh222.github.io/Images/GTSLogo1.jpg" alt="SQ4 Logo">
<p>Ghibli SQ4</p>
</a>
</section>
<section id="QP" class="cars">
<a href="#">
<img src="http://glh222.github.io/Images/QPblur1.jpg" alt="QP blurred">
<p>Quattroporte</p>
</a>
</section>
<section id="QPS" class="cars">
<a href="#">
<img src="http://glh222.github.io/Images/GTSrear1.jpg" alt="Rear Facing in the snow">
<p>Quattroporte GTS</p>
</a>
</section>