I can't display text after the icon. I tried to use float but isn't working.
Can u help me to solve it please? I can't find the solve on google, i tried this before asking
CSS File:
*{
margin: 0;
padding: 0;
}
header{
height: 70px;
background-color: darkgrey;
width: 100%;
}
i{
margin-top: 15px;
margin-left: 15px;
padding: 0px 3px 0px 3px;
border-radius: 10px;
border-style: solid;
border-spacing: 10px;
}
i:hover{
background-color: grey;
}
HTML File:
<!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>Titlu</title>
<script src="https://kit.fontawesome.com/768cd38b76.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<header>
<i class="fas fa-bars fa-2x"></i>
<h1>Titlu</h1>
</header>
</body>
</html>
display: flex;
align-items: center;
Just add that to the class and it should solve your problem. You can also remove margin-top in the "i" class to make you design neater.
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>
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 am slightly new to html and css and want to create my own portfolio. I have some problems with the classes though. Whenever I try to call them in css it doesn't seem to do what its supposed to do.
When I call it without using classes it works perfectly fine.
Hope somebody can help and find my mistake,
thanks in advance.
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Xander Feliers - Portfolio</title>
<meta name="description" content="Portfolio - Xander Feliers">
<link rel="stylesheet" href="css/screen.css">
</head>
<body>
<div>
<nav>
<ul class="header_nav">
<li class="header_nav">Contact</li>
<li class="header_nav">Projects</li>
<li class="header_nav">About</li>
<li class="header_nav">Home</li>
</ul>
</nav>
</div>
</body>
</html>
CSS
body{
background-color: #f1f6fe;
}
.header_nav{
list-style-type: none;
margin: 0;
padding: 25px;
overflow: hidden;
background-color:#78aefa;
width: 250 px;
}
li.header_nav{
float: right;
padding-right: 20px;
}
a.header_nav {
font-family: arial;
display: block;
color:white;
text-align: center;
padding: 14 px 16 px;
text-decoration: none;
}
UPDATE
Changed css but still doesn't work.
This class won't work.
You pointed to the link with class header_nav. But you don't have it.
a.header_nav {
font-family: arial;
display: block;
color:white;
text-align: center;
padding: 14 px 16 px;
text-decoration: none;
}
It should be (link inside the class .header_nav)
.header_nav a {
font-family: arial;
display: block;
color:white;
text-align: center;
padding: 14 px 16 px;
text-decoration: none;
}
UPDATE:
I've included the snippet. Is it what you want?
body{
background-color: #f1f6fe;
}
.header_nav{
list-style-type: none;
margin: 0;
padding: 25px;
overflow: hidden;
background-color:#78aefa;
width: 250 px;
}
li.header_nav{
float: right;
padding-right: 20px;
}
.header_nav a {
font-family: arial;
display: block;
color:white;
text-align: center;
padding: 14 px 16 px;
text-decoration: none;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Xander Feliers - Portfolio</title>
<meta name="description" content="Portfolio - Xander Feliers">
<link rel="stylesheet" href="css/screen.css">
</head>
<body>
<div>
<nav>
<ul class="header_nav">
<li class="header_nav">Contact</li>
<li class="header_nav">Projects</li>
<li class="header_nav">About</li>
<li class="header_nav">Home</li>
</ul>
</nav>
</div>
</body>
</html>
UPDATE 2
Order in the CSS is really mater. If you want to enforce your style you can use !important after the style. (Although I saw the articles where it's considered as bad practice.)
.header_nav a {
font-family: arial;
display: block;
color:white!important;
text-align: center;
padding: 14 px 16 px;
text-decoration: none!important;
}
I'm not sure what you are expecting, but it appears your class declarations are a little backwards. It should be class then element so,
.header_nav li { your styles }
.header_nav a { your styles }
Make the following changes:
From
a.header_nav {
}
To:
.header_nav a {
}
and also you can make change to html for easiness
body{
background-color: #f1f6fe;
}
ul.header_nav_container {
float:right;
padding: 20px;
}
ul.header_nav_container li.header_nav {
list-style-type: none;
float: left;
padding: 0 20px
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Xander Feliers - Portfolio</title>
<meta name="description" content="Portfolio - Xander Feliers">
<link rel="stylesheet" href="css/screen.css">
</head>
<body>
<div>
<nav>
<ul class="header_nav_container">
<li class="header_nav">Contact</li>
<li class="header_nav">Projects</li>
<li class="header_nav">About</li>
<li class="header_nav">Home</li>
</ul>
</nav>
</div>
</body>
</html>
If class doesn't work you can specify ids and pass the styles similarly
I am very confused right now. I've used Os-animation before and I even copied the exact code from my other use of it, but I cannot get it to work on this page. Here is my HTML/CSS:
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #4074A0;
font-family: 'Open Sans', sans-serif;
border: none;
outline: none;
box-shadow: none;
}
* {
outline: none;
border: none;
box-shadow: none;
text-shadow: none;
}
main {
position: absolute;
top: 35%;
left: 50%;
transform: translate(-50%, -50%);
display: block;
}
p {
text-align: center;
font-size: 250%;
width: 100%;
color: white;
text-transform: uppercase;
text-shadow: 0px 3px #098FA8;
}
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation Testing</title>
<link rel="stylesheet" href="style.css">
<link href="css/animate.css" rel="stylesheet" />
<link href="css/waypoints.css" rel="stylesheet" />
</head>
<body>
<main class="os-animation" data-os-animation="bounceInDown" data-os-animation-delay="0s">>
<p>Hello!</p>
</main>
</body>
</html>
So, I am trying to get the 'Hello!' text to bounceIn from the top, I have previously done this and have even copied the code from that old document, however, it doesn't seem to want to work on this one.
I've done some looking online but there doesn't seem to be much about this topic.
Any help is appreciated!
Thank you.
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;