Why btnow has some top margin?
Its css is top:0.
.btnowwrap{
position:relative;
height:20px;
background:gold;
}
.btnow{
position:absolute;
right:9px;
top:0;
cursor:pointer;
font-size:19px;
color:#777;
}
<div class='btnowwrap'>
<div class='btnow' id='btnow' title='SADA'>♻</div>
</div>
Apply line-height:100%;
.btnowwrap{
position:relative;
height:20px;
background:gold;
}
.btnow{
position:absolute;
right:9px;
top:0;
cursor:pointer;
font-size:19px;
color:#777;
line-height: 100%;
}
<div class='btnowwrap'>
<div class='btnow' id='btnow' title='SADA'>♻</div>
</div>
The icon is in top:0 this space is because the height of icon(see image):
Use line-height: 1em;
.btnowwrap{
position:relative;
height:20px;
background:gold;
}
.btnow{
position:absolute;
right:9px;
top:0;
cursor:pointer;
font-size:19px;
color:#777;
line-height: 1em;
}
<div class='btnowwrap'>
<div class='btnow' id='btnow' title='SADA'>♻</div>
</div>
If you dont want to reduce font size then use
.btnow { line-height: 100% }
it will fit. You can reduce font size too but line-height is the best solution.
Related
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've never had this problem before, but for some reason my container here won't auto wrap the text when I use overflow.
The entire document is here: http://codepen.io/Peechiee/pen/RNMRLy?editors=110
But here's just the part I'm referring to:
.top-friend-statuses
{
float:right;
background-color:#eeeeee;
width:33%;
height:auto;
margin-top:1%;
padding:1%;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.top-friend-status-image
{
height:100px;
width:100px;
float:left;
margin-left:2%;
}
.top-friend-status-post
{
height:110px;
width:100%;
background-color:DARKGREY;
margin-top:1%;
margin-bottom:1%;
padding-top:1.6%;
padding-bottom:1%;
}
.top-friend-status-input
{
float:left;
height:100px;
width:53%;
overflow-x:hidden;
overflow-y:auto;
background-color:LIGHTGREEN;
font-size:9pt;
}
.top-friend-status-add-message
{
display:inline-block;
background-color:RED;
height:30px;
width:30px;
font-size:8pt;
overflow:hidden;
margin-top:0%;
margin-left:3%;
float:right;
}
.top-friend-status-mood
{
background-color:VIOLET;
height:auto ;
width:30%;
float:left;
font-size:9pt;
}
And here's the HTML
<div class="top-friend-statuses">
<div class="top-friend-status-post">
<img src="http://placehold.it/100x100" class="top-friend-status-image">
<div class="top-friend-status-input">
fll;dkgj;lkdgkldhjdgkldlgkdj;gk;djlkgdj;gjldkj;ksd;slgkj;ldkg
</div>
<div class="top-friend-status-add-message">
DERP
</div>
</div>
</div>
I've tried looking up different solutions but none of them are similar to the problem I'm facing with this. Please help D:
Add a word-break: break-word; to your top-friend-status-input class
so your .top-friend-status-input class would look like this:
.top-friend-status-input
{
word-wrap: break-word;
float:left;
height:100px;
width:53%;
overflow-x:hidden;
overflow-y:auto;
background-color:LIGHTGREEN;
font-size:9pt;
}
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.
I have this code :
<div class="ultime_box">
<div class="ultime_box_photo">
Photo
</div>
<div class="ultime_text">
<div class="ultime_box_title">
Title
</div>
<div class="ultime_box_description">
Description
</div>
link
</div>
<div class="clear"><!--- --></div>
</div>
.ultime_box
{
margin:15px 27px 35px 20px;
color:#FFFFFF;
font-size:13px;
height:100px;
background-color:#cdcccc;
}
.ultime_box_photo
{
width:120px;
margin-right:15px;
float:left;
}
.ultime_text
{
float:left;
width:299px;
}
.ultime_box_title
{
color:#000000;
font-weight:bold;
font-size:12px;
text-transform:uppercase;
line-height:12px;
padding-bottom:13px;
}
.ultime_box_description
{
color:#FFFFFF;
font-size:11px;
line-height:13px;
padding-bottom:13px;
}
a.ultime_box_vai:link, a.ultime_box_vai:visited
{
color:#000000;
font-weight:bold;
font-size:12px;
line-height:12px;
text-decoration:none;
}
a.ultime_box_vai:hover
{
text-decoration:underline;
}
And I'd like to put the link in the bottom of the container div (ultime_box), without using height in the previous divs.
How can I do this?
Here's the solution: http://jsfiddle.net/N7GWV/1/
Give .ultime_box position: relative and your link position: absolute; bottom: 0.
.ultime_box
{
margin:15px 27px 35px 20px;
color:#FFFFFF;
font-size:13px;
height:100px;
background-color:#cdcccc;
position: relative;
}
a.ultime_box_vai:link, a.ultime_box_vai:visited
{
color:#000000;
font-weight:bold;
font-size:12px;
line-height:12px;
text-decoration:none;
position: absolute;
bottom: 0;
}
.ultime_text
{
float:left;
width:299px;
position:relative;
}
a.ultime_box_vai:link, a.ultime_box_vai:visited
{
color:#000000;
font-weight:bold;
font-size:12px;
line-height:12px;
text-decoration:none;
position:absolute;
bottom:0px;
}
this should do what you need. Basically, it's all depending on the position attribute of the divs.
This quick guide should clean you out about it.
You could make your bottom link have this css:
a.bottomLink{
float:left;
width:100%;
}
As your container div height is dynamic (based on content), your bottom link will be on the bottom. If I understood, you want to place link on the bottom of ultime_box, so your html should look like:
<div class="ultime_box">
<div class="ultime_box_photo">
Photo
</div>
<div class="ultime_text">
<div class="ultime_box_title">
Title
</div>
<div class="ultime_box_description">
Description
</div>
link
</div>
<div class="clear"><!--- --></div>
bottom
</div>