I want to put .image exactly behind .description-wrap. I've tried using padding and margins to center it but no go.
.image img {
display:block;
margin: 0 auto;
width:30%;
bottom:100px
}
https://jsfiddle.net/vsdLk90s/
I have made some changes to your code and explained them in comments.
.image {
position: absolute; /* Out of flow of current structure */
width: 70%; /* To regain the width of previous layout */
margin-top: -15%; /* Align it vertically */
z-index: -1; /* Priority reordering, place the image underneath the text */
}
JSfiddle
Related
http://jsbin.com/huzem/1/edit?html,css,output
In the above site how do i extend the border to the bottom of the page, compared to where it ends now(right at the edge of the content)? Also is there a way to make the border line up on the edge of the right and left sides of the screen without using negative values for margin such as i did by setting margin -right and margin-left to -4%?
You are setting the width to 93%, and then you are overriding that with your -4% thing - so, just don't do the first part. body has a margin of something by default: so get rid of that:
Put a border on your html and body, like - red. and look at what is actually going on. The body only stretches to fit your content... so you need to tell it how big it can be... (100%) then you have to tell the things inside what to do etc... This isn't the complete / perfect answer --- but it should get you closer to your goal.
html, body {
height: 100%; /* remind these guys they can be as tall as the viewport if they want */
}
body{
margin: 0; /* remove default margin */
color: white;
background-color: black; /* white on white is no helpful */
}
#main{
height: 100%;
}
#content{
border: solid white; /* you need a px value */
min-height: 100%;
}
a {
color:white; /* you don't need to specify for every state */
}
I suggest you to set the main div at the height of the window and set a height property to 100% to your content div like this :
#main {
width: 93%;
margin: -2% auto 0% auto;
position: absolute;
top: 0;
bottom: 0;
}
#content {
border: solid white;
margin: 0% -4% 1000% -4%;
height: 100%;
}
The border will now extend to the bottom of the page!
Ok...here is my problem:
I have a webpage with html & body set from css to:
body,html{
position: fixed;
width: 100%;
height: 100%;
overflow:hidden;
}
and also a webkit tag to disable the scrollbar:
/*Disable scrolling*/
::-webkit-scrollbar {
display: none;
}
inside of the body i use 3 divs to cover the entire available space in the page:
(i will not use the actual css code for the divs because it's unimportant for this matter and i will write only a basic code to get the ideea)
As i said, three relative divs to cover the available 100% height and width:
.div1{
position: relative;
width: 100%;
height: 10%;
}
.div2{
position: relative;
width: 100%;
height: 80%;
}
.div3{
position: relative;
width: 100%;
height: 10%;
}
Now here is my problem:
* inside the middle div (div2) i have 4 concentric circles all of which are absolute divs wrote in css3. It is really important that these divs remain "absolute".
here is the css for them:
.size-large,
.size-normal,
.size-small,
.main-frame{
position:absolute;
left:0;
right:0;
margin:0 auto;
background: transparent;
border: 3px dotted #999;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
top: 50%;
}
.main-frame{
width: 50%;
padding-bottom: 50%;
margin-top:-25%; /* push back half */
}
.size-large{
width: 30%;
padding-bottom: 30%;
margin-top:-15%; /* push back half */
}
.size-normal {
width: 20%;
padding-bottom: 20%;
margin-top:-10%; /* push back half */
}
.size-small {
width: 10%;
padding-bottom: 10%;
margin-top:-5%; /* push back half */
}
Problem is that those circles does not resize acording to the relative div of which they belong.
Their width/height given in percentages, is set acording to the body element.
I want my design to be liquid and to use only the available webpage without scrolling but also to resize all it's elements on any display.
FULL SCREEN RESULT: http://jsfiddle.net/Nn7mU/1/embedded/result/
CODE VIEW: http://jsfiddle.net/Nn7mU/1/
From my understanding, you want to ensure your concentric circles to stay within the blue div whilst maintaining a perfect round circle according to the percentage width you have set (i.e. .main-frame {width: 50%}, .size-large {width: 30%), .size-normal {width: 20%}, .size-small {width: 10%})
Your circles are indeed adjusting according to your blue div (based on width % not height %). So since your blue div has width=100%, the circles will adjust according to that only.
You will need to find a way of using BOTH height and width % so it maintains aspect ratio and central positioning.
I would recommend reading on this thread which provides possible solutions:
HTML and CSS Fluid Circle
I'm using the RefineSlide responsive slideshow and I can't center it, it always sticks to the left of my page.
#slideshow{
position: relative;
width: 960px;
height:auto;
left: 50%;
margin-left: -480px;
}
I've tried adding the above to my CSS, and although this successfully centers it, it's unfortunately no longer responsive as when I test on the iPhone the slideshow doesn't fit to the screen.
#slideshow{
position: relative;
width: 100%;
height:auto;
}
When I style it like this, it is responsive... but sticks to the left. What do I need to change with this CSS to center it and keep it responsive?
It somewhat depends on your other markup, but in general this is enough:
#slideshow {
margin: auto;
width: Npx;
/* also display: block if the element doesn't already have it */
}
Sample.
Basically I have a Picture in a div nested in 2 divs. I wanted to overlay a piece of tape onto it at the corner of the picture.
So I made a div for that piece of tape image and put it at the bottom of the document giving it the position of relative and giving it these attributes.
#tape
{
width: 100px;
height: 65px;
position:relative;
left: 25px;
top: -662px;
}
And here is the Picture's attributes:
#character-spotlight
{
margin-left:50px;
width:250px;
height:250px;
float:left;
z-index:1;
}
Bot of these Div's are nested into
#content
{
width:800px;
height:1360px;
background-image:url(Cork.Board.png);
background-size:100%;
float:left;
display:block;
}
Which is itself nested into
#container
{
width: 1024px;
height:1600px;
margin-left:auto;
margin-right:auto;
margin-top: 50px;
display:block;
}
Here is the webpage
www.workaholicsfans.com/characters-files/Adam-Demamp.html
It works fine in Chrome but not IE and Firefox.
Any help would be greatly appreciated
(There is no link in your post) I can hardly believe the situation you described and provided css could work. The fact that you have it working in Chrome is just pure luck i guess, are you might have been playing with the numbers to make it fit.
The solution is actualy rather simple.
<div class='picture-wrapper'>
<img class='picture' src='picture.../>
<img class='tape' src='tape... />
</div>
then in the css
.picture-wrapper {
position: relative; /* this now acts as the reference for position absolute of the children */
}
.tape {
display: block;
position: absolute; /* position according to its parent */
top: 0; /* top position */
left: 0; /* left position */
z-index: 5; /* bring to front */
}
That should do the trick.
edit:
i just saw you added the link. If you want the piece of tape to overflow the picture edges, the easy way would be to add some padding-top and padding-left to the wrapper. something like this:
padding: 8px 0 0 8px;
Or if you want it to be absolute positioned according to the page container:
#tape {
height: 65px;
left: 325px;
position: absolute;
top: 300px;
width: 100px;
}
(But I must admit that I like PeterVR's code better since this keeps things relative, which comes in handy if you position 'new' stuff above the #tape div).
I have made a fiddle for reference: http://jsfiddle.net/kLFn9/
The overflow:hidden in question is highlighted.
Basically, i'm using :hover:after to show a tool tip. but the parent element has overflow: hidden on it. How can i force the element hovered to escape the parent element?
Relevant CSS:
div {
width:500px;
height:200px;
background:red;
margin: 50px;
overflow: hidden; /* this rule */
}
span:hover:after {
content: attr(data-name);
color: black;
position: absolute;
top: -150px;;
left: 0;
}
Unfortunately, there's no (easy) way to allow a child tag to override the effects of the overflow:hidden declaration on the parent div. See: Allow specific tag to override overflow:hidden
Your only possible recourse would be with javascript: first grab the span's offset relative to the document, then move it to another location in the DOM (i.e. direct child to the body), set its position to absolute, and use the offsets you grabbed to set its left and top properties, that would locate it at the same position within the document, but now it's not contained by the div, and so no longer needs to obey overflow:hidden.
You can use margin-top and padding-top.
padding-top will extend your parent area, but a negative margin-top will keep it in the expected position.
It will look like you're escaping the overflow, but in fact you're not.
div {
width:500px;
height:200px;
background:red;
margin: 50px;
overflow: hidden; /* this rule */
background-clip: content-box; /*use this to constrain the background color within the content-box and do not paint the padding */
padding-top: 200px; /* space required to display the tooltip */
margin-top: -150px; /*200px - 50px of the original margin*/
}
span {
background: blue;
color: white;
position: relative;
top:100px;
display:block;
width: 100px;
margin: auto;
}
span:hover:after {
content: attr(data-name);
color: black;
position: absolute;
top: -150px;;
left: 0;
}
<div>
<span data-name="here">hover</span>
</div>
This may introduce pointer events problems, but you can fix them using pointer-events then.
I am using simple z-index for force the element hovered to escape the parent element. Please check
div {
width:500px;
height:200px;
background:red;
margin: 50px;
overflow: hidden; /* this rule */
}
span {
background: blue;
color: white;
position: relative;
top:100px;
display:block;
width: 100px;
margin: auto;
}
span:hover:after {
content: attr(data-name);
color: black;
position: fixed; /* Here I replaced position abosolute to fixed */
top: 10px; /* Here I replaced top -150px to 10px */
left: 250px; /* Here I replaced positionleft 0 to 250px */
z-index:99999;} /* Here I added new z-index property to 99999 */
<div>
<span data-name="here">hover</span>
</div>
There is no way using plain CSS to overflow a parent elements borders with a child, if it was set to overflow:hidden;. On possible CSS option is to use a sibling element to that one which has overflow:hidden; set and show that as popup.
I'm not sure what your trying to get at, but I recreated a tooltip framework for you to view. It's basically smoke and mirrors where I call :hover and the .class associated with it.
http://jsfiddle.net/WE8Dw/
Hope this helps.
In some cases you can escape with div{position: absolute;}
You can set child's position to fixed.