I have a layout in which i have header, sidebar and main section.
I have a fixed sidebar. Inside that have 35 section. Scroll bar is not covering all content. My scroll bar is visible till 32 section.
I have tried a lot but unable to do. i think problem is with .sidenav property top
Here is my code
PenCode Link
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Accordion - Collapse content</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
html {
height: 100%;
}
body {
height: 100%;
}
.sidenav {
height: 100%;
width: 300px;
position: fixed;
z-index: 1;
top: 50;
left: 0;
background-color: white;
overflow-x: hidden;
overflow-y: auto;
}
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 32px;
color: #818181;
display: block;
}
.sidenav a:hover {
color: #f1f1f1;
}
.main {
margin-left: 300px;
/* Same as the width of the sidenav */
font-size: 28px;
/* Increased text to enable scrolling */
padding: 0px 10px;
}
</style>
<script>
$(function () {
$("#accordion").accordion({
collapsible: true,
heightStyle: "content",
active: false
});
$( "h3" ).click(function() {
$('.sidenav').scrollTop(document.getElementById(this.id).offsetTop);
});
});
</script>
</head>
<body>
<div class="header" style="min-height:100px; border: 1px solid black;">
<h1>Header</h1>
</div>
<div class="sidenav">
<div id="accordion">
<h3 id="w1">Section 1</h3>
<div>
</div>
<h3 id="w2">Section 2</h3>
<div>
</div>
<h3 id="w3">Section 3</h3>
<div>
</div>
<h3 id="w4">Section 4</h3>
<div>
<p></p>
</div>
<h3 id="w5">Section 5</h3>
<div>
<p></p>
</div>
<h3 id="w6">Section 6</h3>
<div>
<p></p>
</div>
<h3 id="w7">Section 7</h3>
<div>
<p></p>
</div>
<h3 id="w8">Section 8</h3>
<div>
<p></p>
</div>
<h3 id="w9">Section 9</h3>
<div>
<p></p>
</div>
<h3 id="w10">Section 10</h3>
<div>
<p></p>
</div>
<h3 id="w11">Section 11</h3>
<div>
<p></p>
</div>
<h3 id="w12">Section 12</h3>
<div>
<p></p>
</div>
<h3 id="w13">Section 13</h3>
<div>
<p></p>
</div>
<h3 id="w14">Section 14</h3>
<div>
<p></p>
</div>
<h3 id="w15">Section 15</h3>
<div>
<p></p>
</div>
<h3 id="w16">Section 16</h3>
<div>
<p></p>
</div>
<h3 id="w17">Section 17</h3>
<div>
<p>
</p>
</div>
<h3 id="w18">Section 18</h3>
<div>
<p></p>
</div>
<h3 id="w19">Section 19</h3>
<div>
<p></p>
</div>
<h3 id="w20">Section 20</h3>
<div>
<p></p>
</div>
<h3 id="w21">Section 21</h3>
<div>
<p></p>
</div>
<h3 id="w22">Section 22</h3>
<div>
<p></p>
</div>
<h3 id="w23">Section 23</h3>
<div>
<p></p>
</div>
<h3 id="w24">Section 24</h3>
<div>
<p></p>
</div>
<h3 id="w32">Section 32</h3>
<div>
<p></p>
</div>
<h3 id="w26">Section 26</h3>
<div>
<p></p>
</div>
<h3 id="w27">Section 27</h3>
<div>
<p></p>
</div>
<h3 id="w28">Section 28</h3>
<div>
<p></p>
</div>
<h3 id="w29">Section 29</h3>
<div>
<p></p>
</div>
<h3 id="w30">Section 30</h3>
<div>
<p></p>
</div>
<h3 id="w31">Section 31</h3>
<div>
<p></p>
</div>
<h3 id="w32">Section 32</h3>
<div>
<p></p>
</div>
<h3 id="w33">Section 33</h3>
<div>
<p></p>
</div>
<h3 id="w34">Section 34</h3>
<div>
<p></p>
</div>
<h3 id="w35">Section 35</h3>
<div>
<p></p>
</div>
</div>
</div>
<div class="main">
<h2 style="text-align: center;">Main Section</h2>
</div>
</body>
</html>
In your .sidenav class replace this
height: 100%;
with
height: calc(100% - 100px);
Hint: You don't need the top: 50; and left: 0;.
You just need to add height: calc(100% - 100px); in your sidenav class. your sidenav was fixed, but you have a header which height is 100px, but you added style to your HTML and body that you have 100% height, that's why the sidenav was not covering fully because of the header have 100px
$(function () {
$("#accordion").accordion({
collapsible: true,
heightStyle: "content",
active: false
});
});
html {
height: 100%;
}
body {
height: 100%;
}
.sidenav {
height: calc(100% - 100px);
width: 300px;
position: fixed;
z-index: 1;
top: 50;
left: 0;
background-color: white;
overflow-x: hidden;
overflow-y: auto;
}
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 32px;
color: #818181;
display: block;
}
.sidenav a:hover {
color: #f1f1f1;
}
.main {
margin-left: 300px;
/* Same as the width of the sidenav */
font-size: 28px;
/* Increased text to enable scrolling */
padding: 0px 10px;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="header" style="min-height:100px; border: 1px solid black;">
<h1>Header</h1>
</div>
<div class="sidenav">
<div id="accordion">
<h3 id="w1">Section 1</h3>
<div>
</div>
<h3 id="w2">Section 2</h3>
<div>
</div>
<h3 id="w3">Section 3</h3>
<div>
</div>
<h3 id="w4">Section 4</h3>
<div>
<p></p>
</div>
<h3 id="w5">Section 5</h3>
<div>
<p></p>
</div>
<h3 id="w6">Section 6</h3>
<div>
<p></p>
</div>
<h3 id="w7">Section 7</h3>
<div>
<p></p>
</div>
<h3 id="w8">Section 8</h3>
<div>
<p></p>
</div>
<h3 id="w9">Section 9</h3>
<div>
<p></p>
</div>
<h3 id="w10">Section 10</h3>
<div>
<p></p>
</div>
<h3 id="w11">Section 11</h3>
<div>
<p></p>
</div>
<h3 id="w12">Section 12</h3>
<div>
<p></p>
</div>
<h3 id="w13">Section 13</h3>
<div>
<p></p>
</div>
<h3 id="w14">Section 14</h3>
<div>
<p></p>
</div>
<h3 id="w15">Section 15</h3>
<div>
<p></p>
</div>
<h3 id="w16">Section 16</h3>
<div>
<p></p>
</div>
<h3 id="w17">Section 17</h3>
<div>
<p>
</p>
</div>
<h3 id="w18">Section 18</h3>
<div>
<p></p>
</div>
<h3 id="w19">Section 19</h3>
<div>
<p></p>
</div>
<h3 id="w20">Section 20</h3>
<div>
<p></p>
</div>
<h3 id="w21">Section 21</h3>
<div>
<p></p>
</div>
<h3 id="w22">Section 22</h3>
<div>
<p></p>
</div>
<h3 id="w23">Section 23</h3>
<div>
<p></p>
</div>
<h3 id="w24">Section 24</h3>
<div>
<p></p>
</div>
<h3 id="w32">Section 32</h3>
<div>
<p></p>
</div>
<h3 id="w26">Section 26</h3>
<div>
<p></p>
</div>
<h3 id="w27">Section 27</h3>
<div>
<p></p>
</div>
<h3 id="w28">Section 28</h3>
<div>
<p></p>
</div>
<h3 id="w29">Section 29</h3>
<div>
<p></p>
</div>
<h3 id="w30">Section 30</h3>
<div>
<p></p>
</div>
<h3 id="w31">Section 31</h3>
<div>
<p></p>
</div>
<h3 id="w32">Section 32</h3>
<div>
<p></p>
</div>
<h3 id="w33">Section 33</h3>
<div>
<p></p>
</div>
<h3 id="w34">Section 34</h3>
<div>
<p></p>
</div>
<h3 id="w35">Section 35</h3>
<div>
<p></p>
</div>
</div>
</div>
<div class="main">
<h2 style="text-align: center;">Main Section</h2>
</div>
Related
Expected output image illustration:
html, body
{
max-width: 100vw;
max-height: 100vh;
}
html *
{
font-family: Arial !important;
}
.cand1
{
width: 50%;
float:left;
}
.cand2
{
width:50%;
float: right;
}
.prof1,.prof2
{
margin:0;
margin-top: 40;
text-align: center;
}
.name
{
font-weight: bold;
}
.post
{
font-weight: bolder;
}
.card
{
background: rgb(230, 230, 230);
}
h4
{
background: rgb(230, 230, 230);
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles/style_vote.css">
</head>
<body>
<div id="header"></div>
<div id="wrapper">
<div id="content">
<div class="card">
<h4 class="post">Post 1</h4>
<div class="cand1">
<div class="prof1">
<img src="images/dummy1.jpg">
<p class="name">Candidate 1</p>
<p class="add">Class</p>
</div>
</div>
<div class="cand2">
<div class="prof2">
<img src="images/dummy1.jpg">
<p class="name">Candidate 2</p>
<p class="add">Class</p>
</div>
</div>
</div>
<div class="card">
<h4 class="post">Post 2</h4>
<div class="cand1">
<div class="prof1">
<img src="images/dummy1.jpg">
<p class="name">Candidate 3</p>
<p class="add">Class</p>
</div>
</div>
<div class="cand2">
<div class="prof2">
<img src="images/dummy1.jpg">
<p class="name">Candidate 4</p>
<p class="add">Class</p>
</div>
</div>
</div>
<div class="card">
<h4 class="post">Post 3</h4>
<div class="cand1">
<div class="prof1">
<img src="images/dummy1.jpg">
<p class="name">Candidate 5</p>
<p class="add">Class</p>
</div>
</div>
<div class="cand2">
<div class="prof2">
<img src="images/dummy1.jpg">
<p class="name">Candidate 6</p>
<p class="add">Class</p>
</div>
</div>
</div>
<div class="card">
<h4 class="post">Post 4</h4>
<div class="cand1">
<div class="prof1">
<img src="images/dummy1.jpg">
<p class="name">Candidate 7</p>
<p class="add">Class</p>
</div>
</div>
<div class="cand2">
<div class="prof2">
<img src="images/dummy1.jpg">
<p class="name">Candidate 8</p>
<p class="add">Class</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Current output image:
I am trying to implement a card like style with html and css.
the h4 tag in the div card produces spaces ,on using margin 0 and padding 0 in css it produces a white line ,I also couldn't find to split each card,tried margin as well as padding attributes for the card div,doesn't seem to work.
also the attributes i apply on the entire card div doesn't seem to apply on the h4 tag, modifying other attributes such as height on the card div makes the dummy image pop out of the card div section
Since your code is pretty messy i created a simple example for you. Hope it helps.
Also try to avoid !important to keep your code clean and maintainable.
section {
background: gray;
padding: 10px 25px;
margin: 0 0 25px 0;
}
section h4 {
margin: 0 0 10px 0;
}
.card-wrapper {
display: flex;
justify-content: space-around;
}
.card--text {
text-align: center;
}
<div class="container">
<section>
<h4>Post</h4>
<div class="card-wrapper">
<div class="card">
<img src="https://dummyimage.com/150x150/000/fff" />
<p class="card--text">
I am the Text
</p>
</div>
<div class="card">
<img src="https://dummyimage.com/150x150/000/fff" />
<p class="card--text">
I am the Text
</p>
</div>
</div>
</section>
<section>
<h4>Post</h4>
<div class="card-wrapper">
<div class="card">
<img src="https://dummyimage.com/150x150/000/fff" />
<p class="card--text">
I am the Text
</p>
</div>
<div class="card">
<img src="https://dummyimage.com/150x150/000/fff" />
<p class="card--text">
I am the Text
</p>
</div>
</div>
</section>
</div>
My html is like this
.head-heading {
padding-left: 0px;
padding-right: 0px;
font-size: 32px;
color: #525659;
margin: 0 0 2px 0;
font-weight: 100 !important;
}
.divsection .col-md-4 {
padding-left: 0px;
padding-right: 0px;
}
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
float: left;
}
.contact-smaldiv {
margin-bottom: 25px;
font-weight: 100;
font-size: 14px;
padding: 0 15px 0 0px;
}
.contact-smaldiv h1, .contact-smaldiv h2, .contact-smaldiv h3, .contact-smaldiv h4 {
color: #ef9c00;
font-size: 16px !important;
font-weight: 600 !important;
font-family: 'Lato',sans-serif !important;
padding: 0;
line-height: 1.4;
margin: 0;
}
h1.contact-name, h2.contact-name, h3.contact-name, h4.contact-name {
color: #16100f;
font-size: 14px !important;
margin: 0px 0 6px 0;
font-weight: 800 !important;
}
.contact-smaldiv p {
margin: 2px 0 3px 0;
line-height: 1.1em;
color: #414042;
font-size: 13px;
font-family: 'AkzidenzGrotesk-Medium';
font-weight: 100 !important;
}
.divsection { /* Masonry container */
column-count: 3;
column-gap: 1em;
}
.col-md-4 { /* Masonry bricks or child elements */
background-color: #eee;
display: inline-block;
margin: 0 0 1em;
width: 100%;
}
<div class="row">
<h1 class="head-heading">What is Lorem Ipsum?</h1>
<div class="divsection">
<div class="col-md-4">
<div class="contact-smaldiv">
<!-- starts of info-->
<div>
<div>
<h1 class="add-heading">
Why do we use it?
</h1>
<h4 class="contact-name"></h4>
<p>
<label>No:</label>
375 9777
</p>
<p>
<label>Email:</label>
<a href="mailto:dfdjff#gmail.com">
ddfdjff#gmail.com
</a>
</p>
</div>
</div>
<!-- end of info-->
</div>
</div>
<!-- col md end-->
<div class="col-md-4">
<div class="contact-smaldiv">
<!-- starts of info-->
<div>
<div>
<h1 class="add-heading">
Where does it come from?
</h1>
<h4 class="contact-name">
Name
</h4>
<p>
<label>Phone:</label>
052794959
</p>
<p>
<label>Cell:</label>
724 455
</p>
<p>
<label>Email:</label>
<a href="mailto:d#dummy.com">
d#dummy.com
</a>
</p>
</div>
</div>
<!-- end of info-->
</div>
</div>
<!-- col md end-->
<div class="col-md-4">
<div class="contact-smaldiv">
<!-- starts of info-->
<div>
<div>
<h1 class="add-heading">
Where can I get some?
</h1>
<h4 class="contact-name">
Second name
</h4>
<p>
<label>gfjgjf:</label>
375 9720
</p>
<p>
<label>Cell:</label>
4545464
</p>
<p>
<label>Email:</label>
<a href="mailto:j#dummy.com">
j#dummy.com
</a>
</p>
<p>
<label>id:</label>
<a href="mailto:t#dummy.com">
t#dummy.com
</a>
</p>
</div>
</div>
<!-- end of info-->
</div>
</div>
<!-- col md end-->
<div class="col-md-4">
<div class="contact-smaldiv">
<!-- starts of info-->
<div>
<div>
<h1 class="add-heading">
1914 translation by H. Rackham
</h1>
<h4 class="contact-name">
charity
</h4>
<p>
<label>DDI:</label>
375 9715
</p>
<p>
<label>Cell:</label>
221952
</p>
<p>
<label>id:</label>
<a href="mailto: r#dummy.com">
r#dummy.com
</p>
</div>
</div>
<!-- end of info-->
</div>
</div>
<!-- col md end-->
<div class="col-md-4">
<div class="contact-smaldiv">
<!-- starts of info-->
<div>
<div>
<h1 class="add-heading">
What is Lorem Ipsum?
</h1>
<h4 class="contact-name">
Coming Soon
</h4>
</div>
</div>
<!-- end of info-->
</div>
</div>
<!-- col md end-->
<div class="col-md-4">
<div class="contact-smaldiv">
<!-- starts of info-->
<div>
<div>
<h1 class="add-heading">
What is Lorem Ipsum?
</h1>
<h4 class="contact-name">
Lorem Ipsum
</h4>
<p>
<label>I:</label>
3759723
</p>
<p>
<label>C:</label>
2330079
</p>
<p>
<label>id:</label>
<a href="mailto:s#dummy.com">
s#dummy.com
</a>
</p>
</div>
</div>
<!-- end of info-->
</div>
</div>
<!-- col md end-->
<div class="col-md-4">
<div class="contact-smaldiv">
<!-- starts of info-->
<div>
<div>
<h1 class="add-heading">
What is Lorem Ipsum?
</h1>
<h4 class="contact-name">
My name
</h4>
<p>
<label>D:</label>
3759727
</p>
<p>
<label>C:</label>
914844
</p>
<p>
<label>id:</label>
<a href="mailto:b#dummy.com">
b#dummy.com
</a>
</p>
</div>
</div>
<!-- end of info-->
</div>
<!-- col md end-->
</div>
<div class="clearfix"></div>
</div>
</div>
As you can see, my first column third Div is breaking in to two, and occupying first and second column, i don't want this behaviour, if there is no space to occuppy that col-md-4 element I want it to go to next column completely, How can I achieve this?
Remove the float from the bricks. That's overwriting the display: inline-block because floating an element makes it block
.head-heading {
padding-left: 0px;
padding-right: 0px;
font-size: 32px;
color: #525659;
margin: 0 0 2px 0;
font-weight: 100 !important;
}
.divsection .col-md-4 {
padding-left: 0px;
padding-right: 0px;
}
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
float: left;
}
.contact-smaldiv {
margin-bottom: 25px;
font-weight: 100;
font-size: 14px;
padding: 0 15px 0 0px;
}
.contact-smaldiv h1, .contact-smaldiv h2, .contact-smaldiv h3, .contact-smaldiv h4 {
color: #ef9c00;
font-size: 16px !important;
font-weight: 600 !important;
font-family: 'Lato',sans-serif !important;
padding: 0;
line-height: 1.4;
margin: 0;
}
h1.contact-name, h2.contact-name, h3.contact-name, h4.contact-name {
color: #16100f;
font-size: 14px !important;
margin: 0px 0 6px 0;
font-weight: 800 !important;
}
.contact-smaldiv p {
margin: 2px 0 3px 0;
line-height: 1.1em;
color: #414042;
font-size: 13px;
font-family: 'AkzidenzGrotesk-Medium';
font-weight: 100 !important;
}
.divsection { /* Masonry container */
column-count: 3;
column-gap: 1em;
}
.col-md-4 { /* Masonry bricks or child elements */
background-color: #eee;
display: inline-block;
margin: 0 0 1em;
width: 100%;
float: none;
}
<div class="row">
<h1 class="head-heading">What is Lorem Ipsum?</h1>
<div class="divsection">
<div class="col-md-4">
<div class="contact-smaldiv">
<!-- starts of info-->
<div>
<div>
<h1 class="add-heading">
Why do we use it?
</h1>
<h4 class="contact-name"></h4>
<p>
<label>No:</label>
375 9777
</p>
<p>
<label>Email:</label>
<a href="mailto:dfdjff#gmail.com">
ddfdjff#gmail.com
</a>
</p>
</div>
</div>
<!-- end of info-->
</div>
</div>
<!-- col md end-->
<div class="col-md-4">
<div class="contact-smaldiv">
<!-- starts of info-->
<div>
<div>
<h1 class="add-heading">
Where does it come from?
</h1>
<h4 class="contact-name">
Name
</h4>
<p>
<label>Phone:</label>
052794959
</p>
<p>
<label>Cell:</label>
724 455
</p>
<p>
<label>Email:</label>
<a href="mailto:d#dummy.com">
d#dummy.com
</a>
</p>
</div>
</div>
<!-- end of info-->
</div>
</div>
<!-- col md end-->
<div class="col-md-4">
<div class="contact-smaldiv">
<!-- starts of info-->
<div>
<div>
<h1 class="add-heading">
Where can I get some?
</h1>
<h4 class="contact-name">
Second name
</h4>
<p>
<label>gfjgjf:</label>
375 9720
</p>
<p>
<label>Cell:</label>
4545464
</p>
<p>
<label>Email:</label>
<a href="mailto:j#dummy.com">
j#dummy.com
</a>
</p>
<p>
<label>id:</label>
<a href="mailto:t#dummy.com">
t#dummy.com
</a>
</p>
</div>
</div>
<!-- end of info-->
</div>
</div>
<!-- col md end-->
<div class="col-md-4">
<div class="contact-smaldiv">
<!-- starts of info-->
<div>
<div>
<h1 class="add-heading">
1914 translation by H. Rackham
</h1>
<h4 class="contact-name">
charity
</h4>
<p>
<label>DDI:</label>
375 9715
</p>
<p>
<label>Cell:</label>
221952
</p>
<p>
<label>id:</label>
<a href="mailto: r#dummy.com">
r#dummy.com
</p>
</div>
</div>
<!-- end of info-->
</div>
</div>
<!-- col md end-->
<div class="col-md-4">
<div class="contact-smaldiv">
<!-- starts of info-->
<div>
<div>
<h1 class="add-heading">
What is Lorem Ipsum?
</h1>
<h4 class="contact-name">
Coming Soon
</h4>
</div>
</div>
<!-- end of info-->
</div>
</div>
<!-- col md end-->
<div class="col-md-4">
<div class="contact-smaldiv">
<!-- starts of info-->
<div>
<div>
<h1 class="add-heading">
What is Lorem Ipsum?
</h1>
<h4 class="contact-name">
Lorem Ipsum
</h4>
<p>
<label>I:</label>
3759723
</p>
<p>
<label>C:</label>
2330079
</p>
<p>
<label>id:</label>
<a href="mailto:s#dummy.com">
s#dummy.com
</a>
</p>
</div>
</div>
<!-- end of info-->
</div>
</div>
<!-- col md end-->
<div class="col-md-4">
<div class="contact-smaldiv">
<!-- starts of info-->
<div>
<div>
<h1 class="add-heading">
What is Lorem Ipsum?
</h1>
<h4 class="contact-name">
My name
</h4>
<p>
<label>D:</label>
3759727
</p>
<p>
<label>C:</label>
914844
</p>
<p>
<label>id:</label>
<a href="mailto:b#dummy.com">
b#dummy.com
</a>
</p>
</div>
</div>
<!-- end of info-->
</div>
<!-- col md end-->
</div>
<div class="clearfix"></div>
</div>
</div>
I have to display a list of products and on hover show some additional information. But on hover, it is flickering a lot. I am not able to understand how to remove that. Any help will be appreciated to remove flickering a lot on hover.
.fixed-width-200 {
width: 200px;
}
.img-responsiveExtended {
display: block;
height: 550px;
max-width: 100%;
overflow: hidden;
text-align: center;
vertical-align: central;
padding-top: 20px;
margin: 0 auto;
}
.parentContent {
position: relative;
/*border:outset;
border-width:thin;
margin:0px;*/
}
.contentWithMargin {
padding: 20px;
height: 200px;
position: absolute;
bottom:150px;
z-index: 1;
background-color:antiquewhite;
opacity:0.8;
}
.imageContentStyle {
z-index: 0;
float:left;
}
.columnBorder {
border: outset;
}
.divWithCenterImgStyle {
text-align:center;
}
.dealPriceStyle {
font-size: 24px;
}
<!DOCTYPE html>
<html>
<head>
<title>
</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 parentContent" id="parentDiv">
<div class="imageContentStyle">
<div>
<div class="row">
<div class="divWithCenterImgStyle">
<center>
<img class=
"img-responsiveExtended img-container" src=
"http://ecx.images-amazon.com/images/I/A15JTuUMDOL._UY679_.jpg">
</center>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div style="text-align:right">
<strike>
</strike>
<span class=
"dealPriceStyle">
<mark>
<label>$
</label>58.00
</mark>
</span>
</div>
</div>
</div>
</div>
<div>
<h5>Calvin Klein Women's Two-Color Fringe Scarf
<small>
<a href=
"/DreamsNDeals/Home/DealsByVendor?vendorId=1">Amazon
</a>
</small>
</h5>
</div>
</div>
<div class="contentWithMargin collapse" id="38">
<div>
<div class="row modal-body">
<h6>
<span class="label label-warning">
<span class=
"glyphicon glyphicon-time">
</span>
</span>
</h6>
<h5>
<small>
</small>
</h5>
<!-- this text is coming as a flickering effect -->
<p class="text-primary">100% Acrylic Imported
Machine Wash 16" wide Color-blocked scarf with
fringe trim Made in China
</p>
<p class="text-info">Free Shipping
</p>
<div class="col-xs-6">
<p>
<a class="btn btn-primary" href=
"http://www.amazon.com/gp/product/B00Z69JVR8/ref=as_li_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=B00Z69JVR8&linkCode=as2&tag=dreamsndeal02-20&linkId=CAQNU4JFUUNNWPUB"
target="_blank">Get Deal ยป
</a>
</p>
</div>
<div class="col-xs-6">
<p class="text-primary">
</p>
</div>
</div>
</div>
</div>
</div>
</div>.
</div>
</body>
</html>
You can see the main HTML code and the CSS code as above.
Here is my http://jsfiddle.net/8wSzk/2/
<div class="row1">
<div>
<div class="circle-menu">
</div>
<p> some option </p>
</div>
<div>
<div class="circle-menu">
</div>
<p> some option <br /> and <br /> another option </p>
</div>
</div>
<div class="row2">
<div>
<div class="circle-menu">
</div>
<p> circle3 </p>
</div>
<div>
<div class="circle-menu">
</div>
<p> circle4 </p>
</div>
</div>
I want my both circle to be in a straight line with its content just below the circle. can somebody help me fixing my css. I am quite new to it.
I think this is what you want. If you want to have two elements side to side, you must use the float attribute. In this case, it would be float:left;.
EDIT
NEW DEMO
Do it like this
<div class="row1">
<div>
<div class="circle-menu">
</div>
</div>
<div>
<div class="circle-menu">
</div>
</div>
</div>
<div class="row1">
<div>
<p> some option </p>
</div>
<div>
<p> some option <br /> and another option </p>
</div>
</div>
New fiddle Code:Works Perfect
Here you go mate, redone it for you. Have a look through it and see what I've done
<div class="row1">
<div class="circle-menu">
</div>
<div class="circle-menu">
</div>
</div>
<div class="options-row">
<div class="option">Some option
</div>
<div class="option">Some more options
</div>
</div>
<div class="row2">
<div class="circle-menu">
</div>
<div class="circle-menu">
</div>
</div>
<div class="options-row">
<div class="option">Even more options
</div>
<div class="option">Got the idea?
</div>
</div>
.row1 {
height:90px;
}
.row2 {
height:90px;
}
.circle-menu {
width: 80px;
height: 80px;
display: inline-block;
float:left;
background-color: #cacece;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
cursor: pointer;
margin: 5px;
}
.option {
display:inline-block;
width:80px;
margin: 5px;
text-align:center;
vertical-align:top;
}
.options-row {
}
I am creating a table-like by using html unordered nested list, style-up with css to make it look like table. Now it looks exactly how I want in Firefox, but looks horrible in IE8.
(Sorry that I don't have enough reputation to post the image to show you the differences, kindly refer to code below).
HTML code as below:
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div>
TODO write content
</div>
<ul>
<li>
<div class="box">
<div class="title">
My Categories
</div>
<div class="description">
My Categories
</div>
</div>
<ul>
<li>
<div class="box">
<div class="title">
Fun
</div>
<div class="description">
Fun
</div>
</div>
<ul>
<li>
<div class="box">
<div class="title">
Sport
</div>
<div class="description">
Sport
</div>
</div>
<ul>
<li>
<div class="box">
<div class="title">
Surfing
</div>
<div class="description">
Surfing
</div>
</div>
</li>
<li>
<div class="box">
<div class="title">
Extreme knitting
</div>
<div class="description">
Extreme knitting
</div>
</div>
</li>
</ul>
</li>
<li>
<div class="box">
<div class="title">
Friends
</div>
<div class="description">
Friends
</div>
</div>
<ul>
<li>
<div class="box">
<div class="title">
Gerald
</div>
<div class="description">
Gerald
</div>
</div>
</li>
<li>
<div class="box">
<div class="title">
Gwendolyn
</div>
<div class="description">
Gwendolyn
</div>
</div>
</li>
</ul>
</li>
</ul>
</li>
<li>
<div class="box">
<div class="title">
Work
</div>
<div class="description">
Work
</div>
</div>
<ul>
<li>
<div class="box">
<div class="title">
Reports
</div>
<div class="description">
Reports
</div>
</div>
<ul>
<li>
<div class="box">
<div class="title">
Annual
</div>
<div class="description">
Annual
</div>
</div>
</li>
<li>
<div class="box">
<div class="title">
Status
</div>
<div class="description">
Status
</div>
</div>
</li>
</ul>
</li>
<li>
<div class="box">
<div class="title">
Trips
</div>
<div class="description">
Trips
</div>
</div>
<ul>
<li>
<div class="box">
<div class="title">
National
</div>
<div class="description">
National
</div>
</div>
</li>
<li>
<div class="box">
<div class="title">
International
</div>
<div class="description">
International
</div>
</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
CSS:
.box {
border: 1px solid #BBBBBB;
border-radius: 4px 4px 4px 4px;
margin: 10px;
width: 200px;
position: relative;
padding: 10px;
color: #333333;
font-weight: normal;
min-width: 0;
text-decoration: none;
text-shadow: 0 1px 0 #FFFFFF;
background: #e6e49f;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 1px rgba(0, 0, 0, 0.2);
}
.title {
width: 100%;
font-weight: bolder;
}
.description {
width: 100%;
font-size: medium;
}
li,
ul {
padding: 0;
margin: 0;
list-style: none;
}
ul {
line-height: 38em;
position: relative;
}
ul ul {
line-height: 18em;
position: absolute;
left: 200px;
top: 0;
}
ul ul ul { line-height: 8em }
ul ul ul ul { line-height: 3em }
ul li { position: relative }
I tried to research a lot about CSS for week on this issue and thinking that "line-Height" is the issue because it looked awkward in IE8. I studied that IE8 version should be able to cater the unordered List issue.
Anyone can provide me some idea how to solve this? Or any thing I can used to replace the "line-height"?
I still want to remind unordered listed(<ul>) with css only, no <div> because I don't want to change the core file of cakephp.
Thanks to #ZippyV reminded me to declare the <!DOCTYPE> on it by simply add a line of code
before the <html> tag, so that the browser goes into standards mode and the html is valid.
Now IE8 display it exactly the same as firefox.