This question already has answers here:
CSS vertical alignment of inline/inline-block elements
(4 answers)
Why is this inline-block element pushed downward?
(8 answers)
How can I vertically align elements in a div?
(28 answers)
Closed 2 years ago.
I've tried all sorts of displays and positions to get all these elements on the same line, but for some reason, the button "Add" is in a weird position. Also, the center of the slash isn't horizontally aligned with the center of the boxes, it should be a little further up. The main issue is getting all of these elements on the same line, I want to somehow have their centers all be on the same imaginary horizontal line. How do I do that?
Here's the jsfiddle,
#slash {
font-size: 50px;
color: #E86B00;
display: inline-block;
}
textarea {
border: 3px solid #FF9333;
resize: none;
height: 30px;
width: 50px;
}
textarea:focus {
border: 3px solid #E86D00;
outline: none;
}
button {
height: 30;
width: 70;
color: #FFFFFF;
background-color: #FF7800;
}
button:hover {
background-color: #E86D00;
cursor: pointer;
}
button:active {
background-color: #FF8315;
border-right: 2px solid #DCDCDC;
border-bottom: 2px solid #DCDCDC;
border-top: 2px solid #ADADAD;
border-left: 2px solid #ADADAD;
}
<textarea type="textarea" id="fir" value="" onfocus="this.value=''"></textarea>
<p id="slash"> / </p>
<textarea type="textarea" id="sec" value="" onfocus="this.value=''"></textarea>
<button onclick="TestGrade();">Add</button>
You must align them with vertical-align. I have added that to the elements below.
#slash {
font-size: 50px;
color: #E86B00;
display: inline-block;
vertical-align:middle;
}
textarea {
border: 3px solid #FF9333;
resize: none;
height:30px;
width:50px;
vertical-align:middle;
}
textarea:focus{
border: 3px solid #E86D00;
outline: none;
}
button {
height: 30; width: 70;
color: #FFFFFF;
background-color: #FF7800;
vertical-align:middle;
}
button:hover {
background-color: #E86D00;
cursor: pointer;
}
button:active {
background-color: #FF8315;
border-right: 2px solid #DCDCDC;
border-bottom: 2px solid #DCDCDC;
border-top: 2px solid #ADADAD;
border-left: 2px solid #ADADAD;
}
<textarea type="textarea" id="fir" value="" onfocus="this.value=''"></textarea>
<p id = "slash"> / </p>
<textarea type="textarea" id="sec" value="" onfocus="this.value=''"></textarea>
<button onclick="TestGrade();" >Add</button>
I would recommend you keep all the element inside one div
and add these css properties to the div: display:flex, align-items:center
Related
I'm trying to align a triangle next to written text in a button using only HTML and CSS. For the life of me, I can remember how.
.room-info-btn {
background-color: #FFA500;
color: #fff;
border-radius: 4px;
padding: 5px 11px;
font-size: 20px;
}
.arrow-down {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #fff;
}
<li>
<button class="room-info-btn" id="room-info-btn">
<div class="arrow-down"></div>
Rooms / Availability
</button>
</li>
I highly recommend checking out Flexbox.
For your code, you can simply add the following css to your .room-info-btn selector:
display: flex;
align-items: center;
This makes aligning many items very simple and gives you other flex control options.
Try this. Flexbox is a better choice I guess.
Take a look here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.room-info-btn {
background-color: #FFA500;
color: #fff;
border-radius: 4px;
padding: 5px 11px;
font-size: 20px;
display: flex;
align-items:center;
}
.arrow-down {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #fff;
}
<li>
<button class="room-info-btn" id="room-info-btn">
<div class="arrow-down"></div>
Rooms / Availability
</button>
</li>
Try display: inline-table; in arrow-down class to align with the text
This question already has answers here:
Placing <label> text inside the border of a text input
(7 answers)
Closed 4 years ago.
I think today google update login TextBox to be like the following?
as you see a border contains text, which is the best way to do that using HTML & CSS?
Updated:
StackOverflow already has only one answer on the following link:
Placing <label> text inside the border of a text input
but I am searching about the best way to do that.
Using position:absolute to label also can do
div
{
position:relative;
}
input
{
border: 1px solid #0095ff;
border-radius: 4px;
padding: 15px;
}
label
{
position: absolute;
top: -9px;
font-size: 13px;
left: 6px;
background: white;
padding: 2px;
color:#0095ff;
}
<div>
<label>Email or phone</label>
<input/>
</div>
Use pseudo elemnt as :before to set text
div{
position:relative;
}
input
{
border: 2px solid #1a73e8;
border-radius: 4px;
padding: 15px;
}
div:before{
content: 'Email or phone';
position: absolute;
top: -9px;
font-size: 13px;
left: 6px;
background: white;
padding: 2px;
color:#1a73e8;
}
<div>
<input/>
</div>
In the same way you can use <label>/<span> and position it in css:
div{
position:relative;
}
input
{
border: 2px solid #1a73e8;
border-radius: 4px;
padding: 15px;
}
label{
position: absolute;
top: -9px;
font-size: 13px;
left: 6px;
background: white;
padding: 2px;
color:#1a73e8;
}
<div>
<label>Email or phone</label>
<input/>
</div>
You can do that using fieldset and minimum css:
fieldset { border: 2px solid cornflowerblue;}
legend {padding: 0 10px;}
label {visibility: hidden; position:absolute;}
input {border: none; padding: 10px;}
input:focus {border: 1px solid silver;}
<fieldset>
<legend>Email or Phone</legend>
<label for="demo">Enter your email or phone here</label>
<input type="text" id="demo" />
</fieldset>
I have the following code snippet:
h2 { padding: 0; margin: 0; }
.middle-bar { background-color: #b0b0b0; border-bottom: 2px solid black; }
.middle-bar h2 { border-bottom: 1px solid white; border-right: 1px solid white; display: inline-block }
.above-main { display: inline-flex; }
<div class="middle-bar">
<h2>TEST</h2>
<div class="above-main">
<span>test test 123</span>
</div>
</div>
I am trying to get it so that the parent (middle-bar) bottom-border does not pass under the <h2> element (so as to use the <h2> border-bottom for that section).
If I set the border-bottom: 2px solid black; to above-main class, it only underlines test test 123. If I set above-main to display: block; (or display: flex;), it acts like a block element is supposed to and makes a new line below the <h2>.
Does anyone know how to get the border-bottom: 1px solid white; from the child element <h2> to "override" the border-bottom: 2px solid black; from the parent .middle-bar element?
Thank you.
Set the border bottom on the above-main div instead of the outer div.
Edit: as you have already tried that:
Does margin-bottom: -1px on the h2 solve it?
Maybe you want this?
h2 { padding: 0; margin: 0; }
.middle-bar .above-main { background-color: #b0b0b0; border-bottom: 2px solid black; }
.middle-bar h2 { border-bottom: 1px solid white; border-right: 1px solid white; display: inline-block }
.above-main { display: inline-flex; }
<div class="middle-bar">
<h2>TEST</h2>
<div class="above-main">
<span>test test 123</span>
</div>
</div>
I want to create a border as shown in the image. I tried with all the styles inset, outset,ridge and groove but I was not able to get the expected result.
Is there any way to bend border towards inside till middle and get back towards till top(hope you understand the problem).
If it's repeated question please add the solution link.
Thanks in advance.
I have tried this:
div {
border-bottom: 1px ridge #B5B9BB;
/*border-bottom: 1px inset #B5B9BB;
border-bottom: 1px outset #B5B9BB;
border-bottom: 1px groove #B5B9BB; */
}
You could use outline:
.bordered {
border-bottom: 1px solid grey;
background: aliceblue;
outline: 5px solid aliceblue;
}
<div class="bordered">Available Apps</div>
Demo
Seems why not just use a border on the text?
div {
background: lightgrey;
padding: 0.5em;
}
p {
border-bottom: 1px ridge #B5B9BB;
}
<div>
<p>Available Apps</p>
</div>
It is probably best to use a wrapping element if possible; it is more flexible than outline (supports border-radius, box-shadows etc.)
For example:
<div class="headline-area">
<h2>Available Apps</h2>
</div>
with the CSS:
.headline-area {
background:#D4D9DC;
padding:5px;
}
.headline-area h2 {
border-bottom:1px solid #B5B9BB;
}
Whenever I am in your situation I use box-shadow:
body {
background:#D1D6D9;
font-family:verdana;
}
div {
border-bottom: 1px solid #B5B9BB;
box-shadow:0 1px 1px rgba(255,255,255,.7);
padding-bottom:5px;
}
<div>Available Apps</div>
You could always try a hr tag. You can then style it in CSS to your desired preference.
HTML
New apps
<hr>
Try this Also but you need an extra Div to do so.
HTML
<div class="outerDiv">
COntent
<div class="innerDiV">
</div>
<div>
CSS
.outerDiv{
background-color: grey;
height: 32px;
text-align: center;
padding: 16px;
font-weight: bolder;
font-size: 25px;
}
.innerDiV{
margin: 0 auto;
border: 1px solid black;
width: 98%;
margin-top: 10px;
}
Demo
HTML
<div class="wrapper">
<a href="#">
Link-1
<span class="sub-list hidden">
SubLink-1
SubLink-2
SubLink-3
</span>
</a>
Link-2
Link-3
</div>
CSS
.wrapper {
border-bottom: 1px solid #dfdfdf;
padding-bottom: 5px;
padding-right: 50px;
height: 25px;
}
.wrapper > a {
font-size: 13px;
font-weight: bold;
padding: 5px 6px;
border: 1px solid #ffffff;
border-bottom: none;
float: right;
display: block;
}
.sub-list {
background-color:#ffffff;
width: 251px;
height: 40px;
border-right: 1px solid #dfdfdf;
border-left: 1px solid #dfdfdf;
border-bottom: 1px solid #dfdfdf;
padding: 10px 10px 0 0;
text-align: right;
}
http://jsfiddle.net/6vAQF/1/
I want to create a menu and submenu. But when I place submenu under the a tag with a span wrapper, dom treeview appears corrupted as below image;
Why is that?
You're nesting links within a link, which is forbidden:
Links and anchors defined by the A element must not be nested; an A
element must not contain any other A elements.
http://www.w3.org/TR/html401/struct/links.html#h-12.2.2
Creating anchor tag inside anchor tag