By jason342 on
Where in the CSS should I look to play around with the positioning of the <LI>'s because at the moment the <LI>’s tags when used in Filtered HTML, I’m not happy with it’s positioning and how it is in general, indents, how far it is to the left etc...
I want to play around with it to get it how I want it, but don’t know what and where to tweak in my CSS, can you please point out?
This is my CSS:
body {
color: #000;
background: #fff;
font-family: Verdana, Helvetica, Arial, Lucida, sans-serif;
font-size: 84%;
padding: 0;
margin: 0;
}
h1 { font-size: 1.3em; }
h2 { font-size: 1.1em; }
h3 { font-size: 1em; font-weight: bold;}
h4, h5, h6 { font-size: 0.9em; font-weight: bold;}
h1, h2, h3, h4, h5, h6 {
font-family: Helvetica, Arial, Lucida, Verdana, sans-serif;
}
p, .book .body {
padding: 0 0 0.5em 0;
margin: 0;
text-indent: 1.6em;
font-size: 1em;
line-height: 1.6em;
}
pre {
background: #ddd;
border: 1px solid #aaa;
padding: 0.75em 1.5em;
font-size: 12px;
}
a { text-decoration: none; }
a, a:link { color: #05b; }
a:visited { color: #67b; }
a:hover, a:focus {
color: #fff;
background: #05b;
}
a:active { color: #05b; }
form {
padding: 0;
margin: 0;
}
blockquote {
border: 1px #ddd solid;
margin: 0.5em 1em;
padding: 0.3em;
font-style: italic;
}
code {
font-size: 1em;
font-family: Profont, 'lucida console', 'Courier New', Monaco, monospace;
}
img { border: 0; }
ol, ul, dl { position: relative; }
#header {
position: relative;
padding: 1em 0 0 0;
margin: 0;
}
#header img {
margin: 0 0.75em 0 1em;
float: left;
}
#site-name, #header a { color: #46c325; }
#header a:visited { color: #46c325; }
#header a:hover { background: transparent; }
#site-name {
font-size: 2.5em;
padding: 25px 0 0.2em 0;
margin: 0;
}
#site-slogan {
color: #bbb;
font-family: Helvetica, Arial, Lucida, Verdana, sans-serif;
display: inline;
font-weight: bold;
font-size : 1.2em;
padding: 0 0 0 1.2em;
margin: 0;
}
#content {
border-top: dotted 1px #ddd;
width: 100%;
margin: 0;
padding: 0;
font-size: 1em;
}
td.main-content {
vertical-align: top;
padding: 0em 1em;
}
td.sidebar {
vertical-align: top;
padding: 0;
width: 200px;
}
#sidebar-left { border-right: 1px dotted #ddd; }
#sidebar-right { border-left: 1px dotted #ddd; }
.sidebar .block {
background: #fff;
border-bottom: 1px dotted #ddd;
margin: 0 5px 5px 5px;
padding: 0 5px 5px 5px;
}
.sidebar .block h2 {
padding: 3px 0 0 0;
margin: 0;
font-size: 1em;
}
.sidebar .block h3 {
margin: 0 0 0.3em 0;
}
.sidebar .block .xml-icon {
text-align: center;
}
.sidebar .block-search input.form-text {
width: 100px;
padding: 1px;
margin-right: 5px;
}
.sidebar .block-search button.form-submit {
width: 60px;
font-size: 12px;
}
.sidebar .block a, .sidebar .block { color: #05b; }
.sidebar .block a:visited { color: #67b; }
.sidebar .block h2, .sidebar .block h3 { color: #aaa; }
.sidebar .block a:hover {
color: #fff;
background: #05b;
}
.more-link {
float: none;
text-align: right;
font-style: italic;
}
.block .more-link a, .block .more-link a:visited { color: #46c325; }
.block .more-link a:hover {
color: #fff;
background: #05b;
}
.item-list {
margin: 0.25em 0 0 0;
font-size: 0.9em;
}
.item-list ul {
list-style: none;
margin: 0 0 0.5em 0;
padding: 0;
}
.item-list ul li {
margin: 0 0 0.25em 0;
padding: 0 0 0 1em;
line-height: 1.3em;
list-style: none;
}
#search {
color: #000;
background: #fff;
margin: 0;
padding: 0;
float: right;
width: 200px;
}
#search .form-text {
margin-right: 3px;
padding: 3px;
}
#search .form-submit {
padding: 2px;
}
#top-nav {
padding: 0;
margin: 0;
font-family: Helvetica, Arial, Lucida, Verdana, sans-serif;
}
#top-nav ul {
margin: 0;
padding: 2px 0 2px 0;
}
#primary {
font-size: 1.2em;
border-top: dotted 1px #ddd;
}
#secondary {
text-align: right;
font-size: 1.1em;
}
#primary li {
margin-left: 2px;
padding: 0;
display: inline;
list-style-type: none;
}
#secondary li {
margin-right: 5px;
padding: 0;
display: inline;
list-style-type: none;
}
#primary a {
color: #05b;
font-size: 1.1em;
font-weight: bold;
margin: 0;
padding: 0 3px;
}
#primary a:hover {
color: #fff;
background: #05b;
}
#secondary a {
color: #05b;
font-size: 1em;
font-weight: bold;
margin: 0;
padding: 0;
}
#secondary a:hover { color: #03f; }
#primary a.active, #primary a.active:hover, #secondary a.active, #secondary a.active:hover {
color: #ddd;
background: #fff;
}
.breadcrumb {
color: #46c325;
border-top: dotted 1px #ddd;
padding: 0.5em 1em;
font-size: 1em;
font-weight: bold;
margin: 0;
height: 1em;
}
.main-content .node .content, .comment .content, .book .body {
line-height: 1.5em;
}
.main-content .node .content a, .comment .content a, .book .body a { border-bottom: 1px dotted; }
.main-content .node, .book {
margin: 0 1em 2em 1em;
}
.main-content .content-title {
font-size: 2em;
margin: 0 0 1.6em 0;
}
.main-content .node h2, .main-content h2 {
padding: 0;
margin: 0 0 0.25em 0;
font-size: 1.8em;
}
.main-content .node .info {
color: #999;
padding: 0 0 0.2em 0;
margin: 0;
font-size: 0.9em;
}
.main-content .node .links, .main-content .node .terms {
padding: 0;
margin: 0;
font-size: 0.9em;
font-weight: bold;
}
.main-content .node .terms {
color: #999;
font-weight: normal;
text-align: right;
}
.main-content .sticky {
color: #fff;
background-color: #67b;
border: solid 3px #eee;
padding: 0.5em;
}
.main-content .sticky .info, .main-content .sticky .links, .main-content .sticky .terms {
color: #000480;
}
.main-content .sticky a, .main-content .sticky a:link { color: #fff; }
.main-content .sticky a:visited { color: #eee; }
.main-content .sticky a:hover, .main-content .sticky a:focus {
color: #3F0;
background: #67b;
}
.main-content .sticky a:active { color: #05b; }
.links a.read-more {
font-style: italic;
font-size: 1.2em;
}
.main-content .node .content {
padding: 0;
margin: 0;
}
.main-content .node .info, .main-content .node .links, #mission {
font-family: Helvetica, Arial, Lucida, Verdana, sans-serif;
}
#mission {
color: #fff;
background: #67b;
border: solid 3px #eee;
padding: 5px 10px;
margin: 0.6em 0 1.6em 0;
font-size: 1.1em;
text-indent: 0;
width: auto;
}
.main-content .box {
border: 1px solid #eee;
margin-bottom: 0.5em;
}
.main-content .box .content {
padding: 0.5em;
}
.main-content .box h2 {
padding: 0.5em;
margin: 0;
font-size: 1.2em;
text-align: left;
}
.comment {
border: solid 1px #eee;
padding: 1em;
margin: 1.5em 0;
}
.comment-new {
border: solid 1px #b06;
}
.comment-folded {
padding: 0.5em;
margin: 1.5em 0;
}
.comment-new .new {
color: #b06;
text-align: right;
font-size: 1.1em;
display: block;
padding-bottom: 0.5em;
width: 100%;
}
.comment .content, .comment .content p {
padding: 0;
margin: 0;
line-height: 1.6em;
text-indent: 0;
}
.comment .title, .comment .author, .comment .links {
font-family: Helvetica, Arial, Lucida, Verdana, sans-serif;
}
.comment .title {
font-weight: bold;
font-size: 1.1em;
padding: 0;
margin-bottom: 0.5em;
}
.comment .title, .comment .title a.active {
color: #444;
background: #fff;
}
.comment .author {
color: #999;
font-size: 0.9em;
padding: 0.1em 0 0.3em 0.75em;
}
.comment .links {
color: #999;
padding: 0.75em 0 0 0;
margin: 0;
}
#footer {
color: #aaa;
background: #fff;
border-top: dotted 1px #ddd;
padding: 1em 1em 1em 1em;
font-size: 0.9em;
text-align: center;
}
#footer p {
text-indent: 0;
margin-bottom: 1em;
}
.xml-icon {
text-align: center;
}
fieldset { border: 1px solid #ddd; }
.form-submit {
margin: 0;
}
.form-item {
margin: 3px 0;
padding: 0.3em 0;
}
form .form-item .title {
border: 0;
border-bottom: #ddd solid 1px;
color: #777;
background: transparent;
}
.form-radio, .form-checkbox {
background: transparent;
border: 0;
}
.main-content .box .content .form-item textarea {
width: auto;
}
input.form-text, input.form-password {
border: solid 1px #ddd;
margin: 0;
padding: 0 5px;
font-size: 12px;
}
input, textarea {
background: transparent;
color: inherit;
border: 1px solid #777;
}
input:focus, textarea:focus {
background: transparent;
border: 1px solid #48d;
}
button.form-submit {
border: solid 1px #ddd;
margin: 0;
padding: 0;
font-size: 12px;
}
h3.form-title {
text-align: left;
}
form .form-item .title {
border: 0;
border-bottom: #ddd solid 1px;
color: #777;
background: transparent;
margin-bottom: 0.5em;
padding: 0.3em 0;
text-align: left;
}
select {
background: #eee;
color: #000;
margin: 1px 5px;
}
.container-inline {
margin: 0 0 1.6em 0;
}
.container-inline div {
display: inline;
}
#pager {
text-align: center;
}
#pager div {
padding: 0.5em;
}
.main-content li {
padding-bottom: 0.25em;
}
#message {
background: #eee;
border: 2px solid #ddd;
padding: 2em;
margin: 1em 2em;
}
li.leaf {
list-style-type: square;
}
div.picture {
border: 1px solid #ddd;
float: left;
margin: 0 1em 0.3em 0;
}
br.clear {
clear: both;
}
.main-content .content-title, .links a.read-more { color: #46c325; }
.links a.read-more:hover {
color: #fff;
background: #05b;
}
.box { border: 1px solid #eee; }
.box h2 { color: #46c325; }
.marker, .error { color: #f00; }
.ok { color: #080; }
.path a, .path a:visited { color: #777; }
.tabs a, .tabs a:visited, .tabs a:hover { color: #05b; }
.tabs li .active, .tabs li .active:hover {
color: #ccc;
background: #fff;
}
.calendar td, .calendar th { border-color: #eee; }
.calendar .day-normal { background: #fff; }
.calendar .day-future { background: #fff; }
.calendar .day-today { background: #333; color: #fff; }
.calendar .day-today a { color: #fff; }
.calendar .day-selected { background: #555; color: #fff; }
.calendar .day-link { background: #ddd; color: #fff; }
ul.galleries {
list-style-type: none;
margin: 0;
padding: 0;
}
ul.galleries li {
background-color : #eee;
border: 1px #ccc solid;
margin: 1em 0;
padding: 1em;
}
ul.galleries li img {
position: relative;
float: left;
padding: 0 0.5em 0 0;
margin: 0 0.5em 0.5em 0;
}
ul.galleries li p.count {
clear: both;
}
ul.galleries h3 {
font-size: 1.2em;
margin : 0 0 0.5em 0;
padding : 0;
}
ul.images {
list-style-type : none;
margin : 0;
padding : 0;
}
ul.images li {
float : left;
margin : 1em;
height: 130px;
width: 130px;
}
Comments
It really depends on where
It really depends on where the lists are showing up. Based on the fact that you indicated the LI's in "Filtered HTML", I would suggest starting with
.main-content li {}
or
.node li {}
---
www.whatwoulddrupaldo.org
Do you see a .node li {} up
Do you see a
.node li{}up there? Can't find it.CSS
You do realize you can add any selector and style you want to that stylesheet right? It is just an arbitrary selection of styles that apply to the DOM.
--
If you have a problem, please search before posting a question.
Yeah I do know, but I don't
Yeah I do know, but I don't know CSS, so if you know what I need to add then I would appreciate it.
If you look in your misc
If you look in your misc directory you'll find the drupal.css, it will be defined in there. Copy and paste it into the css for your theme and edit there to achieve he desired result.
www.aussiecarpool.com
share the cost of commuting
www.justapickle.com
blogging community for the socially conscious
www.slickfish.com.au
professional, affordable web site design, production and maintenance for small business