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!
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'm aiming to move through list items, fading one out as the other fades in. I need all three of these list items to display on the same line, on top of each other. Should work with images of varying widths, the only common attribute may be the top position, relative to the div it is in.
Link
.container {
display:table;
margin: 0 auto;
}
ul {
list-style-type:none;
}
To explain a little better, I need these items, whether it's text, images, divs of varying sizes to be in the middle of the screen, perfectly centered.
This is achievable with a javascript solution, by measuring the size of the element contained and subtracting the middle offset from the left side of the image.
What I'd like to achieve is a CSS3/HTML5 only option to this similar effect.
I hope I understand your question: Simply using position property value of absolute, will stack them on each other. Try this:
* {
margin: 0 auto;
}
.container {
width: 300px;
position: relative;
margin-top: 70px;
}
ul {
list-style-type:none;
}
ul li {
position: absolute;
height: 25px;
background-color: red;
color: white;
padding: 10px;
display: block;
text-align: center;
width: 100%;
}
<div class="container">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
Note: You can use z-index to alter the order of the stack of the element.
What would be the easiest way to center align an inline-block element?
Ideally, I don't want to set a width to the elements. This way depending on the text inputted within the elements, the inline-block element will expand to the new width without having to change the width within the CSS. The inline-block elements should be centered on top of one another (not side by side), as well as the text within the element.
See code below or see on jsFiddle.
The current HTML:
<div>
<h2>Hello, John Doe.</h2>
<h2>Welcome and have a wonderful day.</h2>
</div>
The current SCSS:
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600);
body {
margin: 0 auto;
background: rgba(51,51,51,1);
font-family: 'Open Sans', sans-serif;
}
div {
width: 100%;
height: auto;
margin: 15% 0;
text-align: center;
h2 {
margin: 0 auto;
padding: 10px;
text-align: center;
float: left;
clear: left;
display: inline-block;
&:first-child {
color: black;
background: rgba(255,255,255,1);
}
&:last-child {
color: white;
background: rgba(117,80,161,1);
}
}
}
Adding a br between the two elements and taking out the float: left/clear: left may be the easiest way; however, I was curious if there was another way going about this.
Like this? http://jsfiddle.net/bcL023ko/3/
Remove the float:left left and add margin: 0 auto to center the element. Or is it something else that your are looking for?
I have a grid of square images.
I want to put a border on the inside of each of these but not on the outside of the whole box, as in the image below:
Here's the html setup.
<div class="grid-wrapper">
<ul>
<li><img src="[image url]" /></li>
</ul>
</div>
And the CSS
.grid-wrapper {
margin: 0 auto;
}
.grid-wrapper ul {
list-style: none;
display: block;
}
.grid-wrapper ul li {
padding: 5px;
border: 1px solid #F1F1F1;
}
I've tried putting the border all the way round each of the li elements and then adding a white border on the grid-wrapper to put it over the outer borders but that didn't work.
How can I get this without manually setting each one's border-left/border-bottom etc. The squares are dynamically pulled from the database so each one doesn't have a particular class, they're all identical.
UPDATE
The grid is fluid. When you pull the browser window open, it adds more to the top row (if there's room) and less when you pull the browser window inward. There's no fixed number of icons.
You didn't specify what you want to happen when there's a ragged row at the bottom, so I'm not sure if this meets your requirement fully, but this example may accomplish what you need.
http://jsfiddle.net/52LRd/
It works by setting a border on the bottom and left each of each element, then by budging the ul inside the wrapper 1px up and left, making those edges invisible.
.grid-wrapper {
float: left;
margin: 0 auto;
overflow: hidden;
}
.grid-wrapper ul {
list-style: none;
display: block;
margin: 0;
padding: 0;
position: relative;
top: 1px;
right: 1px;
}
.grid-wrapper ul li {
float: left;
padding: 10px;
border-bottom: 1px solid #F1F1F1;
border-left: 1px solid #F1F1F1;
}
This gets you out of having to try to figure out which list items are in the top row, bottom row, left column, and right column, which would require JavaScript.
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!