In the image above, you can see that -its not perfect- all the <ul> elements have all the same size, and the <li> items no, but they are centered in the <ul> no matter what size is (always assuming that will be smaller)
how can i do this?
ul{ width:160px; }
li{ width:auto; margin:5px auto;}
is not working..
-Image edited with texts-
I don't really understand what you're trying to say with your images, but here's how to make something that looks like them.
See: http://jsfiddle.net/thirtydot/wGpPc/
HTML:
<div class="listContainer">
<ul>
<li>Item 1</li>
<li>Item 2</li>
..
</ul>
</div>
CSS:
.listContainer {
width: 160px;
background: #ccc;
border: 1px solid #444;
float: left;
text-align: center;
margin-right: 9px
}
.listContainer ul {
list-style: none;
margin: 0;
padding: 0;
display: inline-block;
vertical-align: top;
text-align: left;
background: #f0f;
/* for ie6/7 */
*display: inline;
zoom: 1
}
li {
margin: 5px 0;
background: #fff
}
Related
I have menu bar which need to be margin-top: 150px;
But visually in Firefox looking different as on Chrome.
Header code: https://codepen.io/bugerman21/pen/rNxvyOv
Chrome:
Correct display
Firefox:
Incorrect display
HTML:
<nav>
<ul class="nav">
<li class="category"><span>Category <i class="fas fa-sort-down"></i></span>
<ul>
<li>Qwerty 1</li>
<li>Qwerty 2</li>
<li>Qwerty 3</li>
<li>Qwerty 4</li>
</ul>
</li>
<li>Cuntact us</li>
<li>FAQ</li>
</ul>
CSS:
* {
margin: 0;
pading: 0;
}
.nav li ul {
position: absolute;
margin-top: 150px;
min-width: 150px;
list-style-type: none;
display: none;
}
How to do margin-top only for the Firefox browser?
Unsuccessful attempt:
#-moz-document url-prefix() {
.nav li ul {
margin-top: 150px;
}
}
Here ya go buddy, sorry I left for the day yesterday but see the changes made and I left outlines on the elements to give a better visual reference. As it is now it will display as expected on all browsers even old internet explorer. Although you could accomplish the same thing cleaner overall, this at least gets you back on track. Cheers and welcome to StackOverflow! :)
PS : since the nav menu items don't have a fixed height you might want to consider making that something static so you can change the top: 56px to a value that places the drop down consistently no matter the width of the screen. If you make the example full screen you'll see what I mean.
header {
display: flex;
margin: 0;
padding: 0 20px;
justify-content: space-between;
align-items: center;
background-color: silver;
}
.header {
grid-area: header;
background-color: #1f1f1f;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
}
/*---------- Logo ----------*/
.logo {
font-family: 'Gentium Book Basic', serif;
font-size: 2.5em;
color: #808080;
}
/*---------- Nav menu ----------*/
.nav {
list-style-type: none;
display: flex;
justify-content: flex-start;
margin: 0;
}
.nav > li {
text-decoration: none;
font-family: 'Roboto', sans-serif;
color: #ffffff;
transition: background-color .25s ease;
}
.nav a {
display: block;
padding: 20px;
color: #ffffff;
font-size: 1em;
}
.category {
padding: 0 20px;
display: flex;
align-items: center;
position: relative;
overflow: visible;
border: red 1px solid;
}
/*---------- Sub menu ----------*/
.nav li ul {
position: absolute;
top: 56px;
left: 0;
min-width: 150px;
margin: 0;
padding: 0;
list-style-type: none;
display: none;
border: green 1px solid;
}
.nav li > ul li {
border-bottom: 1px solid #ffffff;
background-color: #1f1f1f;
}
.nav li > ul li a {
text-transform: none;
}
.nav li:hover > ul {
display: block;
}
.nav > li:hover {
background-color: #404040;
/* box-shadow: -5px 5px #1f1f1f; */
}
.nav li ul > li:hover {
background-color: #404040;
}
/*---------- Search & Profile----------*/
.search_and_profile {
display: flex;
align-items: center;
}
.search_and_profile > p {
margin: 0;
color: #ffffff;
}
.search-container button {
float: right;
padding: 6px 10px;
background: #e0e0e0;
font-size: 17px;
border: none;
cursor: pointer;
}
.search-container input[type=text] {
padding: 6px;
font-size: 17px;
border: none;
}
<header class="header">
<span class="logo">Qwerty</span>
<nav>
<ul class="nav">
<li class="category"><span>Category <i class="fas fa-sort-down"></i></span>
<ul>
<li><a href=#>Qwerty 1</a></li>
<li>Qwerty 2</li>
<li>Qwerty 3</li>
<li>Qwerty 4</li>
</ul>
</li>
<li>Cuntact us</li>
<li>FAQ</li>
</ul>
</nav><!-- .nav -->
<div class="search_and_profile">
<div class="search-container">
<form action="#">
<input type="text" placeholder="Search.." name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div><!-- .search-container -->
</div><!-- .search_and_profile -->
</header>
It will work for me, additionally i included color too to make sure.
Also you try this option too
#media screen and (-moz-images-in-menus:0) {
/* your style */
}
* {
margin: 0;
pading: 0;
}
.nav li ul {
position: absolute;
margin-top: 150px;
min-width: 150px;
list-style-type: none;
display: none;
}
/* Added */
#-moz-document url-prefix('') {
.nav li ul {
margin-top: 150px;
color: orange;
}
}
<div class="nav">
<ul>
<li>Home</li>
<li>About
<ul>
<li>Some text</li>
<li>Some more text</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
I have been struggling with this for quite some time now. Apparently using % width and height is not enough?
Right now I have fixed 100px width and height and border radius is half of it so it will make it look round. Line height is set to 100px so text would display vertically in the middle of those circles. I have no idea how to vertically center text in another way...
How do I make this menu responsive so it would become smaller as the screen size changes?
HTML:
<div id="menu">
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
CSS:
#menu ul {list-style-type: none; padding: 0; margin: 0;}
#menu li {display: inline; float: left;}
#menu a {
display: block;
width: 100px;
height: 100px;
-moz-border-radius: 50px;
border-radius: 50px;
border: 1px #a2a2a2 solid;
text-transform: uppercase;
text-decoration: none;
font-size: 1em;
text-align: center;
line-height: 100px;
margin: 5%;
}
If you want true 'responsiveness' you can use the vw units which are directly related to the viewport width.
Jsfiddle Demo
Support isn't bad: CanIUse.com
#menu ul {
list-style-type: none;
padding: 0;
margin: 0;
}
#menu li {
display: inline-block;
}
#menu a {
display: block;
width: 15vw;
height: 15vw;
border-radius: 50%;
border: 1px #a2a2a2 solid;
text-transform: uppercase;
text-decoration: none;
font-size: 4vw;
text-align: center;
line-height: 15vw;
margin: 5%;
}
<div id="menu">
<ul>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
</ul>
</div>
doing a project at uni and I've completely misread the brief, used HTML5 in my project and realised that I'm not allowed to do this. Oops!
My only problem is, I've tried to convert it to XHTML Strict 1.0 standards by using divs and it just isn't as easy as I thought.
I will only post up the nav section as that's what I need help with, no need for all the extra bits and bobs.
Before I post - just wanted to clarify the question:
This code is HTML5 compliant, I need it to be XHTML Strict 1.0 compliant but I can't get the CSS working with divs in place of the nav function.
Here is the code:
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="style\main.css" />
<title>Wessex Round Table of Investors</title>
</head>
<body>
<div id="whole">
<div id="header">
<img class="logo" src="images\wrtilogo.gif" alt="WRTI Logo" />
</div>
<div id="navbar">
<div id="container">
<nav id="menu">
<ul>
<li>Home</li>
<li>Link
<ul>
<li>Sublink</li>
<li>Sublink</li>
<li>Sublink</li>
<li>Sublink</li>
</ul>
</li>
<li>Link
<ul>
<li>Sublink</li>
</ul>
</li>
<li>Link
<ul>
<li>Sublink</li>
</ul>
</li>
<li>Link</li>
</ul>
</nav>
</div>
</div>
</div>
</body>
</html>
aaaand here is the CSS
div.whole {
margin-left: 15%;
margin-right: 15% }
div.header {
width: 100%; }
div.navbar {
position: absolute;
display: block;
width: 90%;
margin-left: auto;
margin-right: auto;
text-align: center }
img.logo {
display: block;
margin-left: auto;
margin-right: auto }
#content
#footer
#navigation {
width: 800px;
margin: 30px auto;
background: #fff;
box-shadow: 0 0 20px #8493A6;
overflow: auto;
}
nav#menu {
margin: 10px 30px 30px;
padding: 0;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
text-align: center; /*this is the first bit that centers the menu*/
font: 100%/40px Verdana, Geneva, sans-serif
}
nav#menu ul {margin: 0;}
nav#menu ul li {
margin: 0;
padding: 0;
display: inline-block; /*this is the second bit that centers the menu*/
position: relative;
list-style: none;
background: #fff;
}
nav#menu ul li a {
padding: 1px 20px;
display: block;
font-size: 17px;
font-weight: 300;
color: #cc0000;
text-decoration: none;
}
nav#menu ul li:hover {background: #fff;}
nav#menu ul ul {
width: 160px;
margin: 0;
padding: 0;
position: absolute;
top: 42px;
left: -999px;
border: 1px solid #ccc;
border-radius: 3px 3px 3px 3px;
box-shadow: 0 0 0 transparent;
}
nav#menu ul li:hover ul { /*this bit centers the dropped ul relative to the parent li*/
margin: 0 0 0 -80px;
left: 50%;
}
nav#menu a:hover {color: #540000;}
Often, you're using IDs in your HTML, but styling based on classes.
e.g. If you're going to say
div.navbar {
...
}
That will apply to:
<div class="navbar">...</div>
not
<div id="navbar">...</div>
I really don't know what's the problem with my code...
The cell is positioned relative and the form is positioned absolute. In every browsers it works as it should but not Firefox...
Does it have problems with table CSS?
CSS
.table { display: table; width:100%; height:100%; table-layout: fixed; }
.row { display: table-row; height: 1px; }
.cell { display: table-cell; vertical-align: middle; position: relative; }
.menu .cell { width: 33.33%; border: 1em solid #000; font-size: 1.14em;
background: #fff; background-clip: padding-box; vertical-align: top; position: relative; }
.menu .cell header { padding:.5em 1em; background-color: #383430; color: #fff; line-height: 1.2; position: relative; }
.menu .cell .content { padding:2em 1em 3em 1em;}
.menu .cell h3 { font-size: 1em; text-transform: uppercase; text-decoration: underline; font-weight:300;}
.menu .cell ul { margin: 0; padding: 0; list-style: none; }
.menu .cell li { line-height: 1.4; padding:0.25em 0; border-bottom: 1px solid #ecece6;}
.menu .cell li:last-child { border-bottom: none; margin-bottom: 0;}
.menu .like header:before { content : 'on aime !'; position: absolute; bottom: 100%; left: 1em;
text-transform: uppercase; font-size: .8em; padding: 3.5em .5em .5em .5em; border-radius: 1em 1em 0 0;
background: #dd582a url(imgs/on-aime.png) center .5em no-repeat; box-shadow: 0px 0px 2px 0 rgba(0,0,0,.5); }
.menu .favorite { position: absolute; bottom: -.75em; right: -.75em; display: block; width: 100%; overflow: hidden;}
.menu .favorite input { position: absolute; top: -30em;}
.menu .favorite label,
.menu .favorite label:before { background-color: #dd582a; height: 32px; white-space: nowrap;
float: right; color: #fff; background-image: linear-gradient(#dd582a 50%, #bd5d3b 100%); }
.menu .favorite label:hover,
.menu .favorite label:hover:before{background-image: linear-gradient(#bd5d3b 5%, #dd582a 50%); }
.menu .favorite label { text-align: center; font-size: 24px; width: 32px; display: block;
line-height: 28px; border-radius: 4px; cursor: pointer;}
.menu .favorite label:before { content: "Add to favorite"; display: block; position: absolute; right: 34px;
padding:0 8px; font-size: 14px; line-height:32px }
.menu .favorite input:checked + label { color: #e77248; background-color: #fff;background-image: linear-gradient(#ffffff 50%, #bfbfbf 100%); }
.menu .favorite input:checked + label:hover{background-image: linear-gradient(#bfbfbf 5%, #fff 50%);}
.menu .favorite input:checked + label:before { content: "Like"}
HTML
<div class="table menu">
<div class="row">
<div class="cell">
<div >
<header>100 $</header>
<div class="content">
<h3>Title 1</h3>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</div>
<form class="favorite">
<input id="bal-menu2" type="checkbox" name="bal-menu2" value="favorite" />
<label for="bal-menu2">♥</label>
</form>
</div>
</div>
<div class="cell">
<div >
<header>100 $</header>
<div class="content">
<h3>Title 1</h3>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
</ul>
</div>
<form class="favorite">
<input id="bal-menu2" type="checkbox" name="bal-menu2" value="favorite" />
<label for="bal-menu2">♥</label>
</form>
</div>
</div>
</div></div>
Here's a fiddle
http://jsfiddle.net/warface/8bWUe/2/
Look in firefox, you'll notice that the form "add to favorite" stack on each other but in other browser it positioned just fine.
Any clues on how to make it work has it should like in Chrome, Safari, IE8+,...?
EDIT
After some research... Firefox has this problem since 2000
https://bugzilla.mozilla.org/show_bug.cgi?id=63895
And they don't seem to give a middle finger about it to fix it... burn in hell Firefox !
Here's a fix that takes the modified .cell >div {position:relative} and add height:100% to the divs.
CSS
.row { display: table-row; height:100%; }
.cell div {height:100%; position: relative }
Here's the udpated fiddle
http://jsfiddle.net/8bWUe/19/
Works on FF v22.0
Make
.row
{
display: block;
position:relative
}
instead of "table-row" - that should do the trick.
I was able to get the forms placed in firefox with the following css:
.cell > div { position: relative }
Have a Navbar <div>, inside is a <ul> and each <li> contains a <a> with a link (this is for a navigation bar)
I looked on Google and this site and I couldn't find exactly what I was looking for.
What I want is to be able to keep my current style (using <li> with <a>'s inside), and I want the <li> to be evenly distributed and centered (this part comes naturally if they are evenly distributed...) inside the <ul> (which is inside the navbar <div>).
Anyways, if that doesn't make sense let me know, currently they are just left aligned...here's what I have:
HTML:
<div class="navbar">
<ul>
<li>Home</li>
<li>Discounts</li>
<li>Contact Us</li>
<li>About Us</li>
</ul>
</div>
CSS:
.navbar {
width: 100%;
margin-left: auto ;
margin-right: auto ;
background-color: #ABCDEF;
}
.navbar ul {
list-style-type: none; /*to remove bullets*/
text-align: center;
margin: 0px;
padding: 0px;
width: 90%;
overflow: hidden;
}
.navbar li{
float: left;
padding: 2px;
width: 150px;
margin-left: auto ;
margin-right: auto ;
}
I can also include my .navbar a{} if that is necessary.
I am very new to CSS so go easy, also I did look all over SO and Google first and couldn't find anything quite like this (although maybe since I am new I don't realize it's the same).
If this is a faulty CSS method and/or there is a much easier, more commonly used way of doing this, go ahead and link/post that instead, but I would prefer this way as it makes most sense to me.
This allows a widthless centered dynamic ul if you don't want to specify 90% width:
<!doctype html>
<div class="navbar">
<div id="for-ie">
<ul>
<li>Home</li>
<li>Discounts</li>
<li>Contact Us</li>
<li>About Us</li>
</ul>
</div>
</div>
<style>
.navbar {
width: 100%;
margin-left: auto ;
margin-right: auto ;
background-color: #ABCDEF;
}
.navbar ul {
list-style-type: none; /*to remove bullets*/
text-align: center;
margin: 0 auto;
padding: 0px;
border:1px solid red;
display:table;
overflow: hidden;
}
.navbar li{
float: left;
padding: 2px;
width: 150px;
margin-left: auto ;
margin-right: auto ;
}
</style>
<!--[if IE]>
<style>
#for-ie { text-align:center; }
#for-ie ul { display:inline-block; }
#for-ie ul { display:inline; }
</style>
<![endif]-->
Tested in IE6, FX 3.
EDIT: Alternate style without the extraneous element:
<!doctype html>
<div class="navbar">
<ul>
<li>Home</li>
<li>Discounts</li>
<li>Contact Us</li>
<li>About Us</li>
</ul>
</div>
<style>
.navbar {
width: 100%;
margin-left: auto ;
margin-right: auto ;
background-color: #ABCDEF;
}
.navbar ul {
list-style-type: none; /*to remove bullets*/
text-align: center;
padding: 0px;
zoom:1;
border:1px solid red;
overflow: hidden;
}
.navbar li{
padding: 2px;
width: 150px;
display:inline-block;
}
</style>
<!--[if IE]>
<style>
.navbar li { display:inline; }
</style>
<![endif]-->
The proper way to do this these days is to just use Flexbox:
.navbar ul {
list-style-type: none;
padding: 0;
display: flex;
flex-direction: row;
justify-content: space-around;
flex-wrap: nowrap; /* assumes you only want one row */
}
You can use text-align:fixed to do this with just a few lines of CSS, no extra markup.
See my answer here: https://stackoverflow.com/a/15232761/87520
<ul>
<li>Home</li>
<li>Discounts</li>
</ul>
<style>
.navbar > ul {text-align:justify;}
.navbar > ul > li {display:inline-block}
.navbar > ul:after { content:' '; display:inline-block; width: 100%; height: 0 }
</style>
Basically comes down to add text-align: center to the ul and display: inline-block to the li's.
This seems to do the trick:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
.navbar {
background-color: #ABCDEF;
}
.navbar ul {
list-style-type: none;
margin: 0px;
padding: 0px;
text-align: center;
}
.navbar li{
display: inline-block;
padding: 2px;
width: 150px;
}
</style>
</head>
<body>
<div class="navbar">
<ul>
<li>Home</li>
<li>Discounts</li>
<li>Contact Us</li>
<li>About Us</li>
</ul>
</div>
</body>
</html>
Are you looking for something like this:?
.navbar {
width: 100%;
margin-left: auto ;
margin-right: auto ;
background-color: #ABCDEF;
}
.navbar ul {
list-style-type: none; /*to remove bullets*/
text-align: center;
margin: 0px;
padding: 0px;
overflow: hidden;
}
.navbar li{
display:inline;
line-height:30px;
}
.navbar li a { padding:.4em 5em;}
<div class="navbar">
<ul>
<li>Home</li>
<li>Discounts</li>
<li>Contact Us</li>
<li>About Us</li>
</ul>
</div>
you can use "display: table" and "display: table-cell"
the code is cleaner and the li width isn't hardcoded:
<div class="navbar">
<ul>
<li>Home</li>
<li>Discounts</li>
<li>Contact Us</li>
<li>About Us</li>
</ul>
</div>
.navbar {
background-color: #ABCDEF;
}
.navbar ul {
list-style-type: none;
padding: 0px;
display: table;
table-layout: fixed;
width: 100%;
}
.navbar li{
padding: 2px;
display:table-cell;
width: 50px; /* just for the browser to get idea that all cells are equal */
text-align: center;
border: 1px solid #FF0000;
}
http://jsfiddle.net/dchwv6qn/1/
you need to define a fixed width for your container .
for example:
.navbar {
width: 1000px; /* */
margin: 0 auto;
background-color: #ABCDEF; }
if you want to keep your bg color of .navbar, stick with 100%, remove float left from li and style it like this->
.navbar ul {
list-style-type: none; /*to remove bullets*/
text-align: center;
margin: 0 auto;
padding: 0px;
width: 800px;
overflow: hidden;
}
.navbar li{
display: inline-block;
padding: 2px;
width: 150px;
marign: 0 auto;
}
Well ive try'd every thing, nothing is working so if you have the same problem, then i would recommend you use tables and td's to align them, still works properly.