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
Related
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>
I just went to a lot of trouble to create a nice looking email using html.
It works for both gmail and yahoo. I just though i'd test on hotmail and outlook.com and it just displays the whole email as the HTML code?!
The html is well formed and appears like this:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<style>
body {
background-color:white;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
#outterBox {
position:relative;
width:500px;
height:320px;
background-color:#F0f0f0;
padding:10px;
}
#innerBox {
background-color:white;
width:90%;
height:55%;
margin-top:6px;
margin: 0 auto;
margin-top:24px;
position:relative;
}
#headingBox {
width:100%;
height:18%;
background-color:#f0f0f0;
overflow: hidden;
}
#notiBar {
background-color:#a1a1a1;
width:100%;
height:42px;
line-height:42px;
}
#notiBar > span {
font-size:18px;
color:white;
margin-left:16px;
}
#notiContent {
width:100%;
height:100%;
position:relative;
}
#notiContent > span {
font-size:18px;
color:#878787;
margin-top:16px;
margin-bottom:16px;
margin-left:14px;
}
#msgContent {
height:30px;
line-height:30px;
padding:10px;
}
#msgContent > span {
font-size:18px;
color:#878787;
margin-top:16px;
margin-bottom:16px;
margin-left:4px;
}
#linkContent {
margin-top:2%;
height:50px;
width:100%;
position:relative;
text-align:center;
}
#siteButton {
display:inline-block;
background-color:#5683CC;
border:none;
color:white;
font-size:16px;
padding-left:10px;
padding-right:10px;
text-decoration:none;
height:36px;
width:40%;
line-height:36px;
text-align:center;
}
#footer {
height:27%;
width:90%;
padding-top:10%;
}
#footer > span {
color:#878787;
font-size:10px;
}
#unsubscribe {
text-decoration:none;
color:#81a0d3;
font-size:10px;
}
</style>
</head>
<body>
<div id="outterBox">
<div id="headingBox">
<img src="image location" alt="xx" title="xx" style="display:block"/>
</div>
<div id="innerBox">
<div id="notiContent">
<div id="msgContent">
<span><span id="userName"></span>, new message</span>
</div>
<div id="linkContent">
<a id="siteButton" href="website">Check msgs now</a>
</div>
</div>
</div>
<div id="footer">
<span> To unsubscribe from<a id="unsubscribe" href="/"> here</a></span>
</div>
</div>
</body>
</html>
Is there a trick to getting this working without having to dramatically change my code for microsoft?
Email is not forgiving at all. Every browser, every client could display something different. With microsoft being the absolute worst at rendering expectations. Your best bet is to inline style as much as you can, using tools like: http://foundation.zurb.com/emails/inliner.html
This is a good resource as well, for what elements/attributes to stay away from: https://www.campaignmonitor.com/css/
Also, check out email on Acid. I'm not sure if they are fremium, but you can see how the email looks in every browser/client/device etc...
good luck.
Try to use on top of it:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
johhny B, this is salvageable, but as you have figured out by now, Outlook does not work with HTML 5, CSS 3, divs or darn near anything fun.
The biggest thing you need to do is inline css values. Outlook ignores style sheets. It's going to ignore any css like, #msgContent > span.
This is your email with very few values inlined to clean up the look of Outlook slightly.
Good luck.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<style>
body {
background-color:white;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
#outterBox {
position:relative;
width:500px;
height:320px;
background-color:#F0f0f0;
padding:10px;
}
#innerBox {
background-color:white;
width:90%;
height:55%;
margin-top:6px;
margin: 0 auto;
margin-top:24px;
position:relative;
border: 1px;
}
#headingBox {
width:100%;
height:18%;
background-color:#f0f0f0;
overflow: hidden;
}
#notiBar {
background-color:#a1a1a1;
width:100%;
height:42px;
line-height:42px;
}
#notiBar > span {
font-size:18px;
color:white;
margin-left:16px;
}
#notiContent {
width:100%;
height:100%;
position:relative;
}
#notiContent > span {
font-size:18px;
color:#878787;
margin-top:16px;
margin-bottom:16px;
margin-left:14px;
}
#msgContent {
height:30px;
line-height:30px;
padding:10px;
}
#msgContent > span {
font-size:18px;
color:#878787;
margin-top:16px;
margin-bottom:16px;
margin-left:4px;
}
#linkContent {
margin-top:2%;
height:50px;
width:100%;
position:relative;
text-align:center;
}
#siteButton {
display:inline-block;
background-color:#5683CC;
border:none;
color:white;
font-size:16px;
padding-left:10px;
padding-right:10px;
text-decoration:none;
height:36px;
width:40%;
line-height:36px;
text-align:center;
}
#footer {
height:27%;
width:90%;
padding-top:10%;
}
#footer > span {
color:#878787;
font-size:10px;
}
#unsubscribe {
text-decoration:none;
color:#81a0d3;
font-size:10px;
}
</style>
</head>
<body>
<div id="outterBox" style="width: 500px; border: 1px solid;">
<div id="headingBox" style="width: 500px; height:55px; background:#f0f0f0;">
<img src="image location" alt="xx" title="xx" style="display:block"/>
</div>
<div id="innerBox" style="width: 450px;">
<div id="notiContent" style="width: 450px; border: 1px solid;">
<div id="msgContent">
<span><span id="userName"></span>, new message</span>
</div>
<div id="linkContent">
<a id="siteButton" href="website">Check msgs now</a>
</div>
</div>
</div>
<div id="footer">
<span> To unsubscribe from<a id="unsubscribe" href="/"> here</a></span>
</div>
</div>
</body>
</html>
I am trying to make a mini grid post layout using css. But i have a problem with divs. I have try it in this demo page. And I do not get the shape I want. I want to make it like the screenshot
I try it like this CSS codes:
.div {
position:relative;
float:left;
width:100%;
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
background-color:#1d1f20;
}
.div:nth-child(1){
width:180px;
padding-top:180px;
margin-right:5px;
margin-bottom:5px;
}
.div:nth-child(2){
width:180px;
padding-top:180px;
margin-right:5px;
margin-bottom:5px;
}
.div:nth-child(3){
width:400px;
padding-top:400px;
margin-right:5px;
margin-bottom:5px;
}
.div:nth-child(4){
width:180px;
padding-top:180px;
margin-right:5px;
margin-bottom:5px;
}
.div:nth-child(5){
width:365px;
padding-top:180px;
margin-right:5px;
margin-bottom:5px;
}
.div:nth-child(6){
width:180px;
padding-top:180px;
margin-right:5px;
margin-bottom:5px;
}
HTML
<div class="container">
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
</div>
How can i get the screenshot within css ? Anyone can help me here ?
You can use a lot of solutions:
Solution one:
Use the new column-count. DEMO.
Check the browser compatibility.
Solution two:
Use display:inline-block;. DEMO.
Check the browser compatibility.
Solution three:
Using flexbox. DEMO.
Check the browser compatibility.
Solution four:
Use JQuery, I suggest you the Masonry plugin (usually used for galleries) . DEMO.
I am not sure if this is what you are looking for, i had to restructure your html to achive that here is the link:http://codepen.io/saa93/pen/ENjNgy
<style>
body,html {
padding:0px;
margin:0px;
width:100%;
height:100%;
}
.container {
position:relative;
width:100%;
max-width:1010px;
min-height:400px;
margin:0px auto;
}
.div {
position:relative;
float:left;
width:100%;
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
background-color:#1d1f20;
}
.div:nth-child(1) {
background: transparent none repeat scroll 0 0;
float: left;
width: 370px;
}
.div:nth-child(3){
width:180px;
float:left;
}
.div:nth-child(1) > .div:nth-child(1){
background-color:#1d1f20;
width:180px;
padding-top:180px;
margin-right:5px;
margin-bottom:5px;
}
.div:nth-child(1) > .div:nth-child(2){
width:180px;
padding-top:180px;
margin-right:5px;
margin-bottom:5px;
}
.div:nth-child(1) > .div:nth-child(3) {
margin-bottom: 5px;
margin-right: 5px;
padding-top: 185px;
width: 365px;
}
.div:nth-child(2) {
margin-bottom: 5px;
margin-right: 5px;
padding-top: 370px;
width: 400px;
}
.div:nth-child(3) > .div:nth-child(1){
width:180px;
padding-top:180px;
margin-right:5px;
margin-bottom:5px;
}
.div:nth-child(3) {
float: left;
width: 180px;
}
.div:nth-child(3) > .div:nth-child(2){
width:180px;
padding-top:180px;
margin-right:5px;
margin-bottom:5px;
}
</style>
<div class="container">
<div class="div">
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
</div>
<div class="div"></div>
<div class="div">
<div class="div"></div>
<div class="div"></div>
</div>
</div>
I hope this helps :)
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;
}
I want to put 3 div like columns. The one on the left and the one the right have a content and variable length. The one in the middle is a divider.
My CSS is:
html
{
background:url(../img/texture.png) 50% 0 repeat #fff;
}
body
{
font:13px/20px "Trebuchet MS", Helvetica, sans-serif;
position:relative;
min-width:960px;
}
html, body
{
height:100%;
}
.main
{
background-color:#f8f8f8;
padding:2px;
border:1.5px solid #000000;
border-radius:1em;
-webkit-border-radius:1em;
-moz-border-radius:1em;
-o-border-radius:1em;
margin:auto;
width:950px;
box-shadow:0 0 20px #585858;
word-wrap:break-word;
}
section#content
{
padding:10px 0px;
overflow:hidden;
}
section#content #text
{
margin:10px 20px 0px;
text-align:center;
}
#text #login
{
width:40%;
margin-left:5%;
margin-right:5%;
float:left;
text-align:left;
}
#text #registration
{
width:40%;
margin-left:5%;
margin-right:5%;
float:right;
text-align:left;
}
#text #divider_ver
{
float:left;
height:100%;
width:1px;
background:#000000;
}
And my JSP:
<body>
<div class="main">
<section id="content">
<div id="testo">
<div id="text">
<div id="login">
...
</div>
<div id="divider_ver"></div>
<div id="registration">
...
</div>
</div>
</div>
<div class="clear"></div>
</section>
</div>
</body>
The problem is that the divider won't show up. If I set its height like: min-height:100px; it will, but will have fixed height (100px). I want it to have the height of the taller between the other 2 div, but I can't do it.
http://jsfiddle.net/2mjet/1/
Here:
CSS changes
section#content #text
{
margin:10px 20px 0px;
text-align:center;
overflow: hidden;
}
#text #divider_ver
{
float:left;
padding-bottom: 10000px;
margin-bottom: -10000px;
width:1px;
background:#000000;
}
Simple +padding -margin with overflow:hidden container, but it's nice trick to remember.