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>
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
I have css that adds a border around a list items, but when I add the padding, the list items' borders start crossing over each other. Here is my current css for the Li:
.display_times{padding: 5px 10px 5px 10px !important; font-size: 24px; border:1px solid black; display:inline; }
Here's a picture of what it looks like.
Is there any way to keep the padding but push the borders back so that they are more like this, but with padding:
It seems this css works:
.display_times {
padding: 5px 10px 5px 10px !important;
font-size: 24px;
border:1px solid black;
display: inline-block;
}
Not sure if this is what you are after but:
HTML
<ul>
<li>10:00</li>
<li>12:00</li>
<li>13:00</li>
</ul>
CSS
ul{
padding: 0;
list-style: none;
border:1px solid black;
}
li {
border-bottom: 1px solid black;
}
li:last-child{
border-bottom: 0;
}
Here's one way to do it.
div {
width: 50px;
text-align: center;
border-top: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
padding: 5px;
}
.last {
border-bottom: 1px solid black;
}
<div>11:00</div>
<div>12:00</div>
<div>13:00</div>
<div class="last">14:00</div>
Don't Ever use display:Inline, if you want to give the elements a specified padding or height, because these properties doesn't apply to inline.
You Can Only Set left or right width using Inline, better always use for such situation inline-block.
While building a page, I encountered a problem i couldn't explain:
The first div in a sidebar has a weird break above
Second picture, showing that the top div in sidebar (template-sidebar-payment) doesn't actually contain that gap.
I had a margin appear from nowhere, without it being set anywhere (I've searched broad and wide).
#template-sidebar {
display: table-cell;
width: 200px;
padding-right: 15px;
height: 626px;
background: #FFF;
border-right: 7px solid #fec30d;
}
.sidebar-element {
height: 200px;
border-top: 10px solid #ffffff;
border-bottom: 10px solid #ffffff;
}
.sidebar-element hr {
border: none;
height: 1px;
color: #c6c6c6;
background-color: #c6c6c6;
/*border: 0.5px solid #c6c6c6;*/
box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05);
}
.sidebar-element h4 {
padding-top: 10px;
}
#template-sidebar-payment {
border-top: 0;
!important
}
#template-sidebar-rules {
border-bottom: 0;
!important
}
<div id="template-sidebar">
<div id="template-sidebar-payment" class="sidebar-element">
<hr noshade/>
<h4>Sposoby płatności</h4>
</div>
<div id="template-sidebar-delivery" class="sidebar-element">
<hr noshade/>
<h4>Sposoby dostawy</h4>
</div>
<div id="template-sidebar-rules" class="sidebar-element">
<hr noshade/>
<h4>Regulamin</h4>
</div>
</div>
Please note, that the reason for making this a table-cell is because I want the sidebar to scale along the (right hand side) content as it expands in length.
As for now, I tried removing certain things, adding display: blocks etc. but nothing helped.
If any more code is needed (I guess there might be a case where te problem could lie somewhere else?) please ask in comments and I will be happy to provide.
we need live demo for inspecting this situation. but i think setting vertical align to sidebar will solve your problem.
#template-sidebar {
vertical-align:top;
}
I think it's the margin from the hr. Add a margin-top: 0 to it:
#template-sidebar{
display: table-cell;
width: 200px;
padding-right: 15px;
height: 626px;
background: #FFF;
border-right: 7px solid #fec30d;
}
.sidebar-element{
height: 200px;
border-top: 10px solid #ffffff;
border-bottom: 10px solid #ffffff;
}
.sidebar-element hr {
border: none;
height: 1px;
margin-top: 0;
color: #c6c6c6;
background-color: #c6c6c6;
/*border: 0.5px solid #c6c6c6;*/
box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05);
}
.sidebar-element h4 {
padding-top: 10px;
}
#template-sidebar-payment{
border-top: 0; !important
}
#template-sidebar-rules{
border-bottom: 0; !important
}
<div id="template-sidebar">
<div id="template-sidebar-payment" class="sidebar-element">
<hr noshade/>
<h4>Sposoby płatności</h4>
</div>
<div id="template-sidebar-delivery" class="sidebar-element">
<hr noshade/>
<h4>Sposoby dostawy</h4>
</div>
<div id="template-sidebar-rules" class="sidebar-element">
<hr noshade/>
<h4>Regulamin</h4>
</div>
</div>
The only issue I see, is the padding-right.
Attempt altering padding-right from 15px to 5px and see if that changes anything.
EDIT: Saw your comment. See below.
It probably origins from the
.sidebar-element h4 {
padding-top: 10px;
}
part of your style sheet.
On http://adasportsandrackets.com/wordpress, I am trying to add CSS to add a border under the h4 heading "Best Sellers." It's not working and it's not a caching issue as I've tried in the major browsers after deleting cache.
Here is the HTML:
<div class="wpb_text_column wpb_content_element best-sellers">
<div class="wpb_wrapper">
<h4>Best Sellers</h4>
And here is my CSS:
.best-sellers h4 {
border-bottom: 1px solid #eee;
padding: 7px 0px;
}
I also tried:
.best-sellers {
border-bottom: 1px solid #eee;
padding: 7px 0px;
}
This worked for me:
.page-template-template-home-default-php .wpb_wrapper h4 {
border-bottom: 5px solid #999;
}
Or try:
.best-sellers h4 {border-bottom: 5px solid #999;}
Try:
.wpb_wrapper h4 { border-bottom: 1px solid #eeeeee;}
Or try adding a class to h4 e.g.
<h4 class="borderh4">Lol</h4>
.borderh4 {border-bottom: 1px solid #eeeeee;}
Best to select based on it's parent div class:
.wpb_wrapper h4 {
border-bottom: 1px solid #eee;
padding: 7px 0px;
}
As the previous answer stated, if your parent div has multiple classes, you usually need to select both for it to grab the right element:
.wpb_wrapper.another_class h4 {}
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