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;
}
Related
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
This is my css code for my icons, the css code also changed my background and other stuff in my webpage how come. A lot of this CSS code is effecting my HTML code sort of making it not established i added colors but they won't run over the CSS code.
html {
font-size: 20px;
}
body {
background-color: #dde7f2;
padding: 50px;
text-align: center;
}
/* Wrapper */
.icon-button {
background-color: white;
border-radius: 3.6rem;
cursor: pointer;
display: inline-block;
font-size: 2.0rem;
height: 3.6rem;
line-height: 3.6rem;
margin: 0 5px;
position: relative;
text-align: center;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
width: 3.6rem;
}
/* Circle */
.icon-button span {
border-radius: 0;
display: block;
height: 0;
left: 50%;
margin: 0;
position: absolute;
top: 50%;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
width: 0;
}
.icon-button:hover span {
width: 3.6rem;
height: 3.6rem;
border-radius: 3.6rem;
margin: -1.8rem;
}
.twitter span {
background-color: #4099ff;
}
.facebook span {
background-color: #3B5998;
}
.google-plus span {
background-color: #db5a3c;
}
/* Icons */
.icon-button i {
background: none;
color: White;
height: 3.6rem;
left: 0;
line-height: 3.6rem;
position: absolute;
top: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
width: 3.6rem;
z-index: 10;
}
.icon-button .icon-twitter {
color: #4099ff;
}
.icon-button .icon-facebook {
color: #3B5998;
}
.icon-button .icon-google-plus {
color: #db5a3c;
}
.icon-button:hover .icon-twitter,
.icon-button:hover .icon-facebook,
.icon-button:hover .icon-google-plus {
color: White;
}
This is my html code, creating links, is there something i should add or delete. The
<!DOCTYPE html>
<head>
<title>Andis Place</title>
<link rel="stylesheet" type="text/css"href="stylesheet.css"/>
</head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<body style="font-family:Courier New;" bgcolor="White"
<head>
<h1 style="color:Orange;"> <center>Welcome to Andis Place</center></h1>
</head>
</body>
<body>
<p style="font-size:15px;">Enjoy… </p>
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #dde7f2;
}
li a {
display: block;
color: #dde7f2;
padding: 8px 16px;
text-decoration: none;
}
/* Change the link color on hover */
li a:hover {
background-color:#dde7f2;
color:Blue;
}
</style>
</head>
<body>
<ul>
<li class="external-link">
Soundcloud
</li>
<li class="external-link">
Shop
</li>
<li class="external-link">
Photos
</li>
<li class="external-link">
About Me
</li>
</ul>
</body>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: White;
}
li {
float: center;
}
li a {
display: block;
color: Blue;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color:Powderblue;
}
.active {
background-color: #dde7f2;
}
</style>
</head>
<body>
**<i class="icon-twitter"></i><span></span>
<i class="icon-facebook"></i><span></span>
<i class="icon-google-plus"></i><span></span>**
</body>
</html>
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>
I've got a layout bug with the snippet below in IE11, Chrome, Firefox - the second button is not correctly inline with the first button.
The problem goes away as soon as I add any non-whitespace content to the inner span on the second button.
Is there a CSS fix that will bring the buttons inline without requiring actual content, ideally without changing the rest of the CSS?
<!DOCTYPE html>
<html>
<head>
<title>CSS Problem</title>
<meta charset="utf-8"/>
<style>
.mainBorder { padding: 20px; background-color: #254669 }
button {
font-family: Verdana;
font-size: 13px;
color: white;
position: relative;
padding: 0 8px 1px 8px;
height: 24px;
background-color: #254669;
border: 1px solid #53779D;
transition: all 150ms ease-out;
outline: none;
}
button:disabled {
opacity: 0.65;
}
button:enabled {
cursor: pointer;
}
button:hover:enabled {
background-color: #53779D;
}
button:active:enabled > span.content {
display: inline-block;
transform: translateY(-1px);
}
button:focus {
border-color: white;
}
button.iconButton {
width: 24px;
padding: 0;
}
span.icon {
display: block;
height: 16px;
}
</style>
</head>
<body>
<h1>Button</h1>
<div class="mainBorder">
<button><span class="content">Default</span></button>
<button class="iconButton"><span class="icon"></span></button>
</div>
</body>
</html>
Just add vertical-align:middle to button clas like this: Demo
button {
font-family: Verdana;
font-size: 13px;
color: white;
position: relative;
padding: 0 8px 1px 8px;
height: 24px;
background-color: #254669;
border: 1px solid #53779D;
transition: all 150ms ease-out;
outline: none;
vertical-align:middle; /* added this */
}
You need to add
display: table-row;
vertical-align: middle;
in your button and
box-sizing: border-box;
display: table;
in .mainBorder class
<!DOCTYPE html>
<html>
<head>
<title>CSS Problem</title>
<meta charset="utf-8"/>
<style>
.mainBorder {
background-color: #254669;
box-sizing: border-box;
display: table;
padding: 20px;
width: 100%;
}
button {
background-color: #254669;
border: 1px solid #53779d;
color: white;
display: table-row;
font-family: Verdana;
font-size: 13px;
height: 24px;
outline: medium none;
padding: 0 8px 1px;
position: relative;
transition: all 150ms ease-out 0s;
vertical-align: middle;
}
button:disabled {
opacity: 0.65;
}
button:enabled {
cursor: pointer;
}
button:hover:enabled {
background-color: #53779D;
}
button:active:enabled > span.content {
display: inline-block;
transform: translateY(-1px);
}
button:focus {
border-color: white;
}
button.iconButton {
width: 24px;
padding: 0;
}
span.icon {
display: block;
height: 16px;
}
</style>
</head>
<body>
<h1>Button</h1>
<div class="mainBorder">
<button><span class="content">Default</span></button>
<button class="iconButton"><span class="icon"></span></button>
</div>
</body>
</html>
I would suggest to not have all the spaces if you intend to have space between elements because that is hard to manage at times but if you want to keep it the same markup this css for the .iconButton:
button.iconButton{
width: 24px;
top: 7px;
padding: 0;
}
but if you want to rid yourself of the spaces then you can, optionally, the spaces would definitely affect the layout
button.iconButton{
width: 24px;
top: 3px;
padding: 0;
margin: 0 15px;
}