I am attempting to position my button to the top right of the header, just as the Netflix landing page has it.
here is my css:
* {
margin:0;
padding:0;
}
body,html {
height: 100%;
background: honeydew;
}
/* Header*/
header {
height: 100vh;
background-image: url(https://s3-us-west-2.amazonaws.com/assets/apple.jpg);
background-size: cover;
background-position: center;
display: flex;
flex-direction: column;
justify-content: center;
text-shadow: 0 1px 3px rgba(0,0,0,.8);
text-align: center;
}
#logBtn {
float: right;
height: 33px;
width: 86px;
color: honeydew;
background-color: red;
border-style: none;
border-radius: 5px;
}
Here is my html:
<!DOCTYPE html>
<html>
<head>
<title>myPage</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<link rel="shortcut icon" type="image/x-icon" href="pencil.ico" />
<link href="main.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<h1>Hello</h1>
<button id="logBtn">Log In</button>
</header>
</body>
</html>
However my button is just pinned to the lower left of the header like so:
how can i fix this issue?
Run and Check out the code. Let me know if you need improvements
* {
margin:0;
padding:0;
}
body,html {
height: 100%;
background: honeydew;
}
/* Header*/
header {
height: 100vh;
background-image: url(https://s3-us-west-2.amazonaws.com/assets/apple.jpg);
background-size: cover;
background-position: center;
display: flex;
flex-direction: column;
justify-content: center;
text-shadow: 0 1px 3px rgba(0,0,0,.8);
text-align: center;
position:relative;
}
#logBtn {
position:absolute;
height: 33px;
width: 86px;
color: honeydew;
background-color: red;
border-style: none;
border-radius: 5px;
top:10px;
right:10px;
}
<!DOCTYPE html>
<html>
<head>
<title>myPage</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<link rel="shortcut icon" type="image/x-icon" href="pencil.ico" />
<link href="main.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<h1>Hello</h1>
<button id="logBtn">Log In</button>
</header>
</body>
</html>
Try:
header {
height: 100vh;
background-image: url(https://s3-us-west-2.amazonaws.com/assets/apple.jpg);
background-size: cover;
background-position: center;
display: flex;
flex-direction: column;
justify-content: center;
text-shadow: 0 1px 3px rgba(0,0,0,.8);
text-align: center;
position:relative;
margin: 0 0 10px 10px;
}
https://jsfiddle.net/fergnab/9m2veg5j/1/
What you can try adding to your button is
CSS
position:absolute;
top:0;
right:0;
Related
I was working on a dummy practice site and I tried using an anchor tag with an image so that I could have hyperlink from that image but whenever I try to change the position of the image using its position property(Relative). It just creates a invisible link of same size elsewhere on the screen. I tried multiple things but it keeps happening. Unless I move it using position: absolute . Help. Thanks in advance. ;)
[and I know it creates an invisible hyperlink of same size because of the pesticide extension which allows me to see all the elements on the screen.]
I guess the problem occurs when I try to move the image to a different location but I don't know why it is happening.[ And please ignore my inefficient code, started Web development couple of days ago ;)]
body{
margin: 0;
background-color: #222831;
}
nav{
background-color: #ebebeb;
position: relative;
padding: 5px;
}
nav .icon{
margin: 0;
display: inline-block;
margin: 5px 0 0px 10px;
color: #121212;
height: 25px;
width: 25px;
}
.search-bar{
position: relative;
bottom: 7px;
left: 10px;
background: url(../Images/search-icon.png) no-repeat scroll 2px 2px;
padding-left:30px;
width: 400px;
}
nav h1{
display: inline-block;
position: relative;
left: 10%;
}
.profile-pic{
margin: 0;
position: absolute;
color: #121212;
height: 30px;
width: 30px;
right: 200px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="../CSS/home.css">
<link rel="icon" href="../Images/menu.png">
<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>Home</title>
</head>
<body>
<nav>
<img src="../Images/menu.png" alt="SQUARE LOGO" class = "icon">
<input type="text" class="search-bar" id="search-bar">
<h1>SQUARE</h1>
</nav>
<img class="profile-pic" src="../Images/user.png" alt="Profile Picture" href="index.html "> <!-- This is the code producing error--!>
</body>
</html>
you don't need to use relative as the absolute positioning will default relative to the body. You do need to add left or top to the absolute element
body{
margin: 0;
background-color: #222831;
}
nav{
background-color: #ebebeb;
padding: 5px;
}
nav .icon{
margin: 0;
display: inline-block;
margin: 5px 0 0px 10px;
color: #121212;
height: 25px;
width: 25px;
}
.search-bar{
bottom: 7px;
left: 10px;
background: url(../Images/search-icon.png) no-repeat scroll 2px 2px;
padding-left:30px;
width: 400px;
}
nav h1{
display: inline-block;
}
.profile-pic{
margin: 0;
position: absolute;
color: #121212;
height: 30px;
width: 30px;
right: 200px;
left:50%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="../CSS/home.css">
<img src="https://via.placeholder.com/50">
<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>Home</title>
</head>
<body>
<nav>
<img src="https://via.placeholder.com/50" alt="SQUARE LOGO" class = "icon">
<input type="text" class="search-bar" id="search-bar">
<h1>SQUARE</h1>
</nav>
<img class="profile-pic" src="https://via.placeholder.com/25" alt="Profile Picture" >
</body>
</html>
As you can see in the CSS below, I have the height set to "50vh" which is causing the hover selector to be triggered underneath and over the text rather than just on the text. I have tried to lower the height but it moves the text upwards. Is there a way to stop it from triggering unless the cursor is over the actual text while still keeping the text lowered?
body {
background-color: #efefef;
overflow: hidden;
}
.logo h1 {
align-items: center;
color: #262626;
display: flex;
font-family: 'Lato', sans-serif;
font-size: 72px;
font-weight: 700;
height: 50vh;
justify-content: center;
max-width: 100px;
margin: auto;
}
.logo h1:hover {
color: #FFFFFF
}
<!DOCTYPE html>
<html>
<head>
<title>
Bindex. | Home
</title>
<link rel="icon" type="image/x-icon" href="favicon.png">
<link rel="stylesheet" href="index.css">
<meta charset="UTF-8">
<body>
<div class="logo">
<h1>
B.
</h1>
</div>
</body>
</html>
Give this a try. You should set the flex properties on the parent div only, and not the h1. This way, you can manipulate the height of the h1 and the width in which the :hover is activated.
body {
background-color: #efefef;
overflow: hidden;
}
.logo {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
h1 {
color: #262626;
font-family: 'Lato', sans-serif;
font-size: 72px;
font-weight: 700;
height: fit-content;
width: fit-content;
}
.logo h1:hover {
color: #FFFFFF
}
<!DOCTYPE html>
<html>
<head>
<title>
Bindex. | Home
</title>
<link rel="icon" type="image/x-icon" href="favicon.png">
<link rel="stylesheet" href="index.css">
<meta charset="UTF-8">
</head>
<body>
<div class="logo">
<h1>
B.
</h1>
</div>
</body>
</html>
When I try to increase font size of placeholder in input tag, my button next to input tag doesnt align properly. I tried to remove outline and border but that dont work. When I decrease font size button goes up, when increase font size it goes down.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: 'Rubik', sans-serif;
}
.header{
background: linear-gradient(90deg, #443e98 30%, #6086f3);
height: 300px;
position: relative;
}
.header h1{
text-align: center;
color: #ffff;
font-size: 40px;
font-weight: 500;
margin-bottom: 50px;
}
.search-bar{
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.search-bar input{
width: 300px;
height: 50px;
font-size: 20px;
}
.search-bar button{
width: 50px;
height: 50px;
}
<!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">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght#400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>IP Tracker</title>
</head>
<body>
<div class="header">
<h1>IP Address Tracker</h1>
<div class="search-bar">
<input type="text" placeholder="Search for any IP address or domain">
<button>›</button>
</div>
</div>
<div class="ip-bar"></div>
<div class="map-section"></div>
</body>
</html>
Thank for all your help.
If I'm understanding correctly you just want them to appear as a consistent row and stop acting as inline-block elements do by default and wrapping? If so you can utilize as shown below.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: 'Rubik', sans-serif;
}
.header{
background: linear-gradient(90deg, #443e98 30%, #6086f3);
height: 300px;
position: relative;
}
.header h1{
text-align: center;
color: #ffff;
font-size: 40px;
font-weight: 500;
margin-bottom: 50px;
}
.search-bar{
position: absolute;
left: 50%;
transform: translateX(-50%);
/* Added CSS Below */
display: flex;
flex-direction: row;
}
.search-bar input{
width: 300px;
height: 50px;
font-size: 20px;
}
.search-bar button{
width: 50px;
height: 50px;
}
<!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">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght#400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>IP Tracker</title>
</head>
<body>
<div class="header">
<h1>IP Address Tracker</h1>
<div class="search-bar">
<input type="text" placeholder="Search for any IP address or domain">
<button>›</button>
</div>
</div>
<div class="ip-bar"></div>
<div class="map-section"></div>
</body>
</html>
Try using the following CSS:
.search-bar{
display: flex;
align-items: center;
justify-content: center;
}
I have 3 items (boxes) within my flexbox that I want to use as hyperlinks. However, when I wrap the in tags it completely breaks the layout. How can I set each item (box) as a hyperlink so that users can click the entire area and it takes them to another website? As of now, I have the text within the boxes set as links. But I want to use the entire box as a link.
Here is a codepen for it: https://codepen.io/mrhoward/pen/dqqOxj
HTML:
<!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, viewport-fit=cover">
<link rel="shortcut icon" href="img/misc/favicon.png">
<meta name="description" content="">
<meta name="author" content="">
<title>Flexbox Problem.</title>
<link href="css/ton.css" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Press+Start+2P|Open+Sans">
</head>
<body>
<h1 class="col">Each Square as Hyperlink</h1>
<h2 class="col">This is getting annoying</h2>
<div class="maincontain">
<div class="col gaming"><h3 class="title">1</h3></div>
<div class="col music"><h3 class="title">2</h3></div>
<div class="col dev"><h3 class="title">3</h3></div>
</div>
</body>
</html>
CSS:
body {
background: #333;
color: #fff;
padding: 20px;
}
a {
text-decoration: none;
}
/* FLEXBOX */
* {
box-sizing: border-box;
}
.col {
padding: 20px;
}
.maincontain {
display: flex;
display: -webkit-flex;
display: -ms-flexbox;
justify-content: space-between;
}
.maincontain .col {
width: 32%;
height:400px;
align-items: stretch;
}
#media only screen and (max-width: 40em) {
.maincontain {
flex-direction: column;
height: 300px;
margin: 0 0 10px 0;
}
}
#media only screen and (max-width: 40em) {
.maincontain .col {width: 100%;}
.maincontain h3 { font-size: 1.3vh}
}
/* Item Stylig */
.gaming {
background: #d836eb;
}
.music {
background: #0000ff;
}
.dev {
background: #00ff00;
}
/* Font Styling */
h1 {
font-size:5vw;
font-family: 'Open Sans', sans-serif;
font-weight: lighter;
text-align: center;
padding: 50px;
}
h2 {
font-size:2vw;
font-family: 'Press Start 2P', cursive;
text-align: center;
padding: 0px 0px 20px 0px;
}
h3 {
font-size: 1.3vw;
font-family: 'Press Start 2P', cursive;
padding-top: 10px;
object-fit: cover;
}
.title{
color: white;
text-shadow: 1px 1px 4px #000000;
}
check this example:
<div id="select">
<p class="options left">
<a id="leftq" href="#selectionSet">the quick brown fox jumps over the lazy</a>
</p>
<p class="options right">
<a id="rightq" href="#selectionSet">dog</a>
</p>
</div>
#select {
color: #fff;
float: left;
height: 188px;
width: 631px;
}
#select p.options {
color: #FFFFFF;
float: left;
font-family: 'ComfortaaBold',cursive;
font-size: 20px;
height: 100%;
margin: 0 auto;
text-align: center;
width: 48%;
}
p.options.left {
align-items: center;
background: none repeat scroll 0 0 #EBEBEB;
border-bottom-left-radius: 100px;
border-right: 2px solid #FFFFFF;
border-top-left-radius: 100px;
display: flex;
justify-content: center;
padding-left: 5px;
padding-right: 5px;
}
p.options.right {
align-items: center;
background: none repeat scroll 0 0 #EBEBEB;
border-bottom-right-radius: 100px;
border-left: 2px solid #FFFFFF;
border-top-right-radius: 100px;
display: flex;
justify-content: center;
padding-left: 5px;
padding-right: 5px;
}
#select p.options a {
color: #636363;
padding: 80px 0;
text-decoration: none;
display:block;
width:100%;
}
#select p.options a:hover {
color: #FFFFFF;
}
p.options.right:hover, p.options.left:hover {
background-color: #00AEEF !important;
}
.rightq {
width: 100%;
}
Below is a link to a pen I forked and saved =>
https://codepen.io/kipomaha/pen/OooWXL
Below is the HTML, I changed the class from the div and put it onto the a element that I wraps the div.
<!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, viewport-fit=cover">
<link rel="shortcut icon" href="img/misc/favicon.png">
<meta name="description" content="">
<meta name="author" content="">
<title>Flexbox Problem.</title>
<link href="css/ton.css" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Press+Start+2P|Open+Sans">
</head>
<body>
<h1 class="col">Each Square as Hyperlink</h1>
<h2 class="col">This is getting annoying</h2>
<div class="maincontain">
<div><h3 class="title">1</h3></div>
<div><h3 class="title">2</h3></div>
<a class="col dev" href="#"><div><h3 class="title">3</h3></div></a>
</div>
</body>
</html>
Try adding the <a> tag inside <h3> element like below
<h3><a hrer =""><a></h3>
With
. maincontain a{
display :block;
}
Here is the html and the css in a snippet:
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
width: 100%;
}
header {
height: 100px;
background-color: #35424a;
border-bottom: #e8491d 5px solid;
}
h1 {
float: left;
margin-top: auto;
margin-bottom: auto;
color: white;
}
.acme {
color: #e8491d;
}
nav {
float: right;
margin-top: auto;
margin-bottom: auto;
}
li {
display: inline;
font-size: 150%;
padding: 0px 20px;
}
<!DOCTYPE html>
<html lang="en">
<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">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<header>
<h1><span class="acme">Acme </span>Web Design</h1>
<nav>
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>SERVICES</li>
</ul>
</nav>
</header>
</body>
</html>
The problem is with h1 and nav I set the top and bottom margin to auto and gave the header a height of 100px (105px with the border) and even though margin auto still not working I tried to add
display: block;
but again still no thing happens
All you need to update your header CSS to :
header {
display: flex;
justify-content: space-between;
width: 100%;
align-items: center;
height: 100px;
background-color: #35424a;
border-bottom: #e8491d 5px solid;
}
That fix the problem
-> Please attached following code into your attached files.
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
width: 100%;
}
header {
height: 100px;
background-color: #35424a;
border-bottom: #e8491d 5px solid;
}
h1 {
float: left;
margin-top: auto;
margin-bottom: auto;
color: white;
}
.acme {
color: #e8491d;
}
nav {
float: right;
margin-top: auto;
margin-bottom: auto;
}
li {
display: inline;
font-size: 150%;
padding: 0px 20px;
}
.display-table {
display: table;
height: 100%;
width: 100%;
}
.vertical-content {
display: table-cell;
vertical-align: middle;
height: 100%;
width: 100%;
}
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Stack</title>
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<header>
<div class="display-table">
<div class="vertical-content">
<h1><span class="acme">Acme </span>Web Design</h1>
<nav>
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>SERVICES</li>
</ul>
</nav>
</div>
</div>
</header>
</body>
</html>
The HTML does not work with margin-top or margin-bottom, you need to create a flex display, check this: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
For what you want, you need to do this:
display: flex;
align-items: center;
And if you need something else from flex, check the link