I have these 3 boxes
Which are constructed in the following way:
<ul class="home_boxs">
<li class="home_box light_blue">
<div class="news clearfix"></div>
</li>
<li class="home_box blue">
<div class="news clearfix"></div>
</li>
<li class="home_box dark_blue">
<div class="news clearfix"></div>
</li>
</ul>
What I am looking to do now is to add a small shadow image (custom png) underneath each box. What would be the best way to have this achieved? Some advise would be very much appreciated.
See sample:
You could do something like that:
ul {
list-style: none;
}
li {
float: left;
}
.home_box {
position: relative;
width: 150px; /* to change with your size */
height: 100px;
/* To add more styling according to your needs */
}
.home_box:before {
content:' ';
position: absolute;
width: 100%;
height: 10px;
background: url(//placehold.it/150x10); /* placeholder */
border-radius: 50%;
bottom: -20px;
}
or, if you don't wanna use images:
.home_box:before {
content:' ';
position: absolute;
width: 100%;
height: 10px;
background-color: #999999;
border-radius: 50%;
bottom: -20px;
box-shadow: 0 0 10px #999999;
}
Example with image - Example without image
Related
.addcircle{
width:15%;
height:30px;
position:relative;
}
.addcircle:hover{
background: #1a1aff;
color:white;
}
.addcircle:hover a{
background: #1a1aff;
color:white;
}
.addcircle:after{
position: absolute;
z-index: 1;
left: 80%;
/* top: 0%; */
width: 30px;
height: 30px;
margin-top: 0px;
border-radius: 50%;
content: "";
}
.addcircle:hover:after{background: #1a1aff;}
<div id="main">
HOOVER LINK BELOW
<div class="addcircle">
some page
</div>
<div class="addcircle" style="width:20%">
some page 2
</div>
</div>
How to do same effect like main(1st link) for responsive width??
As you can see on example, 1st hover look nice but 2nd one not rly... any clue?
Because when i check for bigger or smaller screen my circle move some where.
Not gonna do all the work for you but it looks like you're over thinking it. You're already messing with border-radius which is the key:
a {
color: white;
padding: 5px;
border-radius: 0 1rem 1rem 0 ;
background-color: blue;
}
Some Page
<br/>
<br/>
Some Page 2
Depending on the needs of your application (will all lines fit on one line on all expected viewports?), applying this style on hover could be all you need.
As you can see below, I've used right property on .addcircle:after instead of left and used a fixed value of negative half of the width which is -15px this will lead to a semi-circle effect and the right side of your links, without regarding width of the element.
.addcircle{
width:15%;
height:30px;
position:relative;
}
.addcircle:hover{
background: #1a1aff;
color:white;
}
.addcircle:hover a{
background: #1a1aff;
color:white;
}
.addcircle:after{
position: absolute;
z-index: -1;
right: -15px;
width: 30px;
height: 30px;
margin-top: 0px;
border-radius: 50%;
content: "";
}
.addcircle:hover:after{
background: #1a1aff;
}
<div id="main">
HOOVER LINK BELOW
<div class="addcircle">
some page
</div>
<div class="addcircle" style="width:20%">
some page 2
</div>
</div>
However, there's no need to use a <div class="addcircle"> around your links. It's possible to implement exact same effect with only <a> elements.
a{
width:20%;
display: block;
height: 30px;
position:relative;
}
a:hover{
background: #1a1aff;
color:white;
}
a:after{
position: absolute;
z-index: -1;
right: -15px;
width: 30px;
height: 30px;
margin-top: 0px;
border-radius: 50%;
content: "";
}
a:hover:after{
background: #1a1aff;
}
<div id="main">
<span>HOOVER LINK BELOW</span>
some page
<a style="width: 50%" href="">some page 2</a>
</div>
Just add the display property to your .addcircle div:
.addcircle{
width:15%;
height:30px;
position:relative;
display: flex;
}
and for .addcircle:after change right position instead of left:
.addcircle:after{
position: absolute;
z-index: 1;
right: -12px;
width: 30px;
height: 30px;
margin-top: 0px;
border-radius: 50%;
content: "";
}
CSS/HTML styled codes only. Jquery and the like will not work for my page.
I am trying to make it so each box responds to the circle shaped tab above it.
I want the boxes to start out as being invisible/faded but to appear when the corresponding circle tab is clicked.
Likewise, I would like the option for the boxes to be able to disappear after clicking the button a second time, reverting to its original invisible/faded out state.
I am not sure whether I should be using a fadeout/fadein element or an onclick one as I am new to this idea.
I've read some pages about it but I can't seem to incorporate it into my own codes, and the ones that I thought might have been useful ended up being Jquery.
I've seen it done before similarly to how I wish to use them and I would like to understand it better.
I apologize if something of this nature has been asked already, but I couldn't find any examples to help me and I've been searching for quite some time now. All I know about coding is what I've taught myself which is a struggle on its own. I'd appreciate any feedback.
CSS:
body {
background-color: #666;
overflow-x: hidden;
}
#profile {
border: 0px;
background-color:transparent;
}
/*--Content--*/
#container {
position: absolute;
top: 80px;
left: 420px;
height: 500px;
width: 1170px;
}
.textbox {
position: relative;
float: left;
top: 120px;
height: 200px;
width: 200px;
margin: 3px;
padding: 10px;
border: 2px solid #fff;
background: rgba(0, 0, 0, .6);
overflow: auto;
}
/*--Navigation--*/
#nav {
top: 200px;
display: inline-block;
width: 100%;
}
#nav li {
float: left;
margin: 0 90px;
}
#nav a {
display: inline-block;
width: 100px;
padding: 3px 0;
}
/*--Nav Tabs--*/
#circle {
position: fixed;
width: 30px;
height: 30px;
overflow: auto;
background-color: #000;
border-radius: 50px;
box-shadow: 0 0 15px #fff, inset 0 0 10px #6699cc;
margin: 3px 0 0 30px;
}
#circle:hover {
background-color: #ccc;
}
HTML:
<div id="container">
<div id="navbox">
<ul id="nav">
<li><div id="circle"></div>
</li>
<li><div id="circle"></div>
</li>
<li><div id="circle"></div>
</li>
</ul>
</div>
<a name="1"></a>
<div class="textbox">Info 1.</div>
<a name="2"></a>
<div class="textbox">Info 2.</div>
<a name="3"></a>
<div class="textbox">Info 3.</div>
</div>
One way of doing this is using labels, inputs with input:checked and an adjacent child selector.
Here's a demo demonstrating:
http://jsfiddle.net/7DUFS/
I am trying to create a site with just one actual page containing multiple pseudo-pages in form of divs. There are four divs and I have set the width of the wrapper in which the divs are to 200%(so that I get two rows of two divs each) and set the divs to 50% width(so that they cover the whole page of the viewport).
I have four divs named home, like, dislike and contact. I first created a tag link to the like div and it worked. But tag links to no other divs are working and shows only the second page everytime.
Here is the jsfiddle : JsFiddle of my site
What am I doing wrong?
Css:
#wrapper { max-width : 100%;
overflow : hidden;
position : relative;
}
#header { position : fixed;
float : left;
}
#logo { margin-left: 0px;
padding-top: 20px;
height: 50px;
width: 300px;
border : solid black;
background-color: red;
}
#nav {margin-top : 20px;
width : 50%;
height: 300px;
border : solid black;
}
#pages { width: 200%;
position : relative;
border : solid black;
float: left;
height : 800px;
}
#main-page, #like-page, #dislike-page, #contact-page {float:left;
position : relative;
width:50%;
height: 800px;}
div.content { margin-top: 100px;
}
div H2 {margin-left: 180px;
margin-bottom: 20px;
}
div p {margin-left: 180px;
margin-right: 50px;
}
Here is a working fiddle on what you are talking about:
http://jsfiddle.net/X4URc/3/
I used html:
<div class='container'>
<div class='navbar'>
<div align='center'> <a class='menu1 menu-item'>Item 1</a>
<a class='menu2 menu-item'>Item 2</a>
<a class='menu3 menu-item'>Item 3</a>
<a class='menu4 menu-item'>Item 4</a>
</div>
</div>
<div class='content'>
<ul class='content-container'>
<li class='contents content1'>Content 1</li>
<li class='contents content2'>Content 2</li>
<li class='contents content3'>Content 3</li>
<li class='contents content4'>Content 4</li>
</ul>
</div>
</div>
CSS:
.menu-item {
background: black;
color: white;
padding: 15px;
cursor: pointer;
}
.menu-item:hover {
background: white;
color: black;
}
.menu-item:not(.menu1) {
margin-left: -8px;
}
.navbar {
background: black;
padding: 15px;
width: 700px;
}
.container {
background: white;
width: 730px;
margin: 0 auto;
}
.content1 {
margin-left: -40px;
}
.contents {
padding-bottom: 400px;
padding-right: 668px;
height: 500px;
background: red;
list-style-type: none;
display: inline;
}
.contents:not(.content1) {
margin-left: -4px;
}
body {
background: #ccc;
}
.content {
width: 730px;
background: white;
overflow: hidden;
}
.content-container {
width: 9999999px;
height: 500px;
}
Jquery:
$('.menu1').click(function(){
$('.content1').css({'margin-left' : '-40px'});
});
$('.menu2').click(function(){
$('.content1').css({'margin-left' : '-770px'});
});
$('.menu3').click(function(){
$('.content1').css({'margin-left' : '-1500px'});
});
$('.menu4').click(function(){
$('.content1').css({'margin-left' : '-2230px'});
});
// for more add -730px every time
//If you don't want animations change .animate() to .css()
Instead of having lots of divs, I used a <ul> within a div with overflow hidden and then styled it display: inline;
http://www.briligg.com/toll.html
The last 3 list items in the text section only show as links when your mouse is over the far right side of them. That is the only place that triggers the :hover background color change, too. The first 2 work fine.
The css validates. There are a bunch of validation errors in the html, but nothing significant.
I can´t figure it out.
The relevant css is from line 66 to 121 in the briligg.css document, and line 9 to 47 of the head section of the html doc.
The html code is from line 79 to 117.
external css:
.menutop, .menubottom, .menunow {
float: left;
width: 120px;
position: absolute;
}
.menutop li, .menubottom li {
list-style: none;
position: absolute;
left: 0;
margin: 10px 14px 5px 14px;
}
.menunow li {
border-bottom: 5px solid #52473f;
border-top: 10px solid #52473f;
border-left: 14px solid #52473f;
border-right: 14px solid #52473f;
outline: #3b3b3b solid 1px;
padding-bottom: 3px;
list-style: none;
position: absolute;
left: 0;
}
.menutop li, .menutop a, .menubottom li, .menubottom a {
width: 120px;
height: 120px;
display: block;
}
div.textmenu {
float: left;
width: 150px;
margin: 30px 10px 0 10px;
position: relative;
}
ul.textmenu {
position: absolute;
left: 0;
}
li.textmenu {
background-color: #52473f;
margin-bottom: 3px;
padding: 5px 7px;
border: 1px solid #3b3b3b;
width: 134px;
list-style: none;
text-align: right;
color: #fd8ee2;
}
li.textmenu a {
text-decoration: none;
color: #fd8ee2;
}
li.textmenu:hover {
background-color: #3b3b3b;
}
internal css:
.menutop {
height: 120px;
}
.menunow {
height: 120px;
top: 140px;
}
#frailty {
top: 0;
}
#frailty {
background: url(images/legdrugnav.png) 0 0;
}
#toll {
top: 0;
}
#toll {
background: url(images/legdrugnav.png) 0 -120px;
}
#option {
top: 135px;
}
#option {
background: url(images/legdrugnav.png) 0 -240px;
}
#weighing {
top: 270px;
}
#weighing {
background: url(images/legdrugnav.png) 0 -360px;
}
ul.textmenu {
top: 275px;
}
.menubottom {
height: 270px;
position: absolute;
top: 380px;
}
html:
<div class="textmenu">
<ul class="menutop">
<li class="menutop" id="frailty" title="Drug Use and Abuse">
</li>
</ul>
<ul class="menunow">
<li class="menunow" id="toll">
</li>
</ul>
<ul class="textmenu">
<li class="textmenu">
Prohibition funds organized crime
</li>
<li class="textmenu">
Prohibition causes corruption
</li>
<li class="textmenu">
Prohibition kills
</li>
<li class="textmenu">
Prohibition means poverty
</li>
<li class="textmenu">
Prohibition means wasted resources
</li>
</ul>
<ul class="menubottom">
<li class="menubottom" id="option" title="the option">
</li>
<li id="weighing" title="the pros and cons">
</li>
</ul>
</div>
You have an <ul> with the class menubottom overlap your navigation, hence preventing the underlaying <a>-Elements from receiving the mouse-overevent.
With Firefox + Firebug Addon youc an easily see this if you use the Element Selector and move above that links (only left 3/4 of the links are affected)
It´s because I didn´t specify class="menubottom" in the 2nd <li> element for the menubottom ul.
I have a CSS problem that I'm not able to figure out. I'm not even sure it is possible. What I want is the following:
I have three buttons/tabs like this http://sv.tinypic.com/r/21cf85t/6 and when you click one tab a different div should show for each tab like this http://sv.tinypic.com/r/21l5y85/6 or http://sv.tinypic.com/r/2dbrv5u/6.
I know how to show/hide the divs with jQuery but the problem is that the divs will increase in height http://sv.tinypic.com/r/k2xxfb/6 and then they will push the other tabs and divs down. Is there a way to create what I am trying to do?
I'm not a guru in CSS so if you have an example to look at or can post code here I would be very very thankful!
This is the HTML I'm using for my tabs:
<div class="MainContent">Content</div>
<div class="TabsHolder">
<div id="Tab1">
<div style="width:200px">
Content Tab 1
</div>
</div>
<a class="Button1" href="#Tab1"></a>
<div class="clearer"></div>
<div id="Tab2">
<div style="width:200px">
Content Tab 2
</div>
</div>
<a class="Button2" href="#Tab2"></a>
</div>
CSS:
.MainContent {
float: left;
}
.TabsHolder
{
float: left;
}
.Button1
{
float: left;
margin: 100px 0px 20px 0px;
background: url(images/Button1.png) no-repeat 0 0;
height: 79px;
width: 27px;
}
#Tab1
{
width: 200px;
margin: 80px 0px 20px 0px;
border: solid 1px #ACCD45;
position: relative;
float: left;
overflow: hidden;
padding: 20px;
}
.Button2
{
float: left;
margin: 0px 0px 20px 0px;
background: url(images/Button2.png) no-repeat 0 0;
height: 97px;
width: 27px;
}
#Tab2
{
width: 200px;
margin: 0px 0px 20px 0px;
border: solid 1px #ACCD45;
position: relative;
float: left;
overflow: hidden;
padding: 20px;
}
div.clearer
{
clear: both;
margin: 0px;
margin-bottom: 0px;
margin-top: 0px;
padding: 0px;
line-height: 0px;
height: 0px;
width: 0px;
overflow: hidden;
}
Here is what I put together using pure CSS - Tested in Firefox, IE8 and Chrome (not sure about others). Try out a demo here.
Note: I wanted to make a comment about one thing in your original HTML - you can't add a background image to a link <a> tag.
CSS
.MainContent {
float: left;
width: 400px;
height: 400px;
background: #444;
}
.buttons {
float: left;
margin: 10px 0 10px 0;
width: 27px;
clear: both;
}
.Button1 {
background: #555 url(images/Button1.png) no-repeat 0 0;
height: 79px;
}
.Button2 {
background: #555 url(images/Button2.png) no-repeat 0 0;
height: 97px;
}
.Button3 {
background: #555 url(images/Button3.png) no-repeat 0 0;
height: 127px;
}
.tabsHolder {
float: left;
position: relative;
}
.tabs {
width: 200px;
height: 200px;
margin: 0 0 20px 0;
border: solid 1px #ACCD45;
background: #444;
overflow: hidden;
padding: 20px;
display: none;
position: absolute;
left: 0;
}
#tab1 { top: 0; }
#tab2 { top: 98px; }
#tab3 { top: 215px; }
a:hover .tabs {display: block;}
HTML
<div class="MainContent">Content</div>
<div class="tabsHolder">
<a href="#tab1"><div class="buttons Button1">1</div>
<div id="tab1" class="tabs">
Content tab 1
</div>
</a>
<a href="#tab2"><div class="buttons Button2">2</div>
<div id="tab2" class="tabs">
Content tab 2
</div>
</a>
<a href="#tab3"><div class="buttons Button3">3</div>
<div id="tab3" class="tabs">
Content tab 3
</div>
</a>
</div>
</div>
You will need to define the pages (divs to hide/show) and tabs in two separate divs.
These will want to be floated next to each other, so you will have something like
<div class="pages">
<div class="page" id="tab1">....</div>
<div class="page" id="tab2">....</div>
</div>
<div class="tabs">
<div class="tab">Tab 1</div>
<div class="tab">Tab 2</div>
</div>
You can then set a min-height on pages (height for IE6, put into a conditional stylesheet), set pages and tabs to both float left, both with fixed widths.
Finally when you attach your event to $('#tab a'), make sure you iterate over all the pages hiding the non-relevant ones.
Without JavaScript, you cannot hide one of your divs, you can only have an HTML page per tab (like this or this).
If you want something more dynamic, you should use JavaScript. The tabs system is a built-in component of jQuery, for instance. (Homepage, live demo).
Hope that'll help you.