Placing texts below three circles using html and css - html

How can i place text below three circles with responsive design in a one div. Sample image below.


The following should be a good starting point.
HTML
<div class="container">
<div class="circle-content">
<div class="circle"></div>
<p>Circle One</p>
</div>
<div class="circle-content">
<div class="circle"></div>
<p>Circle Two</p>
</div>
<div class="circle-content">
<div class="circle"></div>
<p>Circle Three</p>
</div>
</div>
CSS
.container {
width:100%;
}
.circle-content {
width:33%;
text-align:center;
float:left;
}
.circle {
display:inline-block;
width:60%;
padding-bottom:60%;
border-radius:60%;
border:15px solid #333;
}
.circle-content p {
font-size:16px;
color:#666;
}

Related

Why don't 100vh work with p element?

I have a sidebar and I want it to fit the browser height.So I used 100vh.
It does work if I deleted the p element(with the background-text class).
* {
margin:0;
padding:0;
}
body{
overflow:hidden;
}
.wrapper>div{
display:inline-block;
}
.sidebar{
background-color:#4e4e4e;
height:100vh;
width:25%;
}
.picproperties{
padding:30px 0px 0px 30px;
}
.background-text{
display:block;
}
.returnbar{
height:25px;
background-color:#5a5a5a;
}
.workspace{
height:100vh;
width:75%;
background-color:red;
}
<body>
<div class="wrapper">
<div class="sidebar">
<div class="returnbar">
<div class="returnbtn"></div>
</div>
<div class="picproperties">
<div class="pp-background">
</div>
<div class="pp-ratio">
</div>
<div class="pp-patterns">
</div>
</div>
<div class="imgproperties">
<div class="ip-layers">
</div>
<div class="ip-image">
</div>
</div>
</div><!--
--><div class="workspace">
</div>
</div>
</body>
But when I keep the p element It doesnt work
* {
margin:0;
padding:0;
}
body{
overflow:hidden;
}
.wrapper>div{
display:inline-block;
}
.sidebar{
background-color:#4e4e4e;
height:100vh;
width:25%;
}
.picproperties{
padding:30px 0px 0px 30px;
}
.background-text{
display:block;
}
.returnbar{
height:25px;
background-color:#5a5a5a;
}
.workspace{
height:100vh;
width:75%;
background-color:red;
}
<body>
<div class="wrapper">
<div class="sidebar">
<div class="returnbar">
<div class="returnbtn"></div>
</div>
<div class="picproperties">
<div class="pp-background">
<p class="background-text">Background :</p>
</div>
<div class="pp-ratio">
</div>
<div class="pp-patterns">
</div>
</div>
<div class="imgproperties">
<div class="ip-layers">
</div>
<div class="ip-image">
</div>
</div>
</div><!--
--><div class="workspace">
</div>
</div>
</body>
How can I keep the p element and still make the sidebar fit the browser screen height (sorry for my bad english).

if you add float:left to sidebar it works:
* {
margin:0;
padding:0;
}
body{
overflow:hidden;
}
.wrapper>div{
display:inline-block;
}
.sidebar{
background-color:#4e4e4e;
height:100vh;
width:25%;
float:left;
}
.picproperties{
padding:30px 0px 0px 30px;
}
.background-text{
display:block;
}
.returnbar{
height:25px;
background-color:#5a5a5a;
}
.workspace{
height:100vh;
width:75%;
background-color:red;
}
<body>
<div class="wrapper">
<div class="sidebar">
<div class="returnbar">
<div class="returnbtn"></div>
</div>
<div class="picproperties">
<div class="pp-background">
<p class="background-text">Background :</p>
</div>
<div class="pp-ratio">
</div>
<div class="pp-patterns">
</div>
</div>
<div class="imgproperties">
<div class="ip-layers">
</div>
<div class="ip-image">
</div>
</div>
</div><!--
--><div class="workspace">
</div>
</div>
</body>
for an overview on css designing principles take a look at this!!

Hover on div element does not do the effect individually

I have multiple divs with the same class of "product". When I hover on each product element, I need them to have a hover effect, but the problem is that when I hover over the first element, all other elements also have the effect applied rather than just the one i hovered. What am i doing wrong?
<style>
div.product{
width:90%;
margin:10px auto;
height: 200px;
transition: all 0.1s ease;
background-color: #069;
}
div.product:hover{
margin-top:-5px;
}
.img_box{
width:50%;
height:100%;
padding: 10px;
float:left;
box-sizing: border-box;
}
.desc_box{
width:50%;
height:100%;
float:left;
padding: 10px;
box-sizing: border-box;
}
.img{
background-color: #b65050;
height: 100%;
}
.desc{
background-color: chocolate;
height: 100%;
}
</style>
HTML:
<div>
<div class="product">
<div class="img_box">
<div class="img">
image
</div>
</div>
<div class="desc_box">
<div class="desc">
desc
</div>
</div>
</div>
<div class="product">
<div class="img_box">
<div class="img">
image
</div>
</div>
<div class="desc_box">
<div class="desc">
desc
</div>
</div>
</div>
<div class="product">
<div class="img_box">
<div class="img">
image
</div>
</div>
<div class="desc_box">
<div class="desc">
desc
</div>
</div>
</div>
<div class="product">
<div class="img_box">
<div class="img">
image
</div>
</div>
<div class="desc_box">
<div class="desc">
desc
</div>
</div>
</div>
</div>
heres my fiddle: MY FIDDLE

