I am trying to set my panel/block to a different color when it has been clicked e.g. active.
My HTML is:
<div class="container">
<div class="content nobg">
<div class="sideEffectBox text-center medium-6 columns">
<div class="panel hlib"> <img src="http://upload.wikimedia.org/wikipedia/commons/2/24/Icon_Transparent_Loupe_256x256.png"/>
<span class="linkText">Record Side Effects</span>
</div>
</div>
</div>
</div>
My CSS is:
.container .content .panel.hlib {
background: #ECC100;
border:none;
text-align:center;
}
.sideEffectBox :active{
background: pink;
}
.container .content .panel.hlib :active {
background: pink;
border:10px black solid;
}
.container .content .panel.hlib img {
display: block;
padding-bottom: 24px;
height: 110px;
}
.container .content .panel.hlib .linkText {
font-size: 20px;
color: #605748;
display: block;
text-align: center;
}
I have a JS fiddle located here: http://jsfiddle.net/liammccann1992/hSu4c/300/
The problem I am having is it's only setting the thing I click to active e.g. the text or the image but shouldn't there parent be active to?
Is there anyway I can force the parent to be active and not them?
as said in my comment, remove the space before :active and it should be solved :)
Related
I would like to get some suggestions/solutions and methods on how to add in a single line image list that is horizontally scrollable. Given that you have a html page, with multiple div elements and the page is vertically scrollable. And at the last row of the page, I want to display a list of images that can be horizontally scrollable. What can be done to achieve this effect? Please refer to the following image. The red line box is the component in react js that display the list of images.
If you want to do this in plain html and using css than you can try it out this and if you want to do this in react then Check out this.
div.scrollmenu {
background-color: #333;
overflow: auto;
white-space: nowrap;
}
div.scrollmenu div {
display: inline-block;
color: white;
text-align: center;
padding: 14px;
text-decoration: none;
}
div.scrollmenu div:hover {
background-color: #777;
}
img {
width: 100px;
height: 100px;
}
<div class="scrollmenu">
<div class="#home">
<img src="https://images.unsplash.com/photo-1615463738213-b9381d217b4e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1332&q=80">
</div>
<div class="#news"><img src="https://images.unsplash.com/photo-1578301978018-3005759f48f7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1144&q=80"></div>
<div class="#contact"><img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"></div>
<div class="#about"><img src="https://images.unsplash.com/photo-1581337204873-ef36aa186caa?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1156&q=80"></div>
<div class="#about"><img src="https://images.unsplash.com/photo-1581337204873-ef36aa186caa?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1156&q=80"></div>
<div class="#about"><img src="https://images.unsplash.com/photo-1581337204873-ef36aa186caa?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1156&q=80"></div>
</div>
Please try this code. This will help you to achieve your target.
.singleLineImageContainer {
display: flex;
width: 100%;
background: #899;
overflow: auto;
}
.image {
background-color: #fff;
border: 1px solid #000;
margin: 10px;
padding: 50px;
}
<div class="singleLineImageContainer">
<div class="image">Image1</div>
<div class="image">Image2</div>
<div class="image">Image3</div>
<div class="image">Image4</div>
<div class="image">Image5</div>
<div class="image">Image6</div>
<div class="image">Image4</div>
<div class="image">Image5</div>
<div class="image">Image6</div>
</div>
I have a series of CSS-styled boxes. Each box has a heading, followed by a number in a paragraph tag. Some of the headings are 2 lines, and in this case, the number shows up right where I want it: centered in the bottom part of the box. Where the heading is only 1 line, the number floats up higher than I'd like. How can I get the number to be in the center of the white space? What's going on here?
Code here: https://jsfiddle.net/snp3gvke/
<div class="sm red left-margin"><h2>Website<br/>Visitors</h2><p>120,363</p> </div>
Try adding vertical-align:middle; and line-height
This is the hacky solution, but you can solve your problem by adding two line breaks to your headings. That's essentially the problem - when your heading only takes one line, it doesn't push the number down as far into the white part of the div.
p {
font-weight: bold;
font-size: 2em;
text-align: center;
position:absolute;
bottom: 5%;
width: 100%;
}
I was able to do it by using flexbox. I had to make some changes to your CSS to override the colors coming from langsdale-dashboard.css file.
I went ahead and made your CSS a little bit more efficient also. I made changes only on the CSS to make things work. Here's what I did:
Applied the colors to the h2 instead of the parent container.
Removed the height from the parent containers and set the heights to the h2 and p instead.
Applied display:flex; justify-content:center; and align-items:center to both the h2 and the p.
I'm including the code below. You can also view it on JSFiddle: https://jsfiddle.net/m0nk3y/snp3gvke/11/
Let me know if you have any questions.
.lg,.med,.sm {
border-radius: 15px;
border-style: solid;
border-width: 1px;
position: relative;
}
.lg {
width: 700px;
}
.med {
width: 500px;
display: inline-block;
}
.sm {
width: 175px;
display: inline-block
}
.sm, .med, .lg {
vertical-align: top;
}
.left-margin {
margin-left: 15px;
}
.row {
margin-bottom: 10px;
}
h2,
p {
display: flex;
margin: 0;
text-align: center;
justify-content: center;
align-items: center;
}
h2 {
height: 75px;
border-radius: 12px 12px 0 0;
}
p {
height: 100px;
font-weight: bold;
font-size: 2em;
}
.blue, .red, .green, .orange {
background: transparent;
}
.blue {
border-color: #41B6E6;
}
.blue h2 {
background: #41B6E6;
}
.red {
border-color: #ce2029;
}
.red h2 {
background: #ce2029;
}
.green {
border-color: #C4D600;
}
.green h2 {
background: #C4D600;
}
.orange {
border-color: #E35205;
}
.orange h2 {
background: #E35205;
}
<link href="https://langsdale.ubalt.edu/zz-test/langsdale-dashboard.css" rel="stylesheet"/>
<body>
<div class="row">
<div class="lg blue">
<h2>Walk-in Visitors</h2>
<p>109,328</p>
</div>
</div>
<div class="row">
<div class="med red">
<h2>Special Collections<br/>Flickr Views</h2>
<p>75,985</p>
</div>
<div class="sm green left-margin">
<h2>Questions<br/>Answered</h2>
<p>19,570</p>
</div>
</div>
<div class="row">
<div class="sm blue">
<h2>Materials<br/>Circulated</h2>
<p>375,985</p>
</div>
<div class="med orange left-margin">
<h2>Instruction Session<br/>Attendees</h2>
<p>2,045</p>
</div>
</div>
<div class="row">
<div class="med green">
<h2>Database Searches</h2>
<p>330,479</p>
</div>
<div class="sm red left-margin">
<h2>Website<br/>Visitors</h2>
<p>120,363</p>
</div>
</div>
<div class="row">
<div class="lg orange">
<h2>Titles Borrowed via ILL</h2>
<p>5,773</p>
</div>
</div>
</body>
I guess this might be impossible, but perhaps any expert can help me out with this. I'm trying to get a quite simple reponsive behaviour working:
A two columns layout, logo left, navbar right. Now the navbar should be aligned at the bottom of the second column for bigger screens and floating to the next line directly under the logo on smaller screens.
Bigger screen:
Smaller screen:
I suppose this can be done only with JS so far, but maybe anyone knows a way to get this realized with pure CSS.
HTML:
<div class="container">
<div class="row">
<div id="col1" class="col-xs-12 col-sm-3">
<div id="logo">Logo</div>
</div>
<div id="col2" class="col-xs-12 col-sm-9">
<div id="navbar">Navbar: tab 1 | Nav tab 2 | Nav tab 3</div>
</div>
</div>
</div>
CSS:
#logo {
background-color: red; height: 100px; width: 150px; color: white;
}
#navbar {
background-color: blue; height: 30px; width: 100%; color: white;
}
I've set up a jsfiddle with the full code: http://jsfiddle.net/m4s4uqhx/6/
Any help is greatly appreciated.
set the height of col-2 similar to logo and set the navbar to position absolute and bottom 0 . replace your css with this solution
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
#col1 {
//border: 1px solid darkred; padding: 0px;
}
#col2 {
//border: 1px solid darkblue; padding: 0px;
}
#logo {
background-color: red; height: 100px; width: 150px; color: white; padding: 5px;
}
#navbar {
background-color: blue; height: 30px; width: 100%; color: white; padding: 5px;
}
#media only screen and (max-width : 992px){
#navbar{
position: absolute;
bottom: 0px;
}
#col2{
height: 100px;
}
}
#media only screen and (max-width : 768px){
#navbar{
position: relative;
}
#col2{
height: auto;
}
}
If the sizes of your elements are fixed as in your example, you can do the trick with padding-top, and remove it when the screen is too small (xs: <768px).
#media(min-width: 768px) {
#col2 {
padding-top:70px;
}
}
Demo on JSFiddle
Else, I guess you will have to write some JavaScript :)
If you know the exact height of you logo then you can add a padding top to the #col2 div on bigger screens using media queries
tablets and greater #media(min-width:778px){...}
desktops and greater #media(min-width:992px){...}
large screens #media(min-width:1140px){...}
Css example
#media(min-width:992px){
#col2{padding-top:70px;}
}
Working example
http://www.bootply.com/SHj7pkKt80
The issue here is that the columns are not equal height. CSS only offer a couple of options for equalising columsn heights. CSS Tables and Flexbox.
You can leave the floats in place but flexbox will override the floating to a certain extent.
Nevertheless, the impact can be minimal depending on your requirement.
Codepen Demo
#logo {
background-color: red;
height: 100px;
width: 150px;
color: white;
}
#navbar {
background-color: blue;
height: 30px;
width: 100%;
color: white;
}
.row {
display: flex;
flex-wrap: wrap;
}
#col2 {
display: flex;
align-items: flex-end;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div id="col1" class="col-xs-12 col-sm-3">
<div id="logo">Logo</div>
</div>
<div id="col2" class="col-xs-12 col-sm-9">
<div id="navbar">Navbar: tab 1 | Nav tab 2 | Nav tab 3</div>
</div>
</div>
</div>
I have a very simple design where I have 4 small boxes lined up on top of one another each with the same dimensions. However, when I try to apply "float: left" to the boxes, the background color of it's parent div goes away. Why is this? What does it have to do with the background color? I would just like my background color to remain the same.
See jsfiddle: http://jsfiddle.net/mush5ecc/
My html code:
<div id="careers">
<div class="container">
<h2 id="careers_title">Careers</h2>
<div id="four_grids">
<div id="top_left" class="grid"></div>
<div id="top_right" class="grid"></div>
<div id="bottom_left" class="grid"></div>
<div id="bottom_right" class="grid"></div>
</div>
</div>
</div>
My CSS code:
#careers {
background-color: orange;
}
.container {
width: 1026px;
margin: auto;
}
#careers_title {
text-align: center;
padding-top: 67px;
padding-bottom: 60px;
}
.grid {
width: 50px;
height: 50px;
float: left; /* COMMENT FLOAT TO SEE WHAT HAPPENS */
}
#top_left {
background-color: blue;
}
#top_right {
background-color: green;
}
#bottom_left {
background-color: red;
}
#bottom_right {
background-color: yellow;
}
Apply overflow: hidden to <div id="four_grids">.
See here for further details on this behaviour.
I'm a bit unsure of what your goal is, but I added the following css and I think this may be what you are looking for.
#four_grids {
position: absolute;
}
I have four divs contained in another div, and I want the four inner divs to be centered.
I have used float: left on the four divs so that they are horizontally aligned.
CSS:
<style>
.square //inner divs
{
float: left;
margin:1pt;
width:72pt;
height:72pt;
}
.container //outer divs
{
text-align:center;
width:450pt;
height: 80pt;
}
</style>
and HTML:
<div class = "container">
<div class = "square">...</div>
<div class = "square">...</div>
<div class = "square">...</div>
<div class = "square">...</div>
</div>
How can I center the divs inside the container?
The number of inner divs can be variable.
Because you don't know the number of divs you have, you should use
text-align:center on the outer div
display:inline-block on then inner div
http://jsfiddle.net/edi9999/yv2WY/
HTML
<div class = "container">
<div class = "square">John</div>
<div class = "square">Mary</div>
<div class = "square">Doe</div>
<div class = "square">Jane</div>
</div>
CSS
.square
{
margin:1px;
width:20%;
text-align:left;
border: 1px solid gray;
display:inline-block;
}
.container
{
text-align:center;
width:100%;
height: 80pt;
border: 1px solid black;
}
Here's an alternate method if you can use an extra div:
<div class = "container">
<div class="centerwrapper">
<div class = "square">...</div>
<div class = "square">...</div>
<div class = "square">...</div>
<div class = "square">...</div>
</div>
</div>
<style>
.square
{
float: left;
margin:1pt;
width:72pt;
height:72pt;
}
.container
{
text-align:center;
width:450pt;
height: 80pt;
}
.centerwrapper
{
margin: auto;
width: 302pt;
}
</style>
Also, make sure you have a closing quote on your <div class = "container"> there. The code you pasted is missing one.
As #RwL say, using <span> works, here a sample code, tested on IE6/8, Chrome, Safari, Firefox:
CSS
<style type="text/css">
/* borders and width are optional, just added to improve visualization */
.parent
{
text-align:center;
display: block;
border: 1px solid red;
}
.child
{
display: inline-block;
border: 1px solid black;
width: 100px;
}
</style>
HTML
<span class="parent">
<span class="child">
A
</span>
<span class="child">
B
</span>
</span>
Instead of floating the .square divs, give them display: inline-block. This might be dodgy in Firefox 3.0.x but I believe inline-block is fully supported in 3.5.x.
Most elegant solution I could find when you have a dynamic number of div to center is to use
text-align: center; on the parent div, and display: inline-block; on the children.
It's all explained in details here.
Simply place margin:auto; for all subsequent divs inside your main wrapper that is text-align:center;. SHOULD allign all child divs to the center of the parent div i think?
enter link description here
All in one HTML element in auto center
This code apply all over HTML element in Center without any #mediaquery.
The HTML element auto center main css property display inline-block of the chide div and add css property text-align center of parent div
.center {
border: 1px groove;
width: 97px;
border-radius: 7px;
padding: 10px;
width: 122px;
margin-left: 12px;
margin-top: 13px;
display: inline-block;
text-decoration: none;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 1.2em;
color: #000000;
background: #dbdbdb;
}
<div style="width: auto;text-align: center;">
<div class="center">Div1</div>
<div class="center">Div2</div>
<div class="center">Div3</div>
<div class="center">Div4</div>
<div class="center">Div5</div>
<div class="center">Div6</div>
<div class="center">Div7</div>
</div>
see this example click here
I think this might help:
<style>
.container {
display: flex;
flex-direction: row;
justify-content: space-around;
flex-flow: wrap;
}
</style>