In blue there are my div.
I would like with CSS make sure that the space between the div and the image there is and the button over the black top bar but I do not know how to do, any ideas?
My CSS
.login_reg{
float: right;
color: #e0e0ba;
width: 200px;
height: 200px;
}
.login_reg button{
color: #FFF;
font-weight: bold;
background-color: Transparent;
background-repeat:no-repeat;
border: none;
cursor:pointer;
overflow: hidden;
outline:none;
}
You can use a margin-top to set how tall the border is and space it out
you can use clear:both to avoid float:right impact for next div
Use margin-top in div having class .login_reg`
.login_reg{
float: right;
color: #e0e0ba;
width: 200px;
height: 200px;
margine-top: 50px;
}
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 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.
In the following code, I'd like the #nav div to overlap the #content div. Even though #nav has a higher z-Index value, it is still being overlapped by #content.
FIDDLE: http://jsfiddle.net/Zfcba/
HTML:
<div id="page">
<div id="nav"></div>
<div id="content"></div>
</div>
CSS:
#page
{
margin: 20px 0px;
padding: 10px;
display: block;
width: 70%;
height: 200px;
border: 1px solid gray;
}
#nav
{
float: left;
width: 40px;
height: inherit;
border: 1px solid red;
z-index: 999;
}
#content
{
float: left;
margin-left: -20px;
width: 200px;
height: inherit;
border: 1px solid blue;
background: lightgray;
z-index: 0;
}
Pretty simple code, but I can't understand what I'm doing wrong. Any help would be appreciated.
Note: I tried the same without the outer div (http://jsfiddle.net/Zfcba/1). Still the same problem. :(
Add this to your css
#above{position:absolute;}
z-index only works for absolute positioned elements. As the browser ignores the value for z-index, it will then render it in the order the elements are in your html-code. As #content is later in your code than #nav, #content will be displayed over #nav.
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>