I am using the below code to list the cart items in a grid.
http://www.bootply.com/113898#
But the three vertical columns are of different heights in the same row when Product Name is a long text. Want the row to have the height of the largest li item. I tried display:table for li but it's not fixing it.
What css changes i need to make it work.
Thanks.
You could use javascript to equalise those h4's dynamically, but I reckon just set a min height on them as I have in your example: http://www.bootply.com/113898#
h4 {min-height: 100px;}
On responsive, say whenever your columns all go to 100%, set your h4 to min-height: none to allow them all to be whatever height the text makes them.
Related
I am currently trying to get my footer menu to center and appear all on one line. Currently, it is on 2 lines for some reason.
The website is: http://museiam.ca/
I am trying to achieve this (image): http://museiam.ca/wp-content/uploads/LookBookPage_1.jpg
The theme I am using allows the option of 3 OR 4 widgets in the footer area. I currently have it set to 3. The menu itself is in one widget including the links Customer Care - Newsletter, where the Follow Us link is in another HTML text widget with all the social icons. I am trying to put everything on one line and centered like in the picture with equal padding.
I have tried to increase the widget of the menu width but to no success. Here is the CSS I tried:
.widget widget_nav_menu .menu-footer-1-container {
width: 800px !important;
}
I am open to any input or solution to achieve my desired look. I appreciate and thank you for all looking.
Look for this .container_12 .grid_4 and change the width to 100%
.container_12 .grid_4 {
width: 100%;
}
Also, you have another widget there which has an empty text post, remove that.
You are using 3 'grid_4' divs to fill 'container_12' parent div. What you need to do (from my perspective) is the following:
Use a single 'grid_12' div to wrap the menu, instead of dividing it into 3 'grid_4'.
Then, give menu UL 'align: center'
For centering li children do 'display: inline-block' on them (I think you already did this one).
I'm trying to replace a two column table on my index page with CSS. To get a look at my current index page, it is at http://www.negative-g.com.
I have my columns set up. I'm actually using a three column layout with the third being for my sidebar image, and for the other two I want to have boxes (basically tables without using tables) with images and text alternating (park logos and their name/location in text underneath lined up with those in the other column). What sort of code would I need to add to each column to replicate my table layout?
Usually I'd use a bunch of floated blocks for that. For example, if I've got a list of items:
<ul>
<li>Foo</li>
<li>Bar</li>
<li>Baz</li>
<li>Quux</li>
</ul>
(After removing all the margins and padding) I can set dimensions on the li elements, make them blocks, and float them left:
li {
display: block;
width: 100px;
height: 50px;
float: left;
}
If there's only 200px of space for them, then they'll wrap around. Try it.
If you set the width to 50%, you'll get a two-column layout. Remove the height, style the interior, and you're good to go.
This doesn't take your sidebar into account, but your sidebar isn't really part of the list, and you appear to be dealing with it as a background anyway, so there shouldn't really be any need for anything special. If you want to make sure the list doesn't overlap it, you can set a margin-right on the list and it won't go over there.
I have a problem of vertical alignment of inlined list items in the horizontal navigation menu of a header. I can't use floats because of the rest of the layout.
I was thinking that I could use a larger line-height for the list items, but it doesn't really help that much this time. The list items more or less just sit there, at least when I use the Google Droid font. I also tried vertical-alignment, but nothing.
The basic structure is header -> header-content ->navigation > li > a
All of the list items are set to display:inline.
There's also a list item enclosed h1 element which has an enclosed image: li > h1 >img and a submenu in there: li > ul > >li > a, of which the image complicates things as it has a fixed height of 39px.
The header div sets the height of 4 ems and also a background color. It's within these 4 ems that I need to vertically align the content of my navigation.
I need some ideas how to accomplish this kind of vertical alignment. Suggestions? :-)
You can find a full code example of the problem here: http://pastebin.com/zcLspjJz
I need to support modern browsers and IE7 and upwards. But any ideas are welcome, really.
You can try these methods and if it helps:
Use height and line-height properties and use the same value for both. (E.g. height:20px;line-heigt:20px;)
OR set the display:table-cell; vertical-align:middle;
My page looks like this: http://ink-12.terc.edu/index.cfm
I want to get the picture (kids' drawings) on the left to follow the rest of the centered content, when the window expands:
Per the suggestions I found in other answers, I added an outer div (#maincontent) to hold my two divs that I want to scroll instead of wrap (#tbltframe and #drawings), and some additional coding (overflow:auto; display:inline-block; white-space:nowrap).
Now my page looks like this:
http://ink-12.web5test.terc.edu/index.cfm
So now it doesn't wrap (great!), but it cut off my drop shadow on the right side (you can still see it on the bottom). And I need to get the main content centered again (following the centered header and footer)--similar to the first webpage I listed. After the changes, the main content aligns left. I tried adding margin-right and margin-left:auto, as well as text-align:center, but neither did it. I also added a min-width, which doesn't seem to do it either. I can see the drop shadow again when I change the min-width to something significantly larger (74em), then but I don't know why, because #tbltframe (50em) and #drawings (14em) = 64em total.
Any help would be very much appreciated. Suggestions to move forward with the code on either webpage I listed would be fine. Thank you!
Please try the below css on skeleton.css line 64
#maincontent {
display: inline-block;
overflow: auto;
white-space: nowrap;
width: 1169px;
}
It will increase the width of the main content div so the images will not cut from sides..
Found a solution: http://www.search-this.com/2008/08/28/lets-all-get-inline-in-a-block-in-a-block/
Have to:
Create a min-width or width on the outer div (#maincontent)
Make #maincontent a block element with display:block
Center #maincontent with text-align:center
Make the inside divs (#drawings and #tbltframe)not wrap in #maincontent with white-space:nowrap;
Make the inside divs inline block elements with display:inline-block
Then make the text inside wrap again (if you want) with white-space:normal
I have this table1 inside of a span tag (span is inside of td tag)
the problem is that the row data of the Table1 is appearing outside of td ...the data should appear within the boundaries of td tag..right ? coz the span is contained within the td tag...how do I make sure that the width of span remains fixed..like it shouldn't display stuff outside of td tag which is its container
Firebug shows table1's width as 100%
[Edit]
ok I added display:block; in span tag first..didnt work...when I added the same in Table tag the columns of the Table shrank..ie spaces between col.s shrank and row data isn't anymore displaying outside of td's area
Now what I wanna ask is that if I set Table{display:block;} in the css file..how would it affect other tables ??I don't want other tables to get screwed up...Just want this one fixed..Also, the table is being created on runtime using Telerik's RadEditor so will display:block fix table's width and not let its rows' data flow outside td area??
<span>s are inline elements, like <a> and <img>, therefore they cannot accept rules like width:, height: and others.
To allow the <span> to accept these rules, add display: block; to the Span's CSS.
This will allow it to accept the width rule and fill up your TD.
That or just change your <span> to a <div>.
If that doesn't work, post your code and we'll take a closer look :)
A span is an inline element and so cannot have an explicit width set. What is in the span? If it's a continuous string then there is no way for the browser to know where to cut the string and make it wrap. If you don't want to see the excess content then you can set overflow:hidden on the element but that's not always a good idea. Perhaps post the code you are working with and we can provide more specific help.