I'm wanting to get an image overflowing a div, whilst not distrupting flow of text.
You can see it live at http://songbundle.org*
Example image above. Currently the text and form move right and lose their centering due to the image.
My current code below:
HTML:
<div class="box">
<div id="boxarrow"></div>
<p>text goes here</p>
</div>
CSS:
.box {
margin:60px auto 0 auto;
width:240px;
border:solid 1px #7889BC;
background-color: #AEB8D7;
text-align:center;
}
#boxarrow {
background:url(image/arrow.png);
width:77px;
height:81px;
display:block;
margin-left:-60px;
float:left;
}
Your help is appreciated!
Hey there,
One solution you could try would be to apply position: relative; to your .box element and position: absolute; to your #boxarrow element. This will take the #boxarrow element out of the normal flow of the document, leaving other elements unaffected by its positioning.
Then, you can adjust it's position (relative to the .box element, since we gave it position: relative;) with top, right, left, and bottom. So, your #boxarrow element might end up looking something like this:
#boxarrow {
position: absolute;
top: 30px;
left: 20px;
}
Again, this is just one possible solution, but it seems as though it would work best considering your situation.
Hope this helps!
remove
margin-left:-60px; float:left;
from your #boxarrow and add
left:-60px; position:absolute;
Then add
position:relative;
to your .box
Final result:
.box {
background-color: #AEB8D7;
border: 1px solid #7889BC;
margin: 60px auto 0 auto;
position: relative;
text-align: center;
width: 240px;
}
#boxarrow {
background: url("image/arrow.png");
display: block;
height: 81px;
left: -60px;
position: absolute;
width: 77px;
}
Just change the positioning to absolute like this...
#boxarrow {background:url(image/arrow.png); width:77px; height:81px; display:block; margin-left:-60px; float:left;position: absolute;}
Related
I would like to hide some part of the child, so everything outside of the parent container isn't visible (so part of my picture should be cropped by the height of the container)
I followed lot of forums answer that told to put the container to relative (mine must be relative so this wasn't a problem)
.img-container {
margin : auto;
overflow:hidden;
width:250px;
position: relative;
height: 250px;
border : 5px dotted gray;
}
.img-container object, .img-container img{
position : absolute;
display: inline-block;
}
.img1{
top : 0px;
left : 0px;
width:60%;
}
.img2{
width: 52%;
left :120px;
top:50px;
}
<div class="img-container">
<object class='img1' data='https://svgshare.com/i/6Pz.svg'>
</object>
<object class='img2' data='https://svgshare.com/i/6Pz.svg'>
</object>
</div>
https://jsfiddle.net/u0upm3j3/2/
ANSWER :
Well well well... Something that i don't understand : it work now.
What did i do ? Nothing at all, apart of restarting Chrome.
Thanks you D3nj, Cavdi for your answer and Creaforge and Daniel for comment, sorry to make you lose a bit your time. But really, i don't understand how it can work now and not before...
The example in the pos is working good.
img-container {
margin : auto;
overflow-x: hidden;
overflow-y: hidden;
width:250px;
position: relative;
height: 250px;
border : 5px dotted gray;
}
.img-container object, .img-container img{
position : absolute;
display: inline-block;
}
.img1{
top : 0px;
left : 0px;
width:60%;
}
.img2{
width: 52%;
left :120px;
top:50px;
}
use this as general on your css and remove the overflow from the image style
*, html, body {
overflow-x: hidden;
}
I am fairly new to CSS and although I have found examples for centring a IMG within a DIV, because I have a float: right; on an outer DIV it doesn't work as I want. This basically makes the DIVs appear in the correct place, but the IMGs are not central.
Here is a CSSDesk link for an example of my scenario: http://www.cssdesk.com/2pgBf
I'm trying to get the green share icon to appear centered both vertically and horizontally within the outer red boxes (DIVs).
I'm sure there are lots of enhancements that can be made to my CSS, but please only answer with solutions to my problem (though feel free to comment on this post with tips for CSS).
Hope that makes sense....
You can do position: relative; on the parent and then:
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
On the child, this will center it.
DEMO HERE
This will work just as well and no positioning needed.
JSFiddle Demo
.social-media-icon {
background: Red;
margin: 2px;
float: right;
display: inline;
position: relative;
}
.social-media-icon a {
display: block;
}
.social-media-icon a img {
width: 16px;
height: 16px;
display: block;
margin:5px;
}
When i need to do that kind of code i set the parent tag, in this case the DIV to position: relative and the image to position: absolute, top:50%, left: 50% and margin: half the dimension just do this in your code:
.social-media-icon{
position:relative;
}
.social-media-icon a img{
position:absolute;
top:50%;
left:50%;
margin: -8px 0 0 -8px;
}
I've been struggling for hours to try and get this simple border to appear on top of a div of a set height, but it's just not happening. I've checked out z-indexing and ':after', but nothing seems to be working.
The content's parent is: (establishes the content to be in the middle of the page)
#content {
position: relative;
margin-left:auto;
margin-right:auto;
top: 50px;
width:800px;
}
The content is then filled by the div-class "greycontent":
.greycontent {
position: relative;
z-index: 1;
height: 350px;
background: url(images/stacked_circles.png) repeat;
}
The area that is now covered by the background URL attempts to contain a border (away from edges):
.fill {
position:relative;
z-index: 2;
border-style: solid;
border-width: 2px;
border-color: red;
}
It just won't work. If my description was unclear, this image should clear up what I'm trying to convey:
Thank you!
JsFiddle
Just in case you do not want to put a ::before or ::after elements, you can simply use the background-clip property.
.myDiv {
background-clip: padding-box;
}
Exemple: https://codepen.io/geekschool/pen/JBdpdj
Is this what your trying to achieve? jsFiddle
#content {
position: relative;
margin: 0 auto;
top: 50px;
width:800px;
overflow:hidden;
background:#ccc;
width:800px;
}
.greycontent {
position: relative;
z-index: 1;
height: 350px;
width:350px;
border:1px solid #fff;
background:#ccc;
margin:0 auto 60px;
}
Updated your jsFiddle.
I'm trying to make it so that both the image and links stay in the browser window all the time. This is the site. When loading it on an iPad, the centred content is bigger than the window as shown .
I'd like it to display like (obviously without black borders). Is this possible?
The trick to center an element without any additional markup, is to use translate:
div {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
Here's the fiddle: http://jsfiddle.net/QE8KV/
P.S. Don't forget the vendor prefixes.
The proble of Joseph Silber's answer is that if the window is smaller than your content, the content gets cutted.
Then you can use a trick with floating: http://jsfiddle.net/QE8KV/2/
HTML:
<div id="top"></div>
<div id="center">Text</div>
CSS:
html,body{
height:100%;
width:100%;
margin:0;
padding:0;
}
#top {
float: left;
height: 50%;
margin-top: -150px;
width: 100%;
}
#center{
background: #2D285E;
box-shadow: 1px 1px 4px #231E5C;
color:white;
width: 300px;
height: 300px;
margin:0 auto;
clear:both;
}
Is there a simple way to style element like this?
Supposed to be used on a mobile so CSS3 is fully available. Can't think of a simple way. Images are out of question.
It has to be this blocky and there supposed to be a text within (this is a blocky 8-bit button)
This jumps off of feeela's beginnings, but it's different enough to warrant its own answer.
Rather than putting a colored block overly, it only adds red-colored elements, allowing background to show through. HOWEVER, to calculate it properly (so that they're square corners!) I had to set a fixed width height. There's probably some sort of wacky way to do this with percentages, but for proof of concept it was too headachey to contemplate. Since the requirement is for fixed height variable width, this should work.
The pseudo-elements need to have content or they will "collapse". The content can be empty, but that property needs to be set.
CSS:
/* main button block */
.button {
display:inline-block;
background: #f00;
position: relative;
line-height: 60px;
text-align: center;
padding: 0 20px;
height: 60px;
margin-left: 0.5em;
}
/* common background color to all */
.button, .button::before, .button::after {
background-color: #f00;
}
/* shared styles to make left and right lines */
.button::before, .button::after {
content: "";
position: absolute;
height: 50px;
width: 5px;
top: 5px;
}
/* pull the left 'line' out to the left */
.button::before {
left: -5px;
}
/* pull the right 'line' out to the right */
.button::after {
right: -5px;
}
Fiddle: http://jsfiddle.net/3R9c5/2/
How about this?
HTML:
<div class="block">(text goes here)</div>
CSS:
body {background:#1990D7;}
.block {background:#FF1200; line-height:52px; margin:8px auto; width:359px;
position:relative; text-align:center; font-weight:bold; color:yellow}
.block::before {display:inline-block; background:#FF1200; content:'';
position:absolute; top:4px; left:-4px; bottom:4px; width:4px;}
.block::after {display:inline-block; background:#FF1200; content:'';
position:absolute; top:4px; right:-4px; bottom:4px; width:4px;}
Edit: updated after the latest insights into the demands of the question.
You can insert each of that four blocky-corners by appending pseudo elements via ::before or ::after.
e.g.:
.button {
background: #f00;
position: relative;
}
/* corner top left */
.button::after {
position: absolute;
top: 0; left: 0;
width: 5px; height: 5px;
background: #00f;
}
/* corner top right */
.button::after {
position: absolute;
top: 0; right: 0;
width: 5px; height: 5px;
background: #00f;
}
/* corner bottom left */
/* … */
The CSS border-radius attribute
maybe this will help you. Or you can just add new class, "cadre" for example
.cadre
{
border-radius: 10px;
}
to your css file, then affect it to the div.
I don't think border-radius can accomplish that. This is the simplest way I can think of:
http://jsfiddle.net/DpLdt/
CSS:
body {
background:blue;
}
div#clipcorners {
width:500px;
height:200px;
background:red;
position:relative;
margin:100px auto;
}
span#a,span#b {
position:absolute;
width:10px;
height:180px;
top:10px;
background:red;
}
span#a {
left:-10px;
}
span#b {
right:-10px;
}
HTML:
<div id="clipcorners">
<span id="a">
</span>
<span id="b">
</span>
</div>