So I made a ribbon effect on my navigation no problem, but when I tried to do the same thing with the footer, I ran into issues with the right fold not appearing. This is the css I wrote for the footer ribbon.
.ribbon {
background:#8346ab;
padding:1em;
margin-left:-40px;
padding-left:40px;
padding-right:40px;
position:relative;
width:100%;
}
.ribbon:after, .ribbon:before{
content:"";
display:block;
position:absolute;
top:-10px;
border:10px solid #1f364c;
border-top-width:0;
}
.ribbon:after{
right:0;
border-right-color:transparent;
border-top-width:0;
border-left-width:0;
border-right-width:40px;
}
.ribbon:before {
left:0;
border-left-color:transparent;
border-top-width:0;
border-right-width:0;
border-left-width:40px;
}
This should have worked but not sure why the right fold isn't showing up. Any suggestions?
Related
I'm trying to create a button with inverted half circles on the sides.
I've tried creating a half-circle and placing it at the end of the button but the outcome doesn't look pleasant.
The outcome should look something like this:
button with half circle at both end
You can just use CSS after and before Pseudo-Elements or else you can also use the CSS shadow property to achieve this kind of design. The below code shows with CSS after and before Pseudo-Elements.
https://codepen.io/Lijo_Chacko/pen/abLjEaw
HTML
<button class="circled-button">
Button
</button>
CSS
.circled-button
{
background:#000;
box-shadow:0px 0px 0px;
border:0px;
padding:20px 15px;
min-width:250px;
position:relative;
overflow:hidden;
color:#fff;
font-size:20px;
border-radius: 9px;
}
.circled-button:after
{
content:'';
display:block;
width:20px;
height:20px;
border-radius:50px;
position:absolute;
left:-9px;
background:#fff;
top:50%;
transform:translateY(-50%);
}
.circled-button:before
{
content:'';
display:block;
width:20px;
height:20px;
border-radius:50px;
position:absolute;
right:-9px;
background:#fff;
top:50%;
transform:translateY(-50%);
}
I have a .top div with variable height, and i want to position .nav bellow the .top div so i wanna something like .nav-top = .top-height.
How to do that, can be in jQuery?
.nav {
display:none;
width:100%;
height:100%;
right:0;
top:80px;
position:absolute;
background: #1581C4;
padding-top:10px;
padding-bottom:10px;
z-index:6;
}
.top {
content:url(../images/top480.jpg);
z-index:0;
border-bottom:1px solid #000000;
width:100%;
}
I think javascript is worth a try:
<script type="text/javascript">
window.onload=function{
document.getElementById([yournavdivid]).style.top = document.getElementById([yourtopivid]);
}
</script>
I want the whole div clickable, but it will not show. I want it to change when hovered as well. I believe I have used this same coding before and it has worked, not sure why I am having issues.
<div class="clickable_one">
</div>
div.clickable_one {
float:right;
}
div.clickable_one a {
position:absolute;
width:120px;
height:30px;
text-decoration:none;
background-image:url("images/forums_link copy.png");
}
div.clickable_one a:hover {
position:absolute;
width:120px;
height:30px;
text-decoration:none;
background-image:url("images/forums_link_2 copy.png");
}
The problem is you are using float:right on your div and position:absolute on your <a> which forced everything to move on right corner of screen. If you use InspectElement you will have clear view. I placed a border around your div as example to check location of div
I'v updated your CSS a bit and content is showing.
div.clickable_one
{
border: 2px solid blue;
}
div.clickable_one a {
width:120px;
height:30px;
text-decoration:none;
background-image:url("images/forums_link copy.png");
}
div.clickable_one a:hover
{
width:120px;
height:30px;
text-decoration:underline;
background-image:url("images/forums_link copy.png");
}
DEMO
I'm designing a fairly simple web site but as I don't have much experience I have a very simple question.
I've done the layout in a way that displays all the necessary information without the need of scrolling down. But for some reason it's there.
The site's css is as following:
#charset "utf-8";
/* CSS Document */
html {height:100%;width:100%; margin:0;}
body{
height:65%;
font-size:100%;
font-family:Calibri;
background-image:url(/images/gradient.png);
background-repeat:repeat-x;
background-color:#FFF0;
color:#00080;
margin-left:15%;
margin-top:3%;
margin-right:15%;
width:65%;
}
#banner {
height:40%;
background: url(/images/banner.jpg) right scroll no-repeat;
}
#left_container{
width:20%;
height:80%;
}
#left_container img{
width:100%;
}
a{
text-decoration:none;
color:#FFF;
border:none;
}
#menu{
width:100%;
height:85%;
font-size:120%;
}
#menu td{
background:#999;
color:#FFF;
padding:4%;
}
#menu tr td a:hover{
background:#CCC;
color:#333;
}
#right_container{
width:75%;
height:auto;
position:relative;
left:+26%;
top:-80%;
}
#right_container h2{
font-size:300%;
}
#right_container h3{
font-size:200%;
}
But the web site looks like this (and the scroll appears when I set the right_container h2 title (home) size in the css bigger than 190%....but I need it to be as I set...or it will be to small).How can I remove the scroll bar?
image -> http://i29.tinypic.com/hx3uy8.jpg
You can control the appearance of scrollbars in CSS by using the Overflow property. So you could try adding overflow: hidden to your BODY CSS declaration and see if that helps.
I am trying to create a little growl like div for a site. It works great in Firefox, but not IE6 (haven't tried IE7, but I still need to support IE6).
In Firefox: Centered text with image floated to right side of div
In IE6: Centered text with image to the left of text.
I've tried switching the img and span tag order, but that causes a line break in FF between the two, and IE renders the image on the right of the text, but not docked to the right side of the div.
HTML
<div id="growl">
<img src="close.gif" class="action" title="hide" />
<span class="text">Grrrrrr.......</span>
</div>
In css:
#growl {
background-color:yellow;
text-align:center;
position:absolute;
top:0; left:0;
width:98%;
padding:10px 0;
margin-left:1%;
z-index:10;
border:1px solid #CCCCCC;
}
#growl > .text {
font-size:120%;
font-weight:bold;
}
#growl > .action {
float:right;
cursor:pointer;
}
The > selector does not work on IE 6.
Just get rid of it:
#growl .text {
font-size:120%;
font-weight:bold;
}
#growl .action {
float:right;
cursor:pointer;
}
The > css selectors are not supported by IE6, try just removing them.
No point in adding a class to each elements in the div when you only have one img and span. Do this instead for cleaner code.
<div id="growl">
<img src="close.gif" title="hide" />
<span>Grrrrrr.......</span>
</div>
-
#growl {
background-color:yellow;
text-align:center;
position:absolute;
top:0; left:0;
width:98%;
padding:10px 0;
margin-left:1%;
z-index:10;
border:1px solid #CCCCCC;
}
#growl span {
font-size:120%;
font-weight:bold;
}
#growl img {
float:right;
cursor:pointer;
}