PDA

View Full Version : Showing list in horizontal order



true_friend
Nov 19th, 2006, 05:18 AM
Hi folks
i have a little problem want to show a list in horizontal order before it is in vertical order from up to down.
is it possible???
actually it is a wordpress weblog and i want a category callled "Pages" to be shown right below my blog header in a line. is it possible??

/*Theme Name: WinterDay
Theme URI: http://wangenweb.com/themes/winterday/
Description: A clean, widget-ready 3 column theme for WordPress. Modified For Urdu.
Version: 1.0.1
Author: Kristin K. Wangen
Author URI: http://wangenweb.com/
Urdu Modification: Muhammad Shakir Aziz
URL: dost.ueuo.com , shakirkablog.blogspot.com
*/

/*general layout*/
body {
background:#fff url("./gfx/bodybg.jpg") repeat-x;
color : #111;
font-family : "Urdu Naskh Asiatype", "Nafees Web Naskh", "Lucida Grande", Verdana, Arial, Sans-Serif;
font-style : normal;
padding:0px 1em;
margin:0px;
line-height:1.5em;
font-size:12pt;
}


/*wrap it in*/
#wrap {
background : transparent;
width:80%;
margin:5px auto;
padding:0px;
position:relative;
}
html>body #wrap {
max-width:85em;
}

/*top*/
#top {
background:transparent;
margin:0px;
padding: 2px 5%;
color:#111;
}

/*header*/

#header {
background:transparent;
margin:0px;
padding:20px;
color:#111;
text-align:center;
}
#header h1{
padding:0px 1%;
margin:0px 0px 5px;
font-size:4em;
}
#header p {
padding:2px 1%;
margin:2px;
font-size:13pt;
font-weight:normal;
}
#header h1 a:link, #header h1 a:visited {
color: #369;
font-weight:normal;
}


/*content*/
#content{
background : transparent;
padding: 5px 2%;
margin: 0 1%;
width: 63%;
float: right;
font-size:12pt;
line-height:1.6em;
word-wrap:break-word;
}
#content h2 a:link, #content h2 a:visited {
color:#369;
font-weight: normal;
text-decoration:none;

}
#content h2 a:hover, #content h2 a:active, #header h1 a:hover, #header h1 a:active {
color:#999;
}
.post h2 {
background:transparent;
padding:4px 0px;
}
.story {
font-size:12pt;
}
.post h2{
border-bottom:1pt solid #eee;
}


/*sidebar settings*/
#sidebar {
background:transparent;
color : #111;
padding: 0px;
margin: 5px 1% 0 0;
width: 30%;
float:left;
word-wrap:break-word;
}
#sidebar ul{
list-style: none outside;
margin: 2px;
padding:0px;
}
#sidebar li{
margin:0px;
padding: 2px;
}
#sidebar li li ul{
list-style: circle outside;
margin:0px 0px 0px 12px;
padding: 0px;
}
#sidebar h2 {
margin: 5px 2px 0px;
padding: 0px;
font-size:110%;
border:none;
font-weight:bold;
}
#sidebar h2 a {
color:#333;
font-weight:bold;
}

#sidebar label {
font-size:100%;
font-weight:bold;
}
#leftcol {
width:45%;
float:left;
margin:0 0.5em 0;
}
#rightcol {
width:45%;
float:right;
margin:0 0.5em 0;
}
#centercol {
width:70%;
float:center;
margin:0 0.5em 0;
}
/*footer*/

#foot {
background:transparent;
margin:10px;
clear: both;
font-size:90%;
padding:0px;
text-align:center;
}
#foot ul{
margin: 2px;
padding:20px;
}
#foot li{
display: inline;
margin:0px 3px;
}


/*font styles*/

p {
font-size : 12pt;
font-style : normal;
}
h2 {
font-size : 160%;
}
h3 {
font-size:120%;
}
h4, h5, h6 {
font-size:100%;
}
h2, h3, h1, h4, h5, h6 {
color : #333;
margin: 10px 0px;
padding:2px 0px;
clear: both;
font-weight:normal;
font-family: "Urdu Naskh Asiatype", "Nafees Web Naskh", "Lucida Grande", Verdana, Arial, Sans-Serif;
}
em {
font-style : normal;
text-decoration:underline;
}
b, strong, cite {
font-weight:bold;
font-style : normal;
}
i {
font-style : italic;
}
code, pre {
background:#eee;
font: 0.9em "Courier New", Courier, Fixed;
direction: ltr;
overflow: auto;
text-align: left;

}
blockquote {
border-left:2px solid #ccc;
padding: 0px 5px;
margin: 5px 20px;
}

/*linkcolor*/
a:link, a:visited {
font-weight:normal;
color : #933;
text-decoration : none;
}
a:hover, a:active {
color : #999;
text-decoration : none;
}

/*other*/
hr {
border: 1pt solid #ccc;
}
img {
border : none;
margin: 2px;
}


