I put down an example below that I have trouble with:
<div class="text1">Text 1</div>
<div class="text2">Text 2</div>
Link: http://jsfiddle.net/qhoc/SQpdu/5/
Text 1 has pseudo-element but the height being adjusted with the pseudo-element height.
Requirements:
a. Text 1 height same as Text 2 height
b. The red rectangle in the middle of the button.
c. The text must have space around them
d. Everything has to be position:relative, at least not absolute or fixed because this is just a button that could be placed anywhere.
I could just (a) remove padding: 6px 12px; and add height: 30px; but then my text won't be in the middle with space around it OR (b) add another inner div within Text 1 and make that the red rectangle but I rather not add div.
Is there a way to work around this?
UPDATE: I changed the correct link and clarify the requirements.
I don't know what exactly you want but try this maybe helpful
.text1, .text2 {
width: 200px;
padding: 8px 12px;
display:block;
background-color: gray;
margin: 5px;
height:20px;
}
.text1{
height:28px;
padding:0px 12px 8px 12px;
}
.text1:before {
content:"";
background: red;
display: block;
position: relative;
width: 20px;
height: 10px;
left: 110px;
top: 15px;
}
DEMO
You use this style code
.text1, .text2{
width:120px;
margin:0 auto;
height:30px;
}
Related
couldn't find a topic exactly about my problem.
I have these two divs, DEMO here:
<div id="green"></div>
<div class="tab">Tab</div>
I want the tab to be fixed to the bottom right of the green div, in a specific position:
0px distance from the top of the green div (which I think is the default anyway),
and 50px distance from the right edge of that green div.
CSS:
#green {
width:1020px;
height:200px;
background:green;
}
.tab {
background-color: #EEE;
width: 150px;
height: 15px;
border-bottom-left-radius: 1em;
border-bottom-right-radius: 1em;
text-align: center;
color: black;
font-family: Arial, Helvetica, sans-serif;
font-size: .77em;
padding-top: 3px;
position: absolute;
right: 465px;
border: 1px solid #E9E0E1;
border-top: 0;
}
In the demo you can see that once you resize the window, the tab is moving away.
I actually found this out while browsing my test page with my Iphone, as all my desktop browsers windows were maximized so I couldn't even notice it...
Simply replace your right property with left:0px;
Check the DEMO
Updated Fiddle here: https://jsfiddle.net/vfrL7qub/9/
Wrap the two divs into a container div with position:relative.
For your tab position it with
top:0;
margin-right:50px;
Consider following example:
http://jsfiddle.net/AsGk4/
As you can see the two boxes overlap instead of being positioned next to each other with float:left property. When I remove the child .text DIV, the boxes appear as they should. I assume this behavior comes from .text 's position:absolute property, but why does this have impact on parent DIV's appearance?
HTML
<div class="box">
<div class='text'><span>Some text</span><div>
</div>
<div class="box">
<div class='text'><span>Some text</span><div>
</div>
CSS
.box {
position: relative;
display:inline-block;
width:100px;
height:100px;
background-color:#0000FF;
float:left;
}
.box:before {
content:'';
position: absolute;
left: 1%;
top: 1%;
width: 98%;
height: 98%;
border: 1px solid white;
}
.text {
position: absolute;
bottom:9px;
left:5px;
width: 95%;
text-align:left;
}
.text span {
color: white;
font: bold 12px/16px Helvetica, Sans-Serif;
background: rgb(0, 0, 0);
/* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 1px;
padding-left:3px;
padding-right:1px;
}
EDIT:
Silly me, forgot to close the div tags. Apologies.
First of all you don't need float: left; if you are using display: inline-block; and vice versa..
If you are using float then don't forget to clear them and if you are sticking with display: inline-block; then I assume you will need vertial-align: top; as they are aligned to baseline by default. So use any one, as using both seems redundant
Also it's worth noting that using display: inline-block; will cause you white-space
And what's the issue? You are not closing your div tags, there are many ways to deal with that.
Demo
If you want to refactor your code, the below snippet
padding: 1px;
padding-left:3px;
padding-right:1px;
Can be written as padding: 1px 1px 1px 3px; which is nothing but shorthand syntax
Close the text divs and it works just fine.
<div class="box">
<div class='text'><span>Some text</span></div>
</div>
<div class="box">
<div class='text'><span>Some text</span></div>
</div>
See updated Fiddle
your closing <div> tags aren't closing - you need to change them to </div>. This is causing the boxes to nest inside of one another rather than being side by side.
I am having an issue with positioning text inside a div. I want the image on the right top corner (which I was able to do) and the text kind of center the bottom text in the box.
This is an example of what I want to do: http://jsfiddle.net/Lucky500/Nq769/
I created a div .bottom_box and added:
.bottom_box {
position: relative;
bottom: -50px;
left: 50px;
}
Is there an easier or more correct way to do this?
Alright -
Added text-align:center to your and elements.
Set your outer_box position to relative.
Set the img value to absolute and positioned with 0.25 em top and right instead of margin.
http://jsfiddle.net/mr_mayers/Nq769/2/
.outer_box {
border: solid #6ac5ac 3px;
display: inline-block;
width: 250px;
height: 200px;
margin: .5em;
Position: relative;
}
.bottom_box {
position: relative;
bottom: -50px;
}
p {
color: blue;
text-align: center;
}
img {
position: absolute;
padding: 3px;
top: 0.25em;
right: 0.25em;
}
h1 {
text-align: center;
color: red;
}
You can achieve your layout as follows:
For this HTML:
<div class="outer_box">
<img src="http://placehold.it/100x50">
<div class="bottom_box">
<h1>$25 OFF</h1>
<p>$25 off your first cleaning!</p>
</div>
</div>
Try the following CSS:
.outer_box {
border: solid #6ac5ac 3px;
display: inline-block;
width: 250px;
height: 200px;
margin: 0.5em;
}
.bottom_box {
clear: both;
border: 1px dotted gray; /* for demo only, optional */
}
img {
float: right;
padding: 3px;
margin: 0 0 1em 1em;
}
p {
color: blue;
margin-left: 50px;
}
h1 {
color: red;
margin-left: 50px;
}
Since your image is floated, simply clear the .bottom-box.
Use margin-left on the child elements to get any white space.
See sample: http://jsfiddle.net/audetwebdesign/3SjRG/
You can use text-align: center if you are centering the p and h1 content, but I was not sure if you wanted ragged left or ragged right alignment on the text block;
You'd be better off using text-align:center and position: absolute
See example
There are some solutions.
An other way is to make the box relative and positioning the text and image inside absolute.
I would create a container div with a border for your box, then set the inner divs (one with your image and one with your text) to position absolute. then you can use top:0; right:0; for the picture on the right corner. then bottom:xx; and left:yy; for positioning the text div.
This is just a different method than you used. If it works, doesn't break in any situation, and is simple, then it's correct. Many ways to skin a cat in programming.
I'm trying to make a menu bar centered horizontally in the header of my page. For some reason, i can't get the centering to work. I made a little test page roughly displaying the problem: JSFiddle. The inner div has to be 5px away from the bottom, that's whatI use the position: absolute for.
I've tried searching on the web alot, but everything I find gives me the same result, or none at all. Most problems I found were when text-align: center wasn't in the container div, but even with it, it still doesn't work.
I removed two css attributes and it work.
position: absolute;
bottom: 5px;
Check this Fiddle
5px from bottom. Fiddle
This is not a perfect way, but it's still kind of useful. I first think of this idea from this Q&A.
You'll have to make some change to your HTML:
<div id="container">
<div id="wrapper-center"> <!-- added a new DIV layer -->
<div id="inner_container">
TEXT ELEMETNES IN THIS THING!!!!
</div>
</div>
</div>
And the CSS will change to:
#container {
background: black;
width: 100%;
height: 160px;
position: relative;
}
#inner_container {
display: inline-block;
width: auto;
color: white;
background-color: #808080;
padding: 5px;
position: relative;
left:-50%;
}
#wrapper-center {
position:absolute;
left:50%;
bottom:5px;
width:auto;
}
Demo fiddle
The trick is to place the wrapper at the given top-bottom position, and 50% from left (related to parent), and then make the true content 50% to left (related to the wrapper), thus making it center.
But the pitfall is, the wrapper will only be half the parent container's width, and thus the content: in case of narrow screen or long content, it will wrap before it "stretch width enough".
If you want to centre something, you typically provide a width and then make the margins either side half of the total space remaining. So if your inner div is 70% of your outer div you set left and right margins to 15% each. Note that margin:auto will do this for you automatically. Your text will still appear to one side though as it is left-aligned. Fix this with text-align: centre.
PS: you really don't need to use position absolute to centre something like this, in fact it just makes things more difficult and less flexible.
* {
margin: 0;
padding: 0;
}
#container {
background: black;
width: 100%;
height: 160px;
}
#inner_container {
color:red;
height:50px;
width: 70%;
margin:auto;
text-align:center;
}
If you don't want a fixed width on the inner div, you could do something like this
#outer {
width: 100%;
text-align: center;
}
#inner {
display: inline-block;
}
That makes the inner div to an inline element, that can be centered with text-align.
working Ex
this CSS changes will work :
#container {
background: black;
width: 100%;
height: 160px;
line-height: 160px;
text-align: center;
}
#inner_container {
display: inline;
margin: 0 auto;
width: auto;
color: white;
background-color: #808080;
padding: 5px;
bottom: 5px;
}
Try this:
html
<div id="outer"><div id="inner">inner</div></div>
css
#outer {
background: black;
width: 100%;
height: 160px;
line-height: 160px;
text-align: center;
}
#inner{
display: inline;
width: auto;
color: white;
background-color: #808080;
padding: 5px;
bottom: 5px;
}
example jsfiddle
You may set the inline style for the inner div.
HTML:
<div id="container">
<div align="center" id="inner_container" style="text-align: center; position:absolute;color: white;width:100%; bottom:5px;">
<div style="display: inline-block;text-align: center;">TEXT ELEMETNES IN THIS THING!!!!</div>
</div>
</div>
Here is working DEMO
I am using the hover event over a <div> to make an additional description about the element appear.
The problem is that when you hover on a <div> it shifts the others around. Basically I would like everything else to stay in place and the word blob to just appear over the top of them.
Here is an example of a jsfiddle outlining the problem
How can I change it so the other blocks do not shift?
Your extra_info needs to be positioned absolute to the block div
.link{
position:relative;
margin : 2em 0em 2em 1.5em;
float: left;
width: 10.4em;
min-height: 17em;
max-height: 18.5em;
text-align: center;
padding: 0em 0.1em 0.1em 0.1em;
background-color: #276277;
}
.block { position:relative; float:left; }
.extra_info{
z-index: 900;
position: absolute;
top: 30px;
left: 30px;
display: none;
width: 275px;
background: #FFFFBC;
border-style: inset;
border-width: 5px;
}
Also, I do believe you need to do this with jquery
$('.link').hover(function() {
// show the box
$(this).siblings('.extra_info').toggle();
});
Here is a complete demo
Here is a demo where the extra_info is above each parent div
You're missing an underscore.
<div class="extra info">
should be
<div class="extra_info">