Demo: http://jsfiddle.net/DerekL/gNkKx/
I am trying to push up the text in a div by 50%, and I tried
padding-bottom: 50px; /*div is 100px high*/
But it does not work.
padding-top: -50px;
This does not work too. Any work-around?
line-height:0px; pushes it up some, but I don't know how much and it's apparently not 50px as you want.
You can wrap the element in another container and position it like so:
HTML
<div class="container">
<div class="block">龍</div>
</div>
CSS (only showing modifications from your style)
.container{
position: relative;
}
.block {
position: absolute;
top: -50px;
}
DEMO
IF you are trying to center the text within the boxes, try the following:
div.block {
border: 1px solid black;
width: 100px;
height: 100px;
text-align: center;
font-size: 80px;
line-height: 80px;
overflow: hidden;
padding-top: 10px;
}
*{
box-sizing: border-box;
}
Try raising the text up with inline-block. Use a border to see where you are. By doing this you can see where margin-top can be adjusted up and how large it is.
<div style='display:inline-block;margin-top:-30px; border: 1px solid pink;'>
<font style='color:green;'>today </font>
</div>
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 set of divs that vary in size depending on an image inside it. Inside each div I would like two more divs, one is floated left and the other is floated right, like so:
I sort of accomplished it this way ... html:
<div class="image-wrap">
<img src="{{ img }}">
<div class="lookbook-title"><h5 >{{ title }}</h5></div>
<div class="item-buy">{{ theme:partial src="_buynow" }}</div>
</div>
and css:
div.image-wrap {
max-height: 1000px;
max-width: 100%;
border: 0;
display: inline-block;
height: auto;
box-sizing: border-box;
}
.lookbook-title {
position: relative;
top: -36px;
float: left;
padding-left: 10px;
padding-right: 10px;
color: #f7f7f7;
}
.item-buy {
position: relative;
top: -56px;
float: right;
padding-right: 20px;
pointer-events: none;
-webkit-font-smoothing: antialiased;
fill: #f7f7f7;
}
The reason I say "sort of" is because it initially was working just fine, but now the floated divs are appearing on above and outside their parent divs. What is interesting is that if I inspect the problem with dev tools and uncheck and recheck the "float" on either div both go back to where I want them to go...
You need to clear your floats.
Here is a interesting article that explains it in detail: http://css-tricks.com/snippets/css/clear-fix/
Hope this helps.
You should use position: absolute; for your 'floating' elements instead of float.
You'll need to add position: relative; to the parent wrap element - this will tell the children to respect the bounds of this element instead of floating somewhere outside of it. Then you can add position: absolute; to each of the children that you want to float and use top, bottom, left, right to control where the box is positioned. Experiment with different values to get the hang of it.
div.image-wrap {
height: 300px;
width: 400px;
position: relative;
border: 1px solid red;
}
.lookbook-title,
.item-buy {
background: white;
position: absolute;
bottom: 10px;
height: 100px;
width: 100px;
}
.lookbook-title {
border: 1px solid lime;
left: 10px;
}
.item-buy {
border: 1px solid blue;
right: 10px;
}
<div class="image-wrap">
<img src="http://www.placehold.it/400x300.jpg">
<div class="lookbook-title"><h5>Div 1</h5></div>
<div class="item-buy">Div 2</div>
</div>
I want to display a button centered inside a div. I did it with the following:
transformation:translateY(25%);
but this is is not allowed for older version of browsers. This is the follwing CSS code for the div and the button:
#buttonSwap.swap{
background: url("../img/thumb_10600.png") no-repeat;
height: 15px;
width: 15px;
border: none;
}
.swapCities{
float: left;
height: 100%;
width: 15px;
margin: 5px 8px 0px 8px;
}
and the HTML code is the following:
<div class="swapCities">
<input type="button" id="buttonSwap" class="swap" ng-click="swapingCities()" />
</div>
There is a lot of methods for vertical alignment in CSS. I recommend reading http://css-tricks.com/centering-css-complete-guide/.
Personally I find the "ghost element" technique (http://codepen.io/KatieK2/pen/ucwgi) most universal. The idea is to prepend an inline-block pseudoelement with 100% height to your container, set your button display to inline-block as well and set vertical-align: middle on both:
.swapCities:before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
#buttonSwap {
display: inline-block;
vertical-align: middle;
}
You need something like this:
.swapCities{
display: inline-block;/* or table-cell */
vertical-align: middle;
}
Here is a simple example: the key here is that the parent container is position:relative, and the button is position:absolute;
you can use top:50%; left:50%;... this will align the top-left corner of the button to center;
To complete the centering, you need to add margin to the button to equal half of the width and height.
Copy/Paste the below into an .html document, and you will see it at work.
<!DOCTYPE html>
<html>
<body>
<style>
center { background-color:#CCCCCC; position:relative; min-height:600px; }
button { width:300px; height:30px; position:absolute; top:50%; left:50%; margin-left:-150px; margin-top:15px; }
</style>
<center>
<h2>Content Area</h2>
<button type="button">Click Me</button>
</center>
</body>
</html>
You could use position: absolute; then top: 50% property to offset.
Have a look at this Codepen to see if it's any good for you: EXAMPLE HERE
Your css will look like this:
.swapCities{
position: relative;
height: 100px; width: 100px;
margin: 5px 8px 0px 8px;
border: 1px solid;
}
#buttonSwap.swap{
position: absolute;
top: 50%; margin-top: -9px;
left: 50%; margin-left: -9px;
background: url("../img/thumb_10600.png") no-repeat;
height: 15px; width: 15px;
border: 1px solid;
}
I was asked to code an unusual shape background on some centered text.
The text should be centered and have it's background extend to the right edge of the content-box.
How can I do this with CSS?
http://jsfiddle.net/7U688/
The text centering is cake.
The tricky bit is extending the background off into one direction.
This is one way of accomplishing this:
#outer{
border:2px solid black;
background-color:red;
overflow:hidden;
}
#inner{
margin:40px;
text-align:center;
}
p{
display:inline-block;
color:white;
background-color:black; // or an image
margin:0 -999em 0 5px;
padding: 5px 999em 5px 5px;
line-height:1;
}
In this case - I use a huge padding and an equally huge negative margin to keep an element in flow, but visually extend outside of its borders. A benefit of this technique is that it allows the dev to keep an element in normal static or relative position.
Finally, use overflow:hidden in a parent element to prevent unwanted bleed.
Using :after, you may do something like THIS.
This allows the text to be centered normally without using margin and padding hacks.
p {
display: table;
background: black;
margin: auto;
color: white;
position: relative;
font-size: 1em;
}
p:after {
content: '';
background: black;
width: 150px;
line-height: 1em;
height: 100%;
display: inline-block;
position: absolute;
}
Is this what you want? Fiddle
Html:
<div class="wrapper">
<span class="text">You text</span>
</div>
Css:
.wrapper {
width: 200px;
height: 200px;
border: 1px solid;
text-align: center;
vertical-align: middle;
display: table-cell;
}
.text {
background: yellow;
}
I have a div as a content box and have another div inside that for the title. The outer div has border-radius set but the inner div hides it.
HTML:
<div id='box'>
<div id='boxTitle'>
This is the title
</div>
</div>
CSS:
#box {
height: 250px;
width: 250px;
border-radius: 10px;
background: #bbb;
}
#boxTitle {
width: 100%;
background: #000;
color: #fff;
text-align: center;
}
JSFiddle: http://jsfiddle.net/AAUbA/
How do I fix it so I can see the rounded corners at the top of the outer?
Use overflow: hidden on your #box element:
#box {
height: 250px;
width: 250px;
border-radius: 10px;
background: #bbb;
overflow: hidden
}
See the updated Fiddle here: http://jsfiddle.net/AAUbA/2/
As an aside: it's worth considering adding in vendor-prefixes to ensure better cross-browser compatibility.
This is a good write-up on how to use the property.
You can use this tool to auto-generate the CSS you need.
Give #boxTitle the same radius on both the top corners as the box. As already suggested you can also set the overflow to hidden with overflow:hidden;. Both working but if you want to add something outside of #box it won't be displayed, with this code it will be displayed:
HTML:
<div id='box'>
<div id='boxTitle'>
This is the title
</div>
</div>
CSS:
#box {
height: 250px;
width: 250px;
border-radius: 10px;
background: #bbb;
}
#boxTitle {
width: 100%;
background: #000;
color: #fff;
text-align: center;
border-top-right-radius:10px;
border-top-left-radius:10px;
}
JSFiddle demo
add overflow: hidden on your #box element.