Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
Hi i need help with centering few images on my prestashop webpage.
I need help with 3 circles on bottom of the page (not with social icons) . I don't how center the images in circles.
Please help
You can go for absolute position those images inside their container, and work your way from there like so:
position: relative for .certifikat class, so any absolute positioned children, will be bound to their container
position: absolute for <img> inside the .certifikat class
So to wrap it up, for the .certifikat class use:
.certifikat{
position: relative;
overflow: hidden;
/*rest of your code*/
}
If you know the width and height of these <img> tags, you can center them by:
.certifikat img{
position: absolute;
top: 50%; left: 50%;
margin-left: -(halftheirwidth);
margin-top: -(halftheirheight);
}
OR if you don't know their exact width and height you can use the translate method:
.certifikat img{
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
}
Hope this points you in the right direction
Related
This question already has answers here:
Css height in percent not working [duplicate]
(8 answers)
Closed 8 years ago.
Fiddle - http://jsfiddle.net/6axdexfj/
Once in a great while I come across a problem, and when I do I search to find a solution when I can't seem to figure it out myself.
So I'm building a web design app, and thoughout today I been reconstructing it so no garbage css is added in.
Today I added some simple styling to an element and I noticed that if I don't have position: absolute; or fixed on a standalone div that it's height is not changed when encoded with percent's.
.box1 {
width: 100%;
height: 50%;
background-color: rgb(0, 244, 85);
}
I noticed this years ago and still to this day I don't know why it does that. I always avoid it by applying the following to my body.
body {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
Can somebody explain why this is?
Add this to your css and it should work
CSS
html, body {
height: 100%;
}
The problem is that your body and html container does not have the full height by default, thus your div by default will not have full height. To avoid this in the future, use reset.css to make your life easy :)
LINK TO reset.css
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I'm trying to figure out how the card swipe/flip effect was done as seen on this site: http://catalystconference.com/ (under the "Our Favorites" and similar sections). Can this be accomplished using only CSS?
Don't rely on text-indent, because it forces the browser to actually render the negative space that you have specified. Instead, try using absolute positioning and left/top/bottom/right properties to help position (and subsequently reveal/hide) your hidden pane.
For your HTML, I have taken the liberty to create two panes in your <div>: a visible and a hidden one.
<div>
<p class="pane-visible">Visible pane.</p>
<p class="pane-hidden">Hidden pane.</p>
</div>
CSS wise, the visible pane is positioned as is, but the hidden pane is positioned absolutely (but relative to its parent) that is 100% off from the top (therefore sits at the bottom of the parent container, but out of sight). The trick is to change the top property of the hidden pane when the parent is hovered, to bring it to the top. The animation is easily done with the CSS3 property: transition.
div {
overflow: hidden;
position: relative;
width: 300px;
height: 300px;
}
div > p[class|="pane"] { /* Targets element with the class "pane-" (notice the dash) */
box-sizing: border-box; /* Forces width and height to be at 300px even with padding */
padding: 1em;
width: 300px;
height: 300px;
}
div > p[class*="hidden"] {
position: absolute;
top: 100%;
left: 0;
transition: all .25s ease-in-out; /* You might want to add vendor prefixes */
}
div:hover > p[class*="hidden"] {
top: 0;
}
Here is my proof-of-concept fiddle: http://jsfiddle.net/teddyrised/TTv4q/2/
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I was wondering if anyone could help me out fix my the top portion of my webpage to stay.
I have tried using the position:fixed attribute, but this hinders everything as then my content overlaps the fixed divs.
My website is here:
www.crookedcartoon.co.uk/print.html
I would like everything above the navbar, navbar included to stay glued to the top of the page and the content to scroll under it.
I realise this may mean i'll have to change the majority of my images to jpg instead of png. However, i was wondering if there was anyway around this? As in create a false line that the content scrolls under, then disappears, rather than reaching the top of the page, by where you will see it through the transparent parts of the PNG images. I don't want to use an iframe, really, unless this is the only way.
Thanks!
An iframe is certainly not the right choice here. Put a div around the stuff you want to have on top, put position: fixed on it and position it to the top left corner.
<div class="ontop">
<div id="top"></div>
<div id="logo"></div>
<div id="contact"></div>
<div id="navbar"></div>
</div>
After that, add some margin-top on #content-holder that equals to the height of .ontop. This is necessary because it is taken out of the document flow (because of position: fixed) and content will go under it.
If you also add background-color: white to .ontop, your transparency problems will be gone.
Tried to replicate your setup, here is a working demo.
you may try this
please update below css as i have updated the image by making the portion at the bottom transparent,making the top background white. [1 - DOWNLOAD IMAGE AND CHECK IT]
#ontop {
background: inherit;
height: auto;
margin-top: -10px;
position: fixed;
z-index: 10;
}
#contact {
background: none repeat scroll 0 0 white;
height: 45px;
margin-bottom: 1px;
margin-left: -5px;
margin-top: -8px;
position: relative;
vertical-align: top;
width: 1127px;
}
#logo {
height: 62px;
margin-left: -10px;
position: relative;
width: 1127px;
z-index: 1111;
}
]
1
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
Having a little problem with the comment part on the website i'm working on:
http://whybaguio.com/php/profile/businessprofile.php?id=103#
See how the ADD YOUR OWN FEEDBACK! div goes down together with the Facebook comment. I don't know how to not let it go down with the facebook comments.... Lol, I'm not really sure if I'm explaining my self right but I hope you guys get it...
I tried positioning it relative and absolute but it goes out of its parent div....
Please help me out, thank you!
Okay, this is a problem with how to use position:absolute; What you need to do is change your code like this:
#feed {
background: white;
height: 280px;
padding: 10px;
margin-top: 295px;
overflow-y: auto;
margin-left: -580px;
position: relative;/*this needs to have a position for .secondcomment to 'hook on' to*/
}
.secondcomment {
position: absolute;
top: 10px;
right: 0;
}
If i understand it right: place the "ADD YOUR OWN FEEDBACK" div before the "Facebook comment" div in your HTML code.
Your "ADD YOUR OWN FEEDBACK" div has a "float: right" property and blocks with "float" should go before non-floating blocks.
You can set float: left; property to .fb-comment class, and remove margin-left property from .secondcomment class.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
The below css coding is used in my page. But in chrome it displays the image fine. but in firefox it breaks. I dont know why it shows like that. If anybody know the solution for this please help me. Thanks in advance.
.vote
{
position:absolute;
margin: 53px 3px 0 115px;
}
http://domian.com/mysite/pollpage.php?id=2&mview=72
This is my website page. The vote image alignment is correct in chrome but not in firefox
add position relative
.contentbox
{
position: relative;
}
and remove margin ,
add bottom and right
.vote {
position: absolute;
bottom: 0;
right: 45px;
}
...
Now define your main div #polling .pollpagewidth div .contentbox position relative and give to img tag position absolute and define right or bottom value according to your design
Hi now add this css in your style sheet and fixed this problem
#polling .pollpagewidth div .contentbox{
position:relative;
}
.contentbox > img {
bottom: 16px;
margin: 0;
padding: 0;
position: absolute;
right: 43px;
}