Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I am trying to create a css ribbon, responsive would be great. Otherwise I'll just show it on desktop.
Here is the link to my dev site: http://website-test-lab.com/sites/xpect/
If you take a look at the the orange callout area underneath the header images, I'd like to have to have it look like the attached image.
Any help would be appreciated.
You can simply do it with before and after pseudo classes and the border triangle trick. Your HTML would be super simple:
<div class="ribbon">...</div>
And your CSS would be this:
.ribbon {
background: #f47d19;
position: relative;
height: 50px;
width: 300px;
margin:0 25px; //Half of height
}
.ribbon:before,
.ribbon:after {
content: '';
position: absolute;
height: 0;
width: 0;
top: 0;
border: 25px solid transparent; //Half of height
border-top-color: #f47d19;
border-bottom-color: #f47d19;
z-index: -1; //Place triangles behind div
}
.ribbon:before {
left: -25px; //Half of height
}
.ribbon:after {
right: -25px; //Half of height
}
Fiddle Example Here
Then for the responsive part, you would simply change the width, height, margin and position properties to match whatever resolution you are at.
If you're using Bootstrap, you can use the .img-responsive class to the image. If not, try to add height:auto in css for that. That'll make it responsive.
| parent div |
| div float left (image of >) | div float left (content) | div float left (img <) |
|div style clear both |
this way you can throw all of your content into the middle div and have the whole thing responsive
could also do this with a basic table
Related
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 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
How can I replace the image tag src value through css ? and i want support in ie8 ,firefox ,chorme,safari
<div class="any">
<img src="images/i.png"/>
</div>
replace this src value through css only.
Thanks
try setting a background image and then moving (with padding) out of the box the original image
something like this...
EDIT i had to tweak it a bit to have it working...
.any img {
display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: url(http://placehold.it/150) no-repeat;
width: 150px;
height: 150px;
padding-left: 150px;
}
... and here is the working example
http://jsfiddle.net/nNaRn/1/
You can't change the src tag of the image with CSS, because the image src is nothing to do with CSS.
The closest you can do is set the background image of the div and get rid of the img tag altogether:
.any {
background-image: url('images/myimage.png');
}
Beyond this, you will need to use Javascript.
You cannot change the src through CSS. Although what you can do is define a blank div, and give it a width, height, and background-image through CSS. The only drawback with that approach is that the element will not behave like an image for the user (drag/drop, rightclick to save, etc.).
div.any {
width: 200px;
height: 200px;
background-image: url('./some-url-that-you-can-override-by-another-stylesheet');
}
The only thing that you can do is to set background-image to .any and display:none to img but you will need to set also width and height of the div, since div without content have width of 100%, and height of 0.
.any {
width: 300px;
height: 300px;
background-image: url(image/1.gif);
}
.any img {
display: none;
}
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
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;
}
I'm currently working on a new design for a web site, and I have a little problem with my footer (image) and getting the content to overlay.
For the footer I'm using this at my starting point: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
You can see the new design here: [edit]site doesn't exist anymore, sorry about that[/edit]
http://nubi.dk/dev/ (content and design is currently evolving thus doesn't fit the question anymore - sorry for that)
What I would like is to have the green part (content) to continue all the way down over the image at the bottom, but for some reason (I cannot see why) it goes behind.
Just add "position:relative" in layout.css for #content.
#content {
background-color: #00FF00;
margin: 0 auto -130px 0;
position: relative;
width: 960px;
z-index: 9999;
}