I'm having some lines of text on the left hand side of my webpage and want to mark some lines by different colors using bars on the right hand side of the web page.
Essentially, the layout should look something like this:
the position of the bars correspond to a given line range.
I tried to model this with css see this fiddle:
// html
<ul>
<li style="top: 1em; height: 4em; background: brown;">1</li>
<li style="top: 2em; height: 2em; background: red;">2</li>
<li style="top: 3em; height: 3em; background: green;">3</li>
<li style="top: 5em; height: 1em; background: blue; clear: left;">4</li>
</ul>
// css
li {
list-style: none;
display: inline-block;
position: relative;
}
However the last bar (the blue one) never wraps to a new "line" but is just appended to the right.
Is there any possibility to solve this in css?
Depending on your requirements..you can use absolute positioning:
Demo Fiddle
<ul>
<li style="top: 1em; height: 4em; background: brown;left:1em;">1</li>
<li style="top: 2em; height: 2em; background: red;left:2em;">2</li>
<li style="top: 3em; height: 3em; background: green;left:3em;">3</li>
<li style="top: 5em; height: 1em; background: blue;left:1em;">4</li>
</ul>
nb. although -take your styles out of being inline!
The above fiddle uses nth-child, which you can use to perform rudimentary pattern matching if these elements follow some sort of predictable ordering.
Or you can use CSS columns depending on your requirements...if the elements appear in dedicated vertical 'lanes'
Note that without using one of the above, you will need to resort to either your own JS for layout management or a pre-existing library like masonry or isotope as vanilla CSS and HTML does not allow for vertically nested row ordering of elements.
Related
I'm trying to make a header bar that contains an image followed by a title and the a menu car.
The bar is displayed after 50px and I want the image to be moved up slightly so that its over the top of the wrapping div and showing a bit in the 50px above.
Using position absolute on the wrapping div and position relative with the image then moving it up by 20px works fine but when I do this the rest of the elements in the div stay below it. Is there a way to move those other elements up to they are inline with the image?
I've made a simple jsfiddle of what I'm trying to do here: http://jsfiddle.net/67sTt/
HTML:
<div class='headerContainer'>
<div class='logoContainer'>
</div>
<div class='title'>
<h2>Header</h2>
</div>
<nav class='menu'>
<ul>
<li>first</li>
<li>second</li>
</ul>
</nav>
</div>
CSS:
.headerContainer {
top: 50px;
background-color: green;
position: absolute;
width: 100%;
}
.logoContainer {
height: 120px;
width: 120px;
background-color: red;
display: inline-block;
position: relative;
top: -20px;
}
.title {
font-style: italic;
display: inline-block;
position: relative;
padding: 0;
}
.menu {
display: inline-block;
position: relative;
}
I need the title and the menu to line up in the middle of the image(the red box).
Using position: absolute moves them to the top which is fine but the title and the menu layer on the top of each other.
I know I could use this and give the menu some padding to the left so that it sits next to the title but when the page size is reduces the menu moves below the image and title so I don't want the padding shown then, and I'd rather not come up with some hacky jquery way of managing that if it can be done in css only.
like this? http://jsfiddle.net/67sTt/1/
add:
vertical-align: top
to menu and title
Here is my code.
The HTML:
<div class=column1of4>
<a rel="Appendix" href="images/watermarks/watermark_pic1.jpg" title="Bottle in the mirror"><img src="images/250-width/pic1.jpg" alt="" width="250px" height="250px" id="Bottleinthemirrorpic"></a>
<span id="Bottleinthemirror" class="spanlink"><p>Bottle in the mirror<p></span>
</div>
<div class=column1of4>
<a rel="Appendix" href="images/watermarks/watermark_pic9.jpg" title="The empty glass"><img src="images/250-width/pic9.jpg" alt="" width="250px" height="250px"></a>
</div>
<div class=column1of4>
<a rel="Appendix" href="images/watermarks/watermark_pic10.jpg" title="The last drop"><img src="images/250-width/pic10.jpg" alt="" width="250px" height="250px"></a>
</div>
The CSS:
#Bottleinthemirror {
width: 250px;
height: 90px;
position: absolute;
background-color: rgba(0,0,0,.55);
margin-top: 10px;
color: white;
line-height: 20px;
font-size: 12px;
}
.column1of4 {
margin: 50px;
float: left;
}
The Javascript:
$('#Bottleinthemirror').hide();
$('#Bottleinthemirrorpic, #Bottleinthemirror').hover(function(){
//in
$('#Bottleinthemirror').show();
},function(){
//out
$('#Bottleinthemirror').hide();
});
Basically, I have three pictures, two of them beside each other and the third one is below the first one. Which I hover over the first picture, I want the #bottleinthemirror span to appear, which it does. The problem is, even when the span is hidden, it still rearranges the layout of the website and moves the picture below it to another place even though it's position is set to absolute. Any idea why? When I remove the span, the website layout is normal. It changes when I put in the span even though the spans position is absolute.
Probably the problem is that span can not contain p, and in your code there are technically 2 p elements in the span (both p tags are opening). When browsers fix this incorrect markup, part of the last p may appear outside the span. If there is a need to have p inside .spanlink, it's better to use div instead of span. But is the p really necessary here?
Add
display: block;
to
#Bottleinthemirror
I set this up in a jsfiddle: http://jsfiddle.net/r2XG2/1/ and it appears to be working for me in Chrome. What browser are you in? I would try the following if it's still not working for you:
Set z-index: 100 to see if that will force it to appear over the other elements. You could also try setting the top or left values in css, that may also force it to appear in the correct place. Adding display: block; couldn't hurt either.
Edit: Updated fiddle with latest update from asker it also appears that IE won't load jsfiddle. I added position: relative to the parent div to see if that helps.
#Bottleinthemirror {
width: 250px;
height: 90px;
position: absolute;
background-color: rgba(0,0,0,.55);
margin-top: 10px;
color: white;
line-height: 20px;
font-size: 12px;
z-index: 100;
display: block;
}
.column1of4 {
margin: 50px;
float: left;
position: relative;
}
My goal is to make a DIV that presents the latest four news links with the title and a small picture on hover.
The box will be small (150px height by 50px width) and will expand to about 500px. Once an article is clicked, it will bring up a box that you may exit out of. This box will put a dark layer on the rest of the content so that it is focused on by the user.
Anyways... here is my CSS I have currently.
#news {
position: fixed;
top: 250px;
left:0px;
background-color: blue;
min-width: 20px;
max-width: 600px;
height: 200px;
}
#news a {
display: none;
padding-bottom: 5px;
color: white;
}
#news:hover {
display: block;
padding: 0px 10px 0px 0px;
}
#news:hover a {
display: block;
}
My HTML uses the a tag to edit the position, but was wondering if anyone had any suggestions on how to go about making the boxes inside the div look neat and conform to my command?
I think you're looking for something like this:
<div id="news">
<ul id="articles">
<li class="article-item">
<h2>Article 1!</h2>
<p>Here is some text for the article.</p>
</li>
<li class="article-item">
<h2>Article 2!</h2>
<p>Here is some text for the article.</p>
</li>
<li class="article-item">
<h2>Article 3!</h2>
<p>Here is some text for the article.</p>
</li>
</ul>
</div>
Then your styles would be something like this:
.article-item {
ADD STYLES HERE
}
.article-item h1{
ADD STYLES HERE
}
.article-item p{
ADD STYLES HERE
}
Etc...
Given this markup:
<ul class="grafiek">
<li class="first-child">item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li class="last-child">item</li>
</ul>
How do I make it appear, cross-browser, like so:
In other words: the last item (with the fake pseudo-class last-child) should always stretch to accomodate the cumulative total width of the previous, arbitrary amounts (within reason of course), of <li>'s
This is what I have so far:
ul.grafiek {
float: left;
}
ul.grafiek li {
float: left;
display: block;
margin-left: 6px;
width: 56px;
height: 66px;
padding: 12px 0;
color: #fff;
text-align: center;
font-size: 11px;
line-height: 1;
background-color: #c5015a;
}
ul.grafiek li.first-child {
margin-left: 0;
}
ul.grafiek li.last-child {
clear: both;
margin: 10px 0 0 0;
width: 100%;
height: 23px;
padding: 0;
line-height: 23px;
background-color: #0a2d7f;
}
IE6 stretches the last <li> to the total width of the <ul>'s parent. IE7 doesn't stretch it at all. How do I make it work in these two browsers also?
PS.: Firefox, Chrome and Opera work a expected.
Can ul.grafiek be defined an explicit width? If so that should work out for IE, as it has issues calculating the total width of floats.
Try setting position: relative; and/or zoom: 1; on ul.grafiek
I have tried like mad to get this done in a clean, CSS-only manner, but I ended up coming to roughly the same point as yourself. IE6 calculates the 100% width of the last list-item first, then wraps the parent around it. (And my IE7 isn't working, couldn't test that.)
What I can recommend is that you create classes for all the different quantities of items you expect (up to a maximum of whatever the screen width will accommodate), and modify the class of the UL to match the number of LI's inside (again, up to the same maximum).
So your UL gains one class:
<ul class="grafiek items6_grafiek">
<li class="first-child">item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li class="last-child">item</li>
</ul>
And add to your existing CSS:
.items1_grafiek {width: 56px}
.items2_grafiek {width: 118px}
.items3_grafiek {width: 180px}
.items4_grafiek {width: 242px}
.items5_grafiek {width: 304px}
.items6_grafiek {width: 366px}
And possibly, if you are adding items dynamically in JS, you'll need to change the itemsN_grafiek class to the correct one.
I noticed that you have a fixed height on that last element. That opens us up the door to try some absolute positioning tricks, and I think that (along with some CSS hacks or conditional comments) will get you what you're looking for.
If I change ul.grafiek like so:
ul.grafiek {
float: left;
position: relative;
border: 1px dashed gray; /* just for visualization while working on the problem */
margin: 0;
padding: 1px;
*padding-bottom: 33px;
}
And add *position: absolute; and *bottom: 0; to ul.grafiek li.last-child, I get a layout that's essentially the same in Firefox 3.6, Safari 4, IE6, and IE7.
I say essentially because there are some differences in the li heights between IE and everything else. These will go away if you add a doctype declaration, but the layout will then break in IE6 again. :|
I have some html that looks like this
<div id='nav'><a href ='./?page=1'>1</a> 2 <a href ='./?page=3'>3</a> <a href ='./?page=4'>4</a> <a href ='./?page=5'>5</a></div>
Basically, this is a navigation menu where the current page is 2. Now, the problem is, I want the current page (2 in this case) to always be centered. I'm just using text-align:center but this just means that 3 is always in the center. How do I make it so that the current page number is always in the center, regardless of whether it is the middle element in the list of links?
EDIT:
Ok, to be a little more clear, in the above case I want to look like this
1 2 3 4 5
^
|
This should be centered in the page and the spacing between the others
should remain the same. So the links will actually be slightly offcenter to
the right, but the current page will be in the center of the page.
I think I see what you're trying to do. Seems it should be pretty straightforward, but isn't. I think you might need to resort to absolute positioning and calculating the precise values on the server (or in javascript on the client). I also think that you'll need a container for the non-linked element. Something like this:
<style type="text/css>
#nav {position: relative}
#nav ol {list-style: none; margin: 0; padding: 0}
#nav ol li {display: block; margin: 0; padding: 0; position: absolute; width: 10%; text-align: center}
#nav ol li a {}
</style>
<div id="nav">
<ol>
<li style="left: 35%" >1</li>
<li style="left: 45%" >2</li>
<li style="left: 55%" >3</li>
<li style="left: 65%" >4</li>
<li style="left: 75%" >5</li>
</ol>
</div>
EDIT: To answer your revised question:
I would use markup like this
<div id="#nav">
<div>
<span class="spacer"></span>
<a href ='./?page=1'>1</a>
2
<a href ='./?page=3'>3</a>
<a href ='./?page=4'>4</a>
<a href ='./?page=5'>5</a>
</div>
</div>
And then css (with widths calculated appropriately):
#nav div
{
margin:0 auto;
/* width: 9 * link width */
}
#nav div .spacer
{
display:inline-block;
/* width: 3 * link width */
}
Perhaps something like this. If the width is not fixed then I think you'll need to use Javascript to do the ol margin-left calculation.
ol
{
display: block;
height: 20px;
margin-left: 0;
}
ol li
{
float: left;
width: 20px;
height: 20px;
}
body#page2 ol
{
margin-left: 300px; /*calculate this by hand or use jQuery to do the math*/
}