This question already has answers here:
Text in Border CSS HTML
(10 answers)
Closed 1 year ago.
I am using the following html and css to design a div with a title and a button at bottom:
.main-container {
height : 100%;
width : 100%;
position : absolute;
background-size : 100% 100%;
display : flex;
align-items : center;
background-color: lightgreen;
}
.content{
margin:auto;
border: 1px solid #0d0d63;
padding: 10px;
}
.title{
top: -21px;
position: relative;
border-bottom: 1px solid green;
}
.bottom-link{
position:relative;
top:19px;
background-color:green;
}
<div class="main-container">
<div class="content">
<div class="title">My Title</div>
test content
<div class="bottom-link">Bottom Link</div>
</div>
</div>
As you can see the title is crossed out because of the border. I can fix it by setting the background color to title class like I did for bottom-link. But the issue is I want the background-color ( or image if I add one) of the main-container to be visible throught the title. ie; I need the title div to be transparent. Is there any way to achieve this with css?
You can remove border top and give title ::before and ::after border bottom to get what you want
.main-container {
height : 100%;
width : 100%;
position : absolute;
background-size : 100% 100%;
display : flex;
align-items : center;
background-color: lightgreen;
}
.content{
margin:auto;
border: 1px solid #0d0d63;
border-top: none;
/* padding: 10px; */
}
.second-content{
padding: 10px;
}
.title{
top: -10px;
position: relative;
/* border-bottom: 1px solid green; */
}
.bottom-link{
position:relative;
top:19px;
background-color:green;
}
.separator {
display: flex;
align-items: center;
text-align: center;
}
.separator::before,
.separator::after {
content: '';
flex: 1;
border-bottom: 1px solid #0d0d63;
}
.separator:not(:empty)::before {
margin-right: .25em;
}
.separator:not(:empty)::after {
margin-left: .25em;
}
<div class="main-container">
<div class="content">
<div class="title separator">My Title</div>
<div class="second-content">
test content
<div class="bottom-link">Bottom Link</div>
</div>
</div>
</div>
Related
I am wanting to place a div within another div. The point is to create a border at the top of the div. The border will include a small icon image at the left, and a headline.
I am thinking that there will actually need to be a total of three divs within the main div (lighter grey color). Main border div (100% width...the dark grey color example), then within that div will be two more divs. Div for the small icon (20% width), and a div for the headline content (80% width).
How do you position those three divs (dark grey color), within the main div (lighter grey color) to act like a border at the top? Any short examples would be greatly appreciated.
A link to an example image is provided...
enter image description here
Something like this might get you started:
.panel {
display: block;
position: relative;
width: 30vw;
height: 50vh;
background-color: #CCC;
}
.panel header {
width:100%;
background-color: #999;
border-bottom: 1px solid black;
}
.panel footer {
font-size: 60%;
position: absolute;
bottom: 0;
width:100%;
border-top: 1px solid black;
text-align: center;
}
<section class="panel">
<header>
something something
</header>
<div class='content'>
content content
</div>
<footer>
panel footer
</footer>
</section>
Use this
.cont {
width:400px;
height:500px;
background: lightgray;
position: relative;
}
.header {
position: absolute;
left: 0;
top: 0;
width:100%;
height:80px;
background: gray;
color:#fff;
font-size:40px;
font-family: sans-serif;
line-height:80px;
padding:0 0px 0 70px;
box-sizing:border-box;
}
img {
position: absolute;
left:10px;
top:50%;
transform:translateY(-50%);
}
<div class="cont">
<div class="header">
<img src="https://picsum.photos/50" alt="">
HEADLİNE
</div>
</div>
<div class="box">
<h2>
<span class="box__icon"></span>
Headline
</h2>
<div class="box__content">
Content
</div>
</div>
https://codepen.io/anon/pen/OdYaeY
Your thinking is fine, just be sure to use a naming convention that is consistent and works for you. Here's an example you can feel free to use:
.container {
width: 300px;
height: 350px;
margin: 0 auto;
font-family: Arial, Helvetica, Verdana;
font-size: .95rem;
}
.header {
background: #999;
color: white;
text-transform: uppercase;
padding:.5em;
font-size: 1.3rem;
}
.header .icon {
display:inline-block;
min-height: 1rem;
min-width: 20px;
border: 1px solid white;
}
.body {
background: #ccc;
height: 100%;
padding: 1rem;
}
<div class="container">
<div class="header">
<span class="icon"></span>
<span class="title">headline</span>
</div>
<div class="body">
This is your body block
</div>
</div>
This question already has answers here:
Align 2 DIV per line, both the with the same height
(4 answers)
Closed 4 years ago.
I am having a few issues getting 3 divs to align in a web page. Basically, I have 3 divs along side each other in a 'main' div. I want to set a minimum height on all 3 of the child divs, but have them expand to match the height of the largest of the 3. The crude image below shows the issue.
EDIT - To clarify, I am trying to get the 'Blue' and 'Red' sections (sideMenu, rightMenu and contentDiv) to expand automatically to reach the footer. As it stands now, the central div expands and leaves white space beneath the left and right 'Blue' sections.
My html looks like this -
<div class="mainDiv">
<div class="sideMenu">
<div class="vertical-menu">
<a id="uxLink_1" runat="server" href="1.aspx">1</a>
</div>
</div>
<div class="rightMenu" id="uxRightMenu">
<img alt="" src="" border="0" id="uxRightImage" runat="server"></img>
</div>
<div class="contentDiv">
<asp:ContentPlaceHolder ID="uxContentPH" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
<div class="footerBanner" id="uxFootBanner">
<center>
<img alt="" src="" border="0" id="uxFooterImage" runat="server" class="footerBannerImage"></img>
</center>
</div>
The CSS is as follows -
.mainDiv {
width: 98%;
min-width: 440px;
border: solid 5px black;
margin-top: -4px;
border-top: none;
overflow: auto;}
.contentDiv {
min-height: 700px;
height: auto;
font-size: 9.5pt;}
.sideMenu {
height: 100%;
min-height: 700px;
width: 150px;
float:left;
background-color: black;
border-right: solid 5px black;}
.rightMenu {
height: 100%;
min-height: 700px;
width: 115px;
float: right;
background-color: black;
border-right: solid 5px black;
padding-left: 5px;}
.footerBanner {
display: none;
width: 98%;
float:none;
background-color: black;
border: solid 5px black;
border-top: none;
min-width: 440px;
padding-top: 3px;}
.footerBannerImage {
width: 98%;
height: auto;
min-width: 440px;
max-width: 728px;
max-height: 90px;
min-height: 54px;}
.vertical-menu {
width: 150px;}
.vertical-menu a {
background-color: black;
color: white;
display: block;
padding: 12px;
text-decoration: none;}
.vertical-menu a:hover {
background-color: #37353d; }
.vertical-menu a.active {
background-color: #438210;
color: white;}
You should use % instead of px units for your child div tags.
It means if you add width: 50%; its width will be half of its parent element width.
So if you want to create something like that picture you should give width: 30%; to your side elements and width: 40%; to you bigger (center) element.
That should work fine. Also, delete every min-width & max-width property that you add to your child elements.
You can achive it with flexbox as well.
I've focussed in the layout only and I've ommited some of your markup:
.container {
display:flex;
flex-direction:column;
height:200px;
}
.container a{
color:#fff;
}
.mainDiv {
display:flex;
flex-grow:1;
justify-content:space-between;
}
.contentDiv {
flex-grow:1;
background:#f00;
}
.sideMenu {
display:flex;
flex-direction:column;
flex-basis:15%;
align-itens:start;
background-color: #00f;
}
.footerBanner {
background-color: #000;
height:20%;
}
<div class="container">
<div class="mainDiv">
<div class="sideMenu">
1
</div>
<div class="contentDiv">
</div>
<div class="sideMenu">
2</img>
</div>
</div>
<div class="footerBanner">
3
</div>
</div>
This is a helper tool for creating flexbox layouts quickly.
I'm working with bootstrap panel. PSD suggest that when I hover over a panel background color and content color will change. that's fine I can do that.
but how to extend hover-color in top and bottom? and content position should stay there!
<div class="row">
<div class="col-md-4">
<div class="panel">
</div>
</div>
</div>
.panel:hover{
background-color: #13BDFF;
}
Update
Just use outline CSS property which has excellent browser support (IE8+). Demo:
.panel:hover {
background-color: #13BDFF;
outline: 5px solid #13BDFF;
}
/* just styles for demo */
.panel {
padding: 10px;
background-color: lime;
}
<div class="panel">
This is panel
</div>
Original answer (not recommended way)
You can use transparent borders (also padding can help you with this) and negative margin for this:
.panel:hover {
background-color: #13BDFF;
border: 5px solid transparent;
margin-left: -5px;
margin-top: -5px;
}
/* just styles for demo */
.panel {
padding: 10px;
background-color: lime;
}
<div class="panel">
This is panel
</div>
https://jsfiddle.net/xkqvv92p/
Here's a version using padding on hover.
.rowArea {
height: 400px;
background-color: red;
display: flex;
align-items: center;
}
#container {
margin: auto;
width: 200px;
height: 300px;
background-color: white;
border-radius: 5px;
padding: 5px;
}
#container:hover {
padding: 30px 5px;
background-color: #13C3FF;
}
<div class="rowArea">
<div id="container">hi</div>
<div id="container">hi2</div>
</div>
Changing the border color and size might solve the issue.
please refer the sample fiddle :
.panel:hover{
background-color: #13BDFF;
border-color : #13BDFF;
border:10px solid #13BDFF;
}
https://jsfiddle.net/3wkjuzbk/1/
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 6 years ago.
when I use display = inline-block to my div, there is a gap between these 2 boxes. can anyone tell me why it is like this, and how can I remove the gap?
* {
margin: 0;
padding: 0;
}
.first {
height: 100px;
width: 100px;
border: solid 1px black;
display: inline-block;
}
.second {
height: 100px;
width: 100px;
border: solid 1px black;
display: inline-block;
}
<div class="first"></div>
<div class="second"></div>
Use float: left;
* {
margin: 0;
padding: 0;
}
.first {
height: 100px;
width: 100px;
border: solid 1px black;
display: inline-block; float:left
}
.second {
height: 100px;
width: 100px;
border: solid 1px black;
display: inline-block;float:left
}
set font-size: 0 for parent element.
.parent-element { /* apply to the parent element */
font-size: 0;
}
.first, .second {
font-size: 13px; /* default value, change as per your need */
}
Change your html like blow
other way add Comment like blow
* {
margin: 0;
padding: 0;
}
.first {
height: 100px;
width: 100px;
border: solid 1px black;
display: inline-block;
}
.second {
height: 100px;
width: 100px;
border: solid 1px black;
display: inline-block;
}
<div class="first"></div><div class="second"></div>
<div class="first"></div><!--
--><div class="second"></div>
#Chao Wang for removing that gap you have to use left float in bot the
div
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.first {
height: 100px;
width: 100px;
border: solid 1px black;
display: inline-block;
float:left;
}
.second {
height: 100px;
width: 100px;
border: solid 1px black;
display: inline-block;
float:left;
}
</style>
<div class="first"></div>
<div class="second"></div>
It will resolve your problem (y)
The "inline-block" elements has this space because of font size of the parent.
Here you can find more details and ways how to remove the space. One of the easiest is this to add a div parent with font-size=0:
<div style="font-size: 0;">
<div class="first"></div>
<div class="second"></div>
</div>
This happen beacause it use line height
.inline-parent{
display:inline-block;
width:100%;
line-height:0;
font-size:0;
}
.inline1{
display:inline-block;
width:50%;
background:#333;
line-height:1;
font-size:15px;
}
.inline2{
display:inline-block;
width:50%;
background:#999;
line-height:1;
font-size:15px;
}
<div class="inline-parent">
<div class="inline1">
text text
</div>
<div class="inline2">
text text
</div>
</div>
It is all because of line-height and font-size
I am struggling to get full length left border vertically on a div.
Problem is that i can not fix the height of div as content is loaded dynamically and it can be short and long.
I tried below approach:
Approach 1
CSS
div.right-col {
position: relative;
}
div.right-col:before {
content:"";
background: #ccc;
padding-left:2.5rem;
position: absolute;
bottom: 0;
left: 0;
height: 50%;
width: 1px;
}
HTML
<div class="left-col"></div>
<div class="right-col"></div>
Approach 2
CSS
.right-col {
position: relative;
}
#borderLeft {
border-left: 2px solid #f51c40;
position: absolute;
top: 50%;
bottom: 0;
}
HTML
<div class="left-col"></div>
<div class="right-col"><div id="border-left"></div></div>
Approach 3
CSS
.left-col {display:table-cell}
.right-col {
display:table-cell;
border-left: 1px solid #ccc;
padding-left: 2.5rem;
float: none;
height:auto;
}
HTML
<div class="left-col"></div>
<div class="right-col"></div>
But none of above things are working. Border is only till where content is present.
Is someting like that what you are looking for ?
<div>
<div style="height:100%;display:inline-block;background-color:#FF0000;">LEFT</div>
<div style="height:100%;display:inline-block;background-color:#0000FF;">RIGHT</div>
</div>
Otherwise, it may be easier to use bootstrap and the row & col-xx class.
Html
<div class="main">
<div class="left-col">sdfsdfsdf</div>
<div class="right-col">sdfsdfsdf
<br>
sdfsdfsdf
</div>
</div>
Css
.left-col {display:table-cell; width:100%; background-color: red;}
.right-col {
display:table-cell;
border-left: 1px solid #ccc;
padding-left: 2.5rem;
float: none;
height:auto;
background-color: green;
}
.main{
display:table;
}
Demo
This is sometimes referred to as the Holy Grail Problem and there are a number of hacks for it. However the first 'real' fix i believe is the flexbox. Here is how i would solve your problem:
Fiddle
HTML
<div class="container">
<div class="col left">Hi</br>Let's see how this works.</div>
<div class="col right">Hi</div>
</div>
CSS
.container, .col {
display:flex;
}
.container {
flex:1;
flex-direction:row;
}
.col {
flex-direction:column;
}
.col.right {
border-left: 1px solid black;
}
.col.left {
order:-1;
}