The top & the left css values in my code are not working. I've applied them to an h1 but, their not working and I don't know why. Here is all of my code. I've been trying to see what's wrong for a really long time. Please tell me if you spot a problem. And thank you for looking at my post.
body {
margin: 0;
padding: 0;
background-color: #171a1f;
}
h1.TxT {
top: 10px;
left: 10px;
color: #ffa600;
} // here is where the code is not working
.search-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #2f3640;
height;
40px;
border-radius: 40px;
padding: 10px;
}
.search-box:hover>.search-txt {
width: 240px;
padding: 0 6px;
}
.search-btn {
color: #ffa600;
float: right;
width: 30px;
height 50px;
border-radius: 50%;
background: ;
display: flex;
justify-content: center;
text-align: center;
}
.search-txt {
border: none;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 16px;
transition: 0.4s;
line-height: 30px;
width: 240px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="search-style.css">
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<title>Searchbar Test</title>
</head>
<body>
<h1 class="TxT">Search</h1>
<div class="search-box">
<input class="search-txt" type="text" name="" placeholder="Type to search">
<a class="search-btn" href="#">
<i class="fas fa-search"></i>
</a>
</div>
</body>
</html>
There were a couple of small errors affecting your code. The first was that you had a colon instead of a semi-colon in the height css. Also there was no background attribute set in the background of the search btn (I commented it out)
The main thing, however, was that your comment was formatted so that the search-box class was not being picked up. Instead of using 2 forward slashes in css, surround your comments with /* and */ - asterisk and and forward slashes.
body {
margin: 0;
padding: 0;
background-color: #171a1f;
}
h1.TxT {
top: 10px;
left: 10px;
color: #ffa600;
} /* here is where the code is not working*/
.search-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #2f3640;
height:40px;
border-radius: 40px;
padding: 10px;
}
.search-box:hover>.search-txt {
width: 240px;
padding: 0 6px;
}
.search-btn {
color: #ffa600;
float: right;
width: 30px;
height 50px;
border-radius: 50%;
/* background:*/
display: flex;
justify-content: center;
text-align: center;
}
.search-txt {
border: none;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 16px;
transition: 0.4s;
line-height: 30px;
width: 240px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="search-style.css">
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<title>Searchbar Test</title>
</head>
<body>
<h1 class="TxT">Search</h1>
<div class="search-box">
<input class="search-txt" type="text" name="" placeholder="Type to search">
<a class="search-btn" href="#">
<i class="fas fa-search"></i>
</a>
</div>
</body>
</html>
Apart from the syntax errors for the comment in the CSS code: For top and left parameters to work (for that h1 element), the element needs to have position: relative ( or absolute or fixed, but those will also affect the position in other ways, so you'll most likely need relative position)
Related
I don't have that much experience in HTML/CSS. As it says in the title, I have a problem with the input (where it says "What do you think about ?"). I left click on input field so I can write something inside it but when I click the submit logo it is not clickable. And the other problem is with Create account. It is not recognized as a link. The other links work but this one doesn't. It is also not clickable. After I added more CSS code those problems appeared.
Can someone help me with this problem?
P.S : This is a project for a non-programmer friend.
* {
box-sizing: border-box;
}
body {
background: url(images/backgroundWallpaper.jpg) fixed no-repeat center center;
background-size: cover;
margin: 0;
}
#font-face {
font-family: "myFont";
src: url("fonts/coolvetica\ rg.ttf")
}
/* ************************************ HOME PAGE ************************************ */
.header {
background-color: rgb(19, 25, 33);
width: 100%;
height: 140px;
}
.searchbar {
position: relative;
margin-left: 265px;
bottom: 63px;
}
#input {
width: 750px;
height: 48px;
font-size: 17px;
}
#searchbarBtn {
position: relative;
height: 48px;
width: 48px;
font-size: 21px;
top: 2px;
}
#loginBtn {
position: relative;
padding-left: 1140px;
bottom: 95px;
color: white;
font-size: 17px;
}
.logoImg {
width: 240px;
padding-left: 15px;
padding-top: 15px;
}
.viewCart {
color: white;
font-size: 40px;
position: relative;
padding-left: 1370px;
bottom: 128px;
}
.cartBtn {
font-size: 17px;
position: relative;
left: 5px;
bottom: 5px;
}
a {
text-decoration: none;
color: white;
}
a:hover {
color: blue;
}
nav {
display: inline;
position: relative;
bottom: 37px;
padding-left: 18px;
word-spacing: 15px;
}
.navBtn {
font-size: 17px;
}
header {
background: url(images/headerWallpaper.jpg) center center;
width: 100%;
height: 750px;
margin-top: -20px;
position: relative;
z-index: 1;
}
.main {
padding: 0px 130px;
}
footer {
background-color: rgb(19, 25, 33);
clear: both;
color: white;
text-align: center;
font-size: 17px;
height: 50px;
padding-top: 15px;
font-family: "myFont";
}
<!DOCTYPE html>
<html>
<head>
<title>Danube</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<section class="header">
<img class="logoImg" src="images/logo.png">
<div class="searchbar">
<form>
<input id="input" type="text" placeholder="What do you think about ?" name="search">
<button id="searchbarBtn" type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
<div id="loginBtn">Hello, Create account</div>
<div class="viewCart">
<i class="fa fa-shopping-cart"></i>
<a class="cartBtn" href="#">My Basket</a>
</div>
</section>
<nav>
<a class="navBtn" href="#">Home</a>
<a class="navBtn" href="#">Offers</a>
<a class="navBtn" href="#">Products</a>
<a class="navBtn" href="#">Showrooms</a>
<a class="navBtn" href="#">Contact</a>
</nav>
<div class="main">
<header>
</header>
</div>
<footer>
<div>S.C. DANUBE ROMANIA S.R.L. este inregistrata cu numarul 000 / 2022 in registrul de evidenta a prelucrarilor de date cu caracter personal</div>
</footer>
</body>
</html>
There's a lot of problems with the code. Try avoiding fixed values like px for things. Keep your website responsive - you can use flex or something for maintaining a responsive layout.
It is easier to see the problem when you inspect it using Firefox's(or any other browsers) inspecting tool.
You can fix the problems you stated by implementing suggestions told by us here but they may break something else since we don't know the whole code.
Firstly, you can see that the header element is above the search bar and hence the search bar is unfocusable. You can either change the z-index of the header element to -1 or something or you can set the search bar's z-index to a bigger value.
The Create Account link has the same problem as well. In this case,the element with the viewCart class is overlapping the link. What you need to do is in it's style change the padding-left property to margin-left and it will stop overlapping.
Again, try to keep things simple by using a more dynamic way so that elements are positioned and sized automatically instead of you having to specify the sizes yourself.
First of all, the button always have a default cursor, if you want to change the cursor to the pointer on hovering you must add this: button:hover {cursor: pointer}
Second of all, you're using positions wrongly and don't understand them. Read about positions here.
I deleted all of the position relatives and top & bottom.
* {
box-sizing: border-box;
}
body {
background: url(images/backgroundWallpaper.jpg) fixed no-repeat center center;
background-size: cover;
margin: 0;
}
#font-face {
font-family: "myFont";
src: url("fonts/coolvetica\ rg.ttf")
}
/* ************************************ HOME PAGE ************************************ */
.header {
background-color: rgb(19, 25, 33);
width: 100%;
height: 140px;
}
.searchbar {
margin-left: 265px;
}
#input {
width: 750px;
height: 48px;
font-size: 17px;
}
#searchbarBtn {
height: 48px;
width: 48px;
font-size: 21px;
}
/* EDITED HERE */
#searchbarBtn:hover {
cursor: pointer
}
#loginBtn {
padding-left: 1140px;
color: white;
font-size: 17px;
}
.logoImg {
width: 240px;
padding-left: 15px;
padding-top: 15px;
}
.viewCart {
color: white;
font-size: 40px;
position: relative;
padding-left: 1370px;
bottom: 128px;
}
.cartBtn {
font-size: 17px;
position: relative;
left: 5px;
bottom: 5px;
}
a {
text-decoration: none;
color: white;
}
a:hover {
color: blue;
}
nav {
display: inline;
position: relative;
bottom: 37px;
padding-left: 18px;
word-spacing: 15px;
}
.navBtn {
font-size: 17px;
}
header {
background: url(images/headerWallpaper.jpg) center center;
width: 100%;
height: 750px;
margin-top: -20px;
position: relative;
z-index: 1;
}
.main {
padding: 0px 130px;
}
footer {
background-color: rgb(19, 25, 33);
clear: both;
color: white;
text-align: center;
font-size: 17px;
height: 50px;
padding-top: 15px;
font-family: "myFont";
}
<!DOCTYPE html>
<html>
<head>
<title>Danube</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<section class="header">
<img class="logoImg" src="images/logo.png">
<div class="searchbar">
<form>
<input id="input" type="text" placeholder="What do you think about ?" name="search">
<button id="searchbarBtn" type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
<div id="loginBtn">Hello, Create account</div>
<div class="viewCart">
<i class="fa fa-shopping-cart"></i>
<a class="cartBtn" href="#">My Basket</a>
</div>
</section>
<nav>
<a class="navBtn" href="#">Home</a>
<a class="navBtn" href="#">Offers</a>
<a class="navBtn" href="#">Products</a>
<a class="navBtn" href="#">Showrooms</a>
<a class="navBtn" href="#">Contact</a>
</nav>
<div class="main">
<header>
</header>
</div>
<footer>
<div>S.C. DANUBE ROMANIA S.R.L. este inregistrata cu numarul 000 / 2022 in registrul de evidenta a prelucrarilor de date cu caracter personal</div>
</footer>
</body>
</html>
both are incorrectly positioned, they are pushing to the top and some element is overlapping over them.
I recreated your code by positioning them slightly lower using position: relative; top : 100px and then input box was accepting clicks and create link was working.
box-sizing: border-box;
}
body {
background: url(images/backgroundWallpaper.jpg) fixed no-repeat center center;
background-size: cover;
margin: 0;
}
#font-face {
font-family: "myFont";
src: url("fonts/coolvetica\ rg.ttf")
}
/* ************************************ HOME PAGE ************************************ */
.header {
background-color: rgb(19, 25, 33);
width: 100%;
height: 140px;
}
.searchbar {
position: relative;
margin-left: 265px;
bottom: 63px;
}
#input {
width: 750px;
height: 48px;
font-size: 17px;
position: relative;
top: 100px;
}
#searchbarBtn {
position: relative;
height: 48px;
width: 48px;
font-size: 21px;
top: 2px;
}
#loginBtn {
position: relative;
padding-left: 1140px;
color: white;
font-size: 17px;
}
.logoImg {
width: 240px;
padding-left: 15px;
padding-top: 15px;
}
.viewCart {
color: white;
font-size: 40px;
position: relative;
padding-left: 1370px;
bottom: 128px;
}
.cartBtn {
font-size: 17px;
position: relative;
left: 5px;
bottom: 5px;
}
a {
text-decoration: none;
color: white;
}
a:hover {
color: blue;
}
nav {
display: inline;
position: relative;
bottom: 37px;
padding-left: 18px;
word-spacing: 15px;
}
.navBtn {
font-size: 17px;
}
header {
background: url(images/headerWallpaper.jpg) center center;
width: 100%;
height: 750px;
margin-top: -20px;
position: relative;
z-index: 1;
}
.main {
padding: 0px 130px;
}
footer {
background-color: rgb(19, 25, 33);
clear: both;
color: white;
text-align: center;
font-size: 17px;
height: 50px;
padding-top: 15px;
font-family: "myFont";
}```
Please check the changes in #loginBtn and #input
I'm currently cloning a site and in the "enter email" input, the text wont align and sticks to the bottom of the input, and i'd prefer it to be in the middle on the left. How can i fix this? any help appreciated <3
#import url("https://fonts.googleapis.com/css2?family=Inter:wght#400;500;700&display=swap");
:root {
--primary-text: #111111;
--secondary-text: #91908f;
--background: #fffefc;
--btn-primary: #e16259;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: var(--b);
font-family: "Inter", sans-serif;
}
/* NAV */
header img {
float: left;
max-width: 100%;
height: 50px;
margin: 15px 60px;
}
header nav {
float: right;
margin-top: 30px;
padding-right: 20px;
}
header nav a,
header nav .vertical-line {
padding-right: 15px;
text-decoration: none;
color: #111111;
font-weight: 500;
}
header nav a:hover {
text-decoration: underline;
}
/* Hero Section */
.hero {
padding-top: 120px;
}
.hero-img {
display: flex;
justify-content: center;
max-width: 100%;
height: 200px;
}
h1 {
font-size: 70px;
text-align: center;
padding-top: 15px;
}
h4 {
text-align: center;
font-weight: 200;
font-size: 20px;
color: #91908f;
}
form {
display: flex;
justify-content: center;
}
input {
text-align: left;
width: 280px;
margin-top: 30px;
padding-top: 18px;
border: 1px solid #91908f;
border-radius: 4px;
margin-right: 10px;
}
input::placeholder {
margin-bottom: 20px;
}
form button {
width: 80px;
padding: 0px;
text-align: center;
margin-top: 30px;
color: #fffefc;
}
form label {
margin-top: 5px;
padding-left: 20px;
}
form .btn-primary {
display: inline-block;
background-color: #e16259;
border: 1px solid #af4d46;
text-align: center;
border-radius: 6px;
font-weight: 400;
}
<!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>Notion</title>
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
</head>
<body>
<header>
<img src="img/logo.png" alt="Notion Logo">
<nav>
Product
Download
Resources
Pricing
Careers
<span class="vertical-line">|</span>
Sign Up
Log In
</nav>
</header>
<div class="hero">
<div class="hero-img">
<img src="img/hero.webp" alt="Illustration of 3 people using laptop computers on seperate desks with different expressions">
</div>
<h1>All-in-one workspace</h1>
<h4>One tool for your whole team. Write, plan, and get organized.</h4>
<form action="">
<input type="text" placeholder="Email">
<button class='btn-primary' type="submit">Sign Up</button>
</form>
<p>For teams & individuals - web, mobile, Mac, Windows</p>
</div>
</body>
</html>
In input selector you can change the padding-top: 18px to padding: 10px, as below. Then remove that input::placeholder.
input {
width: 280px;
margin-top: 30px;
padding: 10px;
border: 1px solid #91908f;
border-radius: 4px;
margin-right: 10px;
}
<form action="">
<input type="text" placeholder="Email">
</form>
You can remove padding of input and adjust by using height and line height
.ip {
height: 30px;
line-height: 30px;
padding: 2px 8px;
}
<input type="text" class="ip" />
Define height for the input class and for input::placeholder remove margin-bottom: 20px; and set margin to auto and also add some left-padding.
input {
text-align: left;
width: 280px;
height: 40px;/*add height for your input*/
margin-top: 30px;
border: 1px solid #91908f;
border-radius: 4px;
margin-right: 10px;
}
input::placeholder {
margin: auto;/*set margin to auto*/
padding-left: 10px;/*add some left-padding*/
}
<form action="">
<input type="text" placeholder="Email">
<button class='btn-primary' type="submit">Sign Up</button>
</form>
Instead of scratching your head around custom CSS, you can use third party CSS libraries like Bootstrap or Semantic-UI which provide a variety of feature rich CSS components and will eventually reduce your work.
I'm making a hamburger menu right now with html and css (no js), and the :checked + .something does not work. I'm searching for solutions for about 3 hours but i can't find any. If you would help me that would be nice.
Maybe I messed up somewhere because i watched it from a video, but i did the exact same thing like him but i doesn't work :(
Here is the code:
* {
margin: 0;
padding: 0;
}
body {
background-color: teal;
}
.navigations {
right: 0;
z-index: 10;
display: block;
position: fixed;
top: 15px;
padding-bottom: 20px;
padding-left: 25px;
padding-right: 150px;
border-radius: 50px 10px 10px 50px;
background: rgba(0, 0, 0, 0.5);
}
.navigations div {
display: inline-block;
font-size: 25px;
}
.navigations a {
text-decoration: none;
color: white;
}
.burger {
z-index: 100;
position: fixed;
right: 25px;
display: block;
top: 25px;
cursor: pointer;
}
.burger div {
width: 45px;
height: 5px;
background-color: white;
margin: 12px;
border-radius: 10px;
}
#toggle {
display: none;
position: fixed;
}
#toggle:checked+.navigations {
display: none;
}
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale = 1.0">
<link rel="stylesheet" type="text/css" href="something.css">
</head>
<body>
<div class="navigations">
<div class="nav">
About us
</div>
<div class="nav">
Tours
</div>
<div class="nav">
Contacts
</div>
</div>
<label for="toggle">
<div class="burger">
<div class="burgerelem"></div>
<div class="burgerelem"></div>
<div class="burgerelem"></div>
</div>
</label>
</body>
</html>
It seems like you're actually missing the checkbox element. Since you're using the adjacent sibling selector, (+ in #toggle:checked + .navigations) you should put the checkbox with the .navigations div immediately before the #toggle input.
* {
margin: 0;
padding: 0;
}
body {
background-color: teal;
}
.navigations {
right: 0;
z-index: 10;
display: block;
position: fixed;
top: 15px;
padding-bottom: 20px;
padding-left: 25px;
padding-right: 150px;
border-radius: 50px 10px 10px 50px;
background: rgba(0, 0, 0, 0.5);
}
.navigations div {
display: inline-block;
font-size: 25px;
}
.navigations a {
text-decoration: none;
color: white;
}
.burger {
z-index: 100;
position: fixed;
right: 25px;
display: block;
top: 25px;
cursor: pointer;
}
.burger div {
width: 45px;
height: 5px;
background-color: white;
margin: 12px;
border-radius: 10px;
}
#toggle {
display: none;
position: fixed;
}
/*
Since the .navigations is the next sibling element after #toggle,
the + selector works here
*/
#toggle:checked+.navigations {
display: none;
}
<input type="checkbox" id="toggle" /> <!-- Add this! -->
<div class="navigations">
<div class="nav">
About us
</div>
<div class="nav">
Tours
</div>
<div class="nav">
Contacts
</div>
</div>
<label for="toggle">
<div class="burger">
<div class="burgerelem"></div>
<div class="burgerelem"></div>
<div class="burgerelem"></div>
</div>
</label>
Whenever I resize my html page elements start to overlap each other. I have tried to avoid this by using percentages rather than pixels wherever I can. Here is my code of what I have so far, any ideas? How do you like the design btw? :) What's weird is that the vertical line in the middle is where it is supposed to be when the window is resized, but everything else is not.
*:focus {
outline: none;
}
body {
background: #ced4da;
margin: 0;
padding: 0;
font-family: sans-serif;
}
.login-box {
width: 300px;
height: 170px;
background: rgba(0,0,0,0);
color: white;
top: 50%;
left: 33%;
position: absolute;
transform: translate(-50%,-50%);
box-sizing: border-box;
padding-top: 12.5px;
}
.email-input-field {
position: relative;
}
.password-input-field {
position: relative;
}
.email-input-field i {
position: absolute;
left: 0;
top: 4px;
padding: 9px 8px;
color:darkgrey;
transition: 0.3s;
}
.password-input-field i {
position: absolute;
left: 0;
top: 4px;
padding: 9px 12px;
color:darkgrey;
transition: 0.3s;
}
.email-input-field input:focus + i, .password-input-field input:focus + i {
color:dodgerblue;
}
.login-box .email-input-field, .password-input-field {
margin-bottom: 10px;
}
.login-box input[type="email"], input[type="password"] {
border: none;
background: white;
height: 40px;
font-size: 12px;
width: 83%;
padding-left: 50px;
}
.login-box input[type="submit"] {
border: none;
background-color: #3DBB96;
color: white;
outline: none;
height: 40px;
width: 100%;
font-size: 15px;
font-weight: lighter;
}
::placeholder {
color: grey;
}
.vertical-line {
border-left: 1px solid darkgrey;
width:1px;
height: 170px;
top: 50%;
left:50%;
position:absolute;
transform: translate(-50%,-50%);
box-sizing: border-box;
}
.side-text {
top: 50%;
left:63%;
position:absolute;
transform: translate(-50%,-50%);
line-height: 100%;
}
.side-text p {
font-weight: lighter;
}
.side-text h1 {
font-weight: normal;
}
<!DOCTYPE html>
<html>
<head>
<title> Admin Login </title>
<link rel="stylesheet" type="text/css" href="css/Login.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class = "login-box">
<form>
<div class = "email-input-field">
<input type = "email" name = "emailPost" placeholder = "Email">
<i class = "fa fa-envelope fa-lg" aria-hidden = "true"></i>
</div>
<div class = "password-input-field">
<input type = "password" name = "passwordPost" placeholder = "Password">
<i class = "fa fa-lock fa-lg" aria-hidden = "true"></i>
</div>
<input type = "submit" name = "submit" value = "Login">
</form>
</div>
<div class = "vertical-line"></div>
<div class = "side-text">
<h1> COLD OPS </h1>
<p> ADMINISTRATION PANEL </p>
</div>
</body>
</html>
When making responsive web pages, add the following element in all your web pages: (inside the head tags)
Example
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I know this should be easy, but my css skills are rusty a bit and this starts to drive me crazy.
I want to move language text right from logo on site, but nothing works for me.
This is my HTML:
<html lang="en">
<head>
<title>SWANKY Mint Hostel</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Istok+Web" rel="stylesheet">
</head>
<body class="body">
<img src="logo_piktogrami/drustvene-mreze.png" alt="mreze" class="networks">
<div class="div-main">
<div>
<img src="logo_piktogrami/logo_swanky.png" alt="logo" class="logo">
</div>
<div class="language">UK / KR / HR</div>
<div class="dropdown">
<button class="dropbtn">HOSTEL</button>
<div class="dropdown-content">
O NAMA
POVJEST
MENZA
PARTNERI
</div>
<button class="dropbtn">REZERVACIJA</button>
<button class="dropbtn">GALERIJA</button>
<button class="dropbtn">INFO</button>
<button class="dropbtn">KAKO DO NAS</button>
</div>
</div>
</body>
</html>
And this is my CSS:
.dropbtn {
background-color: #000000;
color: white;
padding: 8px;
font-size: 10px;
width: 100px;
margin-right: 5px;
font-family: 'Istok Web', sans-serif;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
float: left;
top: 10.3%;
margin-left: 5px;
}
.body {
background-color: #95e5c4;
}
.logo{
width: 130px;
height: 130px;
float: left;
margin-left: 5px;
}
.networks{
width: 32px;
height: 186px;
margin-top: 7%;
}
.div-main {
height: 735px;
width: 685px;
background-color: #e6e6e6;
top: 50%;
left: 50%;
max-width: 1000px;
margin: auto;
left: 1%;
right: 1%;
top: 0%;
bottom: 0%;
position: absolute;
}
.language{
font-family: 'Istok Web', sans-serif;
font-weight: bold;
margin-right: 0px;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #95e5c4;
font-family: 'Istok Web', sans-serif;
text-align: center !important;
font-size: 10px;
width: 100px;
box-shadow: 0px 6px 12px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 8px 12px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #e6e6e6}
.dropdown:hover .dropdown-content {
display: block;
}
What I have for now is this:
Need to align text to right so I have something like this instead:
Does someone see which property I am using wrongly or not using at all?
Add:
float: right;
margin: 5px;
to your .language class :)
For start, I'd add some padding, then to align this on the right side, I'd use either float:right or CSS GRID like this:
.box-container{
display:grid;
grid-template-columns:auto 25%; //Or whatever value you want
}
And simply put this text into the container. Let me know if it helps!