I don't know if it is possible, but is it possible for a <span> of variable text length to be horizontally aligned over an image? The one catch with this, is I'd like the <span> to have a background color and the background color block should overlap the image.
I've tried setting the <span> to display:inline-block but it doesn't seem to end up horizontally aligned. Here is the code if you don't want to look in the fiddle (the HTML here should remain the same if-at-all-possible)
The Code (https://jsfiddle.net/6c9gmvom/1/):
#wrapper {
width:100%;
}
.txt {
text-align:center;
margin:0 auto;
width:40px; /* ideally I would not want to use a fixed width here */
background-color:#ffffff;
}
img {
height:30px;
width:100%;
}
<div id="wrapper">
<img src="http://seedmagazine.com/slideshow/the_long_shot/img/8_the_long_shot_ss.jpg">
<div id="modulewrapper">
<span class="txt">hey</span>
<div id="module"></div>
</div>
</div>
You can align it with css. I've updated your fiddle, check it out to see the result https://jsfiddle.net/6c9gmvom/8/
The css I've added is:
#wrapper {
width:100%;
position: relative;
}
#modulewrapper {
text-align:center;
position: absolute;
top:0;
left:0;
right:0;
}
You can set the image as a background image... then set the span to display block.....
#wrapper {
width:100%;
}
.txt {
text-align:center;
margin: 10px auto;
background-color:#ffffff;
display: block;
text-align: center;
} /* ideally I would not want to use a fixed width here */
img {
height:30px;
width:100%;
}
#modulewrapper {
padding: 200px 0;
background: url(http://seedmagazine.com/slideshow/the_long_shot/img/8_the_long_shot_ss.jpg) no-repeat center center; }
<div id="wrapper">
<div id="modulewrapper">
<span class="txt">hey</span>
<div id="module"></div>
</div>
</div>
I'm not too sure I understand what it is you are asking.
If im not mistaken what you want is for the text to be on top of the image.
This can be done as seen https://jsfiddle.net/6c9gmvom/9/
#wrapper {width:100%;position:relative}
.txt {
position:absolute;
text-align:center;
margin:0 auto;
width:40px;
background-color:#ffffff;
z-index: 100;
width:100%;
}
img {
height:30px;width:100%;
}
.imageClass{
position:absolute;
left: 0;
top: 0;
}
.txt {
text-align:center;
margin:0 auto;
width:100%;
background-color:#ffffff;
position: fixed;
left: 0;
top: 15px;
}
img {
height:30px;
width:100%;
position: relatable;
}
Related
I have a confirm box and I want to show it in the middle of my screen.
margin 0 auto does not solve my problem.
How can I center it?
https://jsfiddle.net/y5u5obL0/
#confirmBox{
position:fixed;
margin:0 auto;
width:500px;
height:150px;
background:#ffffff;
border:1px solid #ddd;
}
It's because the element is fixed.
You need to add left: 0;/right: 0 in order for the element to be centered (in combination with margin: 0 auto). In doing so, the element technically stretches to fill the screen, but since it has a width specified, it will be contained and centered within the available space.
Updated Example
#confirmBox {
position:fixed;
left: 0;
right: 0;
margin:0 auto;
width:500px;
height:150px;
background:#ffffff;
border:1px solid #ddd;
}
Use the following code to vertically and horizontally center anything, change relative to absolute if you want to remove it from the page flow. Check out the demo to see it in action
(Demo)
HTML
<div class="wrap">
<div class="mycontent">
Hello World!
</div>
</div>
CSS
.wrap {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
display: inline-block;
max-width: 100%;
max-height: 100%;
}
Margin: 0 auto; will not work until you will not provide left:0; and right:0
check fiddle for working example :https://jsfiddle.net/nileshmahaja/y5u5obL0/1/
CSS
#confirmBox{
position:fixed;
margin:0 auto;
width:500px;
height:150px;
background:#ffffff;
border:1px solid #ddd;
left:0; /* Added Property */
right:0; /* Added Property */
}
I'm a newbie at this and I'm trying to figure out what I'm doing wrong. I want to centre everything within a div, but it won't budge no matter what I do.
Could you guys advise?
<div id="main1">
<h1>blah</h1>
<div id="intro">
<p>Bettina is a designer who is learning to code. She is very cluey and a bit fustrated because she doesn't know what she is doing.</p>
</div><!--intro-->
#main1 {
width:100%;
height:700px;
margin:0;
position:relative;
background-color:#CCC;}
#title {
position:absolute;
top:500px;
right:auto;
margin:auto;
}
#intro {
bottom:0px;
width:50%;
margin:0 auto;
position:absolute;
text-align:center;
}
Add text-align:center; to your <h1> for it to center. Also, remove position:absolute; from #intro for its text to center.
Working Code Snippet:
#main1 {
width:100%;
height:700px;
margin:0;
position:relative;
background-color:#CCC;
}
#main1 h1{
text-align:center;
}
#title {
position:absolute;
top:500px;
right:auto;
margin:auto;
}
#intro{
bottom:0px;
width:50%;
margin:0 auto;
/*position:absolute;*/
text-align:center;
}
<div id="main1">
<h1>blah</h1>
<div id="intro">
<p>Bettina is a designer who is learning to code. She is very cluey and a bit fustrated because she doesn't know what she is doing.</p>
</div><!--intro-->
</div><!--main1-->
You can make the parent DIV (#main1) get the center alignment first. So that elements under it are moved to the center. Als have made change for intro div(#intro) too so that it is centered and below your header.
#main1 {
width:100%;
height:700px;
margin:0;
position:relative;
background-color:#CCC;
text-align:center;
}
#intro {
margin: auto;
width:50%;
text-align:center;
}
Centering essentially means recognizing that text-align:centershould be reserved for centering text, so it's appropriate for an H1 tag or a P tag. When it comes to DIVs, if you work with margin and width styling you can usually compel a DIV to center. If you're having an issue see if you have applied position:absolute to the DIV and either remove it or change it to position:relative or if fitting position:static. Here's some code that I suggest which centers the text vertically and horizontally, as follows:
#main1 {
margin: auto;
width:100%;
height:600px;
background-color:#eee;
}
#main1 h1 {
padding-top:33%;
text-align:center;
}
#intro {
bottom:0px;
width:33%;
min-width:90px;
margin:auto;
background:#fff;
padding:32px;
}
#intro p {
text-align:justify;
}
Note: I changed the height so you could better see the results in the live demo; see below link.
I essentially worked with the HTML provided and used text of similar word count. The CSS centers the DIV containing the paragraph. The CSS for the P tag gives the illusion of centered text without actually applying text-align: center, to prevent each line of text being centered which can be visually annoying when reading sentences.
<div id="main1">
<h1>Centered</h1>
<div id="intro">
<p>Centering can be a lot of fun or it can lead to much frustration. It all depends. Sometimes it's a challenge and sometimes it's just what it is.</p>
</div><!--intro-->
Live demo here
Thank you for all your suggestions! This is what I've ended up doing:
#main1 {
width:100%;
height:700px;
margin:0;
background-color:#CCC;
position:relative;
}
#title {
display: block;
margin-left: auto;
margin-right: auto;
position:absolute;
top:300px;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
#intro {
width:50%;
text-align:center;
position:absolute;
bottom:0px;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
I have a div. Inside this div are 2 smaller divs. I want one of the smaller divs to have overflow:visible, and the other to have overflow:hidden. Can't figure out what selectors allow me to do this, I think I'm missing something super simple.
edit Sorry, let me rephrase that: I want the main div to have the style overflow:visible only applied to one of the child divs, while the main div also has the style overflow:hidden apply to the other.
Example:
http://jsfiddle.net/3fQBt/
<div id="body">
<div id="visible">This div should be visible.</div>
<div id="hidden">This div should be hidden.</div>
</div>
#body{
width:300px;
height:300px;
margin:20px;
position:relative;
float:left;
overflow:visible;
}
#visible{
width:100%;
height:100px;
margin-left:-20px; //this should overflow visibly
position:relative;
float:left;
}
#hidden{
width:100%;
height:100px;
margin-left:-20px; //this should be hidden
position:relative;
float:left;
}
something like this should get you going in the right direction.
<div id="body">
<div id="visible">This div should overflow.</div>
<div id="hidden-box">
<div id="hidden">This div shouldn't.</div>
</div>
</div>
#hidden-box {position:relative;overflow:hidden;height:100%;width:100%;}
Here's a couple of solutions:
HTML:
<div id="body">
<div id="visible">This div should overflow.</div>
<div id="hidden1">This div shouldn't.</div>
<div id="clip">
<div id="hidden2">This div shouldn't.</div>
</div>
</div>
CSS:
/* solution 1 uses text-indent to create the clipping and a red block to cover the excess background blue on the right */
#hidden1 {
width:100%;
height:100px;
background-color:#00f;
color:#fff;
text-indent: -20px;
position:relative;
float:left;
}
#hidden1:after {
content: "";
display: block;
position: absolute;
right: 0;
top: 0;
width: 20px;
height: 100%;
background-color: red;
}
/* solution 2 uses a second div with overflow: hidden to clip the text to get around the parent div's overflow: visible */
#clip {
overflow: hidden;
position:relative;
float:left;
width: 100%;
}
#hidden2{
width:100%;
height:100px;
background-color:#00f;
color:#fff;
margin-left:-20px;
position:relative;
float:left;
}
Fiddle here
Can't you reduce de width of the second div and remove the negative margin-left like this:
#hidden{
width: calc(100% - 20px);
height:100px;
position:relative;
float:left;
}
Demo
EDIT: Added calc() on CSS
You could do something like this, although it's pretty brittle, so not much use in the real world:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
*, *:before, *:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
body {margin: 0;}
#body{
width:300px;
height:300px;
background-color:#f00;
margin:20px;
position:relative;
overflow:hidden;
border:solid 1px #000;
}
#visible{
width:300px;
height:100px;
background-color:#0f0;
position:fixed;
left: 0;
}
#hidden{
width:300px;
height:100px;
background-color:#00f;
color:#fff;
position:absolute;
top: 100px;
left: -20px;
}
</style>
</head>
<body>
<div id="body">
<div id="visible">This div should overflow.</div>
<div id="hidden">This div shouldn't.</div>
</div>
</body>
</html>
TRY this,
#hidden {
width: 100%;
height: 100px;
background-color: #00F;
color: #FFF;
/*margin-left: -20px; <--- remove this*/
position: relative;
float: left;
overflow: hidden !important;/*add this*/
}
I have two divs, top div has style as follows:
.context_left {
float:left;
display:inline-block;
width:775px;
padding-left:10px;
margin-top:20px;
min-height:450px;
margin-bottom:20px;
}
while that the div below it has style:
.footer {
width:100%;
height:54px;
display:block;
position: absolute;
margin-top:80px;
left:0;
}
when the div context_left changes it's height the div footer remains at it's position, I want to move the footer div down if context_left div changes it's height. Can anyone please help me to do it?
Did you try to add this lign to your .footer
clear:both;
And delete
position: absolute;
You have set your footer with position: absolute;. That means your footer should be kinda fixed, but inheriting from its parent.
Try changing absolute to relative and see if that is what you want.
.footer {
width:100%;
height:54px;
display:block;
margin-top:80px;
left:0;
}
Removed the position: absoulte from footer. Try this. Because the footer will remain at the same position till position:absolute remains in style.
Css:
.context_left {
float:left;
width:775px;
padding-left:10px;
margin-top:20px;
min-height:450px;
margin-bottom:20px;
display:inline-block;
}
.footer {
width:100%;
height:54px;
display: block;
clear:both;
margin-top:80px;
left:0;
}
Working Fiddle: http://jsfiddle.net/dMawS/show
If a sticky footer at the bottom of the page is, what your looking for, then this can help you:
html {
width: 100%;
min-height: 100%;
margin: 0;
padding: 0;
}
body {
/* the margin compensates the footer plus the footer's top margin */
margin: 0 0 134px 0;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 54px;
}
The footer will always be at the bottom of the browser's viewport or below the content.
Demo
Try before buy
Looking at my attached image, I am trying to get the darker rectangle shape, containing an image (with red border), to be aligned at the bottom center of the lighter grey square.
I have tried setting the dark rectangle to position:absolute with a 0px bottom but then I lost my center alignment using margin:0 auto. I've also tried just using a vertical-align:bottom but still won't play ball!!!
What is the CORRECT way of doing this? One thing to bare in mind is that where I have used the sizes 170 x 105, these are actually unknown as they are dynamically produced elements, size is variable.
This is my code so far:
.item_preview { width:220px; height:200px; text-align:center; position:relative; background:#EEE; }
.item_preview_img_wrap { width:170px; height:105px; margin:0 auto; background:#CCC; vertical-align:bottom; }
.item_preview_img_wrap img { margin:0 auto; border:solid 5px #FF0000; }
<div class="gallery_item">
<div class="item_preview">
<div class="item_preview_img_wrap">
<img src="asf.jpg">
</div>
</div>
<div class="item_options">
options
</div>
<div class="item_info_header">
<div class="date">Date</div>
<div class="item">ID</div>
<div class="clear"></div>
</div>
<div class="item_info_main">
<p class="caption">Caption here</p>
<p class="subject"><strong>People:<strong> People here</p>
</div>
</div>
If you want to display image at bottom of light grey box then use CSS below:
.item_preview { width:220px; height:200px; text-align:center; position:relative; background:#EEE; }
.item_preview_img_wrap { width:170px; height:105px; margin:0 auto; background:#CCC; }
.item_preview_img_wrap img { border:solid 5px #FF0000; position: absolute; left: 50%; bottom: 0px margin-left: -halfofimagewidth }
Note: -halfofimagewidth is half of size of your image for example if your image is 100px and border is 5px then it should be -55px
If you want to display image at bottom of dak grey box at center then use CSS below:
.item_preview { width:220px; height:200px; text-align:center; background:#EEE; }
.item_preview_img_wrap { width:170px; height:105px; margin:0 auto; background:#CCC; position: relative; }
.item_preview_img_wrap img { border:solid 5px #FF0000; position: absolute; left: 50%; bottom: 0px margin-left: -halfofimagewidth }
Let me know if you still find any issue
Is the width of the inside box always going to be relative to the outer box? If so you could use a percentage for your left value like so...
http://jsfiddle.net/hcharge/zYprr/
Write like this:
.item_preview_img_wrap {
width:170px;
height:105px;
position:absolute;
left:50%;
margin-left:-85px;
bottom:0;
background:#CCC;
}