How can I place 4 divs next to each other which width's will be calculated automatically (since every resolution of a monitor is different).
So whenever I have 16 divs, the amount shown div's still has to be 4.
I thought of giving a percentage, for each div. But that doesn't seem to be working (which is pretty obvious since every monitor has a different resolution of their screen displaying)
Just add a width using a percentage value (25%) which will put 4 boxes next to each other on each line.
.box {
float: left;
width: 25%;
}
I suggest you use a framework like bootstrap.
But this is the basic requirement you need to show 4 divs in a row...
just ignore the background and the div:nth-child(even) - I added that just so you could see the div areas clearly.
section {
max-width: 960px;
margin: auto;
}
div {
width: 25%;
float: left;
background: cornsilk;
}
div:nth-child(even) {
background: lightgreen;
}
<section>
<div>number 1</div>
<div>number 2</div>
<div>number 3</div>
<div>number 4</div>
<div>number 5</div>
<div>number 6</div>
<div>number 7</div>
<div>number 8</div>
<div>number 9</div>
<div>number 10</div>
<div>number 11</div>
<div>number 12</div>
<div>number 13</div>
<div>number 14</div>
<div>number 15</div>
<div>number 16</div>
</section>
You can better use Bootstrap framework.
for example,
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="searcharea col-md-12">
<div class="col-md-12">
<div class="col-md-3">1</div>
<div class="col-md-3">2</div>
<div class="col-md-3">3</div>
<div class="col-md-3">4</div>
</div>
</body>
</html>
Related
How to make the box size to be evenly as perfect square and make the words inside of it to shrink. I want to make it square and the inside word to shrink to small size based on the square, but they just flexing because of the contents.
This is my code, what should I change/remove/add?
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.mainbox {
background: grey;
display: flex;
margin: 5px;
}
.mainbox div {
flex: 1;
border: 2px solid black;
}
#row {
display: flex;
flex-direction: row;
}
#column {
display: flex;
}
<!DOCTYPE html>
<html>
<head>
<title>FlexSpiral</title>
</head>
<body>
<div class="mainbox">
<div>box 1</div>
<div>
box 2
<div id="row">
<div id="column">
<div id="row">
<div>box 5</div>
<div>
<div>box 6</div>
<div id="row">
<div>
<div id="row">
<div>box 9</div>
<div>box 10</div>
</div>
<div>box 8</div>
</div>
<div>box 7</div>
</div>
</div>
</div>
<div>box 4</div>
</div>
<div>box 3</div>
</div>
</div>
</div>
</body>
</html>
I didn't quite understand the question, but here goes
You can take the margin from the ".mainbox" that it is giving margin on all sides of the mainbox class.
To leave the div box occupying its own content you can use in the styling: display:inline-block
Note: a good practice is to use class instead of id to identify the styling, and id more for future interaction when using script and interactions.
I have a homework in CSS.
My job is to draw a route of bus.
This is my html:
<div class="city-group">
<div class="city-name-wrapper">
<div class="city-name-line">
<div class="city-name">City 1</div>
</div>
</div>
<div class="stop-list">
<div class="stop">Stop 1</div>
<div class="stop">Stop 2</div>
<div class="stop">Stop 3</div>
<div class="stop">Stop 4</div>
<div class="stop">Stop 5</div>
</div>
</div>
<div class="city-group">
<div class="city-name-wrapper">
<div class="city-name-line">
<div class="city-name">City 2</div>
</div>
</div>
<div class="stop-list">
<div class="stop">Stop 6</div>
<div class="stop">Stop 7</div>
<div class="stop">Stop 8</div>
</div>
</div>
I have to style it like The pircture below:
Stops are grouped by city.
Each group has a Vertical bracket on left.
Rotated label with City name On the bracket line.
I tried this css, but i don't now how to make it work...
Here is link for JsFiddle:
https://jsfiddle.net/edm6qrt2/
I prefare to use modern CSS, including flex or grid.
I need suppoort only for Google Chrome.
Thenk's for any help!
One approach would be to use pseduo elements to create the left-most vertical line
that spans the height of the city group.
Additionally, you could align the city-name along that vertical line via a CSS transform, as documented in the code snippet below:
.city-group {
position:relative;
/* Create space to left of city group to
accomodate the city name and lines */
padding-left:2rem;
}
/* Define pseudo element for vertical black
line to the left, spanning the vertical axis
of the city group */
.city-group:before {
content:"";
display:block;
border-left:1px solid black;
left:.75rem;
top:1rem;
bottom:1rem;
position:absolute;
}
/* Transform the city name with translation and
rotation to place in line with line spanning left
of city group */
.city-name {
transform: translate(-50%, 0%) rotate(-90deg) translateY(50%);
position: absolute;
left: 0;
top: 50%;
margin-top:-0.5em;
border:2px solid orange;
background:white;
padding:0 1rem;
z-index:1;
}
/* Create spacing above/below each stop */
.stop {
padding:0.5rem 0;
position:realtive;
}
/* Style pseudo elements for first and last
stop which are the horizontal line segments
for these stops. These line segments connect
with the vertical line defined above */
.stop:first-child:before,
.stop:last-child:before {
content:"";
display:block;
border-top:1px solid black;
left:.75rem;
width:0.75rem;
position:absolute;
}
/* Offset first line segement from top of
city group */
.stop:first-child:before {
top:1rem;
}
/* Offset last line segement from bottom of
city group */
.stop:last-child:before {
bottom:1rem;
}
<div class="city-group">
<div class="city-name">
City 1
</div>
<div class="stop-list">
<div class="stop">Stop 1</div>
<div class="stop">Stop 2</div>
<div class="stop">Stop 3</div>
<div class="stop">Stop 4</div>
<div class="stop">Stop 5</div>
</div>
</div>
<div class="city-group">
<div class="city-name">
Long City 2
</div>
<div class="stop-list">
<div class="stop">Stop 6</div>
<div class="stop">Stop 7</div>
<div class="stop">Stop 8</div>
<div class="stop">Stop 9</div>
<div class="stop">Stop 10</div>
</div>
</div>
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>
This question already has answers here:
CSS selector for first element with class
(23 answers)
Closed 6 years ago.
It works perfectly if I remove the first div.
But if I have the first div without the class, it doesn't work correctly.
Test 1 should be blue and the next test should be red, and so on.
When I have another div, it doesn't work correctly. How do I solve this issue?
.el:nth-of-type(odd) {
background-color: blue;
}
.el:nth-of-type(even) {
background-color: red;
}
<div id="content">
<div>nothing</div>
<div class="el">Test 1</div>
<div class="el">Test 1</div>
<div class="el">Test 1</div>
<div class="el">Test 1</div>
<div class="el">Test 1</div>
<div class="el">Test 1</div>
</div>
In your particular case, you could simply reverse the CSS rules for odd and even nth-of-type (see snippet). The nth-of-type refers to the tag, i.e. the divelement, not the class, therefore also counting the first div which doesn't have a class.
Since your CSS rule selectors combine the class with the nth-of-type, the first div isn't affected, since it doesn't have a class, yet the counting for odd or even starts at the first div.
.el:nth-of-type(odd) {
background-color: red;
}
.el:nth-of-type(even) {
background-color: blue;
}
<div id="content">
<div>nothing</div>
<div class="el">Test 1</div>
<div class="el">Test 1</div>
<div class="el">Test 1</div>
<div class="el">Test 1</div>
<div class="el">Test 1</div>
<div class="el">Test 1</div>
</div>
How do I solve this issue?
Change the first div to another element, so it gets skipped by nth-of-type.
.el:nth-of-type(odd) {
background-color: blue;
}
.el:nth-of-type(even) {
background-color: red;
}
<div id="content">
<span>nothing</span>
<div class="el">Test 1</div>
<div class="el">Test 1</div>
<div class="el">Test 1</div>
<div class="el">Test 1</div>
<div class="el">Test 1</div>
<div class="el">Test 1</div>
</div>
now I have such code, use bootstrap 2
<div class="row-fluid">
<div class="span4">Some text 1</div>
<div class="span4">Some text 2</div>
<div class="span4">Some text 3</div>
</div>
<div class="row-fluid">
<div class="span4">Some text 4</div>
<div class="span4">Some text 5</div>
<div class="span4">Some text 6</div>
</div>
Can I get 3 rows in 2 columns each without code change?
3 columns and 2 rows I use for desktop, and need 2 columns and 3 rows in mobile devices
I have found it
http://jsfiddle.net/gkZKq/
You could do:
.row-fluid { display: inline-block; width: 50%; float: left; }
.row-fluid [class*="span"] { float: none; margin-left: 0; }
http://jsfiddle.net/thespacebean/mDVfd/