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>
Related
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>
I'm trying to figure out how I can position two elements under the same main div underneath each other efficiently with CSS (rather than writing individual CSS for each element). Essentially, I'm trying to make the search results page that google shows.
EDIT: I followed the suggestions in the comments, but the issue is without the float left, it seems as if the first 'article' is to the right of the search results, rather than actually being aligned underneath it.
.logo img {
margin: 15px;
float: left;
}
::-webkit-input-placeholder {
color: gray;
}
.searchbar .search {
height: 30px;
width: 650px;
border-radius: 15px;
margin-top: 15px;
}
.searchbar .mic {
position: absolute;
left: 725px;
margin-top: 20px;
}
.searchbar .tool {
position: absolute;
left: 760px;
margin-top: 20px;
}
#menu {
list-style-type: none;
margin: 0;
padding: 0;
height: 30px;
}
#menu li {
float:left;
height: 30px;
line-height: 30px;
}
#menu li a {
display: block;
padding: 0 20px;
color: #696969;
text-decoration: none;
}
.articles {
margin-bottom: 20px;
}
.articles .article {
list-style-type: none;
padding: 5px;
float: left;
}
.articles .article .heading a {
text-decoration: none;
font-size: 18px;
}
.articles .article .weblink a {
color: green;
text-decoration: none;
font-size: 14px;
}
.articles .article .description {
color: #696969;
font-size: 13px;
}
.footer {
position: fixed;
bottom: 0;
margin-left: 150px;
}
.footer a {
text-decoration: none;
color: #696969;
display: inline;
}
.footer .feedback,
.footer .privacy,
.footer .terms {
padding-right: 20px;
padding-left: 30px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href='/styles/styles.css' text='styles/css' rel='stylesheet'>
<title>Search Results</title>
</head>
<body>
<div class='logo'>
<a href='www.google.com'><img src='https://www.edigitalagency.com.au/wp-content/uploads/small-google-logo-png-transparent-background-600x200.png'
alt='Google logo' height='35'></a>
</div>
<div class='searchbar'>
<form>
<input class='search' type='text' placeholder="Sample Google search results page">
<img class='mic' src='https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Google_mic.svg/716px-Google_mic.svg.png'
alt='Google microphone' height='25'>
<img class='tool' src='https://static.thenounproject.com/png/105498-200.png' alt='Google search tool'
height='25'>
</form>
</div>
<ul id='menu'>
<li><a href='www.google.com/#'>All</a></li>
<li><a href='www.google.com/#'>News</a></li>
<li><a href='www.google.com/#'>Videos</a></li>
<li><a href='www.google.com/#'>Shopping</a></li>
<li><a href='www.google.com/#'>Maps</a></li>
<li><a href='www.google.com/#'>More</a></li>
<li><a href='www.google.com/#'>Settings</a></li>
<li><a href='www.google.com/#'>Tools</a></li>
</ul>
<div class='results'>
<p style='color: #696969; float: left; padding-left: 150px;'> About 127,000,000 results (0.64 seconds) </p>
</div>
<div class='articles'>
<ul class='article'>
<li class='heading'><a href='www.google.com'>With zero coding experience, artist building 180 webpages ...
</a></li>
<li class='weblink'><a href='www.google.com'>arstechnica.com/.../with-zero-coding-experience-artis... </a></li>
<li class='description'>Jul 26, 2013 - 117 days ago, having never done any programming in her life,
Jennifer Dewalt built her first webpage. The next day, she built another, and she ... </li>
</ul>
<ul class='article'>
<li class='heading'><a href='www.google.com'>With zero coding experience, artist building 180 webpages ...
</a></li>
<li class='weblink'><a href='www.google.com'>arstechnica.com/.../with-zero-coding-experience-artis... </a></li>
<li class='description'>Jul 26, 2013 - 117 days ago, having never done any programming in her life,
Jennifer Dewalt built her first webpage. The next day, she built another, and she ... </li>
</ul>
</div>
<div class='logodown'>
</div>
<div class='footer'>
<a class='help' href='www.google.com/#'>Help</a>
<a class='feedback' href=www.google.com/#>Send feedback</a> <a class='privacy' href='www.google.com/#'>Prviacy</a>
<a class='terms' href='www.google.com/#'>Terms</a>
</div>
</body>
</html>
There's no need to use a class per article, just use a class article.
Also, the float & position were the problematic properties.
.logo img {
margin: 15px;
float: left;
}
::-webkit-input-placeholder {
color: gray;
}
.searchbar .search {
height: 30px;
width: 650px;
border-radius: 15px;
margin-top: 15px;
}
.searchbar .mic {
position: absolute;
left: 725px;
margin-top: 20px;
}
.searchbar .tool {
position: absolute;
left: 760px;
margin-top: 20px;
}
#menu {
list-style-type: none;
margin: 0;
padding: 0;
height: 30px;
}
#menu li {
float:left;
height: 30px;
line-height: 30px;
}
#menu li a {
display: block;
padding: 0 20px;
color: #696969;
text-decoration: none;
}
.articles {
margin-bottom: 20px;
}
.articles .article {
list-style-type: none;
padding: 5px;
float: left;
}
.articles .article .heading a {
text-decoration: none;
font-size: 18px;
}
.articles .article .weblink a {
color: green;
text-decoration: none;
font-size: 14px;
}
.articles .article .description {
color: #696969;
font-size: 13px;
}
.footer {
position: fixed;
bottom: 0;
margin-left: 150px;
}
.footer a {
text-decoration: none;
color: #696969;
display: inline;
}
.footer .feedback,
.footer .privacy,
.footer .terms {
padding-right: 20px;
padding-left: 30px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href='/styles/styles.css' text='styles/css' rel='stylesheet'>
<title>Search Results</title>
</head>
<body>
<div class='logo'>
<a href='www.google.com'><img src='https://www.edigitalagency.com.au/wp-content/uploads/small-google-logo-png-transparent-background-600x200.png'
alt='Google logo' height='35'></a>
</div>
<div class='searchbar'>
<form>
<input class='search' type='text' placeholder="Sample Google search results page">
<img class='mic' src='https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Google_mic.svg/716px-Google_mic.svg.png'
alt='Google microphone' height='25'>
<img class='tool' src='https://static.thenounproject.com/png/105498-200.png' alt='Google search tool'
height='25'>
</form>
</div>
<ul id='menu'>
<li><a href='www.google.com/#'>All</a></li>
<li><a href='www.google.com/#'>News</a></li>
<li><a href='www.google.com/#'>Videos</a></li>
<li><a href='www.google.com/#'>Shopping</a></li>
<li><a href='www.google.com/#'>Maps</a></li>
<li><a href='www.google.com/#'>More</a></li>
<li><a href='www.google.com/#'>Settings</a></li>
<li><a href='www.google.com/#'>Tools</a></li>
</ul>
<div class='results'>
<p style='color: #696969; float: left; padding-left: 150px;'> About 127,000,000 results (0.64 seconds) </p>
</div>
<div class='articles'>
<ul class='article'>
<li class='heading'><a href='www.google.com'>With zero coding experience, artist building 180 webpages ...
</a></li>
<li class='weblink'><a href='www.google.com'>arstechnica.com/.../with-zero-coding-experience-artis... </a></li>
<li class='description'>Jul 26, 2013 - 117 days ago, having never done any programming in her life,
Jennifer Dewalt built her first webpage. The next day, she built another, and she ... </li>
</ul>
<ul class='article'>
<li class='heading'><a href='www.google.com'>With zero coding experience, artist building 180 webpages ...
</a></li>
<li class='weblink'><a href='www.google.com'>arstechnica.com/.../with-zero-coding-experience-artis... </a></li>
<li class='description'>Jul 26, 2013 - 117 days ago, having never done any programming in her life,
Jennifer Dewalt built her first webpage. The next day, she built another, and she ... </li>
</ul>
</div>
<div class='logodown'>
</div>
<div class='footer'>
<a class='help' href='www.google.com/#'>Help</a>
<a class='feedback' href=www.google.com/#>Send feedback</a> <a class='privacy' href='www.google.com/#'>Prviacy</a>
<a class='terms' href='www.google.com/#'>Terms</a>
</div>
</body>
</html>
Edit: I added a small input and it is clearly not next to the first article.
Edit 2: You need to remove the float in the inline-style applied to the result paragraph:
<p style='color: #696969; float: left; padding-left: 150px;'> About 127,000,000 results (0.64 seconds) </p>
Must become:
<p style='color: #696969;'> About 127,000,000 results (0.64 seconds) </p>
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.
So I'm building a website with a top menu but I ran into a problem. Basicly I want to have my menu centered but now its aligned to the left. Also the menu has a background color with would have to expand the whole width. I've tryed the answers describes here: How do I center the navigation menu?. But to no succes.
My CSS/HTML code is:
body {
font-family: FuturaLight;
background: white;
color: #333;
align-content: top;
margin: 0;
margin-bottom: 5em;
padding: 0;
}
.margin {
margin-left: 300px;
margin-right: 300px;
}
ul {
font-family: Futura;
font-size: 25px;
list-style-type: none;
position: fixed;
top: 61px;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
border-right: 1px solid yellowgreen;
border-top: 1px solid yellowgreen;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #333;
}
.active {
background-color: white;
color: green
}
.spacer {
width: 100%;
height: 95px;
}
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Scouts Permeke</TITLE>
<link rel="stylesheet" type="text/css" href="siteStyle.css">
</HEAD>
<BODY>
<H1>Scouts Permeke</H1>
<ul>
<li><a class="active" href="scouts_permeke_site.html">Home</a>
</li>
<li>Nieuws
</li>
<li>Contact
</li>
<li>Over
</li>
<li>Foto's
</li>
<li>Activiteiten
</li>
<li>Papierwerk
</li>
<li>Afspraken
</li>
<li>Uniform
</li>
<li>Technieken
</li>
<li>Jaarthema
</li>
<li>Rituelen
</li>
<li>Verhuur
</li>
<li>Inschrijvingen
</li>
</ul>
<div class="spacer">
</div>
<img src="groepsfoto.jpg" width="100%" " >
<div style="font-family: Futura ">
<H2>Welkom op onze vernieuwde site!</H2>
<H2>Kijk gerust even rond.</H2>
</div>
</BODY>
</HTML>
Many thanks in advance.
Add to your ul in your Stylesheet this:
text-align: center;
and replace from li
float: left;
with this
display: inline-block;
That could do it.
Hope this helps.
Have you considered flexbox as it will work depending on screen size and you can set it to be centre alligned.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Just note it wont work in older versions of ie
BODY {
font-family: FuturaLight;
background: white; color: #333;
align-content: top;
margin: 0;
margin-bottom: 5em;
padding: 0;
}
.margin {
margin-left: 300px;
margin-right: 300px;
}
ul {
font-family: Futura;
font-size: 25px;
list-style-type: none;
position: fixed;
top: 61px;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
display: flex;
justify-content:center;
flex-wrap: wrap
}
li {
float: left;
border-right:1px solid yellowgreen;
border-top:1px solid yellowgreen;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #333;
}
.active {
background-color: white;
color: green
}
.spacer
{
width: 100%;
height: 95px;
}
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Scouts Permeke</TITLE>
<link rel="stylesheet" type="text/css" href="siteStyle.css">
</HEAD>
<BODY>
<H1>Scouts Permeke</H1>
<ul>
<li><a class="active" href="scouts_permeke_site.html">Home</a></li>
<li>Nieuws</li>
<li>Contact</li>
<li>Over</li>
<li>Foto's</li>
<li>Activiteiten</li>
<li>Papierwerk</li>
<li>Afspraken</li>
<li>Uniform</li>
<li>Technieken</li>
<li>Jaarthema</li>
<li>Rituelen</li>
<li>Verhuur</li>
<li>Inschrijvingen</li>
</ul>
<div class="spacer">
</div>
<img src="groepsfoto.jpg" width="100%"" >
<div style="font-family: Futura">
<H2>Welkom op onze vernieuwde site!</H2>
<H2>Kijk gerust even rond.</H2>
</div>
</BODY>
</HTML>
I am aware to use the absoulte position to the submenu tag; however when I do it solves the problem but only the last entry of the submenu displays. The others seem to have been swallowed up. Please help! My code is shown below:
* {
margin: 0;
padding: 0;
}
body {
background-color: #575768;
}
#topBar {
background-color: #C9A26B;
width: 100%;
height: 70px;
color: white;
font-family: arial, helvetica, sans-serif;
}
.fixedwidth {
width: 1500px;
margin: 0 auto;
}
#logodiv {
padding-top: 5px;
float: left;
border-right: #FFFFFF 1px solid;
padding-right: 30px;
}
#signindiv {
font-weight: bold;
float: left;
font-size: 1em;
width: 90px;
border-right: #FFFFFF 1px solid;
padding: 25px 0 27px 20px;
}
#topmenudiv {
padding-top: 20px;
}
/* Rules for Nav Menu ___________________________________ */
#mainmenu,
.submenu {
list-style-type: none;
}
#mainmenu li {
width: 185px;
text-align: center;
position: relative;
float: left;
margin-right: 4px;
}
#mainmenu ul li {} #mainmenu a {
text-decoration: none;
display: block;
width: 185px;
height: 40px;
background-color: #5E5D5B;
border: 1px solid #CCC;
border-radius: 5px;
color: #EE9A24;
}
#mainmenu .submenu a {
margin-top: 2px;
}
#mainmenu li:hover > a {
background-color: #CFC;
}
#mainmenu li:hover a:hover {
background-color: #FFD8A4;
}
#mainmenu .submenu {
display: none;
}
#mainmenu li:hover .submenu {
display: block;
}
#meat {
clear: both;
padding-top: 20px;
}
footer {
text-align: center;
margin: 0 auto;
}
<!doctype html>
<html>
<head>
<title>ST-LLC About Us</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div id="container">
<div id="topBar">
<div class="fixedwidth">
<div id="logodiv">
<img src="images/LLClogo.jpg" width="170px" />
</div>
<div id="signindiv">Sign In
</div>
<div id="topmenudiv">
<ul id="mainmenu">
<li>About Us
</li>
<li> Services
<ul class="submenu">
<li> Project Management
</li>
<li> Digital Content
</li>
</ul>
</li>
<li> Projects
<ul class="submenu">
<li>Active Projects
</li>
<li>Closed Projects
</li>
</ul>
</li>
<li> ST-LLC Publications
<ul class="submenu">
<li> Recent Publications
</li>
<li> Past Publications
</li>
</ul>
</li>
<li> Request for Proposals (RFP)
</li>
<li> Contacts
</li>
</ul>
</div>
<div id="meat">
<p>On June 6, 2004 the ASME Board of Governors (BOG) authorized</p>
Try this on your submenu
#mainmenu .submenu {
display: none;
position: absolute;
top: 100%;
}