What I need to achieve is to align .btn p vertically to the middle of .btn img height. Is that possible to make if the .btn p element is floated to the right? I need them to be on the same line, but when changed their displays to display: inline block; they are stacked vertically (and I don't know why).
I know that I could do it with flexbox really easily, but I need it to be supported by IE 9+ browsers, and flexbox is only partially-supported by IE 11.
html, body {
margin: 0;
padding: 0;
}
.slide1 {
background-color: lightblue;
height: 100vh;
position: relative;
text-align: center;
}
.slide1 h1 {
display: block;
width: 100%;
padding: 0;
margin: 0 auto;
position: absolute;
top: 4.75em;
}
.slider-btn {
position: absolute;
width: 100%;
bottom: 120px;
left: 50%;
transform: translateX(-50%);
text-align: center;
}
.slider-btn a {
display: inline-block;
}
.slider-btn p {
background-color: blue;
color: white;
margin: 0;
padding: 0.5em;
float: right;
}
.btn {
display: inline-block;
}
/*# sourceMappingURL=main.css.map */
<!DOCTYPE html>
<html>
<head>
<title> test </title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<section class="heading">
<div class="slide1">
<h1> Lorem Ipsum sit dolor amet </h1>
</div>
<div class="slider-btn">
<div class="btn">
<a href="http://google.com">
<img src="http://placehold.it/81x81" />
<p> Slide no. 1 </p>
</a>
</div>
<div class="btn">
<a href="http://google.com">
<img src="http://placehold.it/81x81" />
<p> Slide no. 2 </p>
</a>
</div>
<div class="btn">
<a href="http://google.com">
<img src="http://placehold.it/81x81" />
<p> Slide no. 3 </p>
</a>
</div>
</div>
</section>
</body>
</html>
You could do this:
Changes: position, vertical-align, display and HTML
CSS
html,
body {
margin: 0;
padding: 0;
}
.slide1 {
background-color: lightblue;
height: 100vh;
position: relative;
text-align: center;
}
.slide1 h1 {
display: block;
width: 100%;
padding: 0;
margin: 0 auto;
position: relative;
padding: 40px 0px;
}
.slider-btn {
position: relative;
width: 100%;
text-align: center;
}
.slider-btn a {
display: inline-block;
}
.slider-btn p {
background-color: blue;
color: white;
margin: 0;
padding: 0.5em;
display: inline-block;
vertical-align: middle;
}
.btn {
display: inline-block;
}
.btn a img{
display: inline-block;
vertical-align: middle;
}
HTML
<section class="heading">
<div class="slide1">
<h1>Lorem Ipsum sit dolor amet</h1>
<div class="slider-btn">
<div class="btn">
<a href="http://google.com">
<img src="http://placehold.it/81x81" /><p>Slide no. 1</p>
</a>
</div>
<div class="btn">
<a href="http://google.com">
<img src="http://placehold.it/81x81" /><p>Slide no. 2</p>
</a>
</div>
<div class="btn">
<a href="http://google.com">
<img src="http://placehold.it/81x81" /><p>Slide no. 3</p>
</a>
</div>
</div>
</div>
</section>
DEMO HERE
Related
I'm trying to make a sidebar and top of the page not move when you scroll (like Twitter, Facebook, etc.).
I'm only using CSS and Html.
I managed to make the side bars stay there, but the "Home" part does not work.
I tried with Position: Sticky, set overflow-x to auto for the parent, tried wrapping it into another div and self-align: flex-start, but nothing seems to be working.
Now that I put it into a smaller screen, it also looks to overlap the Side bar with the Feed, and hide the Widgets.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
--twitter-color: #50b7f5;
--twitter-background: #e6ecf0;
}
/* Sidebar Styling Starts */
.sidebarOption {
display: flex;
align-items: center;
cursor: pointer;
}
.sidebarOption .material-icons,
.fa-twitter {
padding: 20px;
}
.sidebarOption h2 {
font-weight: 800;
font-size: 20px;
margin-right: 20px;
}
.sidebarOption:hover {
background-color: var(--twitter-background);
border-radius: 30px;
color: var(--twitter-color);
transition: color 100ms ease-out;
}
.sidebarOption.active {
color: var(--twitter-color);
}
.sidebar_tweet {
width: 100%;
background-color: var(--twitter-color);
border: none;
color: white;
font-weight: 900;
border-radius: 30px;
height: 50px;
margin-top: 20px;
}
body {
display: flex;
height: 100%;
max-width: 1300px;
margin-left: auto;
margin-right: auto;
padding: 0 10px;
overflow-x: auto;
}
.sidebar {
border-right: 1px solid var(--twitter-background);
flex: 0.2;
min-width: 250px;
margin-top: 20px;
padding-left: 20px;
padding-right: 20px;
left: 0;
align-self: flex-start;
position: sticky;
top: 0;
overflow-x: auto;
}
.fa-twitter {
color: var(--twitter-color);
font-size: 30px;
}
/* Sidebar Styling Ends */
/* Feed Styling Starts */
.feed {
flex: 0.5;
border-right: 1px solid var(--twitter-background);
min-width: fit-content;
overflow-x: auto;
align-self: flex-start;
}
.feed-header {
border: 1px solid var(--twitter-background);
padding: 15px 20px;
/* I DONT KNOW HOW TO MAKE THIS STICK */
}
.feed-header h2 {
font-size: 20px;
font-weight: 800;
}
.feed::-webkit-scrollbar {
display: none;
}
.feed {
-ms-overflow-style: none;
scrollbar-width: none;
}
/* Styling Tweetbox Starts */
.tweetbox__input img {
border-radius: 50%;
height: 40px;
}
.tweetBox {
padding-bottom: 10px;
border-bottom: 8px solid var(--twitter-background);
padding-right: 10px;
}
.tweetBox form {
display: flex;
flex-direction: column;
}
.tweetbox__input {
display: flex;
padding: 20px;
}
.tweetbox__input input {
display: flex;
margin-left: 20px;
font-size: 20px;
border: none;
outline: none;
}
.tweetBox__tweetButton {
background-color: var(--twitter-color);
border: none;
color: white;
font-weight: 900;
border-radius: 30px;
width: 80px;
height: 40px;
margin-top: 20px;
margin-left: auto;
}
/* Styling Tweetbox Ends */
/* Feed Styling Ends */
/* Post Styling Starts */
.post__avatar img {
border-radius: 50%;
height: 40px;
}
.post {
display: flex;
align-items: flex-start;
border-bottom: 1px solid var(--twitter-background);
padding-bottom: 10px;
}
.post__body img {
width: 450px;
object-fit: contain;
border-radius: 20px;
}
.post__footer {
display: flex;
justify-content: space-between;
margin-top: 10px;
}
.post__badge {
font-size: 14px !important;
color: var(--twitter-color);
margin-right: 5px;
}
.post__headerSpecial {
font-weight: 600;
font-size: 12px;
color: gray;
}
.post__headerText {
font-size: 15px;
margin-bottom: 5px;
}
.post__headerDescription {
margin-bottom: 10px;
font-size: 15px;
}
.post__body {
flex: 1;
padding: 10px;
}
.post__avatar {
padding: 20px;
}
/* Post Styling Ends */
/* Widgets Styling Starts */
.widgets {
flex: 0.3;
right: 0;
right: 0;
align-self: flex-start;
position: sticky;
top: 0;
overflow-x: auto;
}
.widgest__input {
display: flex;
align-items: center;
background-color: var(--twitter-background);
padding: 10px;
border-radius: 20px;
margin-top: 10px;
margin-left: 20px;
}
.widgest__input input {
border: none;
background-color: var(--twitter-background);
outline: none;
}
.widgets__searchIcon {
color: gray;
}
.widgets__widgetContainer {
display: flex;
flex-direction: column;
margin-top: 10px;
margin-left: 20px;
padding: 20px;
background-color: #f5f8fa;
border-radius: 20px;
}
.widgets__widgetContainer h2 {
font-size: 18px;
font-weight: 800;
}
.card_container {
display: flex;
flex-direction: column;
align-items: center;
}
.card {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 18rem;
}
.card img {
border-radius: 20px;
width: 18rem;
}
/* Widgets Styling Ends */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Twiter Clone</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Sidebar Start -->
<div class="sidebar">
<i class="fab fa-twitter "></i>
<div class="sidebarOption active ">
<span class="material-icons ">home</span>
<h2>Home</h2>
</div>
<div class="sidebarOption">
<span class="material-icons ">search</span>
<h2>Explore</h2>
</div>
<div class="sidebarOption">
<span class="material-icons ">notifications_none</span>
<h2>Notifications</h2>
</div>
<div class="sidebarOption">
<span class="material-icons ">mail_outline</span>
<h2>Message</h2>
</div>
<div class="sidebarOption">
<span class="material-icons ">bookmark_border</span>
<h2>Bookmarks</h2>
</div>
<div class="sidebarOption">
<span class="material-icons">list_alt</span>
<h2>Lists</h2>
</div>
<div class="sidebarOption">
<span class="material-icons">perm_identity</span>
<h2>Profile</h2>
</div>
<div class="sidebarOption">
<span class="material-icons">more_horiz</span>
<h2>More</h2>
</div>
<button class="sidebar_tweet">Tweet</button>
</div>
<!-- Sidebar End -->
<!-- Feed Starts -->
<div class="feed">
<div class="feed_header">
<h2>Home</h2>
</div>
<!-- Tweetbox Starts -->
<div class="tweetBox">
<form>
<div class="tweetbox__input">
<img src="https://i.pinimg.com/originals/a6/58/32/a65832155622ac173337874f02b218fb.png" alt="">
<input type="text" placeholder="What's happening">
</div>
<button class="tweetBox__tweetButton">Tweet</button>
</form>
</div>
<!-- Tweetbox Ends -->
<!-- Post Starts -->
<div class="post">
<div class="post__avatar">
<img src="https://i.pinimg.com/originals/a6/58/32/a65832155622ac173337874f02b218fb.png" alt="">
</div>
<div class="post__body">
<div class="post__header">
<div class="post__headerText">
<h3>My Name
<span class="post_headerSpecial">
<span class="material-icons post__badge"> verified </span>#myname
</span>
</h3>
</div>
<div class="post_headerDescription">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
</div>
</div>
<img src="https://i.ytimg.com/vi/bepwr1-CNRU/maxresdefault.jpg" alt="">
<div class="post__footer">
<span class="material-icons">repeat</span>
<span class="material-icons">favorite_border</span>
<span class="material-icons">publish</span>
</div>
</div>
</div>
<!-- Post Ends -->
<!-- Post Starts -->
<div class="post">
<div class="post__avatar">
<img src="https://i.pinimg.com/originals/a6/58/32/a65832155622ac173337874f02b218fb.png" alt="">
</div>
<div class="post__body">
<div class="post__header">
<div class="post__headerText">
<h3>My Name
<span class="post_headerSpecial">
<span class="material-icons post__badge"> verified </span>#myname
</span>
</h3>
</div>
<div class="post_headerDescription">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
</div>
</div>
<img src="https://i.ytimg.com/vi/bepwr1-CNRU/maxresdefault.jpg" alt="">
<div class="post__footer">
<span class="material-icons">repeat</span>
<span class="material-icons">favorite_border</span>
<span class="material-icons">publish</span>
</div>
</div>
</div>
<!-- Post Ends -->
<!-- Post Starts -->
<div class="post">
<div class="post__avatar">
<img src="https://i.pinimg.com/originals/a6/58/32/a65832155622ac173337874f02b218fb.png" alt="">
</div>
<div class="post__body">
<div class="post__header">
<div class="post__headerText">
<h3>My Name
<span class="post_headerSpecial">
<span class="material-icons post__badge"> verified </span>#myname
</span>
</h3>
</div>
<div class="post_headerDescription">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
</div>
</div>
<img src="https://i.ytimg.com/vi/bepwr1-CNRU/maxresdefault.jpg" alt="">
<div class="post__footer">
<span class="material-icons">repeat</span>
<span class="material-icons">favorite_border</span>
<span class="material-icons">publish</span>
</div>
</div>
</div>
<!-- Post Ends -->
<!-- Post Starts -->
<div class="post">
<div class="post__avatar">
<img src="https://i.pinimg.com/originals/a6/58/32/a65832155622ac173337874f02b218fb.png" alt="">
</div>
<div class="post__body">
<div class="post__header">
<div class="post__headerText">
<h3>My Name
<span class="post_headerSpecial">
<span class="material-icons post__badge"> verified </span>#myname
</span>
</h3>
</div>
<div class="post_headerDescription">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
</div>
</div>
<img src="https://i.ytimg.com/vi/bepwr1-CNRU/maxresdefault.jpg" alt="">
<div class="post__footer">
<span class="material-icons">repeat</span>
<span class="material-icons">favorite_border</span>
<span class="material-icons">publish</span>
</div>
</div>
</div>
<!-- Post Ends -->
</div>
<!-- Feed Ends -->
<!-- Widget Starts -->
<div class="widgets">
<div class="widgest__input">
<span class="material-icons widgets__searchIcon"> search </span>
<input type="text" placeholder="search Twitter">
</div>
<div class="widgets__widgetContainer">
<h2>What's happening</h2>
<div class="card_container">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="https://neilpatel.com/wp-content/uploads/2021/03/source-code_featured-image.png" alt="Card image cap">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
<div class="widgets__widgetContainer">
<h2>What's happening</h2>
<div class="card_container">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="https://neilpatel.com/wp-content/uploads/2021/03/source-code_featured-image.png" alt="Card image cap">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Widget Ends -->
</body>
</html>
In your code if you remove overflow-x: auto from .feed and add
.feed_header {
position: sticky;
top: 0;
}
the 'Home' heading sticks to the top as you scroll.
Another way is to use
.feed_header {
position: fixed;
top: 0;
}
.feed {
margin-top: 16px;
}
This fixes the feed_header to the top of the screen as you scroll. The feed container then needs a bit of spacing at the top to ensure the feed_header isn't overlapping.
Remove overflow-x: auto; from .feed and add this to your css:
.feed_header, .tweetBox {
position: sticky;
top: 0;
}
Please insert the following code and make changes to your classes as well.
change from .feed-header to .feed_header
.feed_header {
border: 1px solid var(--twitter-background);
padding: 15px 20px;
/* I DONT KNOW HOW TO MAKE THIS STICK */
position: fixed; /*Code to add*/
top: 0; /*Code to add*/
}
Adding on to #John's answer - sometimes you may need to specify z-index:1 to have the element always on top while scrolling. Like this:
position: -webkit-sticky; /* Safari & IE */
position: sticky;
top: 0;
z-index: 1;
Just add position: fixed for sidebar and feed header.
.feed_header, .sidebar {
position: fixed;
top: 0;
}
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 2 years ago.
I'm trying to align multiple inline-blocks at the top of my page, but for reasons that are baffling to me, it's not working. The CSS could hardly be cleaner or less, but the top isn't aligning properly. I thought it could be a floating issue, but even after applying a clear:both it doesn't fix this.
Please see the program here:
https://jsfiddle.net/yezwocta/
#page {
text-align: center;
}
.article {
width: 350px;
height: 150px;
margin: 5px;
display: inline-block;
background-color: #fafafa;
}
.article img {
float: left;
width: 150px;
height: 130px;
margin-top: 10px;
}
.content {
position: relative;
display: inline-block;
width: 170px;
height: 130px;
margin-top: 10px;
margin-left: 10px;
text-align: left;
}
.title {
font-size: 1.2rem;
}
.source {
font-size: 0.8rem;
position: absolute;
bottom: 0;
left: 0;
}
<div id="page">
<div class="article">
<a href="https://cnn.com" target="_blank">
<img alt="News" src="https://loremflickr.com/150/130/news?random=1">
<div class="content">
<span class="title">Cable News Network</span>
<span class="source">CNN</span>
</div>
</a>
</div>
<div class="article">
<a href="https://www.mozilla.org/en-US/firefox/new/" target="_blank">
<img alt="Firefox browser" src="https://loremflickr.com/150/130/browser?random=2">
<div class="content">
<span class="title">Get the Latest Firefox Browser</span>
<span class="source">Mozilla</span>
</div>
</a>
</div>
<div class="article">
<a href="https://www.kproxy.com/" target="_blank">
<img alt="kproxy" src="https://loremflickr.com/150/130/proxy?random=3">
<div class="content">
<span class="title">Surf the web anonymously and bypass filters</span>
<span class="source">kproxy</span>
</div>
</a>
</div>
</div>
Add vertical-align: top; to your .article CSS (the default is baseline):
#page {
text-align: center;
}
.article {
width: 350px;
height: 150px;
margin: 5px;
display: inline-block;
background-color: #fafafa;
vertical-align:top;
}
.article img {
float: left;
width: 150px;
height: 130px;
margin-top: 10px;
}
.content {
position: relative;
display: inline-block;
width: 170px;
height: 130px;
margin-top: 10px;
margin-left: 10px;
text-align: left;
}
.title {
font-size: 1.2rem;
}
.source {
font-size: 0.8rem;
position: absolute;
bottom: 0;
left: 0;
}
<div id="page">
<div class="article">
<a href="https://cnn.com" target="_blank">
<img alt="News" src="https://loremflickr.com/150/130/news?random=1">
<div class="content">
<span class="title">Cable News Network</span>
<span class="source">CNN</span>
</div>
</a>
</div>
<div class="article">
<a href="https://www.mozilla.org/en-US/firefox/new/" target="_blank">
<img alt="Firefox browser" src="https://loremflickr.com/150/130/browser?random=2">
<div class="content">
<span class="title">Get the Latest Firefox Browser</span>
<span class="source">Mozilla</span>
</div>
</a>
</div>
<div class="article">
<a href="https://www.kproxy.com/" target="_blank">
<img alt="kproxy" src="https://loremflickr.com/150/130/proxy?random=3">
<div class="content">
<span class="title">Surf the web anonymously and bypass filters</span>
<span class="source">kproxy</span>
</div>
</a>
</div>
</div>
I have a webpage that uses purely html and CSS (no JavaScript yet). The webpage contains a simple, fixed position header with hover dropdowns for each category. The webpage content itself is arranged in 'tiles' that produce effects on hover to emphasize them (and link to other pages). I will attach an image to better explain. The dropdown works fine when at the very top of the webpage, however if the dropdown menu falls on top of one of the tiles the dropdown will disappear and trigger the tile hover effects instead.
I have ensured that all parts of the dropdown have a z-index greater than the tiles.
Dropdown HTML:
<nav class="navigation">
<ul>
<li class=dropdown>
catagory1
<div class="dropdown-content">
content1
content2
content3
</div>
</li>
<li class="dropdown">
catagory2
<div class="dropdown-content">
content4
content5
</div>
</li>
</ul>
</nav>
Page content HTML (example for single tile, code repeated):
<a href="content6.html" class="tile">
<img src="image1.jpg>
<div class="container">
<div class="overlay"></div> /* overlay that animates on hover */
/* content for the tile */
</div>
</a>
relevant CSS:
navigation {
position: fixed;
}
.navigation li {
display: inline-block;
margin: 0 5%;
}
.dropdown {
position: relative;
display: inline-block;
z-index: 20;
}
.dropdown-content {
display: none;
position: absolute;
}
.dropdown-content a {
display: inline-block;
position: relative;
}
.dropdown-content a:hover {
background-color: blue;
color: white;
}
.dropdown:hover .dropdown-content{
display: block;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
z-index: 17;
}
.tile:hover .overlay {
opacity: 0.1;
}
Image 1:
Top of page(Works Fine)
Image 2:
Scrolled down(Hovering over Content 3 will close dropdown)
I would like for the dropdown menu to stay on top of tiles regardless of whether or not the hover effects are triggered. I'm not sure if this will require JavaScript. Any help is appreciated!
Edit: Snippet Added
/* General Rules */
* {
margin: 0;
padding: 0;
border: none;
font-family: "DM Serif Text", serif;
}
body {
background-color: #1b1d35;
color: whitesmoke;
max-width: 100%;
overflow-x: hidden;
margin: 0 auto;
}
ul {
margin: inherit;
padding: none;
border: none;
list-style: none;
text-align: center;
}
li {
margin: inherit;
padding: none;
border: none;
}
a {
color: whitesmoke;
font-size: 2rem;
display: inline-block;
width: auto;
height: auto;
text-decoration: none;
margin: 0 auto;
transition-duration: 0.3s;
}
a:not(p):hover {
color: #38b6ff;
}
header {
position: fixed;
z-index: 10;
background-color: #7e7d7d;
width: 100%;
height: 10rem;
margin: inherit;
padding: none;
border: none;
}
#head-logo {
position: absolute;
width: 15%;
height: auto;
}
.navigation {
position: fixed;
z-index: 20;
width: 100%;
margin: 0 auto;
border: none;
padding: none;
top: 5rem;
}
.navigation li {
display: inline-block;
margin: 0 5%;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #7e7d7d;
box-shadow: 0 1rem 2rem 0 rgba(0,0,0,0.2);
}
.dropdown-content a {
font-size: 1.5rem;
color: whitesmoke;
text-decoration: none;
text-align: left;
display: inline-block;
width: 17.5rem;
}
.dropdown-content a:hover {background-color: #7e7d7dd8; box-shadow: 1rem rgb(0,0,0); color: rgb(56, 182, 255);}
.dropdown:hover .dropdown-content{display: block;}
.sidebar {
position: fixed;
top: 17rem;
margin-left: 0.1%;
text-align: left;
}
.sidebaritem{
font-size: 1rem;
margin-top: 1rem;
margin-left: 0;
text-align: left;
}
h3 {
font-size: 1.5rem;
margin: 1rem auto;
}
#main {
position: relative;
top: 12rem;
width: 65%;
margin: inherit;
}
img {
width: 100%;
height: auto;
}
.row {
height: 20rem;
}
.column {
float: left;
width: 31%;
padding: 1%;
position: relative;
}
#bigtile {
width: 64%;
padding: 1%;
}
.container {
position: relative;
}
/* Things that apply to all tiles */
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: 0.5s ease;
background-color: #38b6ff;
z-index: 17;
}
/* Style for tiles where pictures take up full tile */
.pic-tile {
border-top: 5px solid #38b6ff;
}
.pic-tile .container img {
height:100%;
width:100%;
}
.pic-tile .container h2{
position: absolute;
left: 2%;
bottom: 2rem;
z-index: 7;
}
.pic-tile .container h3 {
position: absolute;
left: 2%;
bottom: 0;
z-index: 7;
}
.pic-tile:hover .overlay {
opacity: 0.1;
}
/* Style for regular tiles */
.tile img {
height: 50%;
width: 100%;
top: 0;
}
.tile {
background-color: gray;
bottom: 1%;
text-align: end;
position: relative;
width: 100%;
height: 100%;
border-top: 5px solid #38b6ff;
}
.tile .container{
font-size: 1rem;
position: relative;
margin-bottom: 1%;
margin-left: 1%;
}
.tile .container p{
font-size: 1rem;
position: relative;
text-align: end;
color: whitesmoke;
}
.tile:hover .overlay {
opacity: 0.1;
}
<html>
<body>
<!-- <img> insert logo here -->
<header>
<nav class="navigation">
<ul>
<li class=dropdown>
Catagory1
<div class="dropdown-content">
content1
content2
content3
</div>
</li>
<li class="dropdown">
Catagory2
<div class="dropdown-content">
content4
content5
</div>
</li>
<li>Catagory3</li>
</ul>
</nav>
</header>
<div id="main">
<div class="row">
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
</div>
<div class="row">
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
</div>
<div class="row">
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
</div>
</div>
</div>
</body>
</html>
This problem can be solved by changing the z-index of headerto 20. Even though the z-index of the .dropdownclass was 20, the z-index of the header element was 10.
Although the z-index is not inherited, one needs to take into consideration the stacking context. For example, if a sibling element B has a z-index that is greater than the z-index of sibling element A, B will be above A. If Ahas a child element that has a z-index higher than that of element B, B will still be shown above A provided that B has a greater z-index than A.
For more information about stacking contexts, check out this Post.
/* General Rules */
* {
margin: 0;
padding: 0;
border: none;
font-family: "DM Serif Text", serif;
}
body {
background-color: #1b1d35;
color: whitesmoke;
max-width: 100%;
overflow-x: hidden;
margin: 0 auto;
}
ul {
margin: inherit;
padding: none;
border: none;
list-style: none;
text-align: center;
}
li {
margin: inherit;
padding: none;
border: none;
}
a {
color: whitesmoke;
font-size: 2rem;
display: inline-block;
width: auto;
height: auto;
text-decoration: none;
margin: 0 auto;
transition-duration: 0.3s;
}
a:not(p):hover {
color: #38b6ff;
}
header {
position: fixed;
z-index: 20;
background-color: #7e7d7d;
width: 100%;
height: 10rem;
margin: inherit;
padding: none;
border: none;
}
#head-logo {
position: absolute;
width: 15%;
height: auto;
}
.navigation {
z-index:20;
position: fixed;
width: 100%;
margin: 0 auto;
border: none;
padding: none;
top: 5rem;
}
.navigation li {
display: inline-block;
margin: 0 5%;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #7e7d7d;
box-shadow: 0 1rem 2rem 0 rgba(0,0,0,0.2);
}
.content1{
}
.dropdown-content a {
font-size: 1.5rem;
color: whitesmoke;
text-decoration: none;
text-align: left;
display: inline-block;
width: 17.5rem;
}
.dropdown-content a:hover {background-color: #7e7d7dd8; box-shadow: 1rem rgb(0,0,0); color: rgb(56, 182, 255);}
.dropdown:hover .dropdown-content{display: block;}
.sidebar {
position: fixed;
top: 17rem;
margin-left: 0.1%;
text-align: left;
}
.sidebaritem{
font-size: 1rem;
margin-top: 1rem;
margin-left: 0;
text-align: left;
}
h3 {
font-size: 1.5rem;
margin: 1rem auto;
}
#main {
position: relative;
top: 12rem;
width: 65%;
margin: inherit;
}
img {
width: 100%;
height: auto;
}
.row {
height: 20rem;
}
.column {
float: left;
width: 31%;
padding: 1%;
position: relative;
}
#bigtile {
width: 64%;
padding: 1%;
}
.container {
position: relative;
}
/* Things that apply to all tiles */
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: 0.5s ease;
background-color: #38b6ff;
z-index: 17;
}
/* Style for tiles where pictures take up full tile */
.pic-tile {
border-top: 5px solid #38b6ff;
}
.pic-tile .container img {
height:100%;
width:100%;
}
.pic-tile .container h2{
position: absolute;
left: 2%;
bottom: 2rem;
z-index: 7;
}
.pic-tile .container h3 {
position: absolute;
left: 2%;
bottom: 0;
z-index: 7;
}
.pic-tile:hover .overlay {
opacity: 0.1;
}
/* Style for regular tiles */
.tile img {
height: 50%;
width: 100%;
top: 0;
}
.tile {
background-color: gray;
bottom: 1%;
text-align: end;
position: relative;
width: 100%;
height: 100%;
border-top: 5px solid #38b6ff;
}
.tile .container{
font-size: 1rem;
position: relative;
margin-bottom: 1%;
margin-left: 1%;
}
.tile .container p{
font-size: 1rem;
position: relative;
text-align: end;
color: whitesmoke;
}
.tile:hover .overlay {
opacity: 0.1;
}
<!DOCTYPE html >
<html>
<body>
<!-- <img> insert logo here -->
<header>
<nav class="navigation">
<ul>
<li class=dropdown>
Catagory1
<div class="dropdown-content">
content1
content2
content3
</div>
</li>
<li class="dropdown">
Catagory2
<div class="dropdown-content">
content4
content5
</div>
</li>
<li>Catagory3</li>
</ul>
</nav>
</header>
<div id="main">
<div class="row">
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
</div>
<div class="row">
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
</div>
<div class="row">
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
</div>
</div>
</div>
</body>
</html>
Your hover effect is only applied to a, which means it loses the effect when mouse is not over the actual link.
Apply the hover to li instead, so it will cover it properly.
a:not(p):hover {
color: #38b6ff;
}
use this instead.
li:hover {
color: #38b6ff;
}
/* General Rules */
* {
margin: 0;
padding: 0;
border: none;
font-family: "DM Serif Text", serif;
}
body {
background-color: #1b1d35;
color: whitesmoke;
max-width: 100%;
overflow-x: hidden;
margin: 0 auto;
}
ul {
margin: inherit;
padding: none;
border: none;
list-style: none;
text-align: center;
}
li {
margin: inherit;
padding: none;
border: none;
}
a {
color: whitesmoke;
font-size: 2rem;
display: inline-block;
width: auto;
height: auto;
text-decoration: none;
margin: 0 auto;
transition-duration: 0.3s;
}
li:hover {
color: #38b6ff;
}
header {
position: fixed;
z-index: 10;
background-color: #7e7d7d;
width: 100%;
height: 10rem;
margin: inherit;
padding: none;
border: none;
}
#head-logo {
position: absolute;
width: 15%;
height: auto;
}
.navigation {
position: fixed;
z-index: 20;
width: 100%;
margin: 0 auto;
border: none;
padding: none;
top: 5rem;
}
.navigation li {
display: inline-block;
margin: 0 5%;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #7e7d7d;
box-shadow: 0 1rem 2rem 0 rgba(0,0,0,0.2);
}
.dropdown-content a {
font-size: 1.5rem;
color: whitesmoke;
text-decoration: none;
text-align: left;
display: inline-block;
width: 17.5rem;
}
.dropdown-content a:hover {background-color: #7e7d7dd8; box-shadow: 1rem rgb(0,0,0); color: rgb(56, 182, 255);}
.dropdown:hover .dropdown-content{display: block;}
.sidebar {
position: fixed;
top: 17rem;
margin-left: 0.1%;
text-align: left;
}
.sidebaritem{
font-size: 1rem;
margin-top: 1rem;
margin-left: 0;
text-align: left;
}
h3 {
font-size: 1.5rem;
margin: 1rem auto;
}
#main {
position: relative;
top: 12rem;
width: 65%;
margin: inherit;
}
img {
width: 100%;
height: auto;
}
.row {
height: 20rem;
}
.column {
float: left;
width: 31%;
padding: 1%;
position: relative;
}
#bigtile {
width: 64%;
padding: 1%;
}
.container {
position: relative;
}
/* Things that apply to all tiles */
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: 0.5s ease;
background-color: #38b6ff;
z-index: 17;
}
/* Style for tiles where pictures take up full tile */
.pic-tile {
border-top: 5px solid #38b6ff;
}
.pic-tile .container img {
height:100%;
width:100%;
}
.pic-tile .container h2{
position: absolute;
left: 2%;
bottom: 2rem;
z-index: 7;
}
.pic-tile .container h3 {
position: absolute;
left: 2%;
bottom: 0;
z-index: 7;
}
.pic-tile:hover .overlay {
opacity: 0.1;
}
/* Style for regular tiles */
.tile img {
height: 50%;
width: 100%;
top: 0;
}
.tile {
background-color: gray;
bottom: 1%;
text-align: end;
position: relative;
width: 100%;
height: 100%;
border-top: 5px solid #38b6ff;
}
.tile .container{
font-size: 1rem;
position: relative;
margin-bottom: 1%;
margin-left: 1%;
}
.tile .container p{
font-size: 1rem;
position: relative;
text-align: end;
color: whitesmoke;
}
.tile:hover .overlay {
opacity: 0.1;
}
<html>
<body>
<!-- <img> insert logo here -->
<header>
<nav class="navigation">
<ul>
<li class=dropdown>
Catagory1
<div class="dropdown-content">
content1
content2
content3
</div>
</li>
<li class="dropdown">
Catagory2
<div class="dropdown-content">
content4
content5
</div>
</li>
<li>Catagory3</li>
</ul>
</nav>
</header>
<div id="main">
<div class="row">
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
</div>
<div class="row">
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
</div>
<div class="row">
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
</div>
</div>
</div>
</body>
</html>
Could somebody help me with this HTML to make the <h1> and <h2> texts centrify, because I have lost it a bit on this.
<div class="container-fluid">
<a href="http://www.pagename.com" style="text-decoration: none; color: black">
<div class="pull-left" style="top: 270 px">
<img src="pic1.gif" alt="Paradise" width="215px" height="215px"/>
</div>
<div style="position: absolute; width: 100%; text-align: center">
<h1 style="font-size: 7vw; position: relative; top: 2.5vh">PAGENAME.COM</h1>
<h2 style="font-size: 2.3vw"SLOGAN FOR THE WEBSITE</h2>
</a>
</div>
<div class="pull-right" style="margin-left: 1vw";>
<img src="pic2.gif" alt="Beach" width="215px" height="215px" />
</div>
Is this what you need?
https://jsfiddle.net/scorpio777/k99ywpng/6/
CSS
h1 {
font-size: 7vw;
position: relative;
top: 0.5vh
}
h2 {
font-size: 2.3vw
}
.container-fluid {
width: 100%;
position: relative;
}
.pull-left {
vertical-align: top;
display: inline;
position: absolute;
left: 0;
}
.pull-right {
height: 215px;
vertical-align: top;
display: inline;
position: absolute;
right: 0;
}
.center {
display: inline;
position: absolute;
width:100%;
text-align:center;
z-index: 2;
}
HTML
<div class="container-fluid">
<a href="http://www.pagename.com" style="text-decoration: none; color: black">
<div class="pull-left">
<img src="pic1.gif" alt="Paradise" width="215px" height="215px"/>
</div>
<div class="center">
<h1>PAGENAME.COM</h1>
<h2>SLOGAN FOR THE WEBSITE</h2>
</div>
</a>
<div class="pull-right">
<img src="pic2.gif" alt="Beach" width="215px" height="215px" />
</div>
</div>
Try this:
CSS
.your-element {
display: flex !important;
flex-flow: row wrap !important;
justify-content: center !important;
}
hi I'm assigned to do a basic profile page for class, but for one of the html pages I am unable to put the text in front of each individual image, i removed my attempts at it to help ease confusion.
<div class="aboutmeprofile">
<h2 id="h2">Portfolio</h2>
<hr></hr>
<img src="assets/images/gym.jpg" alt="gym">Gym
<img src="assets/images/hiking.jpg" alt="hiking">Hiking
<img src="assets/images/overwatch.jpg" alt="overwatch">Overwatch
<img src="assets/images/running.jpg" alt="running">Running
<img src="assets/images/programming.jpg" alt="programming">Programming
</div>
.aboutmeprofile {
float: left;
background-color: white;
width: 650px;
margin: 10px;
line-height: 150%;
padding: 10px;
margin-top: 30px;
}
You'll need to absolute position your text in front of the image with css. It helps to wrap each image and text item into a block to apply the css.
<div class="aboutmeprofile">
<h2 id="h2">Portfolio</h2>
<hr/>
<div class="item">
<img src="assets/images/gym.jpg" alt="gym">
<span>Gym</span>
</div>
<div class="item">
<img src="assets/images/hiking.jpg" alt="hiking">
<span>Hiking</span>
</div>
<div class="item">
<img src="assets/images/overwatch.jpg" alt="overwatch">
<span>Overwatch</span>
</div>
<div class="item">
<img src="assets/images/running.jpg" alt="running">
<span>Running</span>
</div>
<div class="item">
<img src="assets/images/programming.jpg" alt="programming">
<span>Programming</span>
</div>
</div>
css:
.item {
position: relative;
}
.item span {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
Edit: Added a simplified fiddle example
* {
box-sizing: border-box;
}
.aboutmeprofile {
float: left;
background-color: white;
margin: 10px;
line-height: 150%;
padding: 10px;
margin-top: 30px;
}
.item {
position: relative;
width: 100%;
}
.item span {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
text-align: center;
width: 100%;
}
<div class="aboutmeprofile">
<h2 id="h2">Portfolio</h2>
<hr/>
<div class="item">
<img src="https://placehold.it/400x300/ddd/ddd" alt="gym">
<span>Gym</span>
</div>
<div class="item">
<img src="https://placehold.it/400x300/ddd/ddd" alt="hiking">
<span>Hiking</span>
</div>
<div class="item">
<img src="https://placehold.it/400x300/ddd/ddd" alt="overwatch">
<span>Overwatch</span>
</div>
<div class="item">
<img src="https://placehold.it/400x300/ddd/ddd" alt="running">
<span>Running</span>
</div>
<div class="item">
<img src="https://placehold.it/400x300/ddd/ddd" alt="programming">
<span>Programming</span>
</div>
</div>
The best way to do this is to create a div for the label and use the image as the background-image for the div.
background-image: image.png
jsfiddle
this is what I came up with. Just add the other images and its respective label:
#h2, #h3 {
color: #4aaaa5;
text-align: left;
font-size: 30px;
font-weight: bold;
font-family: 'Georgia', Times, Times New Roman, serif;}
#linebreak {
clear: both;
border: 1px solid gray;
width: 100%;
margin: 0;
padding: 0;}
.aboutmeprofile {
float: left;
background-color: white;
width: 650px;
margin: 10px;
line-height: 150%;
padding: 10px;
margin-top: 30px;
}
.aboutmeprofile {
float: left;
background-color: white;
width: 650px;
margin: 10px;
line-height: 150%;
padding: 10px;
margin-top: 30px;
}
.container {
height: 100%;
width: 100%;
position: relative;
}
.image {
width:100%;
height:100%;
}
.text {
position: absolute;
color: white;
left: 50%;
top: 50%;
}
<div class="aboutmeprofile">
<h2 id="h2">Portfolio</h2>
<hr>
<div class="container">
<img class="image" src="http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg" />
<span class="text">
Gym
</span>
</div>
<div class="container">
<img class="image" src="http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg" />
<span class="text">
Hiking
</span>
</div>
</div>
Hope it helps!
You can simply do this with position:absolute property , first you need to create a relative div , then call the image and h2 inside the div , then set absolute position to h2
Check with the snippet
.content_div {
position:relative;
}
.content_div h2 {
position:absolute;
bottom:25px;
color:#fff;
font-size:18px;
}
.content_div h2 span {
background:rgba(0,0,0,0.8);
padding:10px;
display:block;
border-bottom:2px solid #000;
}
.content_div h2 span:last-child{
border-bottom:none;
}
<div class="content_div">
<img src="http://www.picgifs.com/graphics/c/cute/graphics-cute-160852.jpg" alt="image" />
<h2>
<span>A Movie in the Park:</span>
<span>Kung Fu Panda</span>
</h2>
</div><!-- /.content_div -->