I want to make four equal boxes with 10 small (thumb) boxes in each. How can this be done with css? Here is the image of what is the goal.
So far I have the left column box
.left_column{
margin-top: 10px;
width: 150px;
float: left;
border:2px solid #ccc;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
text-align: left;
padding: 10px;
font-size: 14px;
background-color: #f0f0f0;
color: #888;
}
.left_column p {
text-align: center;
border-bottom: 1px solid #ccc;
font-size: 20px;
}
.left_column a {
text-decoration: none;
margin-left: 10px;
}
edit:
Here is the Fiddle
You could create a container for each of the boxes with a fixed width and then put the thumbnails inside. If you use float: left; on the container boxes then they will move depending on the window size.
I can just suggest to use flex box.
It has only support for newer browsers but its actually totally easy to use and its responsive. Here is a small explanation:
http://css-tricks.com/snippets/css/a-guide-to-flexbox/
The inner content could be simple created then by float:left; and display: inline-block;
Here is an example on jsfiddle:
http://jsfiddle.net/fpuwk7dL/
Related
I'm try to display two rows of six columns and have them shrink when the browser window shrinks. The original css displays number of columns depending on the image size, each image floating left, so for different screen sizes I end up with large spaces.
.ngg-albumoverview {
overflow: hidden;
margin-top: 1px;
margin-left: 0px;
width: 100%;
clear:both;
display:block !important;
}
.ngg-album {
float:left;
height: 100%;
padding: 0px;
margin-bottom: 0px;
border: 0px solid #fff;
}
/* IE6 will ignore this , again I hate IE6 */
/* See also http://www.sitepoint.com/article/browser-specific-css-hacks */
html>body .ngg-album {
overflow:hidden;
padding: 0px;
margin-bottom: 0px;
border: 0px solid #cccccc;
}
.ngg-album {
overflow: hidden;
padding: 0px;
margin-bottom: 0px;
border: 0px solid #cccccc;
}
.ngg-albumtitle {
text-align: left;
font-weight: bold;
margin:0px;
padding:0px;
font-size: 1.4em;
margin-bottom: 0px;
}
.ngg-thumbnail {
float: left;
margin-bottom: 10px;
margin-right: 2px;
text-align: center;
font-weight:bold;
background-color:#0F0F0F;
-webkit-border-radius: 0px 0px 8px 8px;
-moz-border-radius: 0px 0px 8px 8px;
border-radius: 0px 0px 8px 8px
}
.ngg-thumbnail img {
background-color:#A9A9A9;
border:0px solid #1D1D1D;
display:block;
margin:4px 0px 4px 5px;
padding:4px;
position:relative;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
width:200px;
}
.more {
width: 100%;
background-color:#0F0F0F;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px
}
.ngg-thumbnail:hover {
background-color: #333333;
}
.ngg-thumbnail img:hover {
background-color: #FFFFFF;
}
.more:hover {
background-color: #333333;
}
.ngg-description {
text-align: center;
}
When I add this css to .ngg-albumoverview it displays six columns ok and shrinks them, but the second image is placed under the first, instead of alongside, with the third image alongside the first.
columns:100px 6;
-webkit-columns:100px 6; /* Safari and Chrome */
-moz-columns:100px 6; /* Firefox */
CSS columns are just segregations of the page and flow the same as the rest of the page. Your images are laid out like this:
[1][3][5]
[2][4][6]
because the flow of a page goes top to bottom and expands as necessary depending on element widths.
Your images will not be in the order you want unless you remove the columns and replace it with a responsive grid. If you want the images to appear like:
[1][2][3]
[4][5][6]
you need to adjust your .ngg-thumbnail widths to be a percentage (that incorporates the margin, border and padding spacing in between and adds up close to 100% between 3 of them), float them to the left and give your .ngg-thumbnail img a max-width: 100%; and height: auto;. Be sure to float the .ngg-thumbnail parent element and not the img or they will be removed from the document flow and not line up with the grid unless you perfectly size everything (and you don't want that).
Almost forgot - make sure you add a clear: left; on the 4th image if your widths don't add up to 100% so it starts on a new line by default. You can select the 4th image with:
.ngg-thumbnail img:nth-of-type(4);
Here is a good resource for you if you'd like an enjoyable way to learn more about this.
I've got a selection part where I have multiple font Awesome icons and the selected one has a bar underneath it.
That goes alright as long as I only have 1 row of icons. When I have multiple rows the "selected bar" is not visible anymore as the icon underneath is hiding it.
I'm not very strong in css and tried all the padding and margins I could think of but without much success. In the attached jsfiddle you can see the selector for the last two icons, but not for the first one.
What should I add to the css below so that I can have multiple rows of icons and still see the selector bar?
.icon-picker {
border: 0px solid #000000;
margin-right: 5px;
width: 24px;
height: 24px;
background-color: #FFFFFF;
padding-bottom: 4px;
}
.selected {
border-left: 0px;
border-right: 0px;
border-top: 0px;
border-bottom: 2px solid #000000;
}
.icon-container {
display: inline-block;
vertical-align: middle;
padding-top: 4px;
padding-left: 15px;
max-width: 300px;
}
Thanks for your time.
jsfiddle
You need to make the <i> tag a block element for the width and height to be applied to the element.
See fiddle
.icon-picker {
border: 0px solid #000000;
display: inline-block;
margin-right: 5px;
width: 24px;
background-color: #FFFFFF;
}
Here is an example. http://jsfiddle.net/52c7t/
Simply: I'm trying to get the div on the right side, to have a border like the div on the left. (I'd want the border to be on the left side of the right div)
I tried a million different combinations and haven't been able to do it. I was trying to avoid making an image and do this with css.
Thanks for your help!
UPDATE:
Image of what I mean. Sorry about my graphic design skills :P
http://i.imgur.com/pGSnL.png
HTML
<div id = "top_bar">
<div id="top_left_button" >border</div>
<div class = "trapezoid"> none </div>
</div>
CSS
.trapezoid{
vertical-align: middle;
position:absolute;
border-bottom: 60px solid blue;
border-left: 45px solid transparent;
border-top-left-radius:30px;
*border-top-right-radius:15px;
*border-bottom-right-radius:3px;
height: 0;
width: 50px;
display: inline-block;
right:1px;
}
#top_bar{
background-color: #000;
border-bottom: 1px solid #666;
color: #222;
position:fixed;
left:0px;
top: 0px;
width:100%;
overflow:hidden;
height: 50%;
font-weight: normal;
white-space: nowrap;
color: white;
z-index:20;
line-height: 45px;
min-width:320px;
max-width: 320px;
max-height:48px;
border-radius: 5px;
text-shadow: rgba(0,0,0,0.6) 0px -1px 0px;
}
#top_bar:after {
content: '';
width: 10%;
display: inline-block;
font-size: 0;
line-height: 0
}
#top_title, #top_left_button, #notifications, #top_right_button {
color: white;
height: 100%;
overflow:hidden;
display: inline-block;
text-align: center;
vertical-align: middle;
}
#top_left_button,#top_right_button{
width: 20%;
background: rgba( 100, 255, 255, .1 );
}
#top_left_button{
border-right: 2px solid #666;
}
EDIT: UPDATED LINK
The simple solution is to create another div since your blue div is already made up using the border property.
That new div is essentially a clone of the blue div, but will be colored red and made a little larger using the CSS width property. This becomes a pseudo border for the blue div.
Example of new div:
.trapezoid-border{
vertical-align: middle;
position:absolute;
border-bottom: 60px solid red; /* Color Changed will be pseudo-border color */
border-left: 45px solid transparent;
border-top-left-radius:30px;
*border-top-right-radius:15px;
*border-bottom-right-radius:3px;
height: 0;
width: 53px; /* Extra 3 pix when compared to .trapezoid class width */
display: inline-block;
right:1px;
}
jsFiddle DEMO
Frankly, I think you should be using an image for this, but if you really want or have to avoid that, a somewhat dirty (though I think very convincing looking) fix would be to create a fixed sized red <div>, that you position and rotate (using the transform property) just right to achieve the appropriate effect.
.redborder {
background-color:red;
width:3px;
height:70px;
transform:rotate(37deg);
-ms-transform:rotate(37deg);
-moz-transform:rotate(37deg);
-webkit-transform:rotate(37deg);
-o-transform:rotate(37deg);
position:absolute;
right:70px;
top:-10px;
}
On jsfiddle: http://jsfiddle.net/QBTpV/18/
(tested in Chrome and IE)
I have the code:
<div>C</div><div>A</div>
div{
border: 4px solid Brown;
display: inline;
}
http://jsfiddle.net/TKQzT/
So I end up with two rectangles with letters in them.
I was wanting them to display as squares instead. So currently they're rectangles taller than they are wide.
Does anyone know how to style them so they'll come out as perfect squares?
You'll have to set the display to inline-block, so that you can specify an explicit width and height:
div {
display: inline-block;
width: 1.25em;
height: 1.25em;
line-height: 1.25em;
}
Here's the fiddle: http://jsfiddle.net/TKQzT/13/
As letters are higher than wider, you'll have to set the with/height of the box manually.
It's not going to be exact without giving them an equal width and height, but try:
div {
border: 4px solid Brown;
display: inline;
padding:2px 5px;
margin:1px
}
and if you're using inline just so you can line up the div's side by side then I recommend using float and having the div's not inline. This way you can give them a explicit width and height.
div {
border: 4px solid Brown;
padding:2px 5px;
margin:1px;
float:left
}
See demo here: http://jsbin.com/ojumay/edit#html,live
The better way i know to do it is to fix height and width, while using inline-block display to be able to do it.
Try this :
div{
display: inline-block;
height: 1em;
width: 1em;
border: 4px solid Brown;
line-height: 1em;
text-align:center
}
I would like to have the #textblock div to have at the same hight as #brevillestandard div.
CSS:
#textblock {
width: 260px;
border: 1px solid #999999;
padding: 0 5px;
float: right;
font-size: 95%;
background-color: #FEF4CC;
}
#brevillestandard {
padding: 8px 0 0 5px;
height: 80px;
Width: 61%;
border: 1px solid #999999;
float: left;
margin: 5px 5px 5px 0;
}
The answer is literally in the question.
You're giving #brevillestandard a height of 80px.
Add:
height: 80px;
to any other elements you want to be the same height.
Are they not the same height when you set the height in the CSS for both of them?
Perhaps it's the different padding that is causing the difference in their appearance?
If you make the CSS identical, do the two divs look the same? That might be one place to start. Or apply the same CSS class to both, and see if they look the same then.