I created this navbar and aligned it using the grid system. But the contents of the navigation grid overflow out side the navbar for some reason and below and towards the right of where they should be. I removed any margin and padding I could find but to no awail. The position of the navbar is fixed and the inside contents are not but that should not have been an issue considering that they are items within the same grid. Below is the code:
:root{
--main-color:#ffc40c;
--secondary-color:lightyellow;
--main-red:#d9001d;
--secondary-red:#ff033e;
--dark-color:#444;
--light-color:#fafafa
}
body{
font-family:"Source Code Pro",monospace;
background-color:var(--light-color);
color:var(--dark-color);
margin-top:50px;
margin-left:0;
margin-right:0;
margin-bottom:0;
text-shadow:1px 1px 5px var(--light-color)
}
form{
width:100vw;
padding:1em
}
a{
text-decoration:none
}
input{
border:1px solid var(--main-color);
margin:.75em;
border-radius:.75em;
padding:.75em 1em
}
.navbar{
background-color:var(--main-color);
position:fixed;
display:grid;
align-items:center;
grid-template-areas:"searchbar close-button";
top:0;
left:0;
height:30px;
width:100%
}
.searchbar{
background-color:var(--secondary-color);
opacity:50%;
width:calc(100vw - 80px);
border-radius:1em;
padding:1em
}
.close-button{
display:grid;
place-items:center;
height:30px;
width:30px;
background-color:var(--light-color);
color:var(--main-red);
border:2px solid var(--main-red);
border-radius:50%;
font-weight:700
}
.close-button:hover{
background-color:var(--main-red);
color:var(--light-color);
border:2px solid var(--light-color);
transition-duration:.4s
}
.close-button:active{
rotate:360deg;
transition-duration:.5s
}
<form class="navbar">
<input
class="searchbar"
type="search"
id="name"
name="searchbar"
placeholder="Search here..."
/>
<a href="#!" class="close-button">
X
</a>
</form>
How do I bring it to the top?
Add a margin: auto; to the navbar class, and remove the padding from the searchbar class
:root{
--main-color:#ffc40c;
--secondary-color:lightyellow;
--main-red:#d9001d;
--secondary-red:#ff033e;
--dark-color:#444;
--light-color:#fafafa
}
body{
font-family:"Source Code Pro",monospace;
background-color:var(--light-color);
color:var(--dark-color);
margin-top:50px;
margin-left:0;
margin-right:0;
margin-bottom:0;
text-shadow:1px 1px 5px var(--light-color)
}
form{
width:100vw;
padding:1em;
}
a{
text-decoration:none
}
input{
border:1px solid var(--main-color);
margin:.75em;
padding:.75em 1em;
border-radius:.75em;
align-items: center;
}
.navbar{
background-color:var(--main-color);
position:fixed;
display:grid;
align-items:center;
grid-gap: auto;
grid-template-areas:"searchbar close-button";
top:0;
left:0;
height:30px;
width:100%
}
.searchbar{
background-color:var(--secondary-color);
opacity:50%;
width:calc(100vw - 80px);
border-radius:1em;
margin: 0;
}
.close-button{
display:grid;
align-items:center;
justify-content: center;
height:30px;
width:30px;
background-color:var(--light-color);
color:var(--main-red);
border:2px solid var(--main-red);
border-radius:50%;
font-weight:700;
}
.close-button:hover{
background-color:var(--main-red);
color:var(--light-color);
border:2px solid var(--light-color);
transition-duration:.4s
}
.close-button:active{
rotate:360deg;
transition-duration:.5s
}
<form class="navbar">
<input
class="searchbar"
type="search"
id="name"
name="searchbar"
placeholder="Search here..."
/>
<a href="#!" class="close-button">
X
</a>
</form>
Related
I have a navigation bar at the top of my website.
HTML:
<text align="center">
<div class="home-nav">
<button class="nav-btn">What's New</button>
<button class="nav-btn">Community</button>
<button class="play-btn">Coming Soon</button>
<button class="nav-btn">Profile</button>
<button class="nav-btn">Information</button>
</text>
CSS:
.home-nav {
width:1240px;
height:49px;
background-color:#F1B84E;
border:5px solid #FFDE84;
border-style:outset;
}
.nav-btn {
width:auto;
height:49px;
background-color:#F1B84E;
border:none;
font-family:showcard gothic;
color:white;
-webkit-text-stroke:1.25px #000000;
-webkit-text-fill-color:#FFFFFF;
font-size:20px;
}
.play-btn {
width:auto;
height:69px;
background-color:#79E119;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border:5px solid #FFFFFF;
font-size:20px;
font-family:showcard gothic;
color:white;
}
I want the play button to be bigger than the normal buttons. But when I make the height higher than the normal buttons and look at it, it makes the normal buttons change position. How can I fix this?
Ok I have bring some small changes to your CSS styling just try these and let me know its working as you wanted or not.
body{
margin:0; padding:0;
}
.home-nav {
width:90%;
margin: 0 auto;
display: block;
background-color:#F1B84E;
border:5px solid #FFDE84;
border-style:outset;
}
.nav-btn {
width:auto;
height:49px;
background-color:#F1B84E;
border:none;
font-family:showcard gothic;
color:white;
-webkit-text-stroke:1.25px #000000;
-webkit-text-fill-color:#FFFFFF;
font-size:20px;
}
.play-btn {
width:auto;
height:70px;
background-color:#79E119;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border:5px solid #FFFFFF;
font-size:20px;
font-family:showcard gothic;
color:white;
}
If you go to Google Play Store Website,you will notice that the width of the SearchBar at the top changes if you change the window width.
Can someone please give me an example on how I can achieve such variable width behaviour using just HTML and CSS?
CSS
body {
margin:0;
min-width:960px;
}
#upperbar {
background-color:#F1F1F1;
white-space:nowrap;
height:60px;
width:100%;
}
#logobardiv {
margin:10px 20px 10px 30px;
display:inline-block;
}
#logo {
height:39px;
width:183px;
}
#searchbardiv {
font-size:0;
display:inline-block;
height:100%;
padding-left:10px;
vertical-align:middle;
white-space:nowrap;
min-width:200px;
}
#searchbar {
height:28px;
/*max-width:589px;*/
max-width:100%;
width:589px;
min-width:545px;
font-size:16px;
border:1px solid #A8A8A8;
border-right:none;
display:inline-block;
vertical-align:middle;
}
#searchbar:hover {
border:1px solid black;
border-right:none;
}
::-webkit-input-placeholder {
color:#A9A9A9;
padding:0 0 0 7px;
}
#searchbutton {
vertical-align:middle;
background:#4584F0;
height:28px;
width:60px;
display:inline-block;
border:1px solid transparent;
border-top-right-radius:2px;
border-bottom-right-radius:2px;
padding:0;
margin:0;
outline:none;
white-space:nowrap;
}
#searchbuttonimg {
vertical-align:middle;
background:url(images/search.png) no-repeat center;
display:inline-block;
height:100%;
width:26px;
}
#signindiv {
display:inline-block;
height:100%;
white-space:nowrap;
vertical-align:middle;
}
#appsimg {
display:inline-block;
vertical-align:middle;
}
HTML
<body>
<div class="container">
<div id="upperbar">
<div id="logobardiv">
<img id="logo" src="https://www.gstatic.com/android/market_images/web/play_logo_x2.png" />
</div>
<div id="searchbardiv">
<input id="searchbar" type="text" placeholder="Search" />
<button id="searchbutton"> <span id="searchbuttonimg"></span>
</button>
</div>
<div id="signindiv">
<img id="appsimg" src="images/apps.png" />
</div>
</div>
</div>
JSFiddle
simple way is you need to set a 3 different width max-width, min-widtht and actual width
like
input{
max-width:100%;
min-width:300px;
width:800px;
}
I used display:flex to achieve the variable length of the elements.
Refer the below link for a good explanation
FlexBox
I am trying to align a form text input and button horizontally on the same line while giving the button a minimum width for a responsive layout. For some reason the minimum width forces the button on to a new line
.search-container{
width:100%;
border: 1px solid #000;
display:block;
}
.search-text-container {
width:90%;
display:inline-block;
}
.search-text-container input {
width:100%;
height:30px;
}
.round-icon-container {
width:10%;
display:inline-block;
}
.round-icon-button {
min-width:30px;
display:block;
width:30px;
height:30px;
line-height:normal;
border: 2px solid #f5f5f5;
border-radius: 50%;
color:#f5f5f5;
text-align:center;
text-decoration:none;
background: #464646;
box-shadow: 0 0 3px gray;
font-weight:bold;
}
.round-icon-button:hover {
background: #262626;
}
<div class="search-container">
<span class="search-text-container">
<form action="">
<input type="text" name="fname" />
</form>
</span>
<span class="round-icon-container">
<button type="submit" class="round-icon-button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
I have a fiddle here of what I am working on http://jsfiddle.net/dnssmw83/19/ any help would be much appreciated
You could achieve it by using CSS #media queries like this:
JSFiddle - DEMO
* {
box-sizing:border-box;
}
#media(max-width:320px) {
.search-text-container {
width:70% !important;
}
.round-icon-container {
width:30% !important;
}
}
.search-container {
width:100%;
border: 1px solid #000;
display:block;
font-size: 0; /* to remove the space between inline-block elements */
}
.search-container > span {
font-size: 16px; /* add the font-size to child span elements */
vertical-align: middle;
}
I want to position an input element inside a div , but for some reason the input element is overflowing the div. What is the issue?
http://jsfiddle.net/aklintsevich/p1o584wg/
html:
<section class="full" id="third">
<div id="contact">
<form action="#" method="post" id="form">
<div class="email_info top white_border icomoon">
<div id="name_font" class="icon center_text">
</div>
<div>
<input type="text" name="firstname">
</div>
</div>
<div class="email_info bottom white_border icomoon">
<div id="email_font" class="icon center_text">
</div>
<div >
<input type="text" name="firstname">
</div>
</div>
</form>
</div>
</section>
css:
#third{
background-color:#22AFA0;
}
#contact{
background-color:blue;
margin:0px auto 30px auto;
position:relative;
top:30%;
width:65%;
height:30%;
background-color:red;
}
.email_info{
height:40%;
width:45%;
position:absolute;
background-color:green;
}
.message{
position:absolute;
right:0px;
height:100%;
width:45%;
background-color:green;
}
#message_icon{
height:40%;
width:20%;
background-color:blue;
border-right:1px solid white;
border-bottom:1px solid white;
}
#message_icon:before{
color:white;
display:block;
width:100%;
height:100%;
text-align:center;
line-height:80px;
font-size:2.5em;
content:"\e610";
}
.text_position{
float:right;
position:absolute;
}
.top{
top:0px;
}
.bottom{
bottom:0px;
}
#form_button{
position:relative;
width:65%;
height:20%;
/*background-color:orange;*/
}
.icon{
width:20%;
height:100%;
background-color:blue;
border-right:1px solid white;
}
.icomoon{
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
-webkit-font-smoothing: antialiased;
}
.white_border{
border:2px solid white;
}
.center_text{
text-align:center;
}
#name_font:before{
font-size:2.5em;
display:block;
width:100%;
height:100%;
line-height:80px;
color:white;
content:"\e611";
}
#email_font:before{
font-size:2.5em;
display:block;
width:100%;
height:100%;
line-height:80px;
color:white;
content:"\e60f";
}
set the attribute 'overflow' to 'auto' in relevant div s. as an example,
.email_info{
overflow : auto;
}
Divs have a default display of block,therefore, to have two divs to be able to line up on the same line you have to declare them as inline-block.
.email_info{
display:inline-block;
}
Im doing a login box with a form, that asks for email and password.
I have all my elements in vertical, and Im trying to align all elements to stay with 10px margin top and bottom, to get every element with the same space.
But Im not having sucess to this goal, can you give some help understanding what I have wrong?
I give some backgrounds to my elements to be more easy to see how are the margins, and some backgrounds do not appear as they should, it seems there should also be some problem with floats.
This is my jsfiddle with what Im getting:
http://jsfiddle.net/Hp8zV/1/
My html:
<body>
<div class="loginbox">
<h1>Login Form:</h1>
<span class="ms in">Enter your acess data.</span>
<form name="login">
<label class="label">
<input placeholder="Email" type="text" />
</label>
<label class="label">
<input type="password" placeholder="Pass" class="pass" />
<input type="submit" value="Login" class="btn" />
Forgot
</label>
</form>
</div>
</body>
My Css:
*{margin:0; padding:0;}
body{overflow:hidden;}
.loginbox{position:absolute; left:50%; top:50%;background:#f7f7f7; width:360px; height:340px;}
.loginbox{margin-left:-180px; margin-top:-162px; background:pink;}
.loginbox h1{padding:20px; font-weight:200; color:#fff; background:brown; font-size:30px;}
.loginbox form{padding:20px; background:yellow;}
.loginbox form .label{display:block; margin-bottom:10px; margin-top:10px; float:left; width:320px;background:green;}
.loginbox form .label input{padding:10px; font-size:16px; border:1px solid #CCC; width:299px; float:left;}
.loginbox form .label .pass{width:299px; float:left;}
.loginbox form .label .btn{float:right; width:auto; display:block; background:brown; border:none; text-transform:uppercase; margin:20px auto;}
.loginbox form .label .btn{padding:11px 10px 11px; color:#fff; font-weight:bold; cursor:pointer; width:320px;}
.loginbox form .link {text-align:center; text-decoration:none; color:#000; background:blue;}
.ms{padding:20px 10px 5px 20px;float:left;display:block; width:320px; background:red;
}
Here is your new code:
<body>
<div class="loginbox">
<h1>Login Form:</h1>
<span class="ms">Enter your acess data.</span>
<form name="login">
<input placeholder="Email" type="text"/>
<input type="password" placeholder="Pass"/>
<input type="submit" value="Login" class="btn"/>
Forgot
</form>
</div>
</body>
*{
margin:0;
padding:0;
border: 0;
}
.loginbox *{
box-sizing:border-box;
}
.loginbox{
position:absolute;
left:50%;
top:50%;
background:#f7f7f7;
width:360px;
height:290px;
margin-left:-180px;
margin-top:-162px;
background:pink;
}
.loginbox h1{
padding:20px;
font-weight:200;
color:#fff;
background:brown;
font-size:30px;
}
.loginbox form{
padding:20px;
background:yellow;
}
.loginbox form input{
margin-top: 10px;
padding:10px;
font-size:16px;
width:100%;
float:left;
}
.loginbox form .btn{
background:brown;
text-transform:uppercase;
margin:10px auto;
padding:10px;
color:#fff;
font-weight:bold;
cursor:pointer;
width:100%;}
.ms{
padding:10px 10px 10px 20px;
float:left;
width:100%;
background:red;
}
.loginbox form a {
text-align:center;
text-decoration:none;
color:#000;
background:blue;
}
Here is the fiddle
Hope i helped you