I have a template which has 3 equally spaced boxes, the problem is that i am unable to get the last box to align correctly the first two elements.
how do i add a 3 block equally spaced box in css without tables?
my attempt http://khine.3b1.org/activities/activities.html
any advise much appreciated.
thanks
Make all three boxes float left:
.box ul.supports-list li.last {
width: 200px;
position: relative;
float: left;
}
And provide more width overall:
.box .holder .frame {
background: url(./box-b.gif) no-repeat 0 100%;
width: 620px;
padding: 18px 4px 42px 16px;
}
try to change the next CSS rules to:
.box ul.supports-list {
font-size: 11px;
list-style: none outside none;
margin: 7px 0 0;
overflow: hidden;
padding: 0;
}
.box ul.supports-list li.supports-list-item {
display: list-item;
float: left;
outline-style: none;
width: 200px;
}
.box ul.supports-list li.last {
float: left;
width: 200px;
}
My guess would be to put each box into a div, and then adjust each div's margin-left and margin-top properties to get them to all line up. You'd also want to set the float property of all of the boxes to left. It might not be the most-widely-accepted way of doing things, but that's how I usually solve problems like this.
You can take a look at this example jsFiddle I did for you here: http://jsfiddle.net/Cwca22/g8x5E/ - Hope this helps!
Related
I have container with css elements. All of the elements has display: inline-block property. The problem is that one of the element is twice hire than the rest and instead of having two elements on the side I have only one and a lot of white space. This is how it looks:
my css is:
.productBlock {
display: inline-block;
background-color: darkgray;
height: 271px;
width: 161px;
margin: 3px;
}
.productBlock-higher {
background-color: darksalmon;
height: 548px;
width: 161px;
margin: 3px;
display: inline-block;
}
How can I remove the white space and add element another element there?
I would like to add move two elements on the right side of the higher div. It should look like this:
if I understand correctly, you need to set the vertical align top
https://codepen.io/opmasan/pen/vYNvbpZ
.productBlock {
vertical-align: top;
}
I solved it. I added:
.productBlock-higher {
float: left;
}
I've tried to align last div element / elements using text-align-last property but it didn't work. I have much divs in the center, but my page is different on each resolution so I can't control if elements will be perfectly and none of them will be in last line alone or so, that's why I want to align them to left.
Fiddle: http://jsfiddle.net/ecn8c0pt/
Picture of my site:
Adding the following CSS will work.
http://jsfiddle.net/ecn8c0pt/1/
#gallery h2{
margin: 0;
height: 80px; /*Added height for the Heading */
font-size: 1.1em;
font-weight: 300;
color: #33CCFF;
}
.project{
display: inline-block;
margin: 0 15px 40px;
width: 156px; //To show in jsfiddle i reduced the width.
text-align: left;
float: left; //MUST CHANGE: Once you align left it will automatically float to left. Also the number of count per row will depends on the window width and div width.
}
.project .thumbnail{
width: 156px;//To show in jsfiddle i reduced the width.
height: 144px;
border-radius: 3px;
}
try adding styles to your CSS like these:
float:left;
min-width: 200px;
max-width: 200px;
and try to fix the width for the wrapping div tag
for example:
.wrapper {
width:1000px;
}
see in example DEMO and try to predict the width now when you control it good luck!
I need help with making double vertical lines.
Here are styles:
.slide-container
{
text-align: center;
width: 25%;
}
.v-separator
{
content: "";
display: inline-block;
width: 0px;
height: 230px;
border-right: 1px solid #fafafa;
border-left: 1px solid #b4b4b4;
padding: 0;
position: relative;
top: 20px;
}
.v-separator has width 2px because of border and this causes the problem. I have tried to make .slide-container width a bit less than 25% (like 23.853%), but this is not the decision.
I have no idea how to implement this feature somehow else.
Btw I am using Foundation 5 and Compass.
fiddle which demonstrates the problem: http://jsfiddle.net/5w7Hr/
The width:25% generally doesn't include the margins and borders. When all these are added together the width exceeds 100%. This is the reason why the last box gets pushed down. You can fix this by adding box-sizing setting as shown below.
Note: Elements whose display is inline-block by default have a margin assigned and hence we have to offset that also by assigning a negative margin (Source: CSS Tricks). Alternately, using float: left instead of display: inline-block is also a good option.
#wrapper
{
width: 600px;
background: lime;
box-sizing: border-box;
}
.slide-container
{
text-align: center;
width: 25%;
display: inline-block;
margin: 0px -4px;
}
Demo
I've been trying a few different ways to position 6 different elements in this way:
I've tried using two separate unordered lists stacked on top of each other but I couldn't get them to scale with page stretch properly. I also tried using a table but I can't seem to get the elements to all position in the center of their individual tds.
Here is my css from my unordered lists:
.button ul {
height: auto;
list-style: none;
}
.button li {
display: inline-block;
list-style: none;
margin: 0 18% 0 0;
padding: 0;
vertical-align: top;
}
and these are contained within this:
.newfooterright {
float: left;
width: 33.333333%;
top: 0%;
left: 0%;
height: 250px;
padding: 0 0 0 0;
margin: 0;
font-family: RobotoLight;
text-decoration: none;
text-transform: none;
font-size: 1.5em;
text-align: center;
color: #ffffff;
vertical-align: middle;
}
here's a jsfiddle with this method:
jsFiddle for unordered list
I think an unordered list is probably the way to go... I'm just not sure how to get all of the elements to align in the center of each li. The elements on the bottom seemed to be stuck in the bottom right corner of the li. The bottom elements are also widgets from google+, twitter, and facebook, so I'm not sure if that is affecting their position.
Basically the elements need to be able to do this:
Scale with window width in terms of their spacing (to a point, I don't need an uber small phone layout or something. Something like padding-right or margin-right?)
When the elements scale the bottom element needs to stay aligned with the top element in the center
positioned like in the picture!
Any suggestions on how to get this positioned cleanly would be appreciated!
Thank you so much!
Here is one way you might do it, I am proposing the following HTML scaffolding:
<div class="newfooterleft">
<ul class="button">
<li><a class="twitterbutton" href="#"></a></li>
<li><a class="facebookbutton" href="#"></a></li>
<li><a class="googleplusbutton" href="#"></a></li>
</ul>
<ul class="widget">
<li>(I put the corresponding widget here)</li>
<li>(I put the corresponding widget here)</li>
<li>(I put the corresponding widget here)</li>
</ul>
</div>
and the following CSS:
.newfooterleft {
width: 40%;
border: 1px solid red;
overflow: auto;
}
.twitterbutton {
background: url("http://www.placekitten.com/100/100") no-repeat;
background-size: 100%;
}
.twitterbutton:hover {
}
.facebookbutton {
background: url("http://www.placekitten.com/100/100") no-repeat;
background-size: 100%;
}
.facebookbutton:hover {
}
.googleplusbutton {
background-image: url("http://www.placekitten.com/100/100");
background-size: 100%;
}
.googleplusbutton:hover {
}
.newfooterleft ul {
display: table;
width: 100%;
margin: 0;
padding: 0;
}
.newfooterleft ul li {
display: table-cell;
width: 33.3333%;
margin: 0;
padding: 0;
text-align: center;
vertical-align: middle;
border-left: 1px solid red;
}
.newfooterleft ul li:first-child {
border-left: none;
}
ul.button li {
height: 100px;
}
.button li a {
display: inline-block;
width: 62px;
height: 62px;
}
.button {
border-bottom: 1px solid red;
}
ul.widget li {
background-color: white;
height: 150px;
}
In this case, I am adjusting the unordered lists to behave like tables and table cells.
It works reasonably well except if the width gets too narrow, but this may be okay depending on your application.
You could use a min-width to constrain it.
You could also try some variations with display: table-row.
Demo Fiddle: http://jsfiddle.net/audetwebdesign/2U3D9/
In general, if you want to select every 3 elements, you have to use :nth-child(). In the parenthesis, you can put any combination of n and a digit. There are also some keywords, such as odd and even. So in this case, you are going to have 3 different :nth-child() selectors. It will look like this
li:nth-child(6n+1), li:nth-child(6n+2), li:nth-child(6n+3) {
color:red;
}
The 6n selects every sixth element, and the +1 adds that number. So if you plug in 1, you will get back 7 for the first selector, 8 for the second, and 9 for the third.
Here is a fiddle demonstrating this in use
Here is an article explaining nth-child in more depth
It looks like your li's should be all ready to collapse.You could give your li's a fixed height and width (creating boxes if you will), then add a style for each image to have a relative position and use top and left to get them into position (remember, percentages can scale for you). I've dropped hints on how to accomplish this as you wanted to learn by doing, but let me know if you need the CSS!
I have this code: http://jsfiddle.net/5qLDz/ inside which I want to have images vertically aligned to bottom of the container (with some padding from container itself). It doesn't work even with li having display: table-cell and both li and img having vertical-align:bottom set. What can it be?
Please stop posting solutions using position: absolute. As you can see in my code, I used text-align: center which is important there.
One simple fix is to set the line-height to be the same as the container height:
ul.thumbnails li {
box-sizing: border-box;
text-align: center;
background: grey;
padding-bottom: 22px;
height: 222px;
line-height: 222px;
display: table-cell;
}
ul.thumbnails li img {
border-radius: 5px;
bottom: 22px;
vertical-align: bottom;
}
That seems to work, http://jsfiddle.net/audetwebdesign/5qLDz/20/
You only need to declare vertical-align: bottom on the img rule.
However, if you add other elements like captions or social media links this could affect how you implement the solution.
For the love of god don't use display:table-cell just to vertically align something. Just using relative positioning will also do this far more easily: forked Fiddle.
Only changed the parent to position:relative and the child to position:absolute.
Update your CSS:
div.left section.box ul.thumbnails {
margin: 0;
padding: 0;
}
ul.thumbnails li {
text-align: center;
background: grey;
height: 222px;
position:relative;
}
ul.thumbnails li img {
border-radius: 5px;
bottom: 22px;
position:absolute;
}