We have a project where we are trying to get 2 images to display on the same line. Currently, they are one on top of another.
.footer-primary .awards {
display: inline;
}
#media screen and (min-width: 47.5em) {
.footer-primary .awards {
float: left;
display: inline;
margin-right: 2.35765%;
width: 82.94039%;
margin-top: 1em;
}
.footer-primary .awards:last-child {
margin-right: 0;
}
}
.footer-primary .awards li {
display: inline;
}
.footer-primary .awards li a {
float: left;
height: 10px;
margin-right: 1.5em;
width: 330px;
}
.footer-primary .awards li a.class1 {
background: url("img1") 0 0 no-repeat;
background-position: -6px 0px;
height: 120px;
}
.footer-primary .awards li a.class2 {
background: url("img2") 0 0 no-repeat;
background-position: -6px 10px;
height: 120px;
}
<div class="community">
<ul class="awards">
<li>
<a target="_blank" href="URL1" class="class1"></a>
</li>
<li>
<a target="_blank" href="URL2" class="class2"></a>
</li>
<li>
<a class="class3"></a>
</li>
</ul>
</div>
How do we update the CSS to have img1 and img2 on the same line?
You could wrap the li elements around your images into a container div and add float values to the container and child elements like this
<div class="community">
<ul class="awards">
<div class="container">
<li><a target="_blank" href="URL1" class="class1">TEST1</a></li>
<li><a target="_blank" href="URL2" class="class2">TEST2</a></li>
</div>
<li><a class="class3">TEST3</a></li>
</ul>
</div>
.container{
float:left;
width: 100%;
}
.container li{
float:left;
}
Related
I have a question in which I can't find answer or don't know how to search for answer.
I don't know how to position text above image in a way that I want them to align. The following image will clarify what I am asking.
Next is my HTML and CSS code, I only provided the HTML for about page, but CSS is for the whole website. This isn't anything professional, I am just trying to learn by doing. My idea is to use those images as links ( I know how to do that ). If there is similar question already asked, I apologize, I tried searching here and on YouTube, but could not find solution for this problem. If nothing I will edit pictures in GIMP with text in them.
body {
background: #e5fcf4;
font-family: Arial;
}
header {
text-align: center;
}
header nav {
display: inline-block;
}
header nav ul {
list-style: none;
margin: 0;
padding: 0;
}
header ul li {
float: left;
color: white;
width: 200px;
height: 40px;
background-color: #0d3801;
opacity: .9;
line-height: 40px;
text-align: center;
font-size: 20px;
}
header ul li a {
text-decoration: none;
color: white;
display: block;
}
header ul li a:hover {
background-color: green;
color: black;
}
header ul li ul li {
display: none;
}
header ul li:hover ul li {
display: block;
}
div.maincontent {
width: 70%;
padding: 2px;
margin: 2px;
float: left;
}
div.sidecontent {
width: 23%;
float: right;
padding: 2px;
margin: 2px;
margin-top: 10px;
}
div.maincontent img {
width: 900px;
height: 400px;
}
.clear {
clear: both;
}
footer {
background-color: #0d3801;
text-align: center;
}
footer img {
width: 200px;
height: 200px;
margin: 5px;
}
footer h2 {
font-size: 2rem;
color: white;
}
img.aboutimage {
width: 450px;
height: 400px;
float: left;
padding: 5px;
margin-left: 125px;
margin-top: 100px;
}
<header>
<nav>
<ul>
<li> Home </li>
<li> About
<ul>
<li><a> Our team </a></li>
<li><a> Camp sites </a></li>
<li><a> Mission & Vision </a></li>
</ul>
</li>
<li> Things to do
<ul>
<li><a> Activities </a></li>
<li><a> Parks </a></li>
<li><a> Coffee bars </a></li>
</ul>
</li>
<li> Contact
<ul>
<li><a> Map </a></li>
<li><a> Directions </a></li>
</ul>
</li>
<li> News </li>
</ul>
</nav>
</header>
<div>
<a href="">
<img class="aboutimage" src="https://images.pexels.com/photos/7097/people-coffee-tea-meeting.jpg?w=1260&h=750&auto=compress&cs=tinysrgb">
</a>
<a href="">
<img class="aboutimage" src="https://images.pexels.com/photos/803226/pexels-photo-803226.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb">
</a>
<a href="">
<img class="aboutimage" src="https://images.pexels.com/photos/462353/pexels-photo-462353.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb">
</a>
</div>
wrap each image in div and before that add your text
<div >
<div style="width: 33%; float: left">
<h3>sample title</h3>
<a href="">
<img class="aboutimage">
</a>
</div>
...
</div>
Position your "a" depending on intended result. Now it only makes image to be link
Please check with this snippet
body {
background: #e5fcf4;
font-family: Arial;
}
header {
text-align: center;
}
header nav {
display: inline-block;
}
/* PRVI KORAK*/
header nav ul {
list-style: none;
margin: 0;
padding: 0;
}
/*DRUGI KORAK*/
header ul li {
float: left;
color: white;
width: 200px;
height: 40px;
background-color: #0d3801;
opacity: .9;
line-height: 40px;
text-align: center;
font-size: 20px;
}
/*TREĆI KORAK*/
header ul li a {
text-decoration: none;
color: white;
display: block;
}
/*ČETVRTI KORAK*/
header ul li a:hover {
background-color: green;
color: black;
}
/*PETI KORAK*/
header ul li ul li {
display: none;
}
header ul li:hover ul li {
display: block;
}
div.maincontent {
width: 70%;
padding: 2px;
margin: 2px;
float: left;
}
div.sidecontent {
width: 23%;
float: right;
padding: 2px;
margin: 2px;
margin-top: 10px;
}
div.maincontent img {
width: 900px;
height: 400px;
}
.clear {
clear: both;
}
footer {
background-color: #0d3801;
text-align: center;
}
footer img {
width: 200px;
height: 200px;
margin: 5px;
}
footer h2 {
font-size: 2rem;
color: white;
}
img.aboutimage {
width: 450px;
height: 400px;
float: left;
padding: 5px;
margin-left: 125px;
margin-top: 100px;
}
.img-block a{
position:relative;
}
.img-block a span{
position:absolute;
width:100%;
top:0;
left:0;
background:rgba(0,0,0,0.5);
padding:5px;
font-size:14px;
color:#fff;
font-weight:700;
text-align:center;
}
.img-block img{
padding:0;
width:100%;
margin:0;
height:auto;
}
.img-block a{
overflow:hidden;
float:left;
width:calc( 33.33% - 20px );
margin:0 10px;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<nav>
<ul>
<li> Home </li>
<li> About
<ul>
<li><a> Our team </a></li>
<li><a> Camp sites </a></li>
<li><a> Mission & Vision </a></li>
</ul>
</li>
<li> Things to do
<ul>
<li><a> Activities </a></li>
<li><a> Parks </a></li>
<li><a> Coffee bars </a></li>
</ul>
</li>
<li> Contact
<ul>
<li><a> Map </a></li>
<li><a> Directions </a></li>
</ul>
</li>
<li> News </li>
</ul>
</nav>
</header>
<div class="img-block">
<a href="">
<span>Text1</span>
<img class="aboutimage" src="https://images.pexels.com/photos/7097/people-coffee-tea-meeting.jpg?w=1260&h=750&auto=compress&cs=tinysrgb">
</a>
<a href="">
<span>Text2</span>
<img class="aboutimage" src="https://images.pexels.com/photos/803226/pexels-photo-803226.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb">
</a>
<a href="">
<span>Text3</span>
<img class="aboutimage" src="https://images.pexels.com/photos/462353/pexels-photo-462353.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb">
</a>
</div>
</body>
</html>
You can use figure and figcaption to have text and an image aligned with each other.
I've used flex to make sure everything lines up how it should.
.imageblock {
display: flex;
justify-content: space-between;
}
.imageblock figure {
display: inline-flex;
flex-direction: column;
text-align: center;
width: 30vw;
margin: 0;
}
.imageblock figure * {
width: 100%;
}
<div class="imageblock">
<figure class="aboutimage">
<figcaption>How to add text here?</figcaption>
<img src="https://images.pexels.com/photos/7097/people-coffee-tea-meeting.jpg?w=1260&h=750&auto=compress&cs=tinysrgb">
</figure>
<figure class="aboutimage">
<figcaption>How to add text here?</figcaption>
<img src="https://images.pexels.com/photos/803226/pexels-photo-803226.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb">
</figure>
<figure class="aboutimage">
<figcaption>How to add text here?</figcaption>
<img src="https://images.pexels.com/photos/462353/pexels-photo-462353.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb">
</figure>
</div>
First you should wrap image with div and add following style for that div
Example:
<div style="width:33%; float:left">Sample Text</div>
Try this.
Can someone help me put my menu on the left next to my navbar.
As you can see the icon floats above the navigation which extends the top bar,
both the icon and navigation inside the top bar need to be aligned next to each other.
body{
margin: 0;
padding: 0;
}
#top-bar{
background-color: black;
padding: 1%;
width: auto;
}
#left-menu{
display: inline-block;
}
#navigation{
width: 100%;
text-align: center;
background-color: red;
}
#navigation ul{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
position: relative;
display: inline-block;
overflow: hidden;
}
#navigation ul li{
float: left;
}
#navigation ul li a{
text-decoration: none;
margin-left: 5px;
}
<body>
<div id="top-bar">
<div id="left-menu">
<img src="icons/menu.png"/>
</div>
<div id="navigation">
<ul>
<li><a class="link" href="#"> Home </li>
<li><a class="link" href="#"> About Us </li>
<li><a class="link" href="#"> Contact </li>
</ul>
</div>
</div>
</body>
What you want to do is remove width: 100% from #navigation, and instead give it float: left.
You've also forgotten to close your <a> tags.
I've fixed this in the following:
body {
margin: 0;
padding: 0;
}
#top-bar {
background-color: black;
padding: 1%;
width: auto;
}
#left-menu {
display: inline-block;
}
#navigation {
/* width: 100%; */
float: left;
text-align: center;
background-color: red;
}
#navigation ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
position: relative;
display: inline-block;
overflow: hidden;
}
#navigation ul li {
float: left;
}
#navigation ul li a {
text-decoration: none;
margin-left: 5px;
}
<body>
<div id="top-bar">
<div id="left-menu">
<img src="http://placehold.it/100" />
</div>
<div id="navigation">
<ul>
<li><a class="link" href="#">Home</a></li>
<li><a class="link" href="#">About Us</a></li>
<li><a class="link" href="#">Contact</a></li>
</ul>
</div>
</div>
</body>
If you want to ensure that they're the same height, you're looking to give your #navigation a line-height property that equals the height of the image, along with display: block. This can be seen in the following:
body {
margin: 0;
padding: 0;
}
#top-bar {
background-color: black;
padding: 1%;
width: auto;
}
#left-menu {
display: inline-block;
}
#navigation {
/* width: 100%; */
float: left;
text-align: center;
background-color: red;
}
#navigation ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
position: relative;
/* display: inline-block; */
display: block;
line-height: 100px; /* Equal to the height of the image */
overflow: hidden;
}
#navigation ul li {
float: left;
}
#navigation ul li a {
text-decoration: none;
margin-left: 5px;
}
<body>
<div id="top-bar">
<div id="left-menu">
<img src="http://placehold.it/100" />
</div>
<div id="navigation">
<ul>
<li><a class="link" href="#">Home</a></li>
<li><a class="link" href="#">About Us</a></li>
<li><a class="link" href="#">Contact</a></li>
</ul>
</div>
</div>
</body>
Hope this helps! :)
My navigation bar cannot click any item except the last item. I have checked and follow the tutorial from youtube but unfortunately I checked code is same but not working at all please anyone got solution please share to me.
Here's My html
<html>
<title>UIA | Homepage</title>
<link href="Homepage.css" rel="stylesheet" type="text/css">
<header>
<div class="row">
<div class="logo">
<img src = "Logo.png">
</div>
<ul class="main-nav">
<li class = "active"> Home </li>
<li> Promotion </li>
<li> Booking </li>
<li> SignIn </li>
<li> About </li>
</ul>
</div>
<div class="title">
<h1>Ready for another adventure?</h1>
</div>
</header>
And here's my CSS.
*{
margin: 0;
padding: 0;
}
header{
background-image:
linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.8)), url(Homepage.jpg);
height:100vh;
background-position:center;
background-size: cover;
}
.main-nav{
float: right;
list-style: None;
margin-top: 30px;
}
.main-nav li{
display: inline-block;
}
.main-nav li a{
color: white;
text-decoration: none;
padding: 5px 20px;
font-family: "Roboto", Sans-serif;
font-size: 15px;
}
.main-nav li.active a{
border: 1px solid white;
}
.main-nav li a:hover {
border: 1px solid white;
}
.logo img{
width: 150px;
height: auto;
margin-top:10px;
float: left;
}
.row{
max-width: 1200px;
margin: auto;
}
.title{
position:absolute;
width: 1200px;
margin-left: 0;
margin-top: 0;
}
h1{
color: white;
font-size: 60px;
text-align: center;
margin-top: 255px;
}
So did I miss out something please advice me Thank you.
.title is overlapping the menu.
You can give the menu a higher z-index to ensure it is on top.
Information about z-index
updated code below
* {
margin: 0;
padding: 0;
}
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(Homepage.jpg);
height: 100vh;
background-position: center;
background-size: cover;
}
.main-nav {
float: right;
list-style: None;
margin-top: 30px;
/* added */
position: relative;
z-index: 100;
}
.main-nav li {
display: inline-block;
}
.main-nav li a {
color: white;
text-decoration: none;
padding: 5px 20px;
font-family: "Roboto", Sans-serif;
font-size: 15px;
}
.main-nav li.active a {
border: 1px solid white;
}
.main-nav li a:hover {
border: 1px solid white;
}
.logo img {
width: 150px;
height: auto;
margin-top: 10px;
float: left;
}
.row {
max-width: 1200px;
margin: auto;
}
.title {
position: absolute;
width: 1200px;
margin-left: 0;
margin-top: 0;
}
h1 {
color: white;
font-size: 60px;
text-align: center;
margin-top: 255px;
}
<header>
<div class="row">
<div class="logo">
<img src="Logo.png">
</div>
<ul class="main-nav">
<li class="active"> Home </li>
<li> Promotion </li>
<li> Booking </li>
<li> SignIn </li>
<li> About </li>
</ul>
</div>
<div class="title">
<h1>Ready for another adventure?</h1>
</div>
</header>
It is because you do not use clearfix on your floated element parent(similar issues will occur on all floated stuff if you don't use clearfix).
Add this to your css file:
.clearfix:after {
content: "";
display: table;
clear: both;
}
And add clearfix to parent of floated element, in this case to:
<div class="row clearfix">
I recommend reading these two(will come in handy in the future):
https://css-tricks.com/all-about-floats/
https://css-tricks.com/snippets/css/clear-fix/
Just in case, here is a link to jsfiddle with solution to your issue: https://jsfiddle.net/mwgjycv4/1/
Here's a link to my site (Currently a work in progress so very basic right now):
website
I just can't figure out why one image is messed up. It's not even the last image in the gallery and it's the same size as all the other images. Maybe i'm missing the obvious, I'm pretty tired.
Here's the code: https://jsfiddle.net/b0r684hh/2/
HTML
<div class="row">
<div class="col-lg-10">
<h1 class="page-header">Ryk Design</h1>
</div>
<!--<div class="col-lg-2 page-header">
<ul class="nav navbar-nav">
<li>
<a class="invert" href="#">About</a>
</li>
<li>
<a class="invert" href="#">Contact</a>
</li>
</ul>
</div>-->
</div>
<div class="row">
<div id="photos">
<ul id="photo-gallery">
<li>
<a href="img/DoomQuoteMed.png">
<img src="img/thumbs/DoomQuoteThumb.png">
</a>
</li>
<li>
<a href="img/crop/SlaveBlur.png">
<img src="img/thumbs/SlaveBlur.png">
</a>
</li>
<li>
<a href="img/love wins2.png">
<img src="img/love wins2.png">
</a>
</li>
<li>
<a href="img/rd.png">
<img src="img/thumbs/rdcrop.png">
</a>
</li>
<li>
<a href="img/crop/taplrCrop.png">
<img src="img/thumbs/taplrCrop.png">
</a>
</li>
<li>
<a href="img/cider.jpg">
<img src="img/cider.jpg">
</a>
</li>
<!--<li>
<a href="http://40.media.tumblr.com/7302cf024c924726c6ad99bb80b0be41/tumblr_nauccbKUCw1tubinno1_1280.jpg">
<img src="http://40.media.tumblr.com/7302cf024c924726c6ad99bb80b0be41/tumblr_nauccbKUCw1tubinno1_1280.jpg">
</a>
</li>
<li>
<a href="http://41.media.tumblr.com/fddb3f2b0bdf390efd7ea87372e75fa5/tumblr_ndyg3pYbKW1tubinno1_1280.jpg">
<img src="http://41.media.tumblr.com/fddb3f2b0bdf390efd7ea87372e75fa5/tumblr_ndyg3pYbKW1tubinno1_1280.jpg">
</a>
</li>
<li>
<a href="http://41.media.tumblr.com/758a5cb9046fde53138ad0f55527ca25/tumblr_ndyfdoR6Wp1tubinno1_1280.jpg">
<img src="http://41.media.tumblr.com/758a5cb9046fde53138ad0f55527ca25/tumblr_ndyfdoR6Wp1tubinno1_1280.jpg">
</a>
</li>-->
</ul>
</div>
</div>
CSS
a,
h2,
h3 {
font-family: 'Montserrat', sans-serif;
margin: 0;
}
h1 {
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
font-size: 92px;
text-transform: uppercase;
text-rendering: optimizeLegibility;
}
a {
color: #000;
}
.invert {
color: #fff;
background-color: #000;
}
.col-md-4 p {
padding-top: 5px;
}
a:hover {
color: #000;
background-color: #fff;
text-decoration: none;
}
.nav,
.navbar-nav {
margin: 0;
padding: 0;
}
body {
margin: 0;
}
.page-header {
border: none;
padding-bottom: 40px;
}
footer {
margin: 50px 0;
}
.row {
padding-left: 0;
}
#photos {
opacity: .88;
}
#photos img {
width: 30%;
float: left;
display: block;
margin: 1px;
}
ul {
list-style: none;
margin: 0px auto;
padding: 10px;
display: block;
max-width: 100%;
text-align: center;
}
#overlay {
background: rgba(0, 0, 0, .8);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: none;
text-align: center;
}
#overlay img {
margin: 10% auto 0;
width: 550px;
border-radius: 5px;
}
#photos {
width: 100%;
padding: 10px;
}
#photo-gallery {
width: 100%;
}
Cheers for the help guys!
You should float li elements instead of img elements, just change the css,
Here is the updated jsfiddle
#photos li {
width: 30%;
float: left;
display: block;
margin: 1px;
}
#photos img {
max-width: 100%
}
Your problem is due to the first image having a bigger height than the others. If you inspect your images, you'll see that all of them have a height of 339px - EXCEPT the first image - that one is 339.33.
Since you are floating your images, this very slight difference throws off the alignment. There 2 solutions:
1) Set all of the images the same height
2) Clear the first image of each row so it resets the alignment. So with your example, having 3 images across you would want to clear the 4th image:
#photo-gallery li:nth-child(3n+1) img {
clear: left;
}
its seems the first image height is .39 bigger so pushes them around. But you should be able to do this better etc
something like this might help as well.
http://codepen.io/simondavies/pen/VaRBMo
<div class="image-outer-wrapper">
<div class="image-wrapper CasinoLink"></div>
<div class="image-wrapper CorpLink"></div>
<div class="image-wrapper CasinoLink"></div>
<div class="image-wrapper CorpLink"></div>
<div class="image-wrapper CasinoLink"></div>
<div class="image-wrapper CorpLink"></div>
</div>
.image-outer-wrapper {
margin: 0 auto;
padding: 0;
width: 100%;
height: auto;
position: relative;
}
.image-outer-wrapper:before,
.image-outer-wrapper:after { content: " "; display: table;}
.image-outer-wrapper:after {clear: both;}
.image-outer-wrapper .image-wrapper {
margin:5px;
position: relative;
float: left;
width: 279px;
height: 237px;
text-decoration: none;
transition: background-position 500ms;
cursor: pointer;
}
.image-outer-wrapper .image-wrapper.CasinoLink {
background: url('http://placehold.it/558x237');
background-position: 0 0;
}
.image-outer-wrapper .image-wrapper.CorpLink {
background: url('http://placehold.it/558x237');
background-position: 0 0;
}
.image-outer-wrapper .image-wrapper:hover {
background-position: -279px 0;
}
I'm new in HTML and CSS.
Want to create menu with image and also want to show menu separator, menu should be horizontally aligned.
when we hover mouse on menu item, image and text color should change.
It should be look like as per image.
sry I forgot to upload the code, uploading here.
but now I want to show some menu items on left side( left align) and others on right side( right align)
.mainmenu{
background-color: black;
}
.mainmenu {
margin-top: 20px;
display: inline-block;
position: relative;
width: 100%;
}
.mainmenu li a {
display: block;
position: relative;
text-decoration: none;
text-align: center;
font-size: 10px;
color: gray;
line-height: 32px;
font-weight: bold;
text-shadow: black 0 1px 0;
font-family: sans-serif;
border-right: 1px solid #030304;
border-left: 1px solid #36393C;
white-space: nowrap;
}
.mainmenu ul.menu {
margin: 0;
width: 100%;
}
.mainmenu ul.menu li {
float: left;
list-style: none;
width: 16.666666666666668%;
}
.mainmenu ul.menu li a:hover {
color: #76b900;
}
img {
border: 0;
vertical-align: middle;
max-width: 100%;
}
<div>
<div class="mainmenu ">
<ul class="menu">
<li>
<a href="#">
<img src="images/nav-icons/home.png">HOME</a>
</li>
<li>
<a href="#">
<img src="images/nav-icons/users.png">
USERS
</a>
</li>
<li>
<a href="#">
<img src="images/nav-icons/gallary.png">
GALLARY
<a/>
</li>
<li>
<a href="#">
<img src="images/nav-icons/community.png">
COMMUNITY
</a>
</li>
</ul>
</div>
Thanks
ul.menu {
list-style-type: none;
}
ul.menu li {
padding: 5px;
font-size: 16px;
font-family: "Trebuchet MS", Arial, sans-serif;
}
ul.menu li a {
height: 50px;
line-height: 50px;
display: inline-block;
padding-left: 60px;
/* To sift text off the background-image */
color: #3E789F;
background: url("../images/mySprite.png") no-repeat;
/* As all link share the same background-image */
}
ul.menu li.firefox a {
background-position: 0 0;
}
ul.menu li.chrome a {
background-position: 0 -100px;
}
ul.menu li.ie a {
background-position: 0 -200px;
}
ul.menu li.safari a {
background-position: 0 -300px;
}
ul.menu li.opera a {
background-position: 0 -400px;
}
<ul class="menu">
<li class="firefox">Firefox
</li>
<li class="chrome">Chrome
</li>
<li class="ie">Explorer
</li>
<li class="opera">Opera
</li>
<li class="safari">Safari
</li>
</ul>