Here in the image Title "Accounts and Holding Disclosure in crossing the white line while DRF is way above the white line...
How can i put the text just above the line using css.
Html code is
<div class="tabs">
<img src="images/disclosure.png" />
Accounts and Holdings Disclosure</div>
<div class="tabs">
<img src="images/drf.png" />
DRF</div>
Css is
.tabs
{
height: 85px;
border-bottom: 1px solid #fff;
text-align: center;
color: #fff;
padding-bottom:7px;
}
.tabs img
{
display: block;
margin-left: auto;
margin-right: auto;
height: 70px;
margin-top: 5px;
}
you should write:
.tabs {
height: auto;
}
There is simply not enough splace in the first block to apply the padding. The .tabs is 85px height, the image is 70px height with a margin of 5px top. So the remaining vertical space for your text is 10px only, and you add 7px of padding.
You need to reduce the size of the image in my opinion.
should be :
.tabs {
height: 90px;
}
Related
my text is overflowing see the screenshot https://drive.google.com/file/d/1i_9VvP54CAJJSvtsArZiTMMfMzACDS11/view?usp=sharing
here is css:
.card_main {
border: 1px solid black;
margin-top: 30px;
border-radius: 5px;
height: 900px;
background: #ffffff;
width: 100%;
}
.blog_content__text {
width: 95%;
height: 320px;
border-bottom: 1.5px solid lightgray;
margin-left: 2.5%;
margin-top: 20px;
}
.blog_heading {
font-size: 24px;
color: black;
}
.blog_details {
font-size: 16px;
color: black;
opacity: 0.7;
margin-top: 20px;
}
my html
<div className="card_main">
<div className="blog_content__text">
<h1 className="blog_heading">{data.blog_title}</h1>
<p className="blog_details">{data.blog_body}</p>
</div>
<div/>
how to prevent overflowing my text and make the div responsive. I am not an CSS expert. I just start learning css
When using fixed height for a div, you also need to say how the scroll should work. In this case using overflow-y:auto makes sense. You may prefer overflow-y:hidden or always show scrollbars overflow-y:scroll;
If there is no serious limitation in terms of graphics, do not specify the height for a Div to make its height responsive to the content.
.blog_content__text {
width: 95%;
height: 320px;
overflow-y:auto;
border-bottom: 1.5px solid lightgray;
margin-left: 2.5%;
margin-top: 20px;
}
remove the height: 320px;
if you must, use it as min-height: 320px;
try setting a margin-bottom css attribute to the div that contains the text, the value of the margin should equal the height of that white footer that is hiding the text on the bottom.
You can also make use of the following property if you really want to set the height:
height: min-content;
I have a div wrapped in a link tag, and when you tab to it in Chrome, it looks like this:
I know it's a minor grievance, but is there any way to get rid of the "outcropping" at the top, which I assume is Chrome outlining the link portion of the HTML. But I would like to keep the default Chrome blue outline around the image portion.
Here is a simplified test case:
HTML:
<html>
<body>
<a href='tree.com'>
<div class='card'>
<img src='https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/Ash_Tree_- _geograph.org.uk_-_590710.jpg/220px-Ash_Tree_-_geograph.org.uk_-_590710.jpg'/>
</div>
</a>
</body>
</html>
CSS:
.card
{
display: inline-block;
border-radius: 5px;
width: 250px;
margin: 5px;
vertical-align: top;
text-align: left;
}
.card img
{
width: 250px;
height: 250px;
}
JSFiddle:
http://jsfiddle.net/mLfkvuyw/26/
Adding the following removes the default Chrome outline from the image (and all child elements) as well, which I don't want:
a:focus
{ outline: none; }
You can do some easy CSS, applying no outline to the parental a tag and instead adding it around the image.
.card {
display: inline-block;
border-radius: 5px;
width: 250px;
margin: 5px;
vertical-align: top;
text-align: left;
}
.nolink:focus {
outline: 0 none !important;
}
.nolink:focus .card img {
border: 2px solid blue;
box-shadow: 1px 1px 1px 0 #888;
}
.card img
{
width: 250px;
height: 250px;
}
<html>
<body>
<a class='nolink' href='tree.com'><div class='card' ><img src='https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg/220px-Ash_Tree_-_geograph.org.uk_-_590710.jpg'/></div></a>
</body>
</html>
The "outcropping" is caused by the .card element's margin creating space between the link and the image elements. Margins can often cause strange layout problems in this way.
A simple fix is to remove the margin property from .card so that the focus outline will be flush with the image:
.card {
display: inline-block;
border-radius: 5px;
width: 250px;
margin: 5px;
vertical-align: top;
text-align: left;
}
I have a piece of text in a <h1> above a horizontal rule. The text does not line up exactly with the rule unless I apply margin-left: -4px to the <h1>. This seems a bit hacky to me. What is the correct way to line them up?
Example, the text is a few pixels to the right (dotted line added to highlight that the text and rule are not lined up):
Horizontal line starts at 0 whereas TEST starts at 4Px.
Code:
<h1 style="margin-left: -4px">TEST</h1> (without the -4 they do not line up)
<hr class="styledHorizontalRule" />
.styledHorizontalRule {
height: 1px;
width: 320px;
margin-top: 25px;
margin-bottom: 25px;
margin-left: 0px;
background-color:blue;
border: none;
outline: none;
}
As far as I can tell, it is a margin/padding issue. I didn't see the problem being replicated in the given example, but try this:
h1 { margin: 0px; padding: 0px; }
.styledHorizontalRule {
height: 1px;
width: 320px;
margin-top: 25px;
margin-bottom: 25px;
margin-left: 0px;
background-color: blue;
border: none;
outline: none;
}
<h1>TEST</h1>
<hr class="styledHorizontalRule" />
Here's an image showing what I'm trying to pull off.
So, a line to the left and right of any given text (typically would be some sort of of heading tag), that extends a certain distance on each side of the text (in this case, 65px).
I need something that is fluid in relation to the text itself...the overall width can't be fixed.
This solution is the one that's worked best for me in the past, you can se the example here. The code uses ::before and ::after pseudo classes to create the lines and then applies display:table to the text so the box adapts to it's content (I've used h2 for the example) This type of design is normally centered so I've added the margin: 1em auto;
Doing it this way, you don't need to add any extra html. Hope it helps.
h2{
display:table;
margin: 1em auto;
}
h2:before, h2:after{
content:"";
display: block;
border-top: 1px solid #ccc;
width: 65px;
margin-top:.5em;
}
h2:before{
float: left;
margin-right:3px;
}
h2:after{
float:right;
margin-left:3px;
}
You can do it in different ways.
One way would be setting border around the text, after keeping text inside header tags or div with font settings.
Refer the suggestions in the following link:
Add centered text to the middle of a <hr/>-like line
Try this: Demo
<html>
<head>
<style type="text/css">
.striked-text {
position: relative;
}
.striked-text .text {
z-index: 10;
position: relative;
background-color: white;
padding: 0 5px;
}
.striked-text .line {
left: -65px;
padding: 0 65px;
border-top: 1px solid gray;
top: 0.7em;
display: block;
position: absolute;
width: 100%;
z-index: 1;
}
</style>
</head>
<body>
<div style="text-align:center;">
<span class="striked-text"><span class="text">FAQ</span><span class="line"></span></span>
</div>
</body>
</html>
For headings you need to define container's width
Your html code
<fieldset class="title">
<legend>Some text</legend>
</fieldset>
your css code
fieldset.title {
border-top: 1px solid #aaa;
border-bottom: none;
border-left: none;
border-right: none;
display: block;
text-align: center;
}
fieldset {
width: 50%;
}
fieldset.title legend {
padding: 5px 10px;
}
jsFiddle
I am making div with image and text. User can hover on this div to get dropdown.
I have issue on alignment of dropdown. I need it to be aligned with the right border of hovered div:
This is the code:
<div id="hoverDiv">
<img alt="" width="32px" height="32px" src="http://www.fordesigner.com/imguploads/Image/cjbc/zcool/png20080526/1211776868.png" />
Hover Me!
<div class="showme">
<p>
Hidden Stuff!</p>
</div>
</div>
And CSS
#hoverDiv
{
width: 100px;
height: 40px;
float: right;
margin-right: 5%;
}
#hoverDiv:hover
{
background: #ff0000;
}
#hoverDiv:hover .showme
{
display: inline;
float: left;
position: relative;
margin-left: 5px;
margin-right: 5px;
}
.showme
{
display: none;
width: 100px;
height: 200px;
background: #0000ff;
margin: 0px auto;
float: left;
left: -999em;
padding: 10px 5px 0px 5px;
border: 1px solid #777777;
border-top: none;
z-index: 10;
position: absolute;
left: auto;
top: auto;
}
In #hoverDiv, add position:relative
In #hoverDiv:hover div.showme:
Remove float:left (redundant)
Remove position:relative (redundant)
Remove margin-left:5px && margin-right:5px unless you prefer them
In div.showme:
Remove float:left (redundant)
Remove left:-999em (redundant)
Replace left:auto with right:0
This jsFiddle has all the work done for you.
Did you mean something like this?
http://jsfiddle.net/nbZmG/9/
Here's another one -
http://jsfiddle.net/nbZmG/10/
Notice that in both cases, the width of the blue box is 120px, and they are aligned according to the left and right side of the red box using margin.
Hope this helped.
You're adding margin-left:5px on hover on your .showme div, remove that and it should align:
#hoverDiv:hover .showme {
display: inline;
float: left;
margin-left: 0; /* here */
margin-right: 5px;
position: relative;
}
In #hoverDiv:hover .showme remove margin-left and margin-right.
In .showme remove margin and modify padding to 10px 0px 0px 0px, and border: 1px to 0px.