This is because you are floating the divs. Changing margin-top moves the element which creates room underneath it.
What you need is this:
div.product{
position:relative;
}
div.product:hover{
top:-5px;
}
position:relative basically takes up the original space but lets the div to be rendered elsewhere.

Table structure by div tag in html

I'm using div instead of table but I am not getting the border increased while the content increase in a column.
<div class="divTable">
<div class="headRow">
<div class="divCell" align="center">Customer ID</div>
<div class="divCell">Customer Name</div>
<div class="divCell">Customer Address</div>
</div>
<div class="divRow">
<div class="divCell">001</div>
<div class="divCell">002</div>
<div class="divCell">am unable to get the white space between col while the content increases</div>
</div>
<div class="divRow">
<div class="divCell">xxx</div>
<div class="divCell">yyy</div>
<div class="divCell">www</div>
</div>
<div class="divRow">
<div class="divCell">ttt</div>
<div class="divCell">uuu</div>
<div class="divCell">Mkkk</div>
</div>
</div>
.divTable{
display:table;
width:auto;
background-color:#eee;
border:1px solid #666666;
border-spacing:5px;
}
.divRow{
display:table-row;
width:auto;
clear:both;
background-color:#ccc;
}
.divCell{
float:left;
display:table-column;
width:100px;
border-left: 2px solid #fff;
}
Kindly go through the link below:
http://jsfiddle.net/vasanthanvas/H4Zug/

You must use display:table-cell instead of display:table-column and remove float:left for .divCell.
And add this style:
.headRow{
display:table-row;
}
http://jsfiddle.net/4Y6cJ/3/

Aligning DIVs beside each other and Adding an Horizontal ScrollBar in HTML

