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.
Related
I'm trying to make two divs, each containing a title and a list, next to each other. However, if one list is smaller than the other, then the div with the smaller list is lower on the web page:
This is the code for the divs:
<div id='classes' class="profileList">
<h2 class="title">Classes</h2>
<ul>
<li>Soldier</li>
<li>Sniper</li>
<li>Spy</li>
</ul>
</div><div id="divisions" class="profileList">
<h2 class="title">Divisions</h2>
<ul>
<li>Steel</li>
<li>Silver</li>
</ul>
</div>
(The end of the left one and the start of the right one are right next to each other because otherwise 50% div width does not put the divs next to each other)
This is the CSS:
.title {
position: relative;
text-align: center;
padding-top: 0;
margin-top: 0;
text-shadow: #FAD2AF 0 0 6px;
}
.profileList {
display: inline-block;
width: 50%;
}
Why are these div tops at different heights when the elements aren't equal? And how do I fix it?
change .profileList to this:
.profileList {
display: inline-block;
width: 50%;
vertical-align:top;
}
when you use inline-block, you need to give it the desired vertical align, since the default is baseline
I'm really struggling to get this navigation-menu with a image that splits the navigation to work. Responsive is a big plus. I don not believe the current code is on the the right way to go, so please be open minded of how to approach this problem.
HTML
<div id="nav">
<ul class="nav-left">
<li>1</li>
<li>2</li>
</ul>
<div class="nav-logo"></div>
<ul class="nav-right">
<li>3</li>
<li>4</li>
</ul>
</div>
CSS
#nav {
width: 400px;
background: #f5f5f5;
border: 1px solid grey;
text-align: center;
}
.nav-left, .nav-right, .nav-logo {
display: inline-block;
height: 30px;
vertical-align:bottom;
}
.nav-left {
background: red;
}
.nav-right {
background: red;
}
.nav-right, .nav-left {
width: 100px;
line-height: 30px;
padding: 0;
}
.nav-logo {
background: yellow;
width: 30px;
height: 100px;
margin-left: 10px;
margin-right: 10px;
}
ul {
margin: 0;
text-align: justify;
list-style: none;
}
li {
display: inline;
width: 100%;
}
Update 05.05.14
Updated it with my current code as requested.
I have gone ahead and made a slightly responsive header for you: JSfiddle (Note: random coffeeshop logo borrowed from google image search... man I should go get a coffee)
The idea is to use the html5 nav element to contain your links, each with a width:20% so it resizes with the width of the screen.
The image is positioned with background:url('...') no=repeat center; to avoid sizing problems. It's in a separate div to allow you to stripe the <nav> element. This is possible with pure css.
As you want to position the links vertically they are nested in divs, and space for the image is made using an empty div with the same width:20%; property as the link containers.
The design breaks once you get close to small mobile device widths (as the links cover the image). For this you can use #media queries.
I hope this gives you a starting point, but design is very subjective and there are many different ways to do it.
It may be worth while to style your page with Bootstrap and inspect their CSS to see what's happening.
Can you please add your css and html codes into your qustion then I can help you with a best solution. Also if you want then email me your codes, I will send you the best solution.
Orherwise just add a class .navfix on the main navigation container div or ul. then add the style property z-index:9999999 for the class .navfix into your stylesheet. Also if you have use any other div for the background then you have to add same thing for the nav background container but here z-index property should be negative or lower then other one.
sample :
.navfix {
z-index:9999999;
}
for background container (if you have)
then
.navfix {
z-index:9999999;
}
.backgrounContainerClassName {
z-index:-1;
}
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 am trying to create a navigation panel for my website. I would like it to consist of:
Four tabs in equal size with text-centered in each tab.
They should fill the whole page width.
I would really like the design to be flexible and browser friendly. I have tried various float techniques, but I can't get it to work. I hope that you can help me out!
Thank you.
HTML
EDIT: it's 2015 and HTML5 has been there for a while; following code should be inside a nav element (html5doctor) with landmark ARIA attribute role="navigation" on it (and 99.9% of the time be unique in any given page).
A navigation panel should use an unordered list of links:
<ul id="nav">
<li>One</li>
<li> Second</li>
<li>Third</li>
<li>Fourth and last, so large that... worst case</li>
</ul>
CSS
EDIT2: It's 2017, just use Flexbox 😲 (with or without flex-wrap: wrap)
inline-block is useful but has one drawback: whitespace between two elements must be carefully managed. Whether removed or no </li> in HTML5 or </li> at the beginning of the following line stuck like </li><li>next item or other tricks, you still have to do something or it'll create a ~4px gap between 2 elements.
25% + 25% + 25% + 25% doesn't equal 100% on all browsers if the total isn't a multiple of 4. Each browser has its own rounding method.
If you want elements to total 100% width and equal width, another method is to use display: table (and table-cell) with table-layout: fixed to force browsers to use the other table algorithm, the one that doesn't try to adapt cells width to content but respect the widths wanted by the designer/developer as far as possible.
ul {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
#nav {
display: table;
table-layout: fixed;
text-align: center;
}
#nav li {
display: table-cell;
width: 25%;
padding-right: 1px;
height: auto;
vertical-align: bottom;
}
#nav a {
display: block;
min-height: 100%;
padding: 4px 10px;
background-color: #222;
color: white;
border-radius: 6px 6px 0 0;
}
Fiddle
http://jsfiddle.net/PhilippeVay/aHCy3/1/
edit: http://jsfiddle.net/PhilippeVay/aHCy3/2/ with another method for space between each tab, courtesy of my colleague.
You don't need floats for this. Just set the width to 25%, or a tiny bit less than 25%. If you're using this on a block level element, set display: inline-block. This will work for all browser sizes, as well as respond to window resize.
HTML
<div class="nav">Nav 1</div>
<div class="nav">Nav 2</div>
<div class="nav">Nav 3</div>
<div class="nav">Nav 4</div>​
CSS
body, html {
width: 100%;
padding: 0;
margin: 0;
}
.nav {
width: 24%; /*Slightly less than 1/4th of the width*/
display: inline-block;
padding: 0;
margin: 0;
text-align: center;
}​​
Live demo
css:
.tab {
float: left;
width:25%;
height:25px;
background:black;
border:1px solid #fff;
box-sizing: border-box;
}​
html:
<div class="tab"></div>
<div class="tab"></div>
<div class="tab"></div>
<div class="tab"></div>​
jsfiddle: http://jsfiddle.net/zP7Xh/6/
I have a menu bar the is centered on the screen. To the left I have a element as well as one to the right. These have background images that tie the menu bar to the rest of the graphical layout.
The problem is that there are white spaces between the tags. Here is the CSS:
#menu_items {
display: inline-block;
position: relative;
margin: 0;
padding: 6px;
top: -9px;
height: 15px;
background-color: #75784D;
}
#swoop_left {
position: relative;
display: inline-block;
margin: 0;
padding: 0;
background-image: url('../imgs/menu_l.gif');
background-repeat: no-repeat;
width: 140px;
height: 21px;
font-size: 0px;
border: solid red 1px;
}
#swoop_right {
position: relative;
display: inline-block;
margin: 0;
padding: 0;
background-image: url('../imgs/menu_r.gif');
background-repeat: no-repeat;
width: 140px;
height: 21px;
border: solid red 1px;
}
The images themselves are 140px x 21px (w x h).
I can't float them because the menu won't center. I can't use
font-size: 0px;
on the parent container because it won't display the menu items, and setting the menu-items to
font-size: 1em;
afterwards doesn't fix the issue.
Anyone have a solution that will work in all browsers and doesn't rely upon JS?
NOTE: The borders of the two elements are for layout purposes only and won't be in the final code.
How exactly are the items in the menu generated? In the div that contains the menu are you using an unordered list?
If you are then one possible solution would be to add the left and right images to the :first-child and :last-child elements of the list using css. You would no longer need the two extra div elements and so could just concentrate on the single menu container.
There are four ways which i know & which you can use to remove the whit space.
1) as you said give font-size:0; to your parent DIV & define the font-size:15px; to your child divs.
2)You have to write your mark up in a single line like this:
<div class="parent">
<div>1</div><div>2</div><div>3</div>
<div>
Instead of this
<div class="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
3) Not that good solution but some time effective. Give margin-letf:-5px in your div. Like this:
div + div{margin-left:-5px}
4) At last you can use float instead of inline-block;
set background color to check your div width and height and you can use margin-left: with negative value to stand your div perfectly.