Greetings,
I'm trying to create a pagination panel for one of my lists and want to make it centered. Currently it looks like:
<div class="panel">
<div class="page">1</div>
<div class="page">2</div>
<div class="page">3</div>
</div>
So I'm basically trying to make all of the "page" div elements go to the center of "panel" container, like this:
_____________________________
| 1 2 3 |
------------------------------
Is there a way to implement that without knowing the width that "page" elements need (there could be 3 or 9 pages and both situations should be handled properly).
Thanks in advance.
Is there any reason you want the pages to be <div>s? If you make them a <span class='page'> (which is more semantically correct imho) and apply text-align: center; to the panel you get the effect you want. Otherwise you could do display: inline; on the pages, but for that you might as well go to <span>
do you have to use divs for the numbers?
i would replace those divs with spans instead and then apply a text-align:center to the outter div (.panel)
As this is a list of numbers, you shoud consider placing them in a list to be semantically correct. Shove them into a UL, style that with CSS and you're golden.
Like so perhaps:
<div class="panel">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
And style in CSS as this:
.panel{text-align:center; }
.panel ul{list-style-type:none; margin:0 auto; padding:0; overflow:hidden; }
.panel li{display:inline; }
.panel li a{padding:5px; margin:0;}
Play around with the padding and margins. Always a good idea to add some fatness to your links when they're used in pagination, tabs and menus.
Tested in Opera 9, FF3, IE6, Chrome
Related
I am kind of new to css and trying to create a layout that presents a list of books. Therefore I want to display a cover image (represented by a fixed width div in the fiddle) at the left side of a two column layout. To the right of the cover I want to present information about the book: The title and an ordered list which has property-value items.
These items should fill the remaining part of the width. The property and its corresponding value should be placed on the same line.
One of the property value items also contains a button, which is just represented by a span here. The button should be placed in the same line right after the property.
I have run into several problems, which I couldn't sort out so far:
The property list is not formatted correctly. I guess that is because I haven't been able to configure the containing list item to extend to the full width. In the end a property value item should be displayed on the same line.
The Title is underlined and I would like to see that underline extend to the full width of the body. Currently it is truncated and I haven't been able to figure out a way to make that happen.
I have created a fiddle, which should show the problems: http://jsfiddle.net/7Xeb7/3/
This is my basic html structure:
<body>
<ul class="book">
<li>
<div class="cover"></div>
</li>
<li class="bookdetail">
<div class="title">Title</div>
<ol class="attributes">
<li>
<span class="property">property <span>btn</span></span>
<span class="value">value</span>
</li>
<li>
<span class="property">property</span>
<span class="value">value</span>
</li>
</ol>
</li>
</ul>
</body>
Short Answer
Your HTML is somewhat more complicated than necessary and makes unorthodox use of list elements for things that aren't really lists. Simplifying it would make styling the page easier. I have done so in this jsFiddle, where I think your problems have been taken care of by absolutely positioning .cover and adding appropriate padding to .bookdetails: http://jsfiddle.net/7Xeb7/10/. (Edit: new jsfiddle reflects comments)
Long Answer
As much as possible, the HTML tags you use should be semantically-related to the content they represent. So use ul or ol for lists of things, use img for images, and use heading tags (h1, h2, etc.) for headings. There's no need to use tables here (which are generally frowned upon for layout since they violate this semantic logic). Here I've preserved your structure and CSS classes but used more logical tags:
<div class="book">
<img class="cover" src="" alt="Book Title Here" />
<div class="bookdetail">
<h2 class="title">Title</h2>
<ol class="attributes">
<li>
<span class="property">property</span> <!-- this span wasn't closed before! -->
<span class="button">btn</span></span>
<span class="value">value</span>
</li>
<li>
<span class="property">property</span>
<span class="value">value</span>
</li>
</ol>
</div><!-- /.bookdetail -->
</div><!-- /.book -->
Once the HTML has been cleaned up you can more easily make the necessary CSS changes. Your main issue is getting .bookdetail in the right place. It's hard at the moment because you're trying to balance a fixed-width element (.cover) with a variable-width element (.bookdetail) that you want to take up the whole of its container - except for the fixed-width element.
This can be solved fairly easily by absolutely positioning .cover, so it no longer has any effect on the positioning of other elements in .book. Then you can just set the padding of .bookdetail to 0 0 0 140px - which is automatically relative to the most recent parent element with a specified position, which I've made .book. So .bookdetail expands to fill book like you want, but the right padding (or margin, if you prefer) means that it doesn't overlap with the cover image.
I've also made a few other CSS changes, visible in the jsFiddle, to make .title display better and to accommodate my HTML changes, but they're not directly relevant to solving your main issue so I'll leave them there.
I have changed your layout accordingly using div and tables
<div class="leftColumn">
</div>
<div class="rightColumn">
<div class="header">
Title
</div>
<div class="content">
<table width="100%">
<tr><td>Property1<td><td>Value</td>
<tr><td>Property2<td><td>Value</td>
<tr><td>Property3<td><td>Value</td>
<div>
</div>
and css
.leftColumn
{
float:left;
width:30%;
height:250px;
background-color:red;
}
.rightColumn
{
float:right;
width:70%;
height:250px;
background-color:green;
}
.header
{
font-size:25px;
padding:15px;
height:30px;
verticle-align:middle;
border-bottom:1px solid #ccc;
}
have a look here
you are missing width attribute for dimensions but not sure if this is how you want to see it:
http://jsfiddle.net/Riskbreaker/7Xeb7/4/
I added width: 100% on you bookdetail class
.bookdetail {
vertical-align:top;
display: inline-block;
width: 100%;
}
So I noticed the column property doesn't work in internet explorer so I tried finding alternate ways to create columns, I found a way to do it with tables, but that looks a bit clunky. Is there a way to use divs and create two vertical columns splitting the page?
You can do this easily with floats. e.g.:
HTML:
<div class="col1">Column1</div>
<div class="col2">Column2</div>
CSS:
.col1 { width: 50%; height:100px; float:left; background:#ddd}
.col2 { width: 50%; height:100px; float:left; background:#777}
Demo: http://jsfiddle.net/AfgAG/9/
You can put two div tags next to each other and give one the float:left CSS property, and the other float:right. Both of those divs must be at the same level in your DOM tree. What I mean by that: basically, both div tags must be 'next' to each other when you write the HTML, so that one is not inside of a tag that the other is not. For example:
<div> stuff </div> <div> more stuff </div> is okay, but
<div> stuff </div> <div> <div> more stuff </div> </div> would require the outer div tags to be labeled with float:left or float:right, not the inner div that directly contains 'more stuff'.
Hope that helps!
You can use column-count although not in IE before 10. With prefixes it works in everything else.
Is float not working for you?
I am trying to do a grid of products using list items and inline-block. The problem is: the content of the blocks have variable heights and the inline-block doesn't keep the heights equal.
The code:
#blocks ul{
list-style-type:none;
margin:0px;
padding:0px;
}
#blocks li {
display:inline-block;
vertical-align:top;
width:280px;
background-color:#ff9933;
padding:13px;
margin: 0px 0px 20px 19px;
}
<div id="blocks">
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
Here's an image to illustrate the issue.
I need the blocks to keep the same height of the larger blocks, independently of its content. Is it possible to make someting like this?
And finally: Sorry, english is not my mother language :)
1. Adding the following to the li CSS will mimic the image example you provided.
height: 150px;
min-height: 150px;
overflow:auto;
2. Also, here are some other approaches:
http://demo.smartnetzone.com/same-height-columns-using-jquery/
http://buildinternet.com/2009/07/four-methods-to-create-equal-height-columns/
http://www.cssnewbie.com/equalheights-jquery-plugin/
There's a W3C candidate layout called "flexbox" that takes care of this problem and many others. To achieve the equal height boxes you would simply assign the property display: flex to the UL and display: block to the LIs inside it.
Example (CodePen)
It's not going to get you very far if you need to support older browsers :) but if you can get around that this method is easy and super cool.
Reference: A Complete Guide to Flexbox
I don't think there is a way, barring javascript, to do this; my recommendation would be to set a defined height and maybe an overflow:auto so in the case that content does overflow it does not cripple your site and your readers can still see your content.
First, if you adjust your margin to be on all 4 sides it will space out a little better on the flow to new line.
Second, you can either specify a min-height that is closer to something common for all areas, or run JavaScript to set them to the same on a line given a particular width.
When you have more divs and thus more rows, without row-divs (container divs that mark a row), then the following example from CSS Tricks does what you need:
Equal Height Blocks in Rows
The following code has eight list items. When only three or four items are displayed per role, then the given example will make all divs equal in height per row.
<div id="blocks">
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
Trying to put a div id inside another div id, but having problems. The html is simple enough, a div inside a div with two closing divs beside each other, but I can't for the life of me get the css correct. I feel really silly asking such a newbie question, please help. I want the css to display the html with the outer container with a background color that shows around the outside of the inner container.
Can you give me an example of the css required for this? Thanks for your help, -Matthew
Here you have example on JSFiddle:
http://jsfiddle.net/JXUeF/1/
if your html looks like this (this is how i understood your description):
<div id="outer">
<div id="inner">
some content here
</div>
</div>
your css should look like this:
#outer{
background-color: red;
padding: 5px;
}
#inner{
background-color: blue;
}
I want to display some floating boxes (divs containing thumbnails) and the number of thumbnails depends on the current page width. For example:
<div class="container">
<div class="box1" style="float:left;width:120px;height:120px;margin-right:10px;">Thumbnail image here</div>
<div class="box2" style="float:left;width:120px;height:120px;margin-right:10px;">Thumbnail image here</div>
<div class="box3" style="float:left;width:120px;height:120px;margin-right:10px;">Thumbnail image here</div>
<div class="box4" style="float:left;width:120px;height:120px;margin-right:10px;">Thumbnail image here</div>
.......... ETC
</div>
the problem is that for a given width it shows for example 4 boxes on each row, but they are all left aligned and there is some white space to the right, how can i center horizontally for each row??
Something like this: http://realworldstyle.com/thumbs_3.html but with boxes centered horizontally on the page...
thanks in advance,
I think the only way to get the elements centered is to work not with float, but setting the images display: inline. That way, you can align them at will using the parent container's text-align property.
But that will give you additional issues with vertical margins and setting height. But as far as I know, it's the only reliable cross-browser way as long as inline-block is not widely supported.
Sorry, but will not be able to do what you are wanting with straight CSS + HTML. (Take a look at #Pekka for an alternative, though if the row of thumbnails don't fill the whole row, they would be centered by themselves on the last row)
You would need to have a fixed width on the parent object .container with margin-left: auto and margin-right:auto which you cannot do since it is a fluid width page.
Here is how I would go about doing it, though it is sure to have some bugs you will need to work around:
Bind a javascript event to the window.resize event
Get the new document width and see how many thumbnails would fit on one row
Set the width of the div.container to be that width plus the little bit of margin on the right. This div would always have a margin-left and margin-right of auto
This will center the thumbnails as best as possible. Depending on your visual display, you may need an additional wrapping div to provide the 100% width background.
Use an unordered list with inline list elements:
HTML:
<ul>
<li><img src="image1.jpg" /></li>
<li><img src="image2.jpg" /></li>
<li><img src="image3.jpg" /></li>
<li><img src="image4.jpg" /></li>
</ul>
CSS:
ul {
width: 960px;
text-align: center;
}
ul li {
display: inline;
}
That'll do as long as you don't have block-level elements inside the LI elements. Works also if you have more than one row of images ;) You can also use div's but using a list is semantically much more nicer.
inline-block and auto margins on .container should do the trick for most browsers with perhaps text-align:center on body as well.
And if IE6 and IE7 don't play nice, you can always use javascript / jquery to wrap the whole thing in a table just for them.
Mind you, I wouldn't dare suggest a table solution for normal browsers, although it obviously works flawlessly ;-)
Style margin: 0 auto; will center the element. But you need to specify the width of the parent container.
<div style="width:100%; float:left; margin: 0 auto;">
/* Your Child Elements */
</div>