I'm facing a problem using CSS. I've expended the time allotted to complete the target job, but it's too hard for me. Now I'm going ask all of you (webmasters/developers) to solve my problem.
Please review this picture and tell me how I can move the second line of text for the bullets numbered (3, 5, 6, 8) - I want the second line of text to start at the same horizontal position at which the first one starts.
Here is CSS of this sidebar:
.plugins ul{padding-left:0;counter-reset:plugincount;}
.plugins ul li{border-bottom:1px dashed #ddd;line-height:20px}
.plugins ul li:before{content:counter(plugincount);counter-increment:plugincount;margin-left:-10px;margin-right:1px;background:#8FC93E;border-radius:25px;border:1px solid #000;color:#fff;font:bold 16px georgia;padding:.3em .6em}
..plugins ul li{border-bottom:1px dashed #ddd}
.plugins ul li a{margin-left:10px;}
.plugins ul li a:hover{text-decoration:none}
.plugins ul li:hover,.plugins ul li:hover{border-bottom:1px dashed #696969}
Here is the original link of site: Urgentfiles.com
You need to make the bullets be outside the li content:
ul li { list-style-position: outside; margin-left: 1em; }
Here you are http://jsfiddle.net/jhkb5jrb/1/
body {
counter-reset: my-counter; /* REmove this */
}
ul {
list-style: none;
margin: 0px;
padding: 0px;
width: 300px;
counter-reset:plugincount; /* Add this */
}
ul li:before {
background: #8fc93e;
border: 1px solid #000;
border-radius: 100%;
color: #ffffff;
content:counter(plugincount); /* change from my-counter to plugincount*/
counter-increment:plugincount; /* change from my-counter to plugincount*/
float: left;
font-family: Georgia;
font-size: 16px;
font-weight: 700;
list-style-type: none;
margin-right: 15px;
padding: 0.3em 0.6em;
position: relative;
}
ul li{
padding: 0.7em 0;
}
ul li a{
text-decoration: none;
color: #000000;
}
if you should maintain this markup
set
.plugins ul li {position: relative; padding-left:40px /* set padding bigger then circle */;
.plugins ul li::before {position: absolute; top: 0; left: 0; margin:0 /*clear margin*/
but I think change html markup is better
Related
I'm not sure this code is written in the shortest and most effective way. Please help me.. How can i write in the shortest way? And how can I improve myself?
* {margin: 0;padding: 0;box-sizing: border-box;}
body {
background: #fff;
font-family: Arial;
}
a {
text-decoration: none;
color: #333;
}
nav {background-color: #f7f7f7;
width: 100%;
display: block;
}
nav ul {
list-style-type: none;
}
nav ul li {
display: inline-block;
position: relative;
}
nav ul:not(.sub-menu) > li {
padding: 15px;
}
nav ul:not(.sub-menu) > li + li {
margin-left: 20px;
}
nav ul li.has-children:hover ul.sub-menu {display: block;
}
nav ul.sub-menu {
position: absolute;
display: none;
white-space: nowrap;
/* Her bir liste öğesinin tek bir satır olması için. */
top: 100%;
}
nav ul.sub-menu li {
display: block;
}
nav ul.sub-menu li a {
display: block;
padding: 12px 20px 12px 10px;
background-color: #f7f7f7;
border-with: 0 1px 1px 1px;
border-color: #eee;
border-style: solid;
}
nav ul.sub-menu li a:hover {background-color: #eee;}
nav ul.sub-menu li + li a {
border-top: 0;
}
Well the code itself is pretty short. You can take care of a few points which will help you in the long run.
Try to minimise the use of > and +. As these are strictly bound to the structure of the DOM. If the DOM changes, styles with > or + might break.
Minimise the hierarchy. nav ul li can be replaced with nav li. Lesser the hierarchy, faster will be the DOM painting.
Something more you should do is separate the css in 2 parts.
Part 1: All element level css (lets call it normalize.css) and
Part 2: All class based css(lets call it styles.css).
Normalize.css now has the global styles for the html elements, which is common throughout your web page.
* {margin: 0;padding: 0;box-sizing: border-box;}
body {
background: #fff;
font-family: Arial;
}
a {
text-decoration: none;
color: #333;
}
nav {
background-color: #f7f7f7;
width: 100%;
display: block;
}
nav ul {
list-style-type: none;
}
nav li { // note that the `ul` is removed
display: inline-block;
position: relative;
}
style.css now containes all class based css which is independent of its position in the DOM.
.menu-item { // add a class `menu-item` to the immediate UL items in the <nav/>
padding: 15px;
margin-left: 20px;
}
.menu-item:first-child {// remove margin-left from the first-child
margin-left: 0;
}
.menu-item:hover .sub-menu {
display: block;
}
.sub-menu { // removing the unnecessary qualifiers. `.sub-menu` is enough
position: absolute;
display: none;
white-space: nowrap;
top: 100%;
}
.sub-menu-item { // add class `sub-menu-item` to the <li> of `.sub-menu`
display: block;
}
.sub-menu-item a { // you can further go ahead to add a special class to the `<a/>` inside `.sub-menu-item`
display: block;
padding: 12px 20px 12px 10px;
background-color: #f7f7f7;
border-with: 0 1px 1px 1px;
border-color: #eee;
border-style: solid;
}
.sub-menu-item a:hover {
background-color: #eee;
}
nav ul.sub-menu li + li a { // similarly you can remove the `+` with `:first-child` or the suitable.
border-top: 0;
}
Your css is accurate which is a good point. But if you want to make your life easier and not repeat yourself, I advise you to use a css preprocessor like Sass to write css like this :
nav {
background-color: #f7f7f7;
width: 100%;
display: block;
ul {
list-style-type: none;
li {
display: inline-block;
position: relative;
}
}
}
I'm trying to use a horizontal list in a web part in SharePoint. I've gone over this code over and over and can't find the issue. For some reason, the list still displays vertically. Any ideas?
CSS
ul{
padding: 0;
list-style: none;
width:100%;
text-align:center;
height: 100px;
background: #ffffff no-repeat center;
}
ul li{
display:inline-block;
float: left; padding: 25px 25px 0 125px;
margin: 0;
position: relative;
font-size: 25px; font-weight: bold; color: #FFFFFF;
text-align: center;
}
ul li a{
display: block;
color: #FFF; padding: 10px 5px;
text-decoration: none;
}
ul li a:hover{
}
ul li ul.dropdown{
min-width: 150px; /* Set width of the dropdown */
width: 100%;
display: none;
position: absolute;
z-index: 999;
left: 0;
float: left;
}
ul li:hover ul.dropdown{
display: inline; /* Display the dropdown */
background: #FFFFFF;
left: 0;
width:100%;
margin:0;
padding:0;
}
ul li ul.dropdown li{
display: inline;
float: left;
background: #FFFFFF;
}
HTML List (still in progress; just testing before I fix all the text/links)
<ul>
<li>Home</li>
<li>About</li>
<li>
Current Performance ▾
<ul class="dropdown">
<li>Grafenwoehr</li>
<li>Hohenfels</li>
<li>Katterbach</li>
<li>Stuttgart</li>
<li>Vilseck</li>
</ul>
</li>
<li>Contact</li>
</ul>
I haven't done this stuff in years but my boss wants me to try and make this work. -_-
You have a dropdown here
ul li ul.dropdown {
width: 100%;
}
which has a 100% width relative to
ul li {
position: relative;
}
which is the culprit here. Removing the "Position:relative" above fixes your problem.
Your ul.dropdown does float horizontally, but its width forces the elements to order vertically. To test this out you can set its min-width to something like 900px: DEMO
As your ul.dropdown is a child of its parent li, which is set to display: inline-block; position: relative;, its bound to its borders using width: 100%.
To solve this problem you can remove position: relative of your li elements to remove this border. Now its width: 100% relates to your body.
WORKING DEMO
Try display:block on the UL.dropdown and display:inline-block on the UL.dropdown LI.
just remove (position: relative;) from "ul li" list will come horizontally.
code will be like:
ul li{
display:inline-block;
float: left;
padding: 25px 25px 0 125px;
margin: 0;
font-size: 25px;
font-weight: bold; color: #FFFFFF;
text-align: center;
}
just replace this code with yours.
Thank You
I am trying to create a dropdown menu but the text always is dropping down to the right of where the original list item is. I have been messing with different text-align settings but cant seem to get it right. My HTML is available here. My CSS code is as follows:
#navMenu,
#navMenu ul {
list-style: none;
height: 10px;
}
#navMenu {
float: left;
}
#navMenu > li {
float: left;
padding-right: 15px;
}
#navMenu li a {
display: block;
height: 2em;
line-height: .75em;
padding: 0 1.5em;
text-decoration: none;
font: bold 12px Arial, Helvetica, sans-serif;
color: #000000;
text-align: end;
}
#navMenu > li > a {
color: #fff;
align: left;
text-align: left;
font-weight: bold;
}
#navMenu > li:hover > a {
background: #f09d28;
color: #000;
}
#navMenu ul {
position: absolute;
display: none;
align: left;
width: auto;
height: 50px;
background-color: #AAAAAA;
z-index: 999;
}
#navMenu ul li a {`enter code here`
list-style-position:inside;
}
#navMenu li:hover ul {
display: block;
}
The subnav ul creates a padding.
Give the subnav ul a padding: 0. This should help you out.
The browser is adding some left padding to ul by default. You need to remove that padding:
#navMenu ul {
padding: 0;
}
You may also want to consider using a CSS reset to prevent problems like these.
You have some additional padding to the left of the <ul> in the subnav. Fix it by adding this css:
#navMenu ul {
padding: 0;
height: auto;
}
Note: height: auto; fixes the height of the subnavs.
Also consider adding a CSS reset such as this one: http://www.cssreset.com/
Try this:
ul#navMenu ul {
padding-left: 0;
}
That will make sure you only hit your nested ul's and not the top-level ul's
This is what it should look like:
There is a tab-menu and a dropdown area. This should always have the same position (but different content and the respective tab choosen) as in the picture. Meaning it should always be as wide as the tabs(-menu).
But I can not figure out how:
to get this responsive
how to have the dropdown area stay where it is
how to style the subitems (in the dropdown area)
Here is what I got so far (sorry for the huge css it is not cleaned yet!), the menu starts at line 1559.
http://jsfiddle.net/pxpHw/
How do I do this properly?
THANKS!
code:
// css
nav {
cursor: default;
}
a {
text-decoration: none;
color: #000000;
}
#menu ul {
margin: 0px;
padding: 0px;
left: 0;
list-style-type: none;
background:green;
z-index: 100;
max-width: 60em;
}
#menu li {
float: left;
width: 20%;
text-align: center;
}
#menu li ul {
display: none;
/*display: block;*/
padding-top: 3px;
}
#menu li:hover ul {
display: block;
}
#menu li ul li {
background-color: #2F2D49;
border-bottom: 1px solid #FFFFFF;
width: 100%;
max-width: 60em;
min-height: 30em;
position: absolute;
}
#menu li ul li a {
color: #FFFFFF;
}
#menu li ul li:hover {
background-color: #232323;
}
Use media queries to get the responsive design
Check the following links
http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
http://mediaqueri.es/
Thanks
AB
This is what I was looking for: (Columns and Layout tab)
http://codecanyon.net/item/css3-full-responsive-dropdown-menu/full_screen_preview/4528828
I have a sub navigation which is placed in two different places on different browsers, and I'm unsure why. I do realise that using margin-top instead of top does fix this but the problem with that is that I have a jQuery slide animation when the sub navigation comes out and it doesn't look nice when I use margin-top since it comes out further up than it is. Here is a picture of the difference:
http://jsfiddle.net/eAqev/ <-- JS Fiddle
HTML:
<div id="navigation">
<ul>
<li><h1>01. About</h1><h2>Learn about us</h2></li>
<li class="button"><h1>02. Products</h1><h2>View our selection of products</h2>
<ul class="scrollDown">
<li><p>Kitchen Worktops</p></li>
<li><p>Upstands/Splashbacks</p></li>
<li><p>Gables/ Panels</p></li>
<li><p>Glass</p></li>
<li><p>High Gloss</p></li>
<li><p>Bathroom Tops</p></li>
<li><p>Sinks/ Taps</p></li>
</ul>
</li>
<li><h1>03. Contact</h1><h2>Contact us!</h2></li>
<li><h1>04. Gallery</h1><h2>View photos of us</h2></li>
</ul>
</div>
CSS:
#navigation ul {
display: inline;
position: relative;
}
#navigation ul li {
float: left;
width: 200px;
height: 35px;
margin: 10px;
list-style: none;
border-bottom: 3px solid #ccc;
}
#navigation ul li:hover {
border-bottom: 6px solid #eee;
cursor: pointer;
}
#navigation ul ul {
position: absolute;
z-index: 1500;
margin: 0;
padding: 0;
list-style:none;
background: #fff;
width: 200px;
top: 60px;
opacity:0.95;
filter:alpha(opacity=95);
-moz-opacity:0.95;
}
You made everything clear Just add the below codes.It will fix your problem
#navigation ul ul {
position: absolute;
z-index: 1500;
margin: 0 !important;
padding: 0 !important;
list-style:none;
background: #fff;
width: 200px;
top: 60px;
opacity:0.95;
filter:alpha(opacity=95);
-moz-opacity:0.95;
}
#navigation ul {
display: inline;
z-index:10;
position: relative;
}
Most probably IE7 will have a buggy environment. This will work fine with IE8+.
Demo
Hi now define your ID #navigation ul display:inline-block; than adjects your id #navigation ul ul in top
As like this
#navigation ul {
display: inline-block;
position: relative;
vertical-align: top;
}
#navigation ul ul {
top:48px;
}
Live demo
Different browsers have different default margin & padding on ul/li elements.
Have you tried resetting these all to 0?
#navigation ul, #navigation li {
padding: 0px;
margin: 0px;
}
Might be you should try css-reset? Just put it at beginning of your css
But it may mess layout so you will need to set some values by yourself.
Try this:
#navigation ul li {float: left;
width: 200px;
line-height:17px;
margin: 10px;
list-style: none;
border-bottom: 3px solid #ccc;
}