I want to make something like this:
I would like to do this with the most clean, semantic and responsive layout if is possible.
When I say clean, I refer to something like this.
<div class="gallery">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
<div>etc...</div>
</div>
And use CSS to align, rescale and reposition the items.
PD1: Is this possible with only html+css?
PD2: Is this possible with flexbox?
Well something like that would be to make the flow vertical and allow wrapping.
*{box-sizing:border-box}
.gallery{
display:flex;
flex-direction:column;
flex-wrap:wrap;
height:300px;
width:100%;
}
.gallery > *{
flex:0 0 1;
height:50%;
background:teal;
border:1px solid #000;
color:#fff;
padding:20px;
}
.gallery > :nth-child(5n){
height:100%;
}
<div class="gallery">
<div>item 1</div>
<div>item 2</div>
<div>item 3</div>
<div>item 4</div>
<div>item 5</div>
<div>item 6</div>
<div>item 7</div>
</div>
Related
<div>
item
<div>item 1</div>
<div>item 2</div>
<div>item 3</div>
</div>
Currently, item and item 1-3 are aligned to left exactly.
item
item 1
item 2
item 3
How to make it display like this:
item
item 1
item 2
item 3
You can achieve by adding css like this-
div > div{
padding-left:10px;
}
But, it will impact on application's all div. So will would be good practice to add some specific class to parent div and then add style like below -
div.my-parent-class > div{
padding-left:10px;
}
<div class="my-parent-class">
item
<div>item 1</div>
<div>item 2</div>
<div>item 3</div>
</div>
Use padding and margin to add spacing. You can also check the padding and margin of elements using devtools. Then look at the next option to the Styles.
To open devtools:
F12
Ctrl + Shift + I
RMB > Inspect
.pl-2 {
padding-left: 20px;
}
/* OR
.ml-2 {
margin-left: 20px;
} */
<div>
item
<div class="pl-2 ml-2">item 1</div>
<div class="pl-2 ml-2">item 2</div>
<div class="pl-2 ml-2">item 3</div>
</div>
If I am not mistaken, this is the css you're looking for.
white-space: break-spaces;
div {
white-space: break-spaces;
}
<div>
item
item 1
item 2
item 3
</div>
div > div{
padding-left:24px;
}
<div>
item
<div>item 1</div>
<div>item 2</div>
<div>item 3</div>
</div>
div {
white-space: break-spaces;
}
<div>
item
item 1
item 2
item 3
</div>
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>
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>
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 have a div with variable length lines of text in it. Right now I have something like
<div id="container" style="width: 500px">
<div>Text Line 1</div>
<div>Text Line 2 of different length</div>
<div>Text Line 3</div>
</div>
I can text-align: center the container, but I want each line to be left justified relative to the longest line which is truly centered, as opposed to each line being centered on its own.
Is there an easy CSS way to do this... or should I resort to using tables to lay this out?
Your html:
<div id="container">
<span>
<div>Text Line 1</div>
<div>Text Line 2 of different length</div>
<div>Text Line 3</div>
</span>
</div>
Your CSS:
#container {
width: 500px;
background: #eee;
text-align: center;
padding: 10px 0;
}
#container span {
display: inline-block;
background-color: #ccc;
}
#container span div {
text-align: left;
}
Demo: http://jsfiddle.net/G6ABA/
That should work:
<div id="container" style="width: 500px; text-align:center;">
<div style="text-align:left;">
<div>Text Line 1</div>
<div>Text Line 2 of different length</div>
<div>Text Line 3</div>
</div>
</div>
use
<span> </span>
and css
width:500px;
text-align:center;
position:absolute;
do you set pic or color to div background?
or better i said is it your div width important?
if not maybe this solution can solve your problem:
<div id="someID" style="width: auto; text-align:left;">
<div>line 1</div>
<div>line 2 is more longer</div>
<div>line 3</div>
</div>