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.
Related
Trying to make this drop down menu appear, but I'm not sure what is wrong.
Here is my codepen: https://codepen.io/JBeezy3/pen/PooQwZr
<body>
<div class="container">
<!-- will add in later -->
<div class="header" <img>
</div>
<div class="menu">
<nav>
<ul>
<li><a style="text-decoration:none" href="Home">Home</a></li>
<li><a style="text-decoration:none" href="Home">About</a></li>
<li><a style="text-decoration:none" href="works.html">Works</a>
<ul class="sub-menu">
<li> Digital </li>
<li> Physical </li>
<li> Animation </li>
</ul>
<li><a style="text-decoration:none" href="Home">Contact</a></li>
</ul>
</nav>
</div>
Above all, the text of your sub-menu is displayed black (which is the default color), that's why you don't see it on the black background. Add color: #fff to ul.sub-menu li to make those visible. Then you can fix the rest.
Replace this css
*{
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
}
body {
font-family: verdana;
font-size: 14px;
font-weight: normal;
height: 100%;
background: url(../img) no-repeat;
background-size: cover;
background-attachment: fixed;
background-color: black;
}
.header{
padding: 15px 35px;
display: inline-block;
width: 100%;
}
a{
color: white;
text-decoration: none;
}
.menu {
float: right;
}
.menu ul li {
display: inline-block;
float: left;
line-height: 24px;
margin: 15px;
}
.menu ul li a{
text-decoration: none;
color: #ffffff;
font-size: 24px;
padding: 5px 10px;
}
.menu ul li a:hover{
color: red;
}
.name{
width: 350px;
margin-top: 300px;
margin-right: 500px;
}
.name h5{
color: red;
font-size: 24.5px;
text-align: left;
}
.name h1{
color: white;
font-size: 90px;
line-height: 75px;
}
.sub-menu{
position: absolute;
display: none;
background-color: white;
}
.menu li:hover a + .sub-menu { display: block;}
.sub-menu li{
position: relative;
display: block;
}
.column-left {
float: left;
width: 33.333%;
}
.column-right {
float: right;
width: 33.333%;
padding-left: 0px;
}
.column-center {
display: inline-block;
width: 33.333%;
padding-top: 80px;
}
.row {
color: white;
font-size: 24px;
margin: 150px;
text-align: center;
}
.preview {
width: 90%;
}
.preview2 {
width: 75%;
}
.preview3 {
width: 70%
}
.hero{
max-width: 500px;
margin-left: 500px;
padding-bottom: 1000px;
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>John Blair Graphic Designer</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<!-- will add in later -->
<div class="header">
<div class="menu">
<nav>
<ul>
<li><a style="text-decoration:none" href="index.html">Home</a></li>
<li><a style="text-decoration:none" href="Home">About</a></li>
<li><a style="text-decoration:none" href="works.html">Works</a>
<ul class="sub-menu">
<li> Digital </li>
<li> Physical </li>
<li> Animation </li>
</ul>
</li>
<li><a style="text-decoration:none" href="Home">Contact</a></li>
</ul>
</nav>
</div>
<div class="name">
<h5>Graphic Designer</h5>
<h1> John Blair </h1>
</div>
<img class="hero" src="images/hero.jpg">
<footer>
<!-- nav menu when working-->
</footer>
I've been going around the web trying to find an answer to how to center my navbar but none of the solution worked.
The code below will show what I have so far with both HTML and CSS.
header {
background: #ffffff;
color: #000000;
padding-top: 30px;
min-height: 70px;
border-bottom: #000000 3px solid;
}
header a {
color: #000000;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header li {
float: center;
display: inline;
padding: 0 20px 0 20px;
}
header nav {
margin-left: auto;
margin-right: auto;
margin-top: 10px;
}
header #smcontent {
float: left;
}
header #smcontent a {
margin: 0;
}
header #smcontent img {
width: 20px;
}
header .logoimg .center {
display: block;
margin-left: auto;
margin-right: auto;
width: 20%;
}
header a:hover {
color: #cccccc;
font-weight: bold;
}
<header>
<div class="container">
<div id="smcontent">
<a href="https://twitter.com/">
<img src="./images/twitter.png">
</a>
<a href="https://facebook.com/">
<img src="./images/facebook.png">
</a>
</div>
<div class="logoimg">
<a href="index.html">
<img class="center" src="./images/portfolio.png">
</a>
</div>
<nav>
<ul>
<li class="current">Home</li>
<li>Story</li>
<li>Product</li>
<li>Clinique</li>
<li>Promotions</li>
</ul>
</nav>
</header>
This is how it looks like right now:
I have also noticed that in CSS, when I did "float: center;" it had no difference with when I did "float: left;". But when I did "float: right;" it would shift to the right.
ul {
margin: 0 auto;
text-align: center;
}
header {
background: #ffffff;
color: #000000;
padding-top: 30px;
min-height: 70px;
border-bottom: #000000 3px solid;
}
header a {
color: #000000;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header li {
float: center;
display: inline;
padding: 0 20px 0 20px;
}
header nav {
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin: 0 auto;
}
header #smcontent a {
margin: 0;
}
header #smcontent img {
width: 20px;
}
header .logoimg .center {
display: block;
margin-left: auto;
margin-right: auto;
width: 20%;
}
header a:hover {
color: #cccccc;
font-weight: bold;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<header>
<div class="container">
<div id="smcontent">
<a href="https://twitter.com/">
<img src="./images/twitter.png">
</a>
<a href="https://facebook.com/">
<img src="./images/facebook.png">
</a>
</div>
<div class="logoimg">
<a href="index.html">
<img class="center" src="./images/portfolio.png">
</a>
</div>
<nav>
<ul>
<li class="current">Home</li>
<li>Story</li>
<li>Product</li>
<li>Clinique</li>
<li>Promotions</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
I have removed the below css from your code
header #smcontent {
float: left;
}
and added margin: 0 auto; text-align: center; to the ul
Try absolute position with float none, left 50% and a left translate of 50% to center your nav bar perfectly.
CSS: add
header .newCenter {
float: none;
position: absolute;
left: 50%;
transform: translate(-50%, 0);
}
HTML: add
<nav class="newCenter">
<ul>
<li class="current">Home</li>
<li>Story</li>
<li>Product</li>
<li>Clinique</li>
<li>Promotions</li>
</ul>
</nav>
Float only applies to left and right. I added display: grid and justify-content: center to your header. I removed float: left; in header #smcontent.
header {
background: #ffffff;
color: #000000;
padding-top: 30px;
min-height: 70px;
border-bottom: #000000 3px solid;
display: grid; //or flex
justify-content: center;
}
header a {
color: #000000;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header li {
display: inline;
padding: 0 20px;
}
header nav {
margin: 10px auto 0;
}
header #smcontent a {
margin: 0;
}
header #smcontent img {
width: 20px;
}
header .logoimg .center {
display: block;
margin: 0 auto;
width: 20%;
}
header a:hover {
color: #cccccc;
font-weight: bold;
}
<header>
<div class="container">
<div id="smcontent">
<a href="https://twitter.com/">
<img src="./images/twitter.png">
</a>
<a href="https://facebook.com/">
<img src="./images/facebook.png">
</a>
</div>
<div class="logoimg">
<a href="index.html">
<img class="center" src="./images/portfolio.png">
</a>
</div>
<nav>
<ul>
<li class="current">Home</li>
<li>Story</li>
<li>Product</li>
<li>Clinique</li>
<li>Promotions</li>
</ul>
</nav>
</header>
To align text horizontally center use text-align:center. In your to align nav bar content center just add text-align:center to header nav
header nav {
margin-left: auto;
text-align:center;
margin-right: auto;
margin-top: 10px;
}
In below code snippet I have added some images for demonstration purpose.
header {
background: #ffffff;
color: #000000;
padding-top: 30px;
min-height: 70px;
border-bottom: #000000 3px solid;
}
header a {
color: #000000;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header li {
float: center;
display: inline;
padding: 0 20px 0 20px;
}
header nav {
margin-left: auto;
text-align:center;
margin-right: auto;
margin-top: 10px;
}
header #smcontent {
float: left;
}
header #smcontent a {
margin: 0;
}
header #smcontent img {
width: 20px;
}
header .logoimg .center {
display: block;
margin-left: auto;
margin-right: auto;
width: 20%;
}
header a:hover {
color: #cccccc;
font-weight: bold;
}
<header>
<div class="container">
<div id="smcontent">
<a href="https://twitter.com/">
<img src="https://image.shutterstock.com/image-photo/kiev-ukraine-may-26-2015twitter-260nw-281505518.jpg">
</a>
<a href="https://facebook.com/">
<img src="https://image.shutterstock.com/image-photo/kiev-ukraine-april-27-2015-260nw-278925056.jpg">
</a>
</div>
<div class="logoimg">
<a href="index.html">
<img class="center" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png">
</a>
</div>
<nav>
<ul>
<li class="current">Home</li>
<li>Story</li>
<li>Product</li>
<li>Clinique</li>
<li>Promotions</li>
</ul>
</nav>
</div>
</header>
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;
}
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! :)
I am trying to increase the space in my inline list so that they are not stuck side by side. I have tried word spacing and adding padding to the header a links, but that hasn't worked. Also, I found the only way to make my list in order (shop, products, faq, blog) inline and floating in the centre is to put the list backwards. So when I do blog faq products shop it will show up in the order as shop, products, faq blog. I was wondering if there was a way to be able to write them in html in order and still have them display inline in order. Any help is appreciated, thanks! BTW I have
* {
padding: 0px;
margin: 0px
}
already
#header-flex {
display: flex;
position: fixed;
background: rgb(0,191,255);
height: 75px;
width: 100%;
}
header a {
display: inline-block;
float: right;
}
header li a:hover {
color: orange;
cursor: grabbing;
}
nav p a:hover {
color: orange;
cursor: grabbing;
}
.left, .mid, .right {
float: left;
width: 33%;
}
<header>
<nav id="header-flex">
<div class="left">
<img src="logo.jpg" alt=logo width="30px" height="30px">
</div>
<div class="mid">
<ul>
<li >Blog</li>
<li >FAQ</li>
<li >Products</li>
<li >Shop</li>
</ul>
</div>
<div class="right">
<p>Sign In</p>
</div>
</nav>
</header>
Try below updated snippet code
#header-flex {
display: flex;
position: fixed;
background: rgb(0,191,255);
height: 75px;
width: 100%;
}
header a {
display: inline-block;
float: right;
}
header li a:hover {
color: orange;
cursor: grabbing;
}
nav p a:hover {
color: orange;
cursor: grabbing;
}
.left, .right {
float: left;
width: 25%;
}
.mid {
float: left;
width: 50%;
}
.mid ul{
padding: 0;
text-align: center;
}
.mid ul li{
display: inline;
list-style-type: none;
}
.mid ul li a{
float: none;
padding: 0 6px;
}
<header>
<nav id="header-flex">
<div class="left">
<img src="logo.jpg" alt=logo width="30px" height="30px">
</div>
<div class="mid">
<ul>
<li >Shop</li>
<li >Products</li>
<li >FAQ</li>
<li >Blog</li>
</ul>
</div>
<div class="right">
<p>Sign In</p>
</div>
</nav>
</header>
Why don't you write like this if you need another order?
<div class="mid">
<ul>
<li >Shop</li>
<li >Products</li>
<li >FAQ</li>
<li >Blog</li>
</ul>
</div>
or there is something I didn`t get
and for horizontal space do this
.mid li {padding: 0px, 10px,0px,10px;}