I have 4 buttons in a header div. I have placed them all using margins top and left in css so they are all next to each other in one line. Nothing fancy.
Now I'm trying to do an action when the button is pressed the button text moves down a little bit.
I'm using this code in CSS :
#btnhome:active{
line-height : 25px;
}
HTML :
<div id="header">
<button id="btnhome">Home</button>
<button id="btnabout">About</button>
<button id="btncontact">Contact</button>
<button id="btnsup">Help Us</button>
</div>
Button CSS example :
#btnhome {
margin-left: 121px;
margin-top: 1px;
width: 84px;
height: 45px;
background: transparent;
border: none;
color: white;
font-size:14px;
font-weight:700;
}
Also those buttons work on a header background, I'm sure it has something to do with these settings :
#header {
background-image: url(images/navbar588.png);
height: 48px;
width: 588px;
margin: 2em auto;
}
It works well but the only problem is that the all other buttons also move their text down? Why Is that? Aren't I clearly clarifying that I want to use #btnhome only? All the buttons have completely different ID's. All buttons have the same CSS settings except the margins. What do I need to edit?
Thank you very much.
as I expected, yeah, it's because the whole DOM element is being pushed down. You have multiple options. You can put the buttons in separate divs, and float them so that they don't affect each other. the simpler solution is to just set the :active button to position:relative; and use top instead of margin or line-height. example fiddle: http://jsfiddle.net/5CZRP/
try changing that line-height change to a margin-top or padding-top change instead
#btnhome:active{
margin-top : 25px;
}
Edit:
You could also try adding a span inside the button
<div id="header">
<button id="btnhome"><span>Home</span></button>
<button id="btnabout">About</button>
<button id="btncontact">Contact</button>
<button id="btnsup">Help Us</button>
</div>
Then style that
#btnhome span:active { padding-top:25px;}
Use margins instead of line-height and then apply float to the buttons. By default they are displaying as inline-block, so when one is pushed down the hole line is pushed down with him. Float fixes this:
#header button {
float:left;
}
Here's a working jsfidle.
[type=submit]{
margin-left: 121px;
margin-top: 19px;
width: 84px;
height: 40px;
font-size:14px;
font-weight:700;
}
Related
At the bottom of my page there are 3 buttons. "Send, Save and Cancel" buttons. The Save and Cancel buttons are the same height but the "Send" button is different from the other two. Why is this happening?
I read on another post that said elements render buttons different from normal buttons so I tried to fix it with the solution given but it didn't work. I also tried removing element but it still didn't work. Thanks for your help!
Buttons Styles
background-color: #8f81e8;
color: #fff;
border-radius: 5px;
text-transform: uppercase;
font-weight: 300;
font-size: 16px;
cursor: pointer;
padding: 1rem;
CodePen
It's because your send is input while other elements are button.
Add border: none; to your css
you can give static height to all three buttons.
You have two different divs: .user-messages (the left one) and .settings the right one.
The left one contains an input, while the right one contains two buttons. So you can either add border:none to the left one to make the border disappear and then re-arrange your layout to use a button instead of an input.
Update
Wrap the buttons into a seperate div below the div of the two pages and do the following:
div {
display:flex;
justify-content:space-around;
}
button {
width: 100%;
margin: 5px; /* or whatever you want to have */
}
<div style="width: 100%; background-color: green;">
<button type="button">A</button>
<button type="button">B</button>
<button type="button">C</button>
</div>
Is the result of my snippet the desired outcome?
Seems to be the display: flex on the settings-btn-box that is causing it. One solution could look something like this:
.settings-btn-box {
/* display: flex; */
}
.settings-btn-box button {
width: 49%;
}
.btn-save {
/* margin-right: 10px; */
}
.btn-cancel {
/* margin-left: 10px; */
float: right;
}
Personally, I'm not a big fan of float, but since it's the last element in the div it should be fine.
I want two buttons to be displayed right next to each other, with no border in between. The buttons are:
<button class="tButton">1</button>
<button class="tButton">2</button>
My naive approach for the css is:
.tButton {
width: 50px;
height: 50px;
margin:0px;
padding: 0px;
background-color: gray;
border: none;
}
But this leaves some space between the buttons (JSFiddle). In Firefox, the example renders as:
This problem goes away when I use float: left; on the buttons. But I am trying to understand the following about CSS:
Why is there any margin to begin with, even though I explicitly set margin: 0;?
Because by default buttons are inline-block elements, and as any inline/inline-block elements they respect white spaces including new lines.
For this reason putting buttons on the same line gets rid of gaps:
.tButton {
width: 50px;
height: 50px;
margin:0px;
padding: 0px;
background-color: gray;
border: none;
}
<button class="tButton">1</button><button class="tButton">2</button>
as well as making them float: left since in this case buttons become floated block-level elements.
This happens with inline and inline-block elements. space is added in newline. You should change your markup, from:
<button class="tButton">1</button>
<button class="tButton">2</button>
To
<button class="tButton">1</button><button class="tButton">2</button>
single line fiddle
as a variant, you can write:
<button class="tButton">1</button
><button class="tButton">2</button>
The body is still a “BIG DIV” which needs to be set with margin zero and give a display:flex; so the items on its container will stack one together to the other inline. I checked your code in https://jsfiddle.net/83a2Lou0/ and it needs to be saved first before you see the effect of the changes.
I forked your same code in code pen and there the changes are saved automatically. Just add this to your CSS:
body{
margin: 0;
display: flex;
}
.tButton {
/* The same properties and values you have here. */
And that‘s it. Check here the same coding:
https://codepen.io/limakid/pen/KKQRdXK
This question already has answers here:
Why does this inline-block element have content that is not vertically aligned
(4 answers)
Closed 8 years ago.
Here's a fiddle that shows my code in action
The result seems crazy to me: in Chrome second button is slightly above the first.
In Firefox it is slightly below.
<div id="accounts">
<button class="account">
<h1>VISA Card</h1>
<span class="balance">-433.18</span>
</button>
<button class="account">
<h1 class="plus"><i class="icon icon-plus-sign"></i></h1>
<span class="plus-text">Add Account</span>
</button>
</div>
What is even more confusing is that padding on the h1.plus affects the position of the whole div.
What is going on here? I want two buttons to show up on the same line and simply don't undestand why they aren't. Is this a bug in the rendering engine?
UPDATE:
Narendra suggested an easy fix - float:left the buttons. I want to figure out why this misalignment happening in the first place.
You are using display:inline-block, so the buttons are aligned by their vertical-align property, which defaults to baseline.
This is a diagram from the specs which illustrates exactly that:
You can see in the first two boxes how padding and the font size of the content influence the positioning.
As a fix, use vertical-align: top or bottom, or even middle.
Edit: The image is from the table section and the situation is slighty different for inline-blocks.
Add this to your button.account: vertical-align: middle; .
And you can lose the display: inline-block; property, as it is not needed.
Check below code
button.account {
display: block;
float: left;
height: 80px;
margin: 10px 10px;
padding: 10px 5px;
width: 170px;
}
.account h1 {
font-size: 16px;
height: 16px;
margin: 0 0 5px;
padding: 4px 0 2px;
}
.account .balance {
display: block;
font-size: 24px;
}
.account h1.plus {
font-size: 24px;
padding-top: 0px;
}
Here is the fiddle http://jsfiddle.net/Gq3U8/13/
If you are using inline-block, the main concern is about the whitespace (you will see the default margin around the element). To fix this just add vertical-align:top, instead of using float:left. It will align the element to the top.
.account {
display: inline-block;
vertical-align: top; /*add this one*/
margin: 10px 10px; /*remove this one then can see whitespace*/
}
How do I make a header cover the contents and span the entire page length? When I use this css
#header {
display: inline-block;
background-color: #015367;
}
#login {
color: #b92c2c;
font-size: 1.25em;
margin-left: 18em;
position: relative;
top: 16px;
text-decoration: none;
}
#search-form {
margin-left: 0.5em;
margin-right: 15em;
position: relative;
top: 18px;
}
.lfloat {
float: left;
}
.rfloat {
float: right;
}
with this html
<body>
<div id="header">
<div id="page-nav" class="rfloat">
<a id="login" class="lfloat" href="/login">login</a>
<form id="search-form" class="rfloat" action="search.py" method="get">
<input id="searchbox" type="text" name="q" placeholder="search"/>
</form>
</div>
</div>
</body>
I get this result (in firefox)
What do I need to change to get a proper header (like stackoverflow, facebook, etc)?
Since you used float for the elements inside #header, then you only need to add this.
#header {
background-color: #015367;
overflow:hidden;
}
Before overflow:hidden
Notice the black border, the #header isn't wrapping the contents.
After overflow:hidden
Check it out : http://jsfiddle.net/AliBassam/vpRc2/
Adjust the top so that elements are positioned the way you like, position:relative; has no use here, just use floats and margins.
Add this to your CSS to zero out the margin on the body:
body {
margin: 0;
}
See DEMO.
I would also suggest you remove your position and top properties from #login and #search-form, and use margin to position them instead.
inline-block ??
#header {
float:left;
width:100%;
clear:both;
}
I suspect you are trying to just extend the header box to contain the login form.
The effect you are experiencing is due to the use of floating elements in the header tag. Floated elements are taken out of the normal flow of the document, this is why the parent element cannot detect their actual occupation of space.
There is an easy fix to this just add a overflow:hidden; to the style of header div. This would fix the problem but it is not considered to be the right way to do it. The overflow is not meant to be used in such a manner. Instead my advice to you is to use the "clearfix" method.
Here is link for the actual code: http://www.webtoolkit.info/css-clearfix.html
All you have to do is to add this code as a class to the header element.
I hope this helps :)
I'd like to have a line that starts right after my text on the same line, I've tried with the following simple code
<html><body>My Text<hr/></body></html>
It seems that <hr> is not an option because it is always on a new line and I'd like the line to start at the right of my text.
Any help ?
The <hr> has default styling that puts it on a new line. However that default styling can be over-ridden, in the same way as it can for any other element. <hr> is in essence nothing more than an empty <div> with a default border setting.
To demonstrate this, try the following:
<div>Blah blah<hr style='display:inline-block; width:100px;' />dfgdfg</div>
There are a number of ways to override the styling of <hr> to acheive your aim.
You could try using display:inline-block; along with a width setting, as I have above. The down-side of this approach is that it requires you to know the width you want, though there are ways around this - width:100%;, and the whole line in a container <div> that has overflow:hidden; might do the trick, for example:
<div style='overflow:hidden; white-space:nowrap;'>Blah blah<hr style='display:inline-block; width:100%;' /></div>
Another option would be to use float:left;. You'd need to apply this to all the elements in the line, and I dislike this option as I find that float tends to cause more problems than it solves. But try it and see if it works for you.
There are various other combinations of styles you can try - give it a go and see what works.
Using FlexBox Property this can be achieved easily.
.mytextdiv{
display:flex;
flex-direction:row;
align-items: center;
}
.mytexttitle{
flex-grow:0;
}
.divider{
flex-grow:1;
height: 1px;
background-color: #9f9f9f;
}
<div class="mytextdiv">
<div class="mytexttitle">
My Text
</div>
<div class="divider"></div>
</div>
Try this:
<html><body>My Text<hr style="float: right; width: 80%"/></body></html>
The inline CSS float: right will keep it on the same line as the text.
You'll need to adjust the width if you want it to fill the rest of the line.
Using inline or float, as far as I tested it doesn't work properly even if this was my first thought. Looking further I used the following css
hr {
bottom: 17px;
position: relative;
z-index: 1;
}
div {
background:white;
position: relative;
width: 100px;
z-index: 10;
}
html
<div>My Text</div><hr/>
Demo http://jsfiddle.net/mFEWk/
What I did, is to add position relative in both elements (to give me the advantage of z-index use). Also from the moment I had position:relative for hr I moved it from the bottom:17px. This move it above the div that contains the text. Applying z-index values and adding background:white for the div puts the text above the the line. Of course don't forget to use a width for the text, otherwise will take the whole width of the parent element.
<div style="float: left">Some text</div>
<hr style="clear: none; position: relative; top: 0.5em;">
Exactly what you want.
Try this. It works
<p style="float:left;">
Hello Text
<hr style="float:left; width: 80%"/>
</p>
You can also use this to draw a line between texts like
Hello -------------------------- Hello
The OP never specified the purpose of the line, but I wanted to share what I ended up doing when I was making an html template where the user needed a line to write on after the document was printed.
Because the hr tag defaults to its own line and defaults to being centered in the line, I decided to use a div and style it instead.
HTML
This is my text.<div class='fillLine'></div>
CSS
.fillLine {
display:inline-block;
width: 200px;
border-bottom: 1px solid black;
}
JSFiddle Demo
Style Div for Line After Text
Hope that helps anyone who had the same goal as me.
hr {
width: {so it fits on the same line as the p tag};
}
p {
float: left;
width: {enough to accomodate the hr};
}
That sort of make sense?
<p>My text</p>
<hr />
Here's one potential approach, but it has some assumptions/requirements. Your question should be edited to give more specific information about what you're building.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Blah</title>
<style type="text/css">
body {
background-color : white;
font-family : Arial;
font-size : 16px;
}
.wrap {
background: transparent url(px.png) repeat-x 0px 85%;
/* Different fonts or text sizes may require tweaking of that offset.
px.png is a one-pixel(though can be thicker if needed) image in whatever color you want the line */
}
.inner {
background-color : white;
/* Should match the background of whatever it's sitting over.
Obviously this requires a solid background. */
}
</style>
</head>
<body>
<div class="wrap"><span class="inner">Here is some text</span></div>
</body>
</html>
I used the following technique:
Give the container div a background-image with a horizontal line.
Put an element (like <h3>) in the container div (I have it on the right so float: right; )
Use the following css:
.line-container {
width: 550px;
height: 40px;
margin-top: 10px;
background-image: url("/images/horizontal_line.png");
}
.line-container h3 {
padding-left: 10px;
float: right;
background-color: white;
}
Below code did the job for me
HTML File:
----------
<p class="section-header">Details</p><hr>
CSS File:
----------
.section-header{
float: left;
font-weight: bold
}
hr{
float: left;
width: 80%;
}
INLINE:
-------
<p style="float: left;font-weight: bold">Details</p><hr style="float: left;width: 80%;">