A bit baffled here. i've added a slider transition to the portfolio box at the top, but since adding it, the two big text boxes have moved in line with it vertically when they were just sitting to the left hand side of the page beforehand. so unsure where or what has gone wrong!!
It's gonna be something small im sure, as it always is, but this is one of those little hurdles for the day which ive spent ages trying to figure out, but just cant. So hope you can help, thanks!!
<!doctype html>
<html>
<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="icon" type="image/png" href="favicon.png"/>
<link href='https://fonts.googleapis.com/css?family=Playfair+Display' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<style type="text/css">
html, body {
margin:0;
padding:0;
}
body {
background: -webkit-gradient(linear, 84% 100%, 100% 0%, from(#9179AB), to(#E39745), color-stop(.6,#B37D89))
}
div.home {
width: 250px;
height: 35px;
background-color: #212121;
float:left;
border-style: solid;
border-color: #191919;
border-width: 1.5px;
}
div.mentioncopy {
color: white;
text-align: center;
padding-top: 7px;
font-family: 'Lato', sans-serif;
font-size: 11px;
letter-spacing: 2px;
}
div.portfolio {
width: 125px;
height: 35px;
background-color: #212121;
float: left;
border-style: solid;
border-color: #191919;
border-width: 1.5px;
}
div.portfoliocopy {
color: white;
text-align: center;
padding-top: 7px;
font-family: 'Lato', sans-serif;
font-size: 11px;
letter-spacing: 1px;
}
div.about {
width: 125px;
height: 35px;
background-color: #212121;
float:left;
border-style: solid;
border-color: #191919;
border-width: 1.5px;
}
div.aboutcopy {
color: white;
text-align: center;
padding-top: 7px;
font-family: 'Lato', sans-serif;
font-size: 11px;
letter-spacing: 1px;
}
.sliding-middle-out {
padding-bottom: 3px;
text-align: center;
}
.sliding-middle-out:after {
content: '';
display: block;
margin: auto;
height: 3px;
width: 0px;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.sliding-middle-out:hover:after {
width: 50%;
background: white;
}
.sliding-middle-out {
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.sliding-middle-out:hover {
opacity: 0.7;
}
a:link
{
color: white;
text-decoration: none;
}
a:visited
{
color: white;
text-decoration: none;
}
a:hover
{
color: white;
text-decoration: none;
}
a:active
{
color: white;
text-decoration: none;
}
div.header {
width: 506px;
height: auto;
background-color: #212121;
display: inline-block;
}
div.headercopy {
color: white;
font-size: 40px;
padding-top: 20px;
padding-left: 30px;
padding-bottom: 20px;
padding-right: 20px;
}
div.headerlink {
width: 506px;
height: auto;
background-color: #212121;
}
div.linkcopy {
color: white;
font-size: 40px;
padding-top: 20px;
padding-left: 30px;
padding-bottom: 20px;
padding-right: 20px;
display: inline-block;
}
</style>
<title>3.0</title>
</head>
<body>
<div class="home">
<div class="mentioncopy">
MENTIONBENJAMIN
</div>
</div>
<div class="portfolio">
<div class="sliding-middle-out">
<div class="portfoliocopy">
PORTFOLIO
</div>
</div
</div>
<div class="about">
<div class="aboutcopy">
ABOUT
</div>
</div>
<br><br><br><br><br>
<div class="header">
<div class="headercopy">
It’s like hosting your first dinner party with every design— to set the mood, nourish the guests and lay the table just so, requires dexterity, innovation and passion.
</div>
</div>
<br><br>
<div class="headerlink">
<div class="linkcopy">
Working between strategy and design, I find nothing more satisfying than cracking a clients puzzle of a problem in an inventive, effective way.
</div>
</div>
<br><br><br><br><br><br>
</body>
</html>
This is most likely a "clearfix" situation, there are various solutions to accomplish it.
What is a clearfix?
New CSS
.clearfix:after {
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
AFTER portfolio add an empty div
<div class="portfolio">
<div class="sliding-middle-out">
<div class="portfoliocopy">
PORTFOLIO
</div>
</div> <!---- this needs the greater than sign also! --->
</div>
<div class="clearfix"></div>
Related
I started making a landing page for a coin counting website, but for no reason, I have a bottom x scrollbar but when I try to remove it with overflow-x it messes everything up. I think the title is causing the scrollbar to appear but IDK why or what style is causing it. I started a couple of weeks ago so I don't know a lot.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
background-color: #24252a;
font-family: monospace, sans-serif;
font-weight: 500;
font-size: 1rem;
color: #edf0f1;
}
li,
a,
button {
font-family: monospace, sans-serif;
font-weight: 500;
font-size: 1rem;
color: #edf0f1;
text-decoration: none;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 10%;
}
.logo {
margin-right: auto;
}
.nav__links {
list-style: none;
}
.nav__links li {
display: inline-block;
padding: 0px 20px;
}
.nav__links li a {
transition: all 0.3s ease 0s;
}
.nav__links li a:hover {
color: #834bef;
}
button {
margin-left: 20px;
padding: 9px 25px;
background-color: #834bef;
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
button:hover {
background-color: #4400ff;
}
.title {
font-size: 240%;
position: relative;
left: 80px;
top: 120px;
color: white;
}
.text {
background: linear-gradient(to right, #00d9ff, #00eaff);
}
.gradient {
background: linear-gradient(130deg, #834bef, #03c8ff, #834bef, #834bef);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
font-size: 100%;
}
.cta {
background: #834bef;
position: relative;
top: 160px;
left: 65px;
font-size: 1.5rem;
}
.cta:hover {
background: #4400ff;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Coin Counter</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header class="header">
<img class="logo" src="64x64.png" alt="image not found /:" />
<nav>
<ul class="nav__links">
<li>about</li>
<li>donate</li>
<li>home</li>
</ul>
</nav>
<a class="contact" href="#"><button>contact</button></a>
</header>
<hr />
<text class="text">
<h1 class="title">
want to make
<div class="gradient">coin-counting</div>
easier? try Coin Counter!
</h1>
</text>
<button class="cta" type="button">Try Now!</button>
</body>
</html>
Please try the below code that i have pasted, I hope it will work as expected .
let me tell you that what was the issue -
using "position: relative" for "title" class was causing issue .
And it is always good to use font-size in pixel instead of using in percentage like you are doing .. to adjust the content always ensure to use spacing like margin and padding .
happy coding .
* {
box-sizing: border-box;
margin: 0;
padding: 0;
background-color: #24252a;
font-family: monospace, sans-serif;
font-weight: 500;
font-size: 1rem;
color: #edf0f1;
}
li,
a,
button {
font-family: monospace, sans-serif;
font-weight: 500;
font-size: 1rem;
color: #edf0f1;
text-decoration: none;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 10%;
}
.logo {
margin-right: auto;
}
.nav__links {
list-style: none;
}
.nav__links li {
display: inline-block;
padding: 0px 20px;
}
.nav__links li a {
transition: all 0.3s ease 0s;
}
.nav__links li a:hover {
color: #834bef;
}
button {
margin-left: 20px;
padding: 9px 25px;
background-color: #834bef;
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
button:hover {
background-color: #4400ff;
}
.title {
font-size: 30px;
margin-top: 60px;
margin-left: 60px;
left: 80px;
top: 120px;
color: white;
}
.text {
background: linear-gradient(to right, #00d9ff, #00eaff);
}
.gradient {
background: linear-gradient(130deg, #834bef, #03c8ff, #834bef, #834bef);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
font-size: 100%;
}
.cta {
background: #834bef;
position: relative;
top: 160px;
left: 65px;
font-size: 1.5rem;
}
.cta:hover {
background: #4400ff;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Coin Counter</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header class="header">
<img class="logo" src="64x64.png" alt="image not found /:" />
<nav>
<ul class="nav__links">
<li>about</li>
<li>donate</li>
<li>home</li>
</ul>
</nav>
<a class="contact" href="#"><button>contact</button></a>
</header>
<hr />
<text class="text">
<h1 class="title">
want to make
<div class="gradient">coin-counting</div>
easier? try Coin Counter!
</h1>
</text>
<button class="cta" type="button">Try Now!</button>
</body>
</html>
You were correct that the title class was causing a problem.
It had been given a left position. But it also had remained at the default display: block - the 'extra' scroll part was caused by the addition of theleft: 80px
This snippet gives it display: inline-block:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
background-color: #24252a;
font-family: monospace, sans-serif;
font-weight: 500;
font-size: 1rem;
color: #edf0f1;
}
li,
a,
button {
font-family: monospace, sans-serif;
font-weight: 500;
font-size: 1rem;
color: #edf0f1;
text-decoration: none;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 10%;
}
.logo {
margin-right: auto;
}
.nav__links {
list-style: none;
}
.nav__links li {
display: inline-block;
padding: 0px 20px;
}
.nav__links li a {
transition: all 0.3s ease 0s;
}
.nav__links li a:hover {
color: #834bef;
}
button {
margin-left: 20px;
padding: 9px 25px;
background-color: #834bef;
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
button:hover {
background-color: #4400ff;
}
.title {
font-size: 240%;
position: relative;
left: 80px;
top: 120px;
color: white;
display: inline-block;
}
.text {
background: linear-gradient(to right, #00d9ff, #00eaff);
}
.gradient {
background: linear-gradient(130deg, #834bef, #03c8ff, #834bef, #834bef);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
font-size: 100%;
}
.cta {
background: #834bef;
position: relative;
top: 160px;
left: 65px;
font-size: 1.5rem;
}
.cta:hover {
background: #4400ff;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Coin Counter</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header class="header">
<img class="logo" src="64x64.png" alt="image not found /:" />
<nav>
<ul class="nav__links">
<li>about</li>
<li>donate</li>
<li>home</li>
</ul>
</nav>
<a class="contact" href="#"><button>contact</button></a>
</header>
<hr />
<text class="text">
<h1 class="title">
want to make
<div class="gradient">coin-counting</div>
easier? try Coin Counter!
</h1>
</text>
<button class="cta" type="button">Try Now!</button>
</body>
</html>
you are setting left property for title tag which shift the content right side from that left amount so it needs to show a horizontal scroll bar to view the content shifted from the viewing area.
You can resolve it by changing the left property to margin-left like in below code
.title {
font-size: 240%;
position: relative;
margin-left: 80px;
top: 120px;
color: white;
}
other wise you can set the width of the title by reducing the shifted value from it like below
.title {
font-size: 240%;
position: relative;
left: 80px;
top: 120px;
color: white;
width: calc(100% - 80px);
}
I am having difficulties in centering the background or divs when zooming in. Everything is centered when I zoom out because I set the * at 1200px. But when I zoom in the POV zooms on the left side of the background.
Here's an example of my POV when it is zoomed:
[https://imgur.com/a/gF50dhh][1]
Here is my code:
*{
width: 1200px;
margin: 0 auto;
padding: 0;
}
html {
background-color: #0f1011;
text-align: center;
font-size: 100%;
background-repeat: no-repeat;
box-sizing: border-box;
position: relative;
min-height: 100%;
margin: 0 auto;
}
/*NAVIGATION BAR*/
.nav {
padding: 20px;
background-color: #a91817;
font-size: 21px;
margin:0 auto;
}
.navbarmargin {
margin: 0 auto;
}
.product {
font-family: 'Zen Dots';
font-size: 15px;
display: flex;
float: left;
}
/*NAVIGATION BAR ELEMENT*/
.homee {
text-decoration: none;
font-family: 'Alatsi';
color: #f7f8f9;
transition: 500ms ease-in-out;
margin-left:30px;
margin-right:30px;
}
.homee:hover {
color: #292f31;
padding-top: 20px;
padding-bottom: 20px;
}
.memberss {
text-decoration: none;
font-family: 'Alatsi';
color: #f7f8f9;
transition: 500ms ease-in-out;
margin-left:30px;
margin-right:30px;
}
.memberss:hover {
color: #292f31;
padding-top: 20px;
padding-bottom: 20px;
}
.socialss{
text-decoration: none;
font-family: 'Alatsi';
color: #f7f8f9;
transition: 500ms ease-in-out;
margin-left:30px;
margin-right:30px;
}
.socialss:hover {
color: #292f31;
padding-top: 20px;
padding-bottom: 20px;
}
.contactt {
text-decoration: none;
font-family: 'Alatsi';
color: #f7f8f9;
transition: 500ms ease-in-out;
margin-left:30px;
margin-right:30px;
}
.contactt:hover {
color: #292f31;
padding-top: 20px;
padding-bottom: 20px;
}
/*BANNER*/
.banner {
background-image: url("https://cdn.discordapp.com/attachments/868146365014876250/868702765906526239/dwwdwdw.jpg");
padding: 45px;
object-fit: contain;
display: block;
margin:0 auto;
}
.logo1 {
animation-name: floating;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
margin:auto;
display: block;
border-radius: 10px;
width: 150px;
}
#keyframes floating {
from { transform: translate(0, 0px); }
65% { transform: translate(0, 15px); }
to { transform: translate(0, -0px); }
}
.jawbreaker {
font-family: 'Zen Dots';
font-size: 25px;
color: red;
}
.jawbreaker1 {
font-family: 'Zen Dots';
font-size: 25px;
color: cyan;
}
.sugarrush {
padding: 25px;
background-color: #45b5b5;
display: block;
margin:0 auto;
}
.sugarrushh {
font-family: 'Lobster';
text-shadow: 2px 2px 4px #000000;
text-decoration: none;
font-size:25px;
color: whitesmoke;
transition: 1000ms ease-in-out;
}
.sugarrushh:hover {
font-size: 30px;
color: rgb(245, 88, 179)
}
body {
text-align: center;
}
.aboutt {
width: 1024px;
background-color: #414849;
text-align: center;
display: block;
border-radius: 5px;
margin-top: 10px;
margin:0 auto;
margin-right: 20px;
margin-left: 20px;
width: 960px;
}
#About {
background-color: #141414;
padding: 100px;
margin:0 auto;
}
<!DOCTYPE html>
<link href="style.css" rel="stylesheet" type="text/css">
<link href="body.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css2?family=Alatsi&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Zen+Dots&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
<html lang="en">
<head>
<title>Jawbreaker SMP</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div class="nav">
<nav>
Home
Members
Socials
Contact
</nav>
</div>
<div class="banner">
<picture>
<source srcset="https://cdn.discordapp.com/attachments/552032784890331155/867288559429615636/jawbreakerlogo.png" type="image/webp">
<source srcset>
<img class="logo1" alt="Logo" src=""> <br> <br> <br>
</picture>
<span class="jawbreaker">Jaw</span>
<span class="jawbreaker1">Breaker</span>
</div>
<div class="sugarrush">
<a href="https://media1.tenor.com/images/e71c8574914d2cabb2c6c4bd9ad3af28/tenor.gif" class="sugarrushh">
Let The Sugar Rush Begin!</a>
</div>
</head>
<body>
<section id="About">
<div class="aboutt">
<h3>h</h3>
</div>
</section>
</body>
</html>
This is because you have a fixed size width try replacing 1200px with 100% this will help but not solve the issue. For that, I recommend you use BOOTSTRAP very easy to implement just add the CDN line and it will be working fine.
And you can start here Bootstrap tutorials
This will help to make the page design be compatible with all devices.
So , i want to make the button wider , not auto size to the text , i want it like 300px , i just try to add width on every class , but nothing seems working , is it because the button box line from text border ? i think its because the button from text border , so its auto resize with the text , am i right about it ? if that was the problem, can i click on a col-md-6 div for example ?
body {
font-family: Arial, sans-serif;
background: url(http://www.shukatsu-note.com/wp-content/uploads/2014/12/computer-564136_1280.jpg) no-repeat;
background-size: cover;
height: 100vh;
}
h1 {
text-align: center;
font-family: Tahoma, Arial, sans-serif;
color: #06D85F;
margin: 80px 0;
}
.box {
width: 40%;
margin: 0 auto;
background: rgba(255,255,255,0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
.button {
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid #06D85F;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
background: #06D85F;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
#media screen and (max-width: 700px){
.box{
width: 70%;
}
.popup{
width: 70%;
}
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Pure css popup box</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<h1>Popup/Modal Windows without JavaScript</h1>
<a class="button" href="#popup1">Let me Pop up</a>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Here i am</h2>
<a class="close" href="#">×</a>
<div class="content">
Thank to pop me out of that button, but now i'm done so you can close this window.
</div>
</div>
</div>
<!-- partial -->
</body>
</html>
EDITED Can i add href on col-md-6 class ?
SOLVED add display:inline-block;
a-tag is an inline element so your height and width set are ignored. Add display: inline-block; and width: 300px; in the class button.
.button {
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid #06D85F;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
display: inline-block;
width: 300px;
}
you do not need to add col-md-6 unless you want to use such space. Just add width property in the button class or in the custom class as per your need.
.button {
width: 300px;
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid #06D85F;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
display:block;
}
I'm trying to make a webpage to put some academic/work related stuff on it, but can't seem to figure out how to just put some buttons around my text without the button's margin totally running into each other.
My issue is when I try to add a margin to my projects button, it pushes the contact info button down a line. Any suggestions?
Here's what I have:
Please run code snippet in a full window
html {
font-size: 10px;
font-family: 'Raleway', sans-serif;
width: 100%;
height: 100%;
background: linear-gradient(#FF9940, white);
}
h1 {
padding: 20px;
font-size: 60px;
text-shadow: 3px 3px 1px grey;
background-color: #1E2752;
text-align: center;
border: 5px solid black;
color: #FCFCFF;
margin-top: 10px;
}
li {
float: left;
padding-right: 30px;
}
li a {
display: block;
color: white;
text-decoration: none;
padding: 19px 16px;
border: 2px solid #ffffff;
right: -100px;
}
li a:hover {
color: #ffffff;
background: #FF9940;
transition: all 0.4s ease 0s;
}
ul {
transition: all 0.4s ease 0s;
list-style-type: none;
text-decoration: none;
font-size: 12px;
text-transform: uppercase;
color: #ffffff;
background: transparent;
display: inline-block;
position: absolute;
text-align: center;
padding: 0px;
top: 28px;
left: 23px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Isabelle Kreienbrink </title>
<link href="styles/style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet">
</head>
<body>
<h1> Isabelle Kreienbrink </h1>
<ul>
<li>Resume</li>
<li>Academics</li>
<li>Projects</li>
<li>Contact Info</li>
</ul>
</body>
</html>
You should never use px value for alignement, you can use float:right and float-left instead of them , but they are not working in your exemple , or to be more specific, only the float:rightis not working, because that the width it is not taking 100% of the screen width , here's the fix : https://stackblitz.com/edit/angular-jihnyk
HTML :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Isabelle Kreienbrink </title>
<link href="styles/style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet">
</head>
<body>
<h1> Isabelle Kreienbrink </h1>
<ul>
<li>Resume</li>
<li>Academics</li>
<li>Projects</li>
<li class="right-button"><a href="#contacts" >Contact Info</a></li>
</ul>
</body>
</html>
CSS :
html {
font-size: 10px;
font-family: 'Raleway', sans-serif;
width: 100%;
height: 100%;
background: linear-gradient(#FF9940, white);
}
h1 {
padding: 20px;
font-size: 60px;
text-shadow: 3px 3px 1px grey;
background-color: #1E2752;
text-align: center;
border: 5px solid black;
color: #FCFCFF;
margin-top: 10px;
}
li {
float: left;
padding-right: 30px;
}
li a {
display: block;
color: white;
text-decoration: none;
padding: 19px 16px;
border: 2px solid #ffffff;
right: -100px;
transition: all 0.4s ease 0s;
}
li a:hover {
color: #ffffff;
background: #FF9940;
transition: all 0.4s ease 0s;
}
ul {
transition: all 0.4s ease 0s;
list-style-type: none;
text-decoration: none;
font-size: 12px;
text-transform: uppercase;
color: #ffffff;
background: transparent;
display: inline-block;
position: absolute;
text-align: center;
padding: 0px;
top: 28px;
left: 23px;
right: 23px;
width: 100%
}
.right-button{
float: right;
padding-right: 47px
}
a small hint : you can add the same transition you added in hover to the normal class, to get the same transition when the mouse leaves the button
I started coding a week ago and I have few issues with my css and my html. I cannot get the search bar to be smaller and to adjust to the top next to my logo.I changed the font size of "search", but it seems that it does not appear anymore. I think that my search bar is maybe too low. Here are my sheets, please if someone can help.
I really do not know, maybe I have forgot few line of codes.
/*essentials css */
body {
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
font-weight: 400;
line-height: 1.43;
color: #484848;
}
p{
font-size: 16px
margin: 0;
padding: 0;
}
a:link {
font-size: : 16px;
text-decoration: none;
}
a:visited{
text-decoration: none;
}
h1, h2, h3, h4, h5, h6, ul, ol, li {
margin: 0;
padding: 0;
}
ul, ol{
list-style-type;
}
::selection {
color: #fff;
background-color: #333;
}
::-moz-selection {
color: #fff;
background-color: : #333;
}
/* top- nap */
.top-nav {
position:fixed;
width:100%;
height: auto;
border-bottom: 1px solid #ccc;
}
.logo:link {
color: #484848;
display: inline-block;
transition: : all 0.3s ease;
-webkit-transition: all 0.3s ease;
-moz-transition:all 0.3s ease;
-o-transition: all 0.3s ease;
border-right:1px solid #ccc;
}
.logo:visited{
color: #484848;
}
.logo:hover {
background-color: #f1f1f1;
}
.logo img {
position: relative;
padding: 12px 18px;
width: 100px;
border-right: : 1px solid #ccc;
vertical-align: : middle;
}
/* nav-search css */
#nav-search-wrapper {
display: inline-block;
width: 490px;
height: 100%;
}
#nav-search-wrapper form input {
padding: 22px 10px 18px 52px;
width: 100%;
border: none;
outline: none;
background-color: :red;
}
#nav-search-wrapper form input::-webkit-input-placeholder {
color: orange;
font-size:17px;
}
#nav-search-wrapper form input::-moz-placeholder {
color: orange;
}
#nav-search-wrapper form input:-ms-input-placeholder {
}
#nav-search-wrapper form input:-moz-placeholder {
color: orange;
}
<!DOCTYPE html>
<html>
<head>
<title>ElephantRoom</title>
<meta charset="utf-8" />
<meta name"viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:400,500" />
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<!-- Top-NAV HTML-->
<div class="top-nav">
<a href="index.html" class="logo">
<img src="logo.png" alt="ElephantRoom" />
</a>
<div id="nav-search-wrapper">
<form method="GET" action="index.html">
<input type="text"name="search" id="nav-search" placeholder="Search"/>
</form>
</div>
</div>
</body>
</html>
If I understand correctly, you're trying to move your search bar / text closer to the left of your logo?
You should adjust the padding within the search bar, currently it's being pushed 52px from the left:
#nav-search-wrapper form input {
padding: 22px 10px 18px 52px; // change padding
width: 100%;
border: none;
outline: none;
background-color: red;
}
to something like:
#nav-search-wrapper form input {
padding: 18px 10px;
width: 100%;
border: none;
outline: none;
background-color: red;
}