I have a Parent Div chatRooms , inside it there's many chatRoom's, and the chatRoomName Div was made only for proper formatting.
My Intention is to make each chatRoom float:left; beside the previous chatRoom, then have an horizontal scroll bar in case the maximum width of all chatRoom's exceeds the width of the parent div chatRooms, and this is actually working but the exceeding chatRoom's are being placed on a second line, not beside the last chatRoom, I want them all to say on the same line, even if some of them can't be seen, but I will be able to see them when I scroll right.
<div id="chatRooms">
<div class="chatRoom">
<div class="chatRoomName">
IUL
</div>
</div>
<div class="chatRoom">
<div class="chatRoomName">
CCE
</div>
</div>
<div class="chatRoom">
<div class="chatRoomName">
CCE
</div>
</div>
<div class="chatRoom">
<div class="chatRoomName">
CCE
</div>
</div>
<div class="chatRoom">
<div class="chatRoomName">
CCE
</div>
</div>
<div class="chatRoom">
<div class="chatRoomName">
CCE
</div>
</div>
<div class="chatRoom">
<div class="chatRoomName">
CCE
</div>
</div>
<div class="chatRoom">
<div class="chatRoomName">
CCE
</div>
</div>
<div class="chatRoom">
<div class="chatRoomName">
CCE
</div>
</div>
<div class="chatRoom">
<div class="chatRoomName">
CCE
</div>
</div>
</div>
CSS:
#chatRooms
{
border-style:solid;
border-width: 1px;
border-color: green;
overflow-x:scroll;
margin-top:5px;
height:30px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.chatRoom
{
width:100px;
border-style:solid;
border-color:green;
margin-right:1px;
float:left;
cursor:pointer;
}
.chatRoomName:hover
{
color:chartreuse;
}
.chatRoomName
{
background-color:green;
border-style:solid;
border-color:green;
color:white;
}

Try using inline block instead off floating the elements and using white-space: nowrap;
see fiddle http://jsfiddle.net/AFGU4/
.chatRoom
{
width:100px;
border-style:solid;
border-color:green;
margin-right:1px;
display: inline-block;
cursor:pointer;
}

What is needed in this case is display: inline-block; instead of float: left;. By making your divs inline-block and adding white-space: nowrap; on their parent you'll be ensured that the divs will always be on a single line. Adding overflow-x: auto; will provide a horisontal scrolling if necessary.

I have two vertical divs, but the second div's variable height is causing the first one to misposition itself

http://denartcc.org/images/help.jpg
As you can see from the arrows in my attached picture, I'm trying to slide those four divs (Who's Online, Upcoming Events, Statistics, and Weather) UP to fill the void. The column on the right has a variable height, and when it expands, those four aforementioned divs continue to move down the page. They need to stay underneath the white box.
The problem with absolute positioning is that the four divs (Who's Online, Upcoming Events, etc.) will also have variable heights, so I don't want to stick the second row of those in an absolute position.
HTML
<div id="TopContentWrapper">
<div id="phototicker">
<jdoc:include type="modules" name="phototicker" />
</div>
<div class="RightSide">
<div class="rtsidemod">
<div class="rtsidetitle">Control Panel</div>
<div class="rtsidecontent"><jdoc:include type="modules" name="controlpanel" /></div>
</div>
<div class="rtsidemod">
<div class="rtsidetitle">Newletter</div>
<div class="rtsidecontent"><jdoc:include type="modules" name="newsletter" /></div>
</div>
<div class="rtsidemod">
<div class="rtsidetitle">Event Notifications</div>
<div class="rtsidecontent"><jdoc:include type="modules" name="eventnotifications" />Check Check</div>
</div>
<div class="rtsidead">
<img src="http://denartcc.org/dev/templates/NexGenDEN/images/ads/forum.png"></img>
</div>
<div class="rtsidead">
<img src="http://denartcc.org/dev/templates/NexGenDEN/images/ads/ts.png"></img>
</div>
<div class="rtsidead">
<img src="http://denartcc.org/dev/templates/NexGenDEN/images/ads/ts.png"></img>
</div>
</div>
<div class="midbox1">
<div class="modbox">
<div class="modtitle">Who's Online
</div>
<div class="mid1">
<p class="mid"><jdoc:include type="modules" name="whosonline" /></p>
</div>
</div>
<div class="modbox">
<div class="modtitle">Upcoming Events
</div>
<div class="mid2">
<p class="mid"><jdoc:include type="modules" name="upcomingevents" /></p>
</div>
</div>
</div>
<div class="midbox2">
<div class="modbox">
<div class="modtitle">Statistics
</div>
<div class="mid1">
<p class="mid"><jdoc:include type="modules" name="statistics" /></p>
</div>
</div>
<div class="modbox">
<div class="modtitle">Weather
</div>
<div class="mid2">
<p class="mid"><jdoc:include type="modules" name="weather" /></p>
</div>
</div>
</div>
</div>
CSS
#TopContentWrapper {
width:920px;
margin:0 auto;
position:relative;
}
div.RightSide {
width:255px;
float:left;
margin-left:5px;
}
div.rtsidemod {
float:left;
width:100%;
padding-bottom:5px;
background-image:url(../images/rightbg.png);
background-repeat:repeat-y repeat-x;
}
div.rtsidetitle{
font-weight:bold;
color:white;
font-size:12px;
background-image:url(../images/rttitlebg.png);
background-position:top left;
height:15px;
}
div.rtsidetitle:hover {
background-position:bottom left;
}
div.rtsidecontent {
font-size:11px;
color:white;
}
div.rtsidead {
width:255px;
float:left;
margin:5px 0 0 0px;
border:1px solid black;
}
div.modtitle {
width:322px;
height:15px;
font-size:12px;
color:white;
font-weight:bold;
background:url(../images/midmodbg.jpg);
background-repeat:repeat-x;
}
div.mid1 {
display:block;
float:left;
background-image:url(../images/midmodcontentbg.png);
background-repeat:repeat-both;
width:320px;
border:1px solid black;
border-top:none;
height:70px
}
div.mid2 {
display:block;
float:left;
background-image:url(../images/midmodcontentbg.png);
background-repeat:repeat-both;
width:320px;
border:1px solid black;
border-top:none;
height:70px
}
div.modbox {
float:left;
width:310px;
margin-right:19px;
margin-top:5px;
}
div.midbox1 {
float:left;
width:660px;
margin:0px 0 0px 5px;
padding:0;
}
div.midbox2 {
float:left;
width:700px;
margin:0px 0 0px 5px;
padding:0;
}

Rearrange your divs to be in 2 columns rather than 4 quadrants. You currently have:
<div id="phototicker">
...
</div>
<div class="RightSide">
...
</div>
<div class="midbox1">
...
</div>
<div class="midbox2">
...
</div>
Instead, arrange them like this:
<div class="LeftSide">
<div id="phototicker">
...
</div>
<div class="midbox1">
...
</div>
<div class="midbox2">
...
</div>
</div>
<div class="RightSide">
...
</div>
That way, the midboxes will naturally flow under the phototicker. You will need to have a specific width on the right and left side divs and then just float the both left.