i have 3 thumbs i want to center in a row. The code is
<div class="large-12 columns">
<ul class="small-block-grid-3">
<li><img class="shadow" src="img/thumbs/carWashHome.jpg"></li>
<li><img class="shadow" src="img/thumbs/homeCleanHome.jpg"></li>
<li><img class="shadow" src="img/thumbs/carpetCleanHome.jpg"></li>
</ul>
</div>
But somehow the thumbs are starting from left and not in center.
can you suggest be how to fix that.
here is the picture
Here is the link LINK
You can see that the thumbs are floated to left.
how to center them.
thanks.
Replace a line with following
<div class="large-12 columns" style="text-align: center;">
Key is to add style="text-align: center;" and problem will be fixed
Thanks for posting the URL.
Just add text-align:center; in your .small-block-grid-3 > li{}
Please let me know if you have concerns.
CSS
.small-block-grid-3 > li{
text-align:center;
}
Add this css to your image tags:
display: block;
margin-left: auto;
margin-right: auto;
It will align image to center present in li tag.
Might be nice to know to, that foundation also has a CSS class called "text-center" that can be applied to elements as needed :-)
<div class="text-center">
content goes here...
</div>
Related
I'm having a bit of trouble getting the various products to line up properly on my site. Some of the items have a name long enough to create a second line of text, and when it does so, the items still align with the top of the text rather than aligning the top of each image. Basically I want it to use up some of the empty space above each div to fit a second line of text, rather than pushing my picture down and just aligning at the top. This is the code I'm using to create the divs in a loop within my PHP:
<div class="new_prod_box">
<a href="details.html">
'.$title.'
</a>
<div class="new_prod_bg">
<a href="details.html">
<img src="images/'.$image.'" alt="'.$title.'" title="" class="thumb" border="0" />
</a>
</div>
<a href="cart.php?action=add&id='.$id.'">
<u>Add to cart</u>
</a>
</div>
Here's a picture explaining what I mean: my website
Here's the rules in my CSS:
.new_prod_box{
float:left;
text-align:center;
padding:10px;
width:132px;
height:180px;
}
.new_prod_box a{
padding:5px 0 5px 0;
color:#b5b5b6;
text-decoration:none;
display:block;
}
.new_prod_bg{
width:132px;
height:119px;
text-align:center;
background:url(images/new_prod_box.gif) no-repeat center;
position:relative;
}
Hmmm, if I understand your issue correctly, giving .new_prod_box > a:first-child (selects only the first, top-level <a> element inside .new_prod_box) a defined height should give you what you want. As long as the height is great enough to fit two lines of text in it, it'll keep the elements below in the same position, but still leaves space for the title to break to two lines.
If that isn't what you're looking for, let me know and I'll be happy to help further!
(Edit:) To align single-line titles to the top of the image (rather than having whitespace between them), you could try this method, which I think will work.
First, modify your HTML structure a bit, to add a <span> inside of the first <a> element:
<div class="new_prod_box">
<a href="details.html">
<span>
'.$title.'
</span>
</a>
<div class="new_prod_bg">
<a href="details.html">
<img src="images/'.$image.'" alt="'.$title.'" title="" class="thumb" border="0" />
</a>
</div>
<a href="cart.php?action=add&id='.$id.'">
<u>Add to cart</u>
</a>
</div>
Then, add/modify these styles in your CSS:
.new_prod_box > a:first-child{
height: [tall enough for two lines];
position:relative;
}
.new_prod_box > a:first-child span{
display:block;
position:absolute;
bottom:0;
left:0;
width:100%;
text-align:center;
}
Which I believe should give you what you want. Try it out though, and let me know what happens.
I am trying to create a website that requires fluid re-sizing. How ever the positioning does not seem to work for the "top" or "bottom" when I use %. It works fine when I use px or em.
i am trying to position the slider of a jquery showcase called flexslider 2. it is a div element that is linked to two images. an example of the original html can be found here at the bottom. http://flexslider.woothemes.com/
<div style="padding:5px;">
<div class="flexslider">
<ul class="slides">
<li><img src="images/ussc1.jpg" alt="01" /></li>
<li><img src="images/ussc2.jpg" alt="02" /></li>
</ul>
</div>
</div>
and here is the css.
.flexslider {
max-width:940px;
width: 40%;
margin: 0 auto;
top: 20%;
position:absolute;
}
What am I doing wrong? Please help! I do apologise in advance, i am very new to web design
Check your spelling of "postion", should be:
.flexslider{
position:absolute;
}
If the position isn't specified properly the "top" and "bottom" styles won't work with percentages!
I feel like a moron having to ask this, but I have always evaded CSS at all costs, and as I now find myself needing it again, I have been scavenging Google for an example with no luck.
Basically I have icons specific to each category, and would like to create a horizontal nav bar in CSS/HTML using these, but also displaying a text link under them as well. I have found snippets for doing one or the other, but every time I try and combine the two together, the entire page seems to breakdown.
Can anyone provide an example of how this can be done? If it helps, it would basically look like...
[-IMAGE-] [-IMAGE-] [-IMAGE-]
[-TEXT-] [-TEXT-] [-TEXT-]
The effect can be easily get through background-position in CSS with proper padding-top applied to the li elements:
background-position: top;
padding-top: 50px; /* Height of image */
Here is an example fiddle.
Update:
Here is the more descriptive fiddle with different images on different li elements.
http://jsfiddle.net/LajUZ/2/
HTML:
<ul class="nav">
<li class="navitem">
<div class="icon">
[icon]
</div>
<div class="text">
[text]
</div>
</li>
<li class="navitem">
<div class="icon">
[icon]
</div>
<div class="text">
[text]
</div>
</li>
</ul>
CSS:
.navitem
{
float: left;
}
I'm attempting to create a complex div structure using CSS.
I want it to be made up of four columns. On the left is just a list of images. On the right is the complex div structure that I can't figure out a way to create. There should be two large vertical boxes containing various details. In-between these vertical boxes are any number of horizontal boxes.
My problem is that I cannot work out how to create this div structure in a way that 'scales', i.e. there could be any number of horizontal boxes between the two vertical boxes.
This is the div structure I was attempting to use:
<div class="result">
<div class="detail_1">
<p>Detail 1</p>
</div>
<div class="details">
<p>Details</p>
</div>
<div class="details">
<p>Details</p>
</div>
<div class="detail_2">
<p>Detail 2</p>
</div>
</div>
Any help would be greatly appreciated!
EDIT: I have fixed this problem by just using tables. Thanks for the replies.
Update 2
Your question is: How to make the price & flight_number div the same height as the parent div (container)..
1) Use the technique described here: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
2) update your CSS so that the flight number and the price are vertical aligned in the middle of their div.
I think that mine HTML structure is better then yours because it's more clear and easier to work with.
So based on my HTML structure: The parent container (flight_info) is stretchend as long as the content inside (the table with the rows will be the longest). the div's flight_number and price are also the total height of the parent container thanks of the technique described in step 1 above. The extra CSS (step 2) will align the price and flight number nicely in the middle.
OLD
<ul id="flights">
<li>
<ul class="images">
<li><img src="img1" alt="your image" /></li>
<li><img src="img2" alt="your image 2" /></li>
</ul>
<div class="flight_info" id="flight_EK49">
<div class="flight_number">
EK49
</div>
<table>
<thead>
<th>date</th>
<th>from</th>
<th>to</th>
</thead>
<tbody>
<tr>
<td>1/1/2013</td>
<td>departure airfield</td>
<td>destination airfield</td>
</tr>
...
</tbody>
</table>
<div class="price">
€999,99
</div>
</div>
</li>
// duplicate the above for a new flight..
</ul>
And for the CSS style (you must do the rest on your own because this is just an example. I didn't test any of the code):
<style>
#flights .images {
float: left;
width: 250px;
}
.flight_info {
float: left;
width: 700px;
}
.flight_info .flight_number,
.flight_info .price {
float: left;
width: 150px;
}
.flight_info .price {
float: right;
}
.flight_info table {
float: left;
width: 400px;
}
</style>
I think you will get the idea.
EDIT 1
Changed all the position absolutes to floats because it easier with the li's automatic heights.
I also added the leg images of the flight as well, but as I mentioned, you have to do the rest yourself ;)
I got a problem with the outlining of some div elements.
I got the following structure.
<div id="skillcontent">
<div id="skillname" class="inline">
<div class="skilllist">
<div><h3>[SKILL]</h3></div>
<div><h3>[SKILL]</h3></div>
</div>
</div>
<div id="skillstars" class="inline">
<div class="skilllist">
<div>
<img src="img/star_active.png" alt="" />
<img src="img/star_active.png" alt="" />
<img src="img/star_inactive.png" alt="" />
<img src="img/star_inactive.png" alt="" />
<img src="img/star_inactive.png" alt="" />
</div>
<div>
<img src="img/star_active.png" alt="" />
<img src="img/star_active.png" alt="" />
<img src="img/star_active.png" alt="" />
<img src="img/star_inactive.png" alt="" />
<img src="img/star_inactive.png" alt="" />
</div>
</div>
</div>
<div id="skillinfo" class="inline">
<div class="skilllist">
<div><h4>[YEARS],[LEVEL]</h4></div>
<div><h4>[YEARS],[LEVEL]</h4></div>
</div>
</div>
</div>
Css:
.skilllist div {
padding: 0px;
margin: 0px;
display: block;
height: 25px; /*same height as star images*/
}
div.inline {
display: inline-block;
}
h3 {
font-size: 18px;
color: #5b5b5b;
margin: 0px;
}
h4 {
font-size: 18px;
color: #808080;
margin: 0px;
}
img {
vertical-align: bottom;
}
The divs that contain the text (h3 and h4) elements are a bit smaller as the divs that contain images. There is no margin or padding on any element. The height of all of the divs is the same but there still is some whitespace on top of the divs with the class skilllist that contain text. There is no whitespace above the div that contains images.
Why is this and how can i fix it?
Example: Click
try adding vertical-align:top; to your css on all items misaligned. worked when i did this using firebug on your test page.
Several things:
You seem to be misusing HTML elements: h3, h4, etc. are for headlines.
On the other hand, you use too many divs. Consider the many other HTML elements that exists. For example, the elements you call "skillist" scream to be lists (ol,ul).
If you are worried about small pixel gaps like that, HTML/CSS may be the wrong tool for you. The whole concept of HTML/CSS is to be flexible and allow for different renderings on different systems and not to be a pixel perfect design tool.
Your problem may be because by default images are inline elements that sit on the font baseline and leave space for descenders. Try setting vertical-align: bottom on the images.
Without seeing your CSS, it's hard to say.
You have to remember that every element has default styling provided by the standard/browser. In order to trump this, you have to explicitly define your own values.
For example, most browsers define a page background's default color to be: #FFFFFF
To change it, you have to provide your own value.
Hope this helps.
It could be down to the margins that browsers automatically add to h tags (as well as p and some other tags).
It may help to use a css reset style sheet to remove a lot of the default margins and padding which various browsers render differently. There's one at http://developer.yahoo.com/yui/3/cssreset/
I agree with tobiasmay - it'd help if we had a demo page or something like that.
can you post some css or set up a jsfiddle.net please? else it's hard to help you fix your divities..
//EDIT
here you go, i fixed your markup completly:
<div id="skills">
<div class="skillA">
<h3 class="skill">Skill A</h3>
<ul class="skillRow">
<li><img src="http://www.ethanol-online.eu/star_active.png" alt="" /></li>
<li><img src="http://www.ethanol-online.eu/star_active.png" alt="" /></li>
<li><img src="http://www.ethanol-online.eu/star_inactive.png" alt="" /></li>
<li><img src="http://www.ethanol-online.eu/star_inactive.png" alt="" /></li>
<li><img src="http://www.ethanol-online.eu/star_inactive.png" alt="" /></li>
</ul>
<p class="foo">Years, Level</p>
</div>
<div class="skillB">
<h3 class="skill">Skill B</h3>
<ul class="skillRow">
<li><img src="http://www.ethanol-online.eu/star_active.png" alt="" /></li>
<li><img src="http://www.ethanol-online.eu/star_active.png" alt="" /></li>
<li><img src="http://www.ethanol-online.eu/star_active.png" alt="" /></li>
<li><img src="http://www.ethanol-online.eu/star_active.png" alt="" /></li>
<li><img src="http://www.ethanol-online.eu/star_inactive.png" alt="" /></li>
</ul>
<p class="foo">Years, Level</p>
</div>
</div>
and the CSS with a working ul li
#skills{
background-color:lightgreen;
overflow:auto;
}
.skillA, .skillB{
overflow:auto;
margin-bottom:10px;
}
ul.skillRow{
display: inline;
}
ul.skillRow li{
list-style-type: none;
float:left;
}
p.foo{
float:left;
font-size:18px;
padding:6px;
}
h3.skill{
float:left;
display:inline;
padding:6px;
}
here's the fiddle link: http://jsfiddle.net/tobiasmay/gKrkS/
Add vertical-align: top or vertical-align: bottom (whichever you prefer) to the div.inline rule. That makes it work in all browsers.
The reason the div with the images is positioned a little higher than the others is due to the way inline-blocks are aligned in their containing line box:
(...) [B]oxes are laid out horizontally, one after the other, beginning at the top of a containing block. Horizontal margins, borders, and padding are respected between these boxes. (...) The rectangular area that contains the boxes that form a line is called a line box.
(...)
A line box is always tall enough for all of the boxes it contains. However, it may be taller than the tallest box it contains (if, for example, boxes are aligned so that baselines line up). When the height of a box B is less than the height of the line box containing it, the vertical alignment of B within the line box is determined by the 'vertical-align' property.
Note the bold part. The default value of vertical-align is baseline. The images in your example are moved up in the line box to align them to the baseline of the surrounding text. In doing so they increase the height of the line box, leaving some extra whitespace on top of the text divs.
If you still don't quite understand what's happening, try increasing the font-size of the h4 in your example to, say, 32px, and remove the fixed height from .skilllist div.