This question already has answers here:
CSS technique for a horizontal line with words in the middle
(34 answers)
Closed 8 years ago.
Tried everything, with ul's... div's... but it doesn't appear how it should do.
The main div has margin 0 auto. The main div is 1030px width.
I bet it's a stupid thing...
Demo Fiddle
HTML
<div><span>Things to Know</span></div>
CSS:
div{
text-align:center;
}
div:after{
position:relative;
display:block;
border-top:1px solid grey;
top:-10px;
height:1px;
content:'';
}
div span{
background:white;
position:relative;
z-index:1;
}
Related
This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Closed 3 years ago.
I have something like that
<div id="hover_parent">
<h3>Something</h3>
<h3>Something else</h3>
</div>
that looks something like that
#hover_parent{
background-image:url(animage.jpg) no-repeat;
background-position:bottom left;
background-size:cover;
width:100%;
}
h3{
margin-top:20px;
width:50%;
text-align:center;
transition:0.2s;
}
h3:hover{
margin-top:0px;
}
So what I want to achieve, is that the child-elements move a bit up when hovering them. What they do of course by using a smaller margin-top-amount when hovering.
But my problem then is that the whole parent moves (especially the background-image) up too when hovering a child-element.
How could I prevent that?
None of my child-elements do have a real absolute height, so I didn't come along with min-height and calc but that could do it - nor?
try this. h3 required display:inline-block;
#hover_parent{
background:url(https://dummyimage.com/600x400/000/fff) no-repeat;
background-position:bottom left;
background-size:cover;
width:100%;
color:#fff;
height:200px;
}
h3{
margin-top:20px;
width:50%;
text-align:center;
transition:0.2s;
display:inline-block;
}
h3:hover{
margin-top:0px;
}
<div id="hover_parent">
<h3>Something</h3>
<h3>Something else</h3>
</div>
This question already has answers here:
How to make a div 100% of page (not screen) height?
(5 answers)
Closed 7 years ago.
I have a div called 'alert' which is used in the same way as as the javascript alert() function. It covers the whole page until you scroll down, then the part of the page which was not previously visible is not covered. Is there a way to cover the whole page and not just the visible viewport? NB. I don't want to use position:fixed. this demo demonstrates what I mean. Thank you.
#alert{
position:absolute;
top:0%;
bottom:0%;
left:0%;
right:0%;
background-color:rgba(187,201,247,0.5);
z-index:3;
text-align:center;
font-size:20px;
}
CSS
html,body{
position:relative;
}
#text{
height:1000px;
}
#alert{
position:absolute;
top:0%;
bottom:0%;
left:0%;
right:0%;
background-color:rgba(187,201,247,0.5);
z-index:3;
text-align:center;
font-size:20px;
}
DEMO
This question already has answers here:
Display: Inline block - What is that space? [duplicate]
(5 answers)
Closed 8 years ago.
I got two divs
<div>abc</div>
<div>def</div>
with css as this
div{
display:inline-block;
padding:0px;
margin:0px;
}
body{
padding:0px;
margin:0px;
}
how can i remove the gap/space between first and second div
link for the same http://cssdeck.com/labs/i5oysgmt
Remove the spacing at the code level.
Write like this.
<div>abc</div><div>def</div>
div{
display:inline-block;
padding:0px;
margin-left:-4px;
}
Demo
That is because of the white space in inline-block elements
html
<div>abc</div><div>def</div>
You can read here more
This question already has answers here:
Position: absolute and parent height?
(8 answers)
Closed 8 years ago.
I have an image with absolute position image inside div tag. What i want to resize the div tag according to image if i resize the browser. My code are here:-
CSS
#parent{
width:225px;
height:auto;
position:relative;
border:1px solid #000;
}
img{
position:absolute;
}
HTML
<div id="parent">
<img src="images/photo1.jpg" />
</div>
Actually div tag border doesn't containing an image which is absolute positioned.
Please help.
Your question is not well worded. But maybe you need something like this?:
#parent{
width:100%;
max-width:250px;
height:auto;
position:relative;
border:1px solid #000;
}
img{
max-width:100%;
}
are you sure you need it absolute?
This question already has answers here:
How do I vertically align text in a div?
(34 answers)
Closed 8 years ago.
Here you can show an example of my code : Jsfiddle
<div id="gameTimeBar-holder">
<div id="gameTimeBar"></div>
<div class="progressBarText">Actions : 852 minutes</div>
#gameTimeBar-holder{width:200px;height:15px;background:grey; position:absolute; top:45px; left:5px;}
#gameTimeBar{width:0;height:100%;background:purple;}
.progressBarText{position:absolute;z-index:10;top:0;left:0;width:100%;text-align:left; color: white;}
How can i vertical center my text in the div progressBarText ?
add line-height to your text
try this:
.progressBarText{
position:absolute;
z-index:10;
top:0;
left:0;
width:100%;
line-height:15px;
text-align:left;
color: white;
}
DEMO