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;}
Related
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>
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>
I am using HTML 5 and CSS 3.
Here is my html code:
<div style="float:left; width:100px; height:150px;">Column 1</div>
<div style="float:left; width:100px;">Column 2</div>
<div style="float:left; width:100px;">Column 3</div>
I am trying to position the second and third div at bottom irrespective of the height of first div. Whatever may be the height of first div but the second and third div should be at bottom like following.
Test
Test
Test Test Test
I tried position absolute inside divs but not working. I need to achieve this using div not table. Any help would be appreciated. Thanks.
You don't need to use tables to take advantage of table-layouts:
You'll probably need to wrap the divs in another div to act like a table-row. These columns will grow so they are each as tall as the tallest:
html
<div class='table-row'>
<div>Column 1<br>with<br>more<br>text</div>
<div>Column 2</div>
<div>Column 3</div>
</div>
css
.table-row{
display:table-row;
}
.table-row > div{
display:table-cell
;width:100px;
vertical-align:bottom;
}
demo here: http://jsfiddle.net/mhfaust/CV33q/
update
Acutally, you don't need the .table-row wrapper at all.
You could remove it in the above code, and change the selector from .table-row > div to jsust div and it will still work (though with other markup on the page that wouldn't be the best way to do it -- you'd want a classname on the div like .table-cell and use that selector instead.)
Working example http://jsfiddle.net/cYbW7/
<div style="background: yellow; float: left; display: block; position: relative;">
<div style="width:100px;display: inline-block; height:150px; background: red;">Column 1</div>
<div style="width:100px;display: inline-block; vertical-align: bottom;background: blue;">Column 2</div>
<div style="width:100px;display: inline-block; vertical-align: bottom; background: green;">Column 3</div>
</div>
try setting bottom:0 to both div:
<div style="float:left; width:100px; height:150px;">Column 1</div>
<div style=" bottom:0px; width:100px;">Column 2</div>
<div style=" bottom:0px; width:100px;">Column 3</div>
Here is demo
or if you just want to see in next line try this:
<div style="float:left; width:100px; height:100px;">Column 1</div>
<div style=" display:block; width:100px;">Column 2</div>
<div style=" display:block; width:100px;">Column 3</div>
Is it possible to make a circle navigator ?
example a circle divided into 4 and each division has different links on it?
and also if it is possible can i put animations on them or color change when a mouse hover? tnx...
Use border-radius
HTML
<div id="circle-container">
<div class="quarter top-left">link 1</div>
<div class="quarter top-right">link 2</div>
<div class="quarter bottom-left">link 3</div>
<div class="quarter bottom-right">link 4</div>
</div>
CSS
#circle-container{width:100px;height:100px}
.quarter{width:50px;height:50px}
.top-left{border-top-left-radius:50px;background:#e3f9d1;float:left}
.top-right{border-top-right-radius:50px;background:#c0f7f7;float:right}
.bottom-left{border-bottom-left-radius:50px;background:#fc92f5;float:left}
.bottom-right{border-bottom-right-radius:50px;background:#333;float:right}
a{
text-decoration:none;
color:red;
width:50px;
line-height:50px;
display:block;
text-align:center
}
DEMO
<style>
.cl {clear:both;}
.block {}
.left {float:left;}
</style>
<div class="block">
<div class="left">Title 1</div>
<div class="left">Value 1</div>
<div class="cl"></div>
</div>
<div class="block">
<div class="left">Title 2</div>
<div class="left">Value 2</div>
<div class="cl"></div>
</div>
Is it possible to avoid adding <div class="cl"></div> at the end of each .block?
There are two common solutions to this problem.
Add overflow: hidden to the parent of the floated elements (so in this case, .block).
Use "clearfix": http://nicolasgallagher.com/micro-clearfix-hack/
Some more information here: Is clearfix deprecated?
A good time to use clear: both is when you already have an element available to add it to.
For instance, the common case of floated columns with a footer: http://jsfiddle.net/thirtydot/vhBkM/
you could do this:
<style>
br {clear:both;}
</style>
<div class="block">
<div class="left">Title 2</div>
<div class="left">Value 2</div>
</div>
<br/>
a second option re: #animuson comment
<style>
.container br {clear:both;}
</style>
<div class="container">
<div class="block">
<div class="left">Title 2</div>
<div class="left">Value 2</div>
</div>
<br/>
</div>
You shouldn't need the <div class="cl"></div> divs at all. Just put the clear: both on the block div.
Example: http://jsfiddle.net/mKazr/
CSS
.block {
clear: both;
overflow: hidden; /* If you want to make the div size to the contents and not collapse use this line (from thirtydot answer) */
}
.left { float:left; }
HTML
<div class="block">
<div class="left">Title 1</div>
<div class="left">Value 1</div>
</div>
<div class="block">
<div class="left">Title 2</div>
<div class="left">Value 2</div>
</div>
Edit: added code
Try using overflow:hidden on the .block I know that that sometimes will fix it.