I am trying jQTouch for an iPhone web app, but I want content on the pages to be able to have normal bullet lists, not styled as the bars in the jqt theme. So I am trying to override the css selectors in the theme.css:
#jqt .content ul {
color: #fff;
border: none;
font: inherit;
padding: 0;
margin: 15px 10px 17px 10px;
}
#jqt .content ul li {
color: #fff;
border-top: none;
border-bottom: none;
list-style-type:disc;
padding: 10px 10px 10px 10px;
background-image: none;
overflow: hidden;
}
It works fine in that it overrides it, but I don't get any visible list bullets. Any ideas why?
Just overwrite the li (not the ul)
CSS:
div#jqt #textpage li
{
list-style-type:disc;
padding: 7px 20px 0px 10px; /* set these as required */
}
HTML:
<!-- PAGE 2d -->
<div id="page-2d">
<div class="toolbar">
<h1>Page Heading</h1>
<a class="back" href="#page-2">Back</a>
</div>
<div id="textpage" >
<h1>My heading</h1><br />
<p>Stuff</p>
<p>More Stuff</p><br />
<h2>Sub Heading</h2>
<!-- Note No <ul> works don't know why -->
<li>My List Item1 </li>
<li>My List Item2 </li>
Overflow hidden seems to be the problem, based on a quick test i did.
This is what i am using for my project and its working like a charm:
ul.text, .text ul
{
border: 0;
background: transparent;
}
ul.text li, .text ul li
{
list-style-type: disc;
-webkit-border-radius: 0;
border-radius: 0;
filter: 0; // hide IE gradient
margin-left: 19px;
background: transparent;
border: none;
font-size: 1em;
font-weight: normal;
}
Hope it helps
Check the display type on the LI. I had this issue because they were set to "block" when they should have been "list-item"
Related
So I'm trying to study in advance about css/html. I wanted to get rid of the extra space after the navigation pane and i can't remove it. can someone help me? thanks. also I'm having a hard time putting some elements on every section and putting some animation in it(any recommendations?)
**/* what line should i edit*/**
body {
font-family: 'Roboto', sans-serif;
padding: 0;
margin: 0;
box-shadow: 0px 0px 0px #dedede;
}
h1 {
text-align: center;
padding: 50px 0;
font-weight: 800;
margin: 0;
letter-spacing: -1px;
color: inherit;
font-size: 40px;
}
section {
height: 100vh;}
nav {
width: 100%;
margin: 0 ;
background: #fff;
padding: 0px 0;
box-shadow: 0px 5px 0px #dedede;
}
nav ul {
list-style: none;
text-align: center;}
nav ul li {
display: inline-block;}
nav ul li a {
display: block;
padding: 15px;
text-decoration: none;
color: #aaa;
font-weight: 800;
text-transform: uppercase;
margin: 0 ;
}
{
nav ul li a,
nav ul li a:after,
nav ul li a:before
transition: all .5s;
}
nav ul li a:hover {
color: #555;}
<html>
<head>
<title> Main Page </title>
<link rel="stylesheet" href="navpanecss.css">
</head>
<h1> MY WEBSITE </h1>
<nav class="stroke">
<ul>
<li>Home</li>
<li>About</li>
<li>Downloads</li>
<li>More</li>
<li>Nice staff</li>
</ul>
</nav>
<section style="background: #D7FFF1">
<article>
</article>
</section>
<section style="background: #aafcb8">
<nav class="fill">
</nav>
</section>
</section>
<section style="background: #FFA69E">
<nav class="fill">
</nav>
</section>
</html>
You can use float: left; on nav,
or margin: 0 0 5px; on ul.
According to w3schools UL element has default of 1em in margin on both the bottom and the top.
Easy solution is to specify in your CSS for all UL element to be with 0 margin like so
ul {
margin: 0; // or margin: 0 0 5px; like Medda86 suggested
}
Or if the default marging is good for all other use-cases just add it to the nab UL selector that you already have
About placement and animation, do you want to elaborate more about what will trigger an animation and what element would you like to have the animation?
Simple way to remove those default styles for <ul>, add styles margin:0;padding:0; into the ul tag.
Like this
ul {
margin: 0; // removing default margin style
padding: 0; // removing default padding style
}
If you want to add some animations when the mouse hovers on links,
Here's the ref link - https://ianlunn.github.io/Hover/
I hope this is helpful!
How to make the "specialLi" aligned? By making li items inline-block its working but why?
Current Output:
About Menu Contact
Goumet au Catering
Desired:
Goumet au Catering About Menu Contact
I'm very new to web dev and I can't properly understand css basic things, what are some good resources that will help me get on the right track?
body {
margin: 0;
padding: 0;
}
.bar {
padding: 10px;
background: #333;
}
.navigation {
text-align: right;
margin: 0;
list-style: none;
border: 2px solid darkred;
}
.navigation li {
/*float: right;*/
border: 2px solid hotpink;
display: inline;
padding: 5px;
}
.navigation li a {
color: white;
display: inline-block;
border: 2px solid blue;
text-decoration: none;
padding: 10px;
}
.navigation li a:hover {
background: lightblue;
}
#specialLi {
float: left;
}
<nav class="bar">
<ul class="navigation">
<li id="specialLi"><a id="specialLi" href="#"> Goumet au Catering </a></li>
<li> About </li>
<li> Menu </li>
<li> Contact </li>
</ul>
</nav>
Youre facing multiple issues here.
Duplicated id specialLi:
Your id specialLi is used twice, id's are supposed to be unique tho.
Theres no need to do that, its enough to put the id on the li. If you need to target the a inside that li just use li#specialLi a as selector.
float:
The float:left on your id specialLi causes the matched li element to switch to block level behaviour which causes the paddings to properly appear (which doesnt actually work on inline-elements). As you only float the #specialLi all other li stay on inline level behaviour. This causes the inconsistent behaviour.
This automatic switch to block level behaviour is described in the float documentation.
As float implies the use of the block layout, it modifies the computed value of the display values, in some cases: [...]
You can solve this problem by applying display:inline-block to all of your li elements to cause consistent behaviour.
body {
margin: 0;
padding: 0;
}
.bar {
padding: 10px;
background: #333;
}
.navigation {
text-align: right;
margin: 0;
list-style: none;
border: 2px solid darkred;
}
.navigation li {
/*float: right;*/
border: 2px solid hotpink;
display: inline-block;
padding: 5px;
}
.navigation li a {
color: white;
display: inline-block;
border: 2px solid blue;
text-decoration: none;
padding: 10px;
}
.navigation li a:hover {
background: lightblue;
}
#specialLi {
float: left;
}
<nav class="bar">
<ul class="navigation">
<li id="specialLi"> Goumet au Catering </li>
<li> About </li>
<li> Menu </li>
<li> Contact </li>
</ul>
</nav>
I am trying to get a left menu and a right banner and have them stay fixed in place when the centre panel scrolls text - the banner will have to be on top of the centre panel due to size - the colour scheme is white text on black background except for the menu which is an <ul> with its own colour scheme
I am rather new to css so may have already made a prat of myself - I have tried but currently the top right banner does stay fixed when scrolling but the text overlays it and the top left menu shoots off the screen
JS Fiddle
<head>
<style>
#container {
width:90%;
height 100%;
background-color:Black;
margin: 0 auto;
text- align: left;
}
#banner {
float: right;
background-color:black;
width:40%;
top:1;
right:1;
position:fixed
}
#sidebarmenu {
float: left;
width: 10%;
background-color:Black;
padding: 15px 10px 15px 20px;
top:1;
left:1;
position:fixed
}
#mainContent {
background-color: Black;
color:White;
position: absolute;
left: 120px;
width: 50%;
top:220;
margin: 0 0 0 15%;
}
body {
color: white;
background-color: black;
}
.sidebarmenu ul {
margin: 0;
padding: 0;
list-style-type: none;
font: bold 13px Verdana;
width: 180px;
border-bottom: 1px solid #ccc;
}
.sidebarmenu ul li a {
display: block;
overflow: auto;
color: black;
text-decoration: none;
padding: 6px;
border-bottom: 1px solid #778;
border-right: 1px solid #778;
}
.sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active {
background-color: #c0c0c0;
}
.sidebarmenu ul li a:visited {
color: white;
}
.sidebarmenu ul li a:hover {
background-color: black;
color:red;
}
</style>
</head>
<body>
<div id="container">
<div id="banner" ><img style="float:right" alt="logo text" src="/banner.png" /></div>
<div id="mainContent" >TEXT</div>
<div class="sidebarmenu">
<ul id="sidebarmenu1">
<li>Home</li>
<li>Info</li>
<li>Contact Us</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Page 4</li>
<li>Page 5</li>
<li>Page 6</li>
</ul>
</div>
</div>
</body>
any help /comments / guidance on what I should be learning /looking at is appreciated
Phew! Where to start? lol Your code needed to be fixed pretty much on every line. I have a reworked demo here but basically, you must pay attention to site architecture when you are positioning elements. Organization is everything is front end development.
See DEMO
First of all, once you start using position: absolute; or position: fixed;, using float and margin becomes irrelevant.
Also, when using top: x;, left: x;, right: x;, or bottom: x; always make sure to add a size unit to your value, i.e. top:1; should be top: 1px;
If I understood correctly from the css you posted, something that'll get you closer to what you want to achieve is this:
html,body{ margin: 0; padding: 0; color: #fff; background: #000; height: 100%; width: 100%; overflow: hidden; }
#container { width:100%; height: 100%; text-align: left; overflow: auto; border: 1px red solid;}
#mainContent { width: 90%; color: #fff; margin: 0 auto; }
#banner { background-color: #000; width:40%; top:1px; right:1px; position:fixed; }
#sidebarmenu { width: 10%; background: #000; padding: 15px 10px 15px 20px;top:1px;left:1px;position:fixed; }
Take a look at this jsfiddle I made to see what this css does: http://jsfiddle.net/beYuC/
NOTE: You might have noticed I made the html and body have a height of 100%. This is because unless you set a height for the html and body, any other element on the page you want to make 100% will simply be flattened out.
NOTE 2: Be sure to check out this website and its CSS for an example of a well done content container and sidebar menu with 100% height: http://www.jlescure.com/
I am implementing a very simple css menu. However, if I select a menu title in the menu bar (and thus open the menu associated with it) the width of the title extends to the width of the menu, which is not desired (i.e. the width of the title should not change). Check out the JSFiddle, or have a look at the markup:
<div id="menu">
<ul>
<li>you
<ul>
<li>register...</li>
<li>login...</li>
<li>forgot password...</li>
</ul>
</li>
<li>.</li>
<li>qan</li>
<li>.</li>
<li style="width: 20px"><a class="site">be</a>
<ul>
<li>be</li>
<li>do</li>
</ul>
</li>
</ul>
</div>
and the css definitions:
#menu {
font-family: Arial, Helvetica, sans-serif;
padding: 0px 5px;
font-size: 12px;
line-height: 18px;
color: darkgrey;
position: absolute;
top: 0px;
left: 0px;
height: 20px;
background-color: black;
z-index: 3;
/*opacity: 0;*/
white-space: nowrap;
}
#menu ul {
margin: 0px;
padding: 0px;
list-style-type: none;
list-style-image: none;
}
#menu>ul>li {
font-weight: bold;
display: inline-block;
float: left;
padding: 2px 1px 0px 1px;
width: auto;
/*width: 10px;*/
}
#menu a { color: inherit; text-decoration: none;}
#menu>ul>li>a:hover { background-color: grey;}
#menu>ul ul {
display: none;
background-color: lightgrey;
padding: 2px 5px;
line-height: 14px;
min-width: 100px;
}
#menu>ul ul>li {
color: black;
padding: 2px 8px 2px 5px;
margin: 0px -3px;
}
#menu>ul ul>li:hover { color: lightgrey; background-color: grey;}
#menu>ul>li:hover ul { display: block;}
Since the menus are generated dynamically and contents meant to change on the fly and the font used is proportional, I cannot just set the widths of a title to a constant value which suppresses the resize. The width of the title should be determinded solely by the width of the text.
It used to work when I had implemented yuimenus, but that did all kinds of stuff to my CSS, the ramifications of which I found hard to control, so now I cooked up the menu by myself and am quite happy with it, save for the width change, and I haven't figured out which part of yui suppressed that. Any suggestions?
I don't agree with max-width.. this will make the link's width content-independent
use position:absolute; for the submenu: jsFiddle
Set width in li
Your updated example :- http://jsfiddle.net/8U5An/8/
Css:-
#menu ul li {
width: 25px;
}
See some useful example as well , how they handle same case by using width only :-
http://www.diy.com/diy/jsp/index.jsp?noCookies=false
http://www.puregrips.com/
I am working on a website that has a menu which behaves correctly on FF but not on IE (as usuall).
On IE it floats to the right while it should float to the left, however if float is set to none it behaves almost correctly, attaching the onto the top of the container.
Here's a live example.
Here's the css:
/* Navigation */
.navigation
{
float: left;
overflow: hidden;
width: 650px;
}
.navigation ul
{
list-style: none;
margin: 8px 0 0 15px;
overflow: hidden;
}
.navigation ul li
{
border-right: 1px solid white;
float: left;
padding: 0 12px 0 12px;
}
.navigation ul li.last
{
border: none;
}
.navigation ul li a
{
color: white;
font-size: 14px;
text-decoration: none;
}
.navigation ul li a:hover
{
text-decoration: underline;
}
.navigation ul li a.active
{
font-weight: bold;
}
.btn_login
{
float: right;
margin: 4px 4px 0 0;
display: inline;
width: 200px;
}
And here's the html:
<div id="navigation_wrap">
<div class="navigation">
<ul>
<li><a class="active" href="default.asp">Home Page</a></li>
<li><a class="" href="faq.asp">FAQ</a></li><li><a class="" href="articles.asp">Articles</a></li>
<li><a class="" href="products.asp">Packages & Pricing</a></li>
<li><a class="" href="gp.asp?gpid=15">test1</a></li>
<li><a class=" last" href="gp.asp?gpid=17">test asher</a></li>
</ul>
</div>
<div class="btn_login">
...
</div>
</div>
I hope anyone would have an idea.
Thanks,
Omer.
EDIT:
Setting the width for both elements kinda helped but it's still not positioned correctly.
See updated css above.
Can you try reducing the height of your logo class. It is overhanging the menu.
<-span class=""top_nav_separator""> is in your code, this might be the thing that bothers IE
I had the same problem in IE some time ago. It doesn't like list items in a floating div. Adding the following fixed it for me:
display: list-item;
list-style-position: inside;