/*classes*/
.center {
text-align: center;
}
.right {
float: right;
}
.left {
float: left;
}
.none {
display: none;
}
.righttxt {
text-align:right;
}
.credits {
clear:both;
font-type:italic;
}
.border {
border: 1pt solid #ccc;
}


/*forms*/
input , textarea, select, option {
font-family : "Urdu Naskh Asiatype", "Nafees Web Naskh", "Lucida Grande", Verdana, Arial, Sans-Serif;
font-size:100%;
padding: 2px 0px;
background : #fff;
color : #111;
border: 1px solid #ccc;
margin: 2px 0px;
}
fieldset, legend {
color : #111;
border: none;
padding: 5px;
}

label, legend {
font-weight:normal;
}



/*lists*/

ul {
list-style: circle outside;
margin: 1px 20px;
padding:2px;
}
dt {
margin: 5px 0px;
}
dd {
margin: 5px 15px;
}
ol {
margin: 2px 25px;
padding:2px;
}
ul.inline {
margin: 1px 0px;
padding:2px;
}
.inline li{
display:inline;
margin: 5px 0px;
}

/*tables*/
table {
color : #111;
width: 90%;
margin: 5px auto;
padding: 0px;
}
caption {
color: #111;
font-weight: bold;
padding: 5px;
}
td, th, tr {
padding: 5px;
text-align:left;
}

/*wp-callendar*/
#today {
background:#eee;
}
#wp-calendar {
margin: 2px 0px;
width: 80%;
}
#wp-calendar th, #wp-calendar td {
padding:0.1em;
margin:0;
text-align:center;
}

/*comments*/
ol#commentlist {
list-style-position: outside;
margin: 5px 15px;
font-family: "Urdu Naskh Asiatype", "Nafees Web Naskh", "Lucida Grande", Verdana, Arial, Sans-Serif;
}
#commentlist li {
margin: 10px 0px;
}
#commentlist div {
margin: 5px 0px;
}
.commenttext {
font-size: 12pt;
}

/*rss widgets*/
.rsswidget img {
margin: 0px 2px;
}
.textwidget {
margin:0px;
padding: 2px;
}
This is style sheet and the code for that list is this

<li><h2><?php _e('صفحات'); ?></h2>
<ul>
<?php wp_list_pages('sort_column=menu_order&title_li='); ?>
</ul>
</li>
Regards

Arbitrator
Nov 19th, 2006, 11:20 AM
Itís actually more useful if you show all of the HTML and what it looks like after PHP has done its work. Luckily, I think that I can answer your question without that though.


If you make list items display as text via display: inline, you should be able to make it all flow onto one line provided enough room.
Alternatively, you can float all of the list items in one direction and they will stay on one line provided, again, enough room.

The latter method is what youíll need to use if your list items contain block-level elements such as div elements or anchor elements with display: block or if they have block-level properties applied to them such as width or margin.
The reason for this is because inline elements cannot contain block-level elements and wonít accept block-level properties

The most appropriate methods of doing this would probably be display: inline-block or display: table-cell.

display: inline-block: Firefox doesnít support it and Internet Explorer doesnít support it except on elements that are naturally inline, which makes it near useless; Opera supports it though with at least one bug that I know of.
display: table-cell: Internet Explorer 7 still doesnít support it, effectively precluding its use.

true_friend
Nov 21st, 2006, 05:15 AM
thanx for reply. what i understand is that i can display list in a table cell.
but i m not familiar with html coding can u plz help me in this regard. i mean a small code to make a cell and then i will put that code in this cell and whole code would be appear under my blog header. thnx

true_friend
Nov 21st, 2006, 09:03 AM
got it. only commnad display :inline will work. but the problem is now style. the styles are written for sidebar when i applied this command it inlined all lists in sidebar not in the header. how to add a style specifically for header in CSS??
i would be very thankful to you u can see CSS in my first most post of this thread.
Regards
True_Friend

Arbitrator
Nov 21st, 2006, 09:14 AM
If the header has a class or ID, you can use a class or ID selector: .headerClass or #headerID. There are numerous other selectors as well (http://www.w3.org/TR/CSS21/selector.html).

true_friend
Nov 22nd, 2006, 04:41 AM
i understand the procedure of selectors. now i applied it in such a way.

#header {
background:transparent;
margin:0px;
padding:20px;
color:#111;
text-align:center;
header * li {
display: inline;
}
header * ul {
list-style: none;
}
}
but does not working.
i tried to do this separated by adding
header * li {
display: inline;
}
and
header * ul {
list-style: none;
}
but did not worked in both cases. list is between a <div></div> tag so i used this selector but i think i am wrong in specifying selector.
:(

true_friend
Nov 22nd, 2006, 04:56 AM
now added in this way.

#header li {
display:inline;
}
#header ul {
list-style:none;
}
same result.
:( :(

true_friend
Nov 22nd, 2006, 05:33 AM
ok.
its done now.
there was a little mistake now it is as i wanted.
Thnx for helping me.
a new question i post in a new thread