Is it possible to make a circle navigator ?
example a circle divided into 4 and each division has different links on it?
and also if it is possible can i put animations on them or color change when a mouse hover? tnx...
Use border-radius
HTML
<div id="circle-container">
<div class="quarter top-left">link 1</div>
<div class="quarter top-right">link 2</div>
<div class="quarter bottom-left">link 3</div>
<div class="quarter bottom-right">link 4</div>
</div>
CSS
#circle-container{width:100px;height:100px}
.quarter{width:50px;height:50px}
.top-left{border-top-left-radius:50px;background:#e3f9d1;float:left}
.top-right{border-top-right-radius:50px;background:#c0f7f7;float:right}
.bottom-left{border-bottom-left-radius:50px;background:#fc92f5;float:left}
.bottom-right{border-bottom-right-radius:50px;background:#333;float:right}
a{
text-decoration:none;
color:red;
width:50px;
line-height:50px;
display:block;
text-align:center
}
DEMO
Related
This question might be simpler in conditional CSS.
I have five rows with some contents and based on some condition, I'm adding a class named 'previous' to show different background color.
When I hover the previous class content, I'm getting transparent background which is not good.
I wanted to show the same background color (grey) even if it is hovered.
So, I tried the below code and tried to use :has condition in css, If it has previous class, change the hover color to grey. But it didn't worked.
My expectation is to have the same background color even if it is hovered.
Can someone help me on this as I need the solution only from CSS/SCSS. not from javascript.
.previous {
background-color: grey;
}
.row:hover {
background-color: transparent;
:has(.previous) {
background-color: grey;
}
}
<div class="row">Some Content 1</div>
<div class="row previous">Some Content 2</div>
<div class="row">Some Content 3</div>
<div class="row previous">Some Content 4</div>
<div class="row">Some Content 5</div>
You can do this using :not pseudo class to exclude rows with previous class from hover effect. Now :hover will run on every element that has a .row class but doesn't also have .previous class.
.row {
background-color: lightblue;
}
.previous {
background-color: grey;
}
.row:not(.previous):hover {
background: transparent;
}
<div class="row">Some Content 1</div>
<div class="row previous">Some Content 2</div>
<div class="row">Some Content 3</div>
<div class="row previous">Some Content 4</div>
<div class="row">Some Content 5</div>
Why not just change the order of your selectors and add a hover to the previous class too:
.row:hover {
background-color: transparent;
}
.previous,
.previous:hover {
background-color: grey;
}
<div class="row">Some Content 1</div>
<div class="row previous">Some Content 2</div>
<div class="row">Some Content 3</div>
<div class="row previous">Some Content 4</div>
<div class="row">Some Content 5</div>
Also, if you are wanting a row with the class previous, you just combine the selectors: .row.previous
:has is css4 and has very little support: https://developer.mozilla.org/en-US/docs/Web/CSS/:has
Here is a pure css solution.
You could set different styles for the hover when it has the previous class or not.
.row:hover {
background-color: transparent;
}
.row.previous {
background-color: grey;
}
.row.previous:hover {
background-color: #595959; /*any color really*/
}
<div class="row">Some Content 1</div>
<div class="row previous">Some Content 2</div>
<div class="row">Some Content 3</div>
<div class="row previous">Some Content 4</div>
<div class="row">Some Content 5</div>
I am using HTML 5 and CSS 3.
Here is my html code:
<div style="float:left; width:100px; height:150px;">Column 1</div>
<div style="float:left; width:100px;">Column 2</div>
<div style="float:left; width:100px;">Column 3</div>
I am trying to position the second and third div at bottom irrespective of the height of first div. Whatever may be the height of first div but the second and third div should be at bottom like following.
Test
Test
Test Test Test
I tried position absolute inside divs but not working. I need to achieve this using div not table. Any help would be appreciated. Thanks.
You don't need to use tables to take advantage of table-layouts:
You'll probably need to wrap the divs in another div to act like a table-row. These columns will grow so they are each as tall as the tallest:
html
<div class='table-row'>
<div>Column 1<br>with<br>more<br>text</div>
<div>Column 2</div>
<div>Column 3</div>
</div>
css
.table-row{
display:table-row;
}
.table-row > div{
display:table-cell
;width:100px;
vertical-align:bottom;
}
demo here: http://jsfiddle.net/mhfaust/CV33q/
update
Acutally, you don't need the .table-row wrapper at all.
You could remove it in the above code, and change the selector from .table-row > div to jsust div and it will still work (though with other markup on the page that wouldn't be the best way to do it -- you'd want a classname on the div like .table-cell and use that selector instead.)
Working example http://jsfiddle.net/cYbW7/
<div style="background: yellow; float: left; display: block; position: relative;">
<div style="width:100px;display: inline-block; height:150px; background: red;">Column 1</div>
<div style="width:100px;display: inline-block; vertical-align: bottom;background: blue;">Column 2</div>
<div style="width:100px;display: inline-block; vertical-align: bottom; background: green;">Column 3</div>
</div>
try setting bottom:0 to both div:
<div style="float:left; width:100px; height:150px;">Column 1</div>
<div style=" bottom:0px; width:100px;">Column 2</div>
<div style=" bottom:0px; width:100px;">Column 3</div>
Here is demo
or if you just want to see in next line try this:
<div style="float:left; width:100px; height:100px;">Column 1</div>
<div style=" display:block; width:100px;">Column 2</div>
<div style=" display:block; width:100px;">Column 3</div>
I have a navigation layed out as follows:
<div id=treeLevelContainer_0>
<div class=treeLevel_0>Link 1</div>
<div class=treeLevel_0>Link 2</div>
<div class=treeLevel_0>Link 3</div>
<div class=treeLevel_0>Link 4</div>
<div class=treeLevel_0>Link 5</div>
<div class=treeLevel_0>Link 6</div>
<div class=treeLevel_0>Link 7</div>
</div>
And for each of these I have the following CSS:
.treeLevel_0
{
width:98%;
height:24px;
line-height:24px;
background:#FFF url(/Images/nav-divider.jpg) no-repeat bottom;
text-align:left;
cursor:pointer;
margin:5px;
padding-bottom:3px;
}
However for the last one I don't want to have the background so I'm using the :last-child property:
#treeLevelContainer_0 .treeLevel_0:last-child
{
background:none;
}
Yet for reason the :last-child is not being applied at all. Any ideas at all because I'm sure this is the way I've done this in the past?
http://jsfiddle.net/P9Cvc/
<div id=treeLevelContainer_0>
<div>Link 1</div>
<div>Link 2</div>
<div>Link 3</div>
<div>Link 4</div>
<div>Link 5</div>
<div>Link 6</div>
<div>Link 7</div>
</div>
#treeLevelContainer_0 div
{
width:98%;
height:24px;
line-height:24px;
background:red;
text-align:left;
cursor:pointer;
margin:5px;
padding-bottom:3px;
}
#treeLevelContainer_0 div:last-child
{
background:none;
}
this is solution ...btw it is better to do it with jQuery coz crosbroswer compatibility.
Replace each of these malformatted lines as follows:
<div class="treeLevel_0">Link 2</div>
This should work.
Also, don't forget to put all IDs or classes within quotation marks (see your first line)
#treeLevelContainer_0 .treeLevel_0:last-child{background-image:none;}
I am grabbing news from different website & want to show them as show as example
http://jsfiddle.net/r55Er/1/
Problem is with the image, Images associate with articles are of different dimension.
I have an image container 'div' of 80x80 pixels and i want to display image in center both vertically & horizontally
I want to show image in best possible way ...
I would appreciate help in this regarding or how i show image in best possible way without hurting the design.
<div class="news-wrapper">
<div class="news-image"><img class="img" src="http://gulfnews.com/media/img/gulfnews_logo.png"/></div>
<div class="news-title"> News Title 1</div>
<div class="news-source"> Source 1</div>
<div class="news-description"> Some Descriptionn</div>
</div>
<div class="news-wrapper">
<div class="news-image"><img class="img" src="http://i.cdn.turner.com/cnn/.e/img/3.0/global/header/intl/hdr-globe-central.gif"/></div>
<div class="news-title"> News Title 1</div>
<div class="news-source"> Source 1</div>
<div class="news-description"> Some Descriptionn</div>
</div>
<div class="news-wrapper">
<div class="news-image"><img class="img" src="http://news.bbcimg.co.uk/media/images/65881000/jpg/_65881249_65881241.jpg"/></div>
<div class="news-title"> News Title 1</div>
<div class="news-source"> Source 1</div>
<div class="news-description"> Some Descriptionn</div>
</div>
<div class="news-wrapper">
<div class="news-image"><img class="img" src="http://www.zawya.com/images/cia/large/130213070447ptjw.jpg"/></div>
<div class="news-title"> News Title 1</div>
<div class="news-source"> Source 1</div>
<div class="news-description"> Some Descriptionn</div>
</div>
You need to position:absolute your images and position:relative yourr news-wrapper and then give top:0;bottom:0;margin:auto to your image. I edited your fiddle and you can check it here jsFiddle
if your images are relatively around 80 x 80 pixels, just apply them has a background of your cell. This way it will always be centered .. never overflow .. etc etc.
<div class="news-wrapper">
<div class="news-image" style="background-image:url('http://www.zawya.com/images/cia/large/130213070447ptjw.jpg';"></div>
<div class="news-title"> News Title 1</div>
<div class="news-source"> Source 1</div>
<div class="news-description"> Some Descriptionn</div>
</div>
.news-image {
width:80px;
height:80px;
background-attachment:scroll;
background-color:transparent;
background-position:50% 50%;
background-repeat:no-repeat
}
To align an image vertically in the middle, try to set line-height equal to height for the container and set dispaly inline-block with "vertical-align middle" for the image. To align horizontally, just set "text-align center" for the image container.
.image-container {
text-align: center;
line-height: 80px; /* equals to container height */
}
img {
display: inline-block;
vertical-align: middle;
}
Here's modified sample in jsfiddle
<style>
.cl {clear:both;}
.block {}
.left {float:left;}
</style>
<div class="block">
<div class="left">Title 1</div>
<div class="left">Value 1</div>
<div class="cl"></div>
</div>
<div class="block">
<div class="left">Title 2</div>
<div class="left">Value 2</div>
<div class="cl"></div>
</div>
Is it possible to avoid adding <div class="cl"></div> at the end of each .block?
There are two common solutions to this problem.
Add overflow: hidden to the parent of the floated elements (so in this case, .block).
Use "clearfix": http://nicolasgallagher.com/micro-clearfix-hack/
Some more information here: Is clearfix deprecated?
A good time to use clear: both is when you already have an element available to add it to.
For instance, the common case of floated columns with a footer: http://jsfiddle.net/thirtydot/vhBkM/
you could do this:
<style>
br {clear:both;}
</style>
<div class="block">
<div class="left">Title 2</div>
<div class="left">Value 2</div>
</div>
<br/>
a second option re: #animuson comment
<style>
.container br {clear:both;}
</style>
<div class="container">
<div class="block">
<div class="left">Title 2</div>
<div class="left">Value 2</div>
</div>
<br/>
</div>
You shouldn't need the <div class="cl"></div> divs at all. Just put the clear: both on the block div.
Example: http://jsfiddle.net/mKazr/
CSS
.block {
clear: both;
overflow: hidden; /* If you want to make the div size to the contents and not collapse use this line (from thirtydot answer) */
}
.left { float:left; }
HTML
<div class="block">
<div class="left">Title 1</div>
<div class="left">Value 1</div>
</div>
<div class="block">
<div class="left">Title 2</div>
<div class="left">Value 2</div>
</div>
Edit: added code
Try using overflow:hidden on the .block I know that that sometimes will fix it.