*{
margin: 0px;
padding: 0px;
}
.nav{
background-color:bisque;
width: 100%;
height: 60px;
display: flex;
align-items: center;
}
.b{
height: 60px;
width: 10%;
background-color: antiquewhite;
margin: 2px;
justify-content: center;
font-family: 'Anton', sans-serif;
border-radius: 20px;
align-items: center;
display: flex;
}
img{
width: 80px;
height: 60px;
}
#srch{
width: 10%;
height:60px;
display: inline-block;
float: right;
}
<!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>Lost and Found</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Anton&display=swap" rel="stylesheet">
</head>
<body>
<div class="nav" >
<img src="img.png" alt="logo" srcset="">
<div class="b"><span>Electronincs</span></div>
<div class="b"><span>Plastics</span></div>
<div class="b"><span>Wearables</span></div>
<div class="b"><span>Others</span></div>
<input id="srch" type="search" value="Search">
</div>
</body>
</html>
The first code is Style.css while the 2nd code for Html file. Why is the search box not sticking to the right ? What mistake have i made ? I am not able to understand.The code is self explantory.
The searchbox has the id #srch. I am designing the nav bar and am a beginner.
Instead of going with this float approach you could do something like,
<div class="nav" >
<div class="nav-items">
<img src="img.png" alt="logo" srcset="">
<div class="b"><span>Electronincs</span></div>
<div class="b"><span>Plastics</span></div>
<div class="b"><span>Wearables</span></div>
<div class="b"><span>Others</span></div>
</div>
<input id="srch" type="search" value="Search">
</div>
.nav{
background-color:bisque;
width: 100%;
height: 60px;
display: flex;
align-items: center;
justify-content: space-between;
}
justify-content: space-between takes care of positioning the search box to the right and other items to the left.
Also note that, I added an extra div class "nav-items". It helps to separate other items with search box
Try to avoid float: right; and use instead of it a margin-left: auto; on the input.
You can put it into div for the better layout.
You can use right: 0; to move your search bar to the right.
#srch {
width: 10%;
height:60px;
/* these 2 lines should do the trick! */
right: 0;
position: absolute;
}
Related
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Why is this inline-block element pushed downward?
(8 answers)
Closed last month.
here is the html code and CSS code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" sizes="32x32" href="assets/favicon-32x32.png">
<title>Frontend Mentor | Space tourism website</title>
<link rel="stylesheet" href="testing-css/testing.css">
</head>
<body>
<div class="bg">
<div class="main-menu">
<div class="logo">
<img class="logo-img" src="assets/shared/logo.svg" alt="logo-img">
</div>
<!-- <div class="line">
<div class="horizontal-line"></div>
</div> -->
</div>
</div>
</div>
</body>
</html>
body {
margin: 0;
padding: 0;
background-image: url('../assets/home/background-home-desktop.jpg') ;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 100vh;
width: 100vh;
}
.main-menu {
display: block;
margin: 50px;
padding: 25px 0 25px 0;
width: 2000px;
height: 50px;
font-size: 0;
}
.logo {
width: 50px;
height: 50px;
display: inline-block;
}
.logo-img {
width: 50%;
height: 50%;
}
.line {
width: 600px;
height: 50px;
display: inline-block;
padding-left: 50px;
padding-right: 50px;
}
.horizontal-line {
width: 600px;
height: 2px;
display: block;
background-color:#979797;
position: relative;
bottom: -50%;
}
the result shows:
when there is no second inline-block element
when remove the comment remarks, the html code is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" sizes="32x32" href="assets/favicon-32x32.png">
<title>Frontend Mentor | Space tourism website</title>
<link rel="stylesheet" href="testing-css/testing.css">
</head>
<body>
<div class="bg">
<div class="main-menu">
<div class="logo">
<img class="logo-img" src="assets/shared/logo.svg" alt="logo-img">
</div>
<div class="line">
<div class="horizontal-line"></div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS code is the same as before, no changes.
the results shows :
when there has second inline-block element
the first inline-block element were pushed down...
what is the reason for this happening??
So , what is reason that affects the first inline-block element's position??
I'm trying to make this page: page
But the header and the section part overlap. I can get it down by adding padding-top: 75px but I'm not sure if that's correct. What is the right thing to do to fix this?
And in the navbar in the example, the space between the list items is more than mine, but I gave the same padding. What is the problem?
*{
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #eee;
}
html,body{
font-family: sans-serif;
height: 100%;
}
header{
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
position: fixed;
min-height: 75px;;
padding: 0 20px;
}
.logo{
width: 60vw;
}
.logo > img{
width: 100%;
height: 100%;
max-width: 300px;
display: flex;
justify-content: center;
align-items: center;
margin-left: 20px;;
}
nav > ul{
width: 35vw;
display: flex;
justify-content: space-around;
}
li{
list-style: none;
}
a{
color: #000;
text-decoration: none;
}
<!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>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header id="header">
<div class="logo">
<img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="" class="header-img">
</div>
<nav id="nav-bar">
<ul>
<li>Features</li>
<li>How It Works</li>
<li>Pricing</li>
</ul>
</nav>
</header>
<section id="hero">
<h2>Hadcrafted, home-made masterpieces</h2>
<form action="" id="form">
<input type="email" placeholder="Enter your email...">
<input type="submit" id="submit">
</form>
</section>
</body>
</html>
Always use fix for inner div not the outer div
As you have given position fixed to navbar, just give it :
Position:absolute;
And make innner div in it then give this div position relative
Position:fixed;
I want the image with the class "userIcon" to center in height and also align it at the right side of the navbar. I tried many different things but I didn't find a result. With float: right is the image right, but not centered in height anymore.
body {
margin: 0;
}
.navbar {
width: 100%;
height: 5%;
background-color: rgb(59, 59, 235);
}
.linkSaverIcon {
margin-left: .5%;
height: 60%;
vertical-align: middle;
}
.userIcon {
margin-right: 1%;
height: 60%;
}
.titleFont {
color: #ffff;
font-family: 'Ubuntu', sans-serif;
margin-left: 1%;
display: inline-block;
vertical-align: middle;
}
.standardFont {
color: #ffff;
font-family: 'Ubuntu', sans-serif;
margin: 0;
}
<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>Link Saver</title>
<link rel="stylesheet" href="../styles/styles.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght#300&display=swap" rel="stylesheet" />
<link rel="icon" href="../assets/icons/websiteIcon.svg" />
</head>
<body>
<nav class="navbar">
<img class="linkSaverIcon" src="../assets/icons/websiteIcon.svg" alt="Link Saver Icon" href="home.html" />
<h1 class="titleFont">Link Saver</h1>
<img src="../assets/icons/userIcon.svg" alt="userIcon" class="userIcon" />
</nav>
</body>
</html>
This should work nicely for you. Use flex with align-items: center; to get them center vertically. Then use margin-left: auto; on userIcon to get it to the far right.
A non-margin solution would be to nest the LinkSaverIcon img and the h1 in a div, and set that div to either display: flex with align-items: center; or inline-block. Then nest the userIcon in its own div, and use justify-content: space-between; on navbar.
body {
margin: 0;
}
.navbar {
width: 100%;
background-color: rgb(59, 59, 235);
display: flex;
align-items: center;
}
.linkSaverIcon {
margin-left: .5%;
height: 60%;
vertical-align: middle;
}
.userIcon {
margin-left: auto;
margin-right: .5em;
height: 60%;
}
.titleFont {
color: #ffff;
font-family: 'Ubuntu', sans-serif;
margin-left: 1%;
display: inline-block;
vertical-align: middle;
}
.standardFont {
color: #ffff;
font-family: 'Ubuntu', sans-serif;
margin: 0;
}
<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>Link Saver</title>
<link rel="stylesheet" href="../styles/styles.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght#300&display=swap" rel="stylesheet" />
<link rel="icon" href="../assets/icons/websiteIcon.svg" />
</head>
<body>
<nav class="navbar">
<img class="linkSaverIcon" src="https://picsum.photos/40/40" alt="Link Saver Icon" href="home.html" />
<h1 class="titleFont">Link Saver</h1>
<img src="https://picsum.photos/40/40" alt="userIcon" class="userIcon" />
</nav>
</body>
</html>
body {
margin: 0;
}
.navbar {
display: flex;
align-items: center;
width: 100%;
height: 5%;
background-color: rgb(59, 59, 235);
}
.linkSaverIcon {
margin-left: 0.5%;
height: 60%;
vertical-align: middle;
}
.userIcon {
margin-left: auto;
margin-right: 1%;
height: 60%;
}
.titleFont {
color: #ffff;
font-family: "Ubuntu", sans-serif;
margin-left: 1%;
display: inline-block;
vertical-align: middle;
}
.standardFont {
color: #ffff;
font-family: "Ubuntu", sans-serif;
margin: 0;
}
<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>Link Saver</title>
<link rel="stylesheet" href="../styles/styles.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Ubuntu:wght#300&display=swap"
rel="stylesheet"
/>
<link rel="icon" href="../assets/icons/websiteIcon.svg" />
</head>
<body>
<nav class="navbar">
<img
class="linkSaverIcon"
src="https://picsum.photos/40/40"
alt="Link Saver Icon"
href="home.html"
/>
<h1 class="titleFont">Link Saver</h1>
<img
src="https://picsum.photos/40/40"
alt="userIcon"
class="userIcon"
/>
</nav>
</body>
</html>
How about this, add display:flex; align-items:center in .navbar and margin-left: auto on .userIcon, I use picsum to replace the empty asset.
.usericon{margin-right:auto;}
this Might do the trick,(Edit) Sorry Messed up first time.
I am making a site and the text that says what's new in the code snippet below is not fitting at the top of the box I created.
:root {
--border-width: 100px;
--border-height: 200px;
--border-color: #000;
--box-color: #A8CCC9;
--background-color: #75B9BE;
}
.lftSector {
border-style: dashed;
width: var(--border-width, 100px);
height: var(--border-height, 200px);
padding: 50px;
border: 6px solid var(--border-color, gray);
background-color: var(--box-color);
}
body {
background-color: var(--background-color);
}
ol {
width: var(--border-width);
float: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://Wick-Gallery.nikhilharry.repl.co/style.css">
<title>Gallery</title>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght#0,200;0,300;0,400;0,500;0,600;0,700;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,900&display=swap" rel="stylesheet">
<link href="gstyle.css" rel="stylesheet">
</head>
<body>
<h1> Welcome to the gallery</h1>
<div class="lftSector">
<h1 class="content">What's New?</h1>
<ol>
[BETA]</div> Transformation</li>
</ol>
</div>
</body>
</html>
As you see, this makes a background with a box and text. Please show me how to position the <h1> at the top of the box with the border I created.
This should help. That 50 px padding was removed and then width and min-width were used to control the width of the box. Also applied margin css to the h1.
:root {
--border-width: 100px;
--border-height: 200px;
--border-color: #000;
--box-color: #A8CCC9;
--background-color: #75B9BE;
}
.lftSector {
border-style: dashed;
width: 50%; /* changed */
min-width: 200px; /* added */
height: var(--border-height, 200px);
border: 6px solid var(--border-color, gray);
background-color: var(--box-color);
}
body {
background-color: var(--background-color);
}
ol {
width: var(--border-width);
float: left;
}
.content { /* added */
margin: 0 .5rem; /* added */
} /* added */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://Wick-Gallery.nikhilharry.repl.co/style.css">
<title>Gallery</title>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght#0,200;0,300;0,400;0,500;0,600;0,700;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,900&display=swap" rel="stylesheet">
<link href="gstyle.css" rel="stylesheet">
</head>
<body>
<h1> Welcome to the gallery</h1>
<div class="lftSector">
<h1 class="content">What's New?</h1>
<ol>
<a href="linkoftruth">
<li>
<div id="beta">[BETA]</div> Transformation</li>
</a>
</ol>
</div>
</body>
</html>
There were a few problems with your code. Firstly, the header was being smushed, because you used padding to give your div its size, as opposed to a width and a height. Next, you were calling on variables from :root, but also trying to pass values into those variables. To achieve your solution, I fixed the issues mentioned, as well as created two new div sections - one for the header, and one for the list. Also, you were wrapping your li elements in a tags. It should be the other way around.
:root {
--border-width: 100px;
--border-height: 200px;
--border-color: #000;
--box-color: #A8CCC9;
--background-color: #75B9BE;
}
body {
background-color: var(--background-color);
}
.lftSector {
width: 300px;
height: 300px;
border: 6px solid var(--border-color, gray);
background-color: var(--box-color);
}
.lftSector > div {
width: 100%;
text-align: center;
height: 20%;
display: flex;
justify-content: center;
align-items: center;
}
#content {
width: 100%;
height: 80%;
}
<h1> Welcome to the gallery</h1>
<div class="lftSector">
<div>
<h1 class="content">What's New?</h1>
</div>
<div id="content">
<ol>
<li><span id="beta">[BETA]</span>Transformation</li>
</ol>
</div>
</div>
Additionally, I'd recommend usually setting your widths to be percentages, or based on vw/vh. Just a tip.
How can I center my icons in the middle of the page and place the text under the icons?
I tried 4 hours and it didn't work ; It would be great if it were based on the Flex box and in the middle of the DIV,
<pre>
<!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>Document</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#200&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<style>
.row{
display: flex; /* مهمة */
justify-content: space-between;
.servics{
height: 100%;
width: 100%;
padding-top: 2%;
text-align: center;
margin: 10% auto;
/* https://www.youtube.com/watch?v=wfaDzSL6ll0 */
}
.icons{
display: flex;
}
.child{
width: 150px;
height: 150px;
background-color: transparent;
border: 4px solid #87CEEB;
border-radius: 100%;
font-size: 50px;
text-align: center;
}
.icon1, .icon2, .icon3, .icon4{
color: rosybrown;
line-height: 150px;
}
</style>
</head>
<body>
<section class="servics">
<h1>Unsere Leistungen</h1>
<div class="row">
<div class="icons">
<div class="child icon1"> <i class="fas fa-heart"></i> Same </div>
<div class="child icon2"> <i class="fas fa-heart"></i> Sam </div>
<div class="child icon3"> <i class="fas fa-heart"></i> Equar </div>
<div class="child icon4"> <i class="fas fa-heart"></i> Isma</div>
</div>
</div>
</section>
</body>
</html>
</pre>
The following code might help
<!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>Document</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#200&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<style>
.servics{
height: 100%;
width: 100%;
padding-top: 2%;
text-align: center;
margin: 10% auto;
/* https://www.youtube.com/watch?v=wfaDzSL6ll0 */
}
.icons{
display: flex;
justify-content: center;
}
.child{
width: 150px;
height: 150px;
background-color: transparent;
border: 4px solid #87CEEB;
border-radius: 100%;
font-size: 50px;
text-align: center;
}
.icon1, .icon2, .icon3, .icon4{
color: rosybrown;
line-height: 150px;
}
</style>
</head>
<body>
<section class="servics">
<h1>Unsere Leistungen</h1>
<div class="icons">
<div class="child icon1"> <i class="fas fa-heart"></i> Same </div>
<div class="child icon2"> <i class="fas fa-heart"></i> Sam </div>
<div class="child icon3"> <i class="fas fa-heart"></i> Equar </div>
<div class="child icon4"> <i class="fas fa-heart"></i> Isma</div>
</div>
</div>
</section>
</body>
</html>
for put any thing in middle of the page you can use >>
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
and is one more way to put text under icon ,
use ur border style on i tag :)
looc at this >>
.ur-icon{
border: & & &;
border-radius: &;
}
looc ^^^ i used border style in icon not div(child icon#)
and after u can put with and height
and for spaces use padding / margin
have nice time . 👋😀
Try this one: its flex layout method. In the past it was a struggle to center page to the middle, nowadays it's changed. Remove all your code in style and replace with the code below:
/* CSS */
body{
display: flex;
justify-content: center;
background: orange;
align-items: center;
height: 100vh;
}
.icons *{
display: inline-block;
}
.servics{
text-align: center;
}