I have an image inside anchor link and anchor is inside header. When I set the image size in pixels I can only click on image (as it should) but when I set image size as percentage the whole header becomes clickable. How can I prevent that?
header {
display: flex;
justify-content: space-between;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
.container {
position: relative;
padding: 0 15px;
margin: 0 auto;
}
header a {
display: flex;
color: #000000;
text-decoration: none;
}
header a img {
vertical-align: middle;
}
header button {
width: 32px;
height: 32px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border: 0;
cursor: pointer;
padding: 0;
line-height: 34px;
position: absolute;
top: 50%;
right: 20px;
margin-top: -16px;
}
header button svg {
width: 9px;
height: auto;
}
<header class="container">
<a class="logo" href="index.html">
<img width="10%" src="img/logo.png" alt="Logo">
</a>
<button>
<svg element></svg>
</button>
</header>
Related
When minimized and scaled to different positions some the text and background shift to different spots making text shift off the screen or on top of other text or links.
body,
html {
margin: 0;
padding: 0;
}
.gamepage {
position: relative;
height: 100vh;
width: 100vw;
background-size: 100%;
}
/* tabbar */
.header {
position: sticky;
top: 0px;
left: 0px;
height: 10vh;
width: 100%;
background: url("https://www.waukeepubliclibrary.org/sites/default/files/Event%20Images/Teen%20Events/MurderMystery_TopBanner-1024x265.jpg") no-repeat 50% 50%;
background-size: cover;
z-index: 2;
}
#home {
position: absolute;
top: 0px;
left: 0px;
border-style: groove;
}
#how2play {
position: absolute;
top: 0px;
left: 47px;
border-style: groove;
}
#character {
position: absolute;
top: 0px;
left: 137px;
border-style: groove;
}
/* link format */
a:link,
a:visited {
color: white;
text-decoration: none;
font-weight: bold;
}
/* background */
.background {
positon: absolute;
background: url("https://imagevars.gulfnews.com/2021/07/05/shutterstock_1016099710-1625487358677_17a7698bad7_large.jpg") no-repeat;
height: 100%;
width: 100%;
top: 72px;
left: 8px;
background-size: cover;
z-index: 1;
}
#title {
color: white;
position: absolute;
top: 90px;
left: 5px;
font-size: 35px;
font-family: Courier New;
}
#text {
color: white;
position: absolute;
top: 125px;
left: 25px;
}
#playbutton {
color: black;
position: absolute;
top: 360px;
left: 660px;
font-size: 55px;
font-weight: bold;
transform: rotate(-7deg);
border: 5px;
border-style: double;
}
<body>
<div class="gamepage">
<div class="header">
<div id="home">
Home
</div>
<div id="how2play">
How to Play
</div>
<div id="character">
Character List
</div>
</div>
<div class="background">
<div id="title">Murder Mystery</div>
<div id="text">Find the murderer, before it's too late...</div>
<a href="homepage/thegame1.html">
<div id="playbutton">Play Now</div>
</a>
</div>
</div>
</body>
I've Tried
Changing all values to %'s
Changing all the values using vh and vw.
This fixed some of the problem but not all
Played around with the absolute and relative positioning/adding div parent tags
All this is very new to me so there might be a simple solution I don't know of
Your HTML and CSS should look something like the example below.
Here I have swapped out your IDs for semantic HTML elements, and absolute positioned elements for modern flexbox/grid
Look into flexbox and grid for single axis and dual axis positioning
body {
display: grid;
grid-template-rows: 30% 1fr;
min-height: 100vh;
margin: 0;
color: white;
background-color: black;
}
header {
background: url("https://www.waukeepubliclibrary.org/sites/default/files/Event%20Images/Teen%20Events/MurderMystery_TopBanner-1024x265.jpg") no-repeat 50% 50%;
background-size: cover;
}
header ul {
display: flex;
gap: 1rem;
min-height: 10vh;
list-style: none;
}
a:link,
a:visited {
display: inline-block; /* Allows for padding and your rotation of [Play Now] */
color: inherit;
padding: .2em .5em;
background: #000b;
text-decoration: none;
font-weight: bold;
}
main {
background: url("https://imagevars.gulfnews.com/2021/07/05/shutterstock_1016099710-1625487358677_17a7698bad7_large.jpg") no-repeat;
padding: 2rem;
background-size: cover;
}
h1 {
font-size: 2.5rem;
font-family: Courier New;
}
.playbutton {
color: black;
font-size: 3.5rem;
font-weight: bold;
transform: rotate(-7deg);
border: 5px;
border-style: double;
}
<!-- Use semantic HTML instead of divs with IDs -->
<header>
<nav>
<ul>
<li>
Home
</li>
<li>
How to Play
</li>
<li>
Character List
</li>
</ul>
</nav>
</header>
<main>
<h1>Murder Mystery</h1>
<p id="text">Find the murderer, before it's too late...</p>
Play Now
</main>
I have been learning html and css for 2 weeks now, as a challenge I tasked myself to create a product landing page.
I created a search bar and added a "search" icon but I couldn't position the icon in such way that it doesn't overlap the search input.
The image^
The code: I apologise, I know it sucks
#search {
position: relative;
border-radius: 20px;
height: 35px;
width: 250px;
z-index: 1;
margin: -20px 0 0 -150px;
border-style: double;
}
#btn1 {
position: absolute;
z-index: 1;
left: 410px;
top: 35px;
border-radius: 10px;
border: none;
background: url("https://i.ibb.co/D1dvJTV/icons8-search.gif") no-repeat top right;
background-size: 23px auto;
height: 30px;
width: 30px;
}
How can I make the icon stay in the search bar? Because another issue I am having is whenever I resize the page, the icon would move to a new position?
You can add a padding-right to your input to prevent text overlapping the search icon
#search {
border-radius: 20px;
height: 35px;
width: 250px;
z-index: 1;
outline: none;
padding-right: 50px;
}
#search-input-wrapper {
position: relative;
display: inline-block;
}
#search-input-wrapper::after {
content: "";
position: absolute;
z-index: 1;
top: 0;
bottom: 0;
margin: auto;
right: 10px;
background: url("https://i.ibb.co/D1dvJTV/icons8-search.gif") no-repeat center;
background-size: 23px auto;
height: 30px;
width: 30px;
}
<div id="search-input-wrapper">
<input type="text" id="search">
</div>
Try This
.search-bar-container {
border: 2px solid black;
background-color: #ffffff;
width: 400px;
display: flex;
border-radius: 50px;
padding: 10px 20px;
justify-content: center;
align-items: center;
}
input {
width: 95%;
border: none;
outline: none;
font-size: 18px;
padding-right: 10px;
}
.icon {
width: 5%;
text-align: center;
}
<div class="search-bar-container">
<input type="text" placeholder="Search" />
<div class="icon"><i class="fas fa-search"></i></div>
</div>
Codepen: https://codepen.io/manaskhandelwal1/pen/XWjPavP
instead of using input and overlapping icon on it, wrap the input and icon in a tag like div, section, aside whichever one you want.
.search-wrap {
border: 2px solid #000;
border-radius: 8px;
width: fit-content;
padding: 0.3em 1em;
}
#search {
margin: auto;
text-decoration: none;
outline: none;
border: none;
height: 2em;
font-size: 18px;
}
#btn1 {
border-radius: 10px;
background: url("https://i.ibb.co/D1dvJTV/icons8-search.gif");
background-repeat: no-repeat;
background-size: 1.3em;
height: 1.3em;
width: 1.3em;
margin-bottom: -3px;
}
<div class="search-wrap">
<input type="text" id="search" />
<img id="btn1" />
</div>
I am trying to draw a number of CSS generated circles that have images as background. In my current code, the background image is set as a fixed image in the CSS code.
.container {
text-align: center;
}
.circle {
position: relative;
height: 180px;
width: 180px;
border-radius: 50%;
display: inline-flex;
vertical-align: top;
justify-content: center;
align-items: center;
overflow: hidden;
text-decoration: none;
border: 0;
margin: 10px;
}
.circle:after {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: url("http://deepchains.com/images/team.png") center / cover no-repeat;
opacity: .25;
transition: .25s;
}
.circle:hover:after {
opacity: 1;
color: transparent;
}
.circle:hover {
color: transparent;
}
.ccont {
display: inline-block;
margin: 10px;
}
.ccont:hover {
color: transparent;
}
<div class="container">
<a class="circle" href="http://www.url1.html">
<div class="ccont" style="font-weight: bold; text-decoration:none !important;">This is <br>Text1</div>
</a>
<a class="circle" href="http://www.url2.html">
<div class="ccont" style="font-weight: bold; text-decoration:none !important;">This is <br>Text2</div>
</a>
</div>
Here is a sample result that I see in Chrome Browser:
My question is how to change the background images of each circle separately in the HTML code? I will have a number of these circles that I like them to be aligned and in the same line, and I want to set their background images in the HTML code and remove the background image from the CSS. How can I do that?
An easy solution is to transform your peudo element to an element and use background-image as inline style so you can easily change the image for each element and apply all the same properties as the pseudo element:
.container {
text-align: center;
}
.circle {
position: relative;
height: 180px;
width: 180px;
border-radius: 50%;
display: inline-flex;
vertical-align: top;
justify-content: center;
align-items: center;
overflow: hidden;
text-decoration: none;
border: 0;
margin: 10px;
}
.circle .image {
position: absolute;
z-index: -1;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-position:center;
background-size:cover;
background-repeat:no-repeat;
opacity: .25;
transition: .25s;
}
.circle:hover .image {
opacity: 1;
color: transparent;
}
.circle:hover .ccont{
color: transparent;
}
.ccont {
display: inline-block;
margin: 10px;
}
<div class="container">
<a class="circle" href="http://www.url1.html">
<span class="image" style="background-image: url(http://lorempixel.com/400/300/)"></span>
<div class="ccont" style="font-weight: bold; text-decoration:none !important;">This is <br>Text1</div>
</a>
<a class="circle" href="http://www.url2.html">
<span class="image" style="background-image:url(https://lorempixel.com/400/200/)"></span>
<div class="ccont" style="font-weight: bold; text-decoration:none !important;">This is <br>Text2</div>
</a>
</div>
Simply set up the background image on the pseudo to be inherited from parent, set the size on parent to 0 to hide it there, and finally, set style="background-image: url(...)" in the markup.
Updated
You can even drop the inner div and still achieve the same effect
Stack snippet
.container {
text-align: center;
}
.circle {
position: relative;
height: 180px;
width: 180px;
border-radius: 50%;
display: inline-flex;
justify-content: center;
align-items: center;
overflow: hidden;
font-weight: bold;
text-decoration: none;
border: 0;
margin: 10px;
background-size: 0; /* hide image by set its size to 0 */
}
.circle:after {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-image: inherit; /* inherit from parent */
background-position: center;
background-size: cover;
background-repeat: no-repeat;
opacity: .25;
transition: .25s;
}
.circle:hover:after {
opacity: 1;
}
.circle:hover {
color: transparent;
}
<div class="container">
<a class="circle" href="http://www.url1.html" style="background-image: url(https://picsum.photos/300/300?image=1070);">
This is <br>Text1
</a>
<a class="circle" href="http://www.url2.html" style="background-image: url(https://picsum.photos/300/300?image=1072);">
This is <br>Text2
</a>
</div>
In my first div container, I added a heading 1 tag, gave a border bottom a color of my desire, and added font awesome icon in the middle.
As you can see I had to give a background color on the font awesome to make it appear transparent. but now I have a background image on the second box so I am struggling to achieve the same thing.
How can I do the same on my other div box without affecting the background image
visibility as well as the border bottom from the heading 1?
div.container{
background-image: url(http://az616578.vo.msecnd.net/files/2016/04/09/6359580807140768861266757027_Never-Study-Hard-The-Art-of-Studying-Smart.jpg);
background-size: cover;
background-position: 50%;
}
div{
height: 100px;
}
h1.widget_title_1{
font-size: 25pt;
display: inline-block;
margin: 0;
margin-top: 35px;
padding-bottom: 9px;
border-bottom: 1px solid #898989;
position: relative;
}
h1.widget_title_1:after {
position: absolute;
font-family: fontawesome;
display: block;
margin-left: 58px;
margin-top: -7px;
padding: 0 5px;
font-size: 24pt;
color: black;
content: '\f107';
font-weight: 300;
background-color: white;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<div class="container-1">
<h1 class="widget_title_1">
heading 1
</h1>
</div>
<div class="container">
<h1 class="widget_title">
heading 1
</h1>
</div>
I suggest you to use font-awesome icons along-with tag as here I have used i tag, it get's easy to align icon i.e. at center of that div tag, just by using text-align:center. Then you can use pseudo selector :before and :after on h1 tag and add that border. Scale to and fro on this jsFiddle and see border doesn't get's attached at certain screen resolution.
.container-1 {
height: 100px;
display: inline-block;
overflow: hidden;
}
.container-1 > .widget_title_1 {
font-size: 25pt;
margin: 0;
display: inline-block;
position: relative;
}
.container-1 > .fa {
font-size: 24px;
display: block;
height: 30px;
text-align: center;
}
.container-1 > .widget_title_1:before {
content: "";
position: absolute;
width: 50%;
height: 2px;
background: #111;
bottom: -38%;
left: 0;
margin-left: -10px;
}
.container-1 > .widget_title_1:after {
content: "";
position: absolute;
width: 50%;
height: 2px;
background: #111;
bottom: -38%;
margin-right: -10px;
right: 0;
}
.container {
background-image: url(http://az616578.vo.msecnd.net/files/2016/04/09/6359580807140768861266757027_Never-Study-Hard-The-Art-of-Studying-Smart.jpg);
background-size: cover;
background-position: 50%;
height: 100px;
overflow: hidden;
}
.container > .widget_title {
font-size: 25pt;
margin: 0;
display: inline-block;
position: relative;
}
.container > .fa {
font-size: 24px;
display: block;
height: 30px;
width: 138px;
text-align: center;
}
.container > .widget_title:before {
content: "";
position: absolute;
width: 50%;
height: 2px;
background: #111;
bottom: -38%;
left: 0;
margin-left: -10px;
}
.container > .widget_title:after {
content: "";
position: absolute;
width: 50%;
height: 2px;
background: #111;
bottom: -38%;
margin-right: -10px;
right: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<div class="container-1">
<h1 class="widget_title_1">
heading 1
</h1>
<i class="fa fa-angle-down"></i>
</div>
<div class="container">
<h1 class="widget_title">
heading 1
</h1>
<i class="fa fa-angle-down"></i>
</div>
Use :before :after for div for the line.
Create a span tag with the font awesome as shown below.
div.container{
background-image: url(http://az616578.vo.msecnd.net/files/2016/04/09/6359580807140768861266757027_Never-Study-Hard-The-Art-of-Studying-Smart.jpg);
background-size: cover;
background-position: 50%;
}
div{
position: relative;
height: 100px;
}
h1.widget_title_1{
font-size: 25pt;
display: inline-block;
margin: 0;
margin-top: 35px;
padding-bottom: 9px;
border-bottom: 1px solid #898989;
position: relative;
}
span:after {
position: absolute;
font-family: fontawesome;
display: block;
margin-left: 58px;
margin-top: -7px;
top:40px;
padding: 0 5px;
font-size: 24pt;
color: black;
content: '\f107';
font-weight: 300;
background-color: transparent;
}
div.container:after{
content: "";
position: absolute;
height: 5px;
border-bottom: 1px solid black;
top: 45px;
width: 60px;
}
div.container:before{
content: "";
position: absolute;
height: 5px;
border-bottom: 1px solid black;
top: 45px;
left:90px;
width: 60px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<div class="container-1">
<h1 class="widget_title_1">
heading 1
</h1>
</div>
<div class="container">
<h1 class="widget_title">
heading 1
</h1>
<span></span>
</div>
I know this html is sloppy, with some extra divs that are unnecessary, but regardless, I can't understand why the div with ID "info_box_right" is aligning to the bottom of the parent div (you can see the "text" aligned to the bottom at the below jsfiddle example).
Any ideas how I can get it to align to the top of its parent?
http://jsfiddle.net/taddme0y/1/
HTML:
<div id="info_container" >
<div id="info_box">
<hr class="info_box_hr" noshade>
<a id="info_box_title"></a>
<hr class="info_box_hr" noshade>
<div id="info_box_wrapper">
<div id="info_box_left">
<div class="info_box_sub_wrapper">
<a id="info_box_logo">
<img class="info_img" id="info_img_logo" alt="logo">
</a>
<a id="info_box_screenshot">
<img class="info_img" id="info_img_screenshot" alt="screenshot">
</a>
</div>
</div>
<div id="info_box_right">
<div class="info_box_sub_wrapper">
<a id="info_box_right_text">
Text
</a>
</div>
</div>
</div>
</div>
</div>
CSS:
#info_container {
z-index: 500;
position: relative;
top: 0;
left: 0;
width: 80%;
height: 0;
margin: 0 auto;
background-color: #000000;
}
#info_box {
z-index: 500;
position: relative;
top: 50px;
width: 100%;
background-color: #FFFFFF;
text-align: center;
-webkit-box-shadow: 2px 2px 4px #888;
-moz-box-shadow: 2px 2px 4px #888;
box-shadow: 2px 2px 4px #888;
}
#info_box_wrapper {
position: relative;
display: block;
width: 100%;
margin: 0 auto;
text-align: center;
}
#info_box_left {
display: inline-block;
position: relative;
margin: 0 auto;
width: 45%;
min-width: 100px;
}
#info_box_right {
display: inline-block;
position: relative;
margin: 0 auto;
width: 45%;
min-width: 100px;
/* margin-bottom: 20px; */
}
.info_box_sub_wrapper {
position: relative;
display: inline-block;
width: 100%;
margin: 0 auto;
text-align: center;
}
#info_box_right_text {
position: relative;
color: #4D4D4D;
}
#info_box_logo, #info_box_screenshot {
position: relative;
width: 100%;
margin: 0 auto;
background-color: transparent;
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
border-style: transparent;
border-color: #4D4D4D;
border-width: 2px;
cursor: pointer;
}
.info_img {
width: 100px;
margin: 20px;
background-color: #000;
}
You can specify how you want an element to vertically align using the vertical-align CSS property.
#info_box_right {
vertical-align: top;
}
http://www.w3schools.com/cssref/pr_pos_vertical-align.asp