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>
Related
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.
I can't seem to get links to center on my webpage. The code below should theoretically make the links appear in the center but it doesn't:
#navigate2 {
padding: 10px 20px;
background-color: #555555;
color: white;
text-decoration: none;
border-radius: 4px 4px 0 0;
text-align: center;
/*I have included text align but it doesn't seem to be working*/
}
#navigate2:hover {
background-color: #777777;
text-decoration: underline;
}
<div class="photo" >
<h3>Photo & Video</h3>
<!-- photo goes here -->
<br> <!-- I want the links labelled navigate 2 to be centered-->
<a id="navigate2" href="#">Browse my albums!</a>
<br> <br> <hr>
</div>
<div class="blog">
<h3>Blog</h3>
<br> <!-- read above -->
<a id="navigate2" href="#">Read my blog!</a>
<br> <br> <hr>
</div>
a tags are inline, so centering text in them has no effect. You could try to add display: block, or instead display: inline-block; and margin: 0 auto for centering the inline-block.
You need to have text-align:center property set to the parent of the anchor tags. Not to the anchor tags
#navigate2 {
padding: 10px 20px;
background-color: #555555;
color: white;
text-decoration: none;
border-radius: 4px 4px 0 0;
text-align: center;
/*I have included text align but it doesn't seem to be working*/
}
#navigate2:hover {
background-color: #777777;
text-decoration: underline;
}
.navigate-wrapper {
text-align: center;
}
<div class="photo">
<h3>Photo & Video</h3>
<!-- photo goes here -->
<br>
<!-- I want the links labelled navigate 2 to be centered-->
<div class='navigate-wrapper'>
<a id="navigate2" href="#">Browse my albums!</a>
</div>
<br>
<br>
<hr>
</div>
<div class="blog">
<h3>Blog</h3>
<br>
<!-- read above -->
<div class='navigate-wrapper'>
<a id="navigate2" href="#">Read my blog!</a>
</div>
<br>
<br>
<hr>
</div>
Firstly, id's should be unique, give your links a class instead. Secondly, a elements are inline, meaning you cannot apply a block level style to it. Instead, specify in your CSS to display it as a block: display:block;.
I have a webpage with two nested divs.
I need the inside div to show its border, however it is not. I have tryed every suggestion I have come across, but no avail.
while trying different solutions, I have noticed that the parent div does show its border without much hassle. What am I doing wrong?
css
.contentItemsWrapper
{
margin:auto;
width: 900px ;
margin-left: auto ;
margin-right: auto ;
text-align:center;
padding-top:20px;
padding-bottom:20px;
border:solid red;
border-width:5px 0;
/*this div's border is showing up fine.*/
}
.contentEventItem {
font-family: Georgia, "Times New Roman", Times, serif;
font-style: normal;
font-weight: normal;
position: relative;
border:solid red;
border-width:5px 0;
/* this last one is not working*/
}
HTLM:
<div class="contentItemsWrapper">
<div class="contentEventItem style=" border:solid="" red;="" border-width:5px="" 0;="" "="" id="evento1">
<div class="DataIncontro" id="dataIncontro1">
<span class="month">Decembre</span>
<span class="number">26</span>
<span class="time">15:00</span>
<span class="day">Gio</span>
</div>
<div class="logoSquadra"><span class="helper"></span><img name="" src="images/logo_nbb.png" alt="" style="background-color: #003399"></div>
<div class="nameEventLocation" id="nameEventLocation1">
<strong class="eventname">New Basket Brindisi - Cremonese</strong>
<span class="location">Nome Stadio</span>
</div>
<div class="logoSquadra"><img name="" src="images/logo_nbb.png" alt="" style="background-color: #003399"></div>
<div class="noteEvento">Aquistabili online fino al xx dicemnre, ore 20.00</div>
<div class="buttonDiv">
<p>
<a class="multi-line-button green" href="#" style="width:14em">
<span class="title">Compra Ora!</span>
<span class="subtitle">30-days free!</span>
</a>
</p>
</div>
</div>
</div>
What am I doing wrong? Can somebody please help me?
Thank you very much in advance for your time.
Im confused, you want this?
CSS:
.contentEventItem {
font-family: Georgia, "Times New Roman", Times, serif;
font-style: normal;
font-weight: normal;
position: relative;
border: 1px solid #000;
/* this last one is now working*/
}
All I have done is add border: 1px solid #000; and deleted this odd HTML:
border:solid="" red;="" border-width:5px="" 0;="" "=""
DEMO HERE
border-width:5px 0;
There is no shorthand for more than one border position. Try this instead.
border-bottom: 5px solid red;
border-top: 5px solid red;
border-left:none;
border-right:none;
I am new to coding HTML/CSS but I have a pretty good grasp so far. I have spent the last few hours trying to get my code side by side but it always remains stacked. My code is
<div class="api" style="float:left;">
<a href="https://play.google.com/store/apps/details?id=com.jrummy.liberty.toolboxpro" target="_blank">
<img src="http://developer.android.com/images/brand/en_generic_rgb_wo_60.png" style="width:50%; border:0" alt="Download ROM Toolbox Pro from Google Play" title="Download ROM Toolbox Pro from Google Play">
</a>
<div>
<div class='appbrain-app'>
<a href='http://www.appbrain.com/app/com.jrummy.liberty.toolboxpro' style='font-size: 11px; color: #555; font-family: Arial, sans-serif;'>
</a>
<script type='text/javascript' language='javascript' src='http://www.appbrain.com/api/api.nocache.js'></script>
</div>
</div>
</div>
And my CSS is,
.api {
margin: 0 auto;
margin-top: 1em;
max-width: 700px;
padding: 1em;
background-color: #e2e2e2;
border: 1px solid #C9C9C9;
box-shadow: 0 0 2px #C9C9C9;
-moz-box-shadow: 0 0 2px #C9C9C9;
-webkit-box-shadow: 0 0 2px #C9C9C9;
border-radius: 3px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
display: inline-block;
}
If you tell me what I am missing in order to get the info displayed side by side I would greatly appreciate it. If you have any other code cleanups that you can point out that would be great also but not needed.
EDIT:
Thank you for all your help guys, I have tried both Watson and Pete's answers but sadly they are not working. I took some screenshots of what it is without your code and with your code. You can find them here, https://dl.dropbox.com/u/11217802/sidebyside.png
I have also been able to get it working but I am trying to avoid as much inline styling as possible and I believe that I have pointless tags and way too many <div> for this small project.
<div class="api">
<div>
<td style="vertical-align: middle; text-align: center; background: #e2e2e2; border-top: 0px; ">
<a rel="nofollow" href="https://play.google.com/store/apps/details?id=com.jrummy.liberty.toolboxpro" class="no_ul external" target="_blank">
<img src="http://developer.android.com/images/brand/en_generic_rgb_wo_60.png" style="width:100%; border:0" alt="Download ROM Toolbox Pro from Google Play" title="Download ROM Toolbox Pro from Google Play">
</a>
</td>
</div>
<div style="float: left;">
<div class="appbrain-app">
<a href='http://www.appbrain.com/app/com.jrummy.liberty.toolboxpro' style='font-size: 11px; color: #555; font-family: Arial, sans-serif;'>
</a>
</div>
<script type='text/javascript' language='javascript' src='http://www.appbrain.com/api/api.nocache.js'></script>
</div>
</div>
As far as the CSS, that did not change from what I posted orginally.
Thanks again Grady
try this:
.api a, .api div, .api img {
float: left;
}
and a tip: you should indent your code, so the child nodes are inside the parent nodes, like:
<div>
<a>Example</a>
<img>
<div>
<a>Example</a>
</div>
</div>
sibling nodes (when one tag is not inside another) should be indented the same amount.
looking at your code you have only floated the containing div, all the divs inside it are still block elements, if you want these to be side by side, you can do one of the following:
change them to inline elements .api div {display:inline;}
change them to inline-block elements .api div {display:inline-block;}
float them left .api div {float:left;}
EDIT
Having looked at your edit and tried your code in jsfiddle, the problem is the javascript is creating a lot of extra divs. I have changed your code layout to get things side by side:
http://jsfiddle.net/xFu4Z/1/
html
<div class="api">
<img src="http://developer.android.com/images/brand/en_generic_rgb_wo_60.png" style="width:50%; border:0" alt="Download ROM Toolbox Pro from Google Play" title="Download ROM Toolbox Pro from Google Play" />
</div>
<div class='appbrain-app'>
<a href='http://www.appbrain.com/app/com.jrummy.liberty.toolboxpro' style='font-size: 11px; color: #555; font-family: Arial, sans-serif;'></a>
<script type='text/javascript' language='javascript' src='http://www.appbrain.com/api/api.nocache.js'></script>
</div>
CSS
.api,
.appbrain-app {float:left;}
Please note that you will need to make sure the widths of .api and .appbrain-app added together don't exceed the width of the container they are in - I just noticed that on your original styles you have set a max-width of 700px which means that it is probably going to push the .appbrain-app div down a line
I restructured your markup:
<style>.api {
margin: 0 auto;
margin-top: 1em;
max-width: 700px;
min-width: 300px;
padding: 1em;
background-color: #e2e2e2;
border: 1px solid #C9C9C9;
box-shadow: 0 0 2px #C9C9C9;
-moz-box-shadow: 0 0 2px #C9C9C9;
-webkit-box-shadow: 0 0 2px #C9C9C9;
border-radius: 3px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
display: inline-block;
}
.appbrain-app { float: right; width: 48%; border: 1px solid red; }
</style>
<div class="api" style="float:left;">
<div>
<a href="https://play.google.com/store/apps/details?id=com.jrummy.liberty.toolboxpro" target="_blank">
<img src="http://developer.android.com/images/brand/en_generic_rgb_wo_60.png" style="width:50%; border:0" alt="Download ROM Toolbox Pro from Google Play" title="Download ROM Toolbox Pro from Google Play">
</a>
<div class='appbrain-app'>
<a href='http://www.appbrain.com/app/com.jrummy.liberty.toolboxpro' style='font-size: 11px; color: #555; font-family: Arial, sans-serif;'>
</a>
<script type='text/javascript' language='javascript' src='http://www.appbrain.com/api/api.nocache.js'></script>
</div>
</div>
</div>
I have a margin used to space some headings down away from an image, but despite this method working on other pages, it does not in this instance.
I know there are plenty of alternative solutions, but am curious as to what is wrong with this one. Can anyone help?
<div class="column" style="width: 237px">
<img src="img.jpg" alt="" title="img" width="237" height="300" class="alignnone size-full wp-image-84" />
<h1 style="margin-top: 40px">VAL</h1>
<span class="detailhead">Heading 1</span> <span class="detail">Detail 1</span><br />
<span class="detailhead">Heading 2</span> <span class="detail">Detail 2</span>
</div>
These are all the additional class declarations:
The image class has no associated style (class was inserted by Wordpress).
h1 {
font-size: 17px;
}
span.detailhead{
font-size: 13px;
color:#000000;
}
span.detail {
position: relative;
top: 1.5px;
font-size: 14px;
color:#000000;
}
.column {
display: block;
float: left;
}
Here is the offending style i overlooked:
img {
display: block;
float:left;
margin-right:10px;
margin-bottom:10px;
border-style: solid;
border-width: 1px;
border-color: #ffffff;
z-index: 2;
}
A more specific selector fixed the issue.
Thanks to all for helping me with this seriously schoolboy error!
Could you try adding a style="display:block" to the img tag?
If your using chrome or safari for testing: use the element inspector to check wether your inline setting is not overruled by an !important; declaration in one of the classes.
Edit: To quickly test this you can also add " !important;" to your inline css.