wordpress prob

Discussion in 'CSS' started by unitechy, Oct 16, 2007.

0
  1. #1
    hi friends i am new on working on wordpress designing and coding..
    i have attached the pic ..plz let me know how do i bring that "hot" and "download" buttons besides each other and at the bottom.
     

    Attached Files:

    unitechy, Oct 16, 2007 IP
  2. ChaosFoo

    ChaosFoo Peon

    Messages:
    232
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I think you will probably get more of a response if you post your code for this. I can't properly troubleshoot this problem unless there is a link to this page, or your code is posted. A link would be preferable.
     
    ChaosFoo, Oct 16, 2007 IP
  3. unitechy

    unitechy Peon

    Messages:
    350
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #3
    well this is my stylesheet
    /* http://unitechy.com*/

*  {
	padding: 0;
	margin: 0;
}

a {
	color: #922D69;
	text-decoration: underline;
}



a:hover {
	color: #922D69;
	text-decoration: none;
}

body {
	text-align: center;
	background: #202020 url("images/body.gif") top center; 
	font-size: 76%;
	font-family: Trebuchet MS, Arial, sans-serif;
}

input, textarea {
	font-family: Trebuchet MS, Arial, sans-serif;
}

#wrapper {
	width: 776px;
	background: #FFF;
	margin: 0 auto;
	text-align: left;
	font-size: 105%;
}

#header {
	height: 132px;
	background: #A6D24C url("images/header1.gif") no-repeat top center;
	position: relative;
}

#name {
	position: absolute;
	top: 44px;
	left: 15px;
}

#name a img {
	border: none;
}

#topnav {
	list-style:none;
	float: right;
	padding: 76px 13px 0 0;
	display: inline;
}

#topnav li {
	float: left;
	background: url("images/bg-li-topnav.gif") repeat center;
	margin: 0;
	height: 32px;
	margin: 0 0 0 10px;
	text-align: center;
	background-position: center;
	list-style: inside;
}

#topnav a {
	display:block;
	width: 68px;
	height: 32px;
	line-height: 32px;
	text-decoration: none;
	font-weight: bold;
	font-size: 110%;
	color: #77A707;
}

#topnav a:hover {
	color: #791F49;
	text-decoration: underline;
}

#topnav li#current a {
	color: #791F49;
	text-decoration: none;
}
#content {
	display: block;
	margin: 0 13px 0 16px;
}

#leftcol {
	float: left;
	width: 500px;
	overflow: hidden;
}

.navigation {
	display: block;
	text-align: center;
	font-size: 90%;
	margin: 0 0 5px 0;
	padding: 0;
}

.post {
	padding: 5px 0 0 0;
	clear: both;
	font-size: 100%;
}

.post h2 {
	font-size: 145%;
	padding: 0 0 8px 0;
}

h2.search {
	margin: 10px 20px;
}

h2.pagetitle {
	font-size: 145%;
	padding: 0 0 5px 0;
}

.posthead {
	height: 50px;
	background: #741D43 url("images/body3.gif") repeat top left;
	margin: 0 0 10px 0;
}

.posthead h2, .posthead h2 a {
	color: #FFF;
	padding: 0;
	margin: 0;
	font-size: 100%;
}

.posthead h2 {
	padding: 0;
	margin: 0;
	font-size: 100%;
	padding: 7px 0 0 10px;
}

.posthead h2 a {
	color: #FFF;
	font-size: 145%;
	text-decoration: none;
}

.posthead h2 a:hover {
	color: #FFF;
	font-size: 145%;
	text-decoration: none;
}

.posthead .meta {
	font-size: 95%;
	color: #DCB9CD;
	padding: 0 0 0 10px;
}

.posthead .meta a {
	color: #DCB9CD;
	text-decoration: underline;
}

.post .entry p {
	padding: 0 0 15px 0;
}

.post .entry .wp-smiley {
	padding: 0;
}

.post .entry a {
	color: #8B2561;
}

.post .entry a:hover {
	color: #FFF;
	background: #8B2561;
	text-decoration: none;
}

.post p.comments {
	padding: 0 0 15px 0;
}

.post p.comments a {
	line-height: 30px;
	color: #FFF;
	font-weight: bold;
	font-size: 120%;
	background: #9CBD00;
	border: 1px solid #8AA700;
	padding: 2px 5px;
	text-decoration: none;
}

.post p.comments a:hover {
	line-height: 30px;
	color: #FFF;
	font-weight: bold;
	font-size: 120%;
	background: #9CBD00;
	border: 1px solid #8AA700;
	padding: 2px 5px;
	text-decoration: none;
}


.horizontal-divider {
	height: 23px;
	background: url("images/bg-horizontal-divider.gif") no-repeat center left;
}

h3#comments, h3#respond {
	color: #87AA00;
	padding: 0 0 7px 0;
}

.commentlist li.alt cite {
	display: block;
	padding: 0px 10px 10px 10px;
	margin: 0;
}

.commentlist li cite {
	display: block;
	padding: 7px 10px 5px 10px;
	margin: 0;
}

.commentlist li cite span.visitor  {
	color: #8B2561;
}

.commentlist li cite span.visitor a {
	color: #8B2561;
	text-decoration: underline;
}

.commentlist li cite .commentmetadata {
	font-size: 90%;
	font-weight: normal;
	font-style: normal;
	margin: 0;
}

.commentlist li cite .commentmetadata a {
	color: #8B8B8B;
	text-decoration: none;
	padding: 0;
	margin: 0;
}

.commentlist li cite .commentmetadata a {
	color: #9B9555;
	text-decoration: none;
}

.commentlist li p, .commentlist li.alt p {
	padding: 0px 10px 10px 10px;
	margin: 0;
}

.alt {
	background: #F0EDD0 url("images/bg-alt-comment-middle.gif") repeat-y top left;
}

.alt-comment-top {
	background: #F0EDD0 url("images/bg-alt-comment-top.gif") no-repeat top left;
	height: 15px;
}

.alt-comment-bottom {
	background: #F0EDD0 url("images/bg-alt-comment-bottom.gif") no-repeat bottom left;
	height: 9px;
}

#commentform p {
	margin: 5px 0;
}

.nocomments {
	text-align: center;
	margin: 0;
	padding: 0;
}

.commentmetadata {
	margin: 0;
}

#commentform input {
	width: 200px;
	padding: 2px;
	margin: 5px 5px 1px 0;
}

#commentform textarea {
	width: 490px;
	padding: 2px;
	overflow: auto;
}

#commentform input, #commentform textarea {
	border: 1px solid #C2C2C2;
	background: #E9E9E9 url("images/bg-form-input.gif") repeat-y top left;
	font-size: 1em;
}

#commentform label {
	color: #808080;
}

#commentform #submit {
	margin: 15px 0 15px 0;
	border: 1px solid #7C0040;
	background: #8B2561;
	font-weight: bold;
	font-size: 90%;
	color: #FFF;
	cursor: pointer;
	cursor: hand;
}

#rightcol {
	float: left;
	display: inline;
	width: 233px;
	margin: 0 0 0 13px;
}

#rightcol ul {
	list-style: none;
}

.sidebox {
	background: #FFF url("images/bg-sidebox-middle.gif") top left;
	border-bottom: 20px solid #FFF;
}

.sidebox h3#recent-comments {
	background: #FFF url("images/recent-comments.gif") top left;
	height: 59px;
	text-indent: -9999px;
}



.sidebox h3#archive {
	background: #FFF url("images/bg-sidebox-archive.gif") top left;
	height: 59px;
	text-indent: -9999px;
}

.sidebox h3#categories {
	background: #FFF url("images/bg-sidebox-categories.gif") top left;
	height: 59px;
	text-indent: -9999px;
}

.sidebox h3#search {
	background: #FFF url("images/bg-sidebox-search.gif") top left;
	height: 59px;
	text-indent: -9999px;
}

.sidebox h3#contact {
	background: #FFF url("images/bg-sidebox-contact.gif") top left;
	height: 63px;
	text-indent: -9999px;
}

.sidebox ul {
	list-style: none;
}

.sidebox ul li {
	padding: 10px 10px 8px 21px;
	background: transparent url("images/bg-sidebox-recent-comments-li.gif") no-repeat top left;
	font-size: 90%;
}

.sidebox ul li span {
	color: #922D69;
	font-weight: bold;
}

.sidebox a {
	color: #565656;
	text-decoration: none;
}

.sidebox a:hover {
	color: #9EBA0E;
	text-decoration: underline;
}

.sidebox ul li a:hover {
	color: #9EBA0E;
	text-decoration: underline;
}

.sidebox #star-foto {
	text-align: center;
	border: 1px solid #FFF;
	margin: 0 18px 0 20px;
	line-height: 150px;
	background: #E5E5E5;
}

.sidebox #star-text p {
	margin: 0 18px 0 20px;
}

.sidebox #searchform {
	margin: 0 0 0 20px;
}

.sidebox #searchform #s {
	border: 1px solid #C2C2C2;
	background: #F7F7F7;
	width: 142px;
	padding: 2px;
}

.sidebox #searchsubmit {
	height: 25px;
	background: #A2B900;
	border: 1px solid #FFF;
	color: #FFF;
	font-size: 90%;
	font-weight: bold;
	width: 45px;
	text-align: center;
}

.sidebox #emailaddress {
	padding: 0 0 0 20px;
}

.sidebox .bottom {
	height: 30px;
	background: transparent url("images/bg-sidebox-bottom.gif") no-repeat bottom left;
}

.clearer {
	height: 1px;
	overflow: hidden;
	margin: -1px 0 0 0;
	clear: both;
}

#footer {
	height: 77px;
	background: #E8E8E8 url("images/bg-footer.gif") top left;
}

#footer p {
	line-height: 77px;
	padding: 0 0 0 13px;
	color: #6C6C6C;
	font-size: 90%;
	font-weight: bold;
}

#footer p a {
	color: #6C6C6C;
}


/* Begin misc */

.entry ul, .entry ol {
	display: block;
	margin: 0 0 15px 30px;
	list-style-type: square;
}

.entry ol {
	margin-left: 37px;
}

.entry li {
	padding: 0 0 0 0;
}

.postmetadata ul, .postmetadata li {
	display: inline;
	list-style-type: none;
	list-style-image: none;
}

acronym, abbr, span.caps{
	letter-spacing: .07em;
}

#searchform2 {
	margin: 0 0 0 20px;
}

#searchform2 #s2 {
	border: 1px solid #C2C2C2;
	background: #F7F7F7;
	width: 142px;
	padding: 2px;
}

#searchsubmit2 {
	height: 25px;
	background: #A2B900;
	border: 1px solid #FFF;
	color: #FFF;
	font-size: 90%;
	font-weight: bold;
	width: 45px;
	text-align: center;
}


/* Begin Images :: this is the style applied by the wordpress rich texteditor do not alter */
p img {
	padding: 0;
	max-width: 100%;
}
	
img.centered {
	display: block;	
	margin-left: auto;
	margin-right: auto;	
}
	
img.alignright {
	padding: 10px;
	margin: 0 2px 2px 0;
	display: inline;
}


img.alignleft {
	padding: 8px;
	margin: 0 2px 2px 0;
	display: inline;
}

.alignright {
	float: right;
}
	
.alignleft {
	float: left
}

.entry form {
	text-align:center;
}

acronym, abbr, span.caps {
	cursor: help;
}

acronym, abbr {
	border-bottom: 1px dashed #999;
}

blockquote {
	margin: 15px 30px 0 10px;
	padding-left: 20px;
	border-left: 5px solid #ddd;
}

blockquote cite {
	margin: 5px 0 0;
	display: block;
}

.center {
	text-align: center;
}

hr {
	display: none;
}

a img {
	border: none;
}
    Code (markup):

    and this is my header file
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title>

<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

<?php //wp_head(); ?>
</head>
<body>
<div id="wrapper">
<div id="header">
<a href="<?php echo get_settings('home'); ?>/"></a>
<?php // bloginfo('description'); ?>

<ul id="topnav">
<li><a href="<?php echo get_settings('home'); ?>">Hot</a></li>

<br><li class="page_item"><a href="http://unitechy.com/download" title="download">Download</a></li>

</ul>
</div>
<hr />

<div id="content">
    PHP:
    i'm working on xamp so dont have a live site
     
    unitechy, Oct 17, 2007 IP
  4. Crimsonc

    Crimsonc Peon

    Messages:
    616
    Likes Received:
    15
    Best Answers:
    0
    Trophy Points:
    0
    #4
    remove the <br> tag between the li tags.
     
    Crimsonc, Oct 17, 2007 IP
  5. unitechy

    unitechy Peon

    Messages:
    350
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #5
    i removed but no difference
     
    unitechy, Oct 17, 2007 IP
  6. ChaosFoo

    ChaosFoo Peon

    Messages:
    232
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    0
    #6
    I'm unable to look at this too extensively, but at first glance, I have a couple of guesses.

    I would bet that your problem would be with one of these CSS styles:

    
#topnav {
	list-style:none;
	float: right;
	padding: 76px 13px 0 0;
	display: inline;
}

#topnav li {
	float: left;
	background: url("images/bg-li-topnav.gif") repeat center;
	margin: 0;
	height: 32px;
	margin: 0 0 0 10px;
	text-align: center;
	background-position: center;
	list-style: inside;
}

#topnav a {
	display:block;
	width: 68px;
	height: 32px;
	line-height: 32px;
	text-decoration: none;
	font-weight: bold;
	font-size: 110%;
	color: #77A707;
}
    Code (markup):
    The properties I would try to tweak are the float and display. The easiest way to troubleshoot something like this is to comment out the properties one line at a time, save and refresh the page. You should notice which property is causing the problem. Once you know that, it is just a matter of tweaking it to make it look right.

    Hope this helps.
     
    ChaosFoo, Oct 17, 2007 IP
  7. Blame Me

    Blame Me Guest

    Messages:
    162
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    0
    #7
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title>

    <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->

    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
    <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

    <?php //wp_head(); ?>
    </head>
    <body>
    <div id="wrapper">
    <div id="header">
    <a href="<?php echo get_settings('home'); ?>/"></a>
    <?php // bloginfo('description'); ?>

    <ul id="topnav">
    <li><a href="<?php echo get_settings('home'); ?>">Hot</a></li>

    <br><li class="page_item"><a href="http://unitechy.com/download" title="download">Download</a></li>

    </ul>
    </div>
    <hr />

    <div id="content">

    I removed the <br> tag and it lined up correctly for me when I tried it, but did notice having looked through the style sheet you seem to be missing a:

    class="page_item" tag for the <li> attribute.

    This may have some bearing on your page output.

    Try removing the class="page_item" from the page code and see what happens.

    If you could also tell us what theme you are using it might help someone else help you find the problem.

    And definitely, if you could give us a live version as has been mentioned that would help even further.

    Just as a side note I think it should be <br /> not <br> for correct code on this page because you are using xhtml coding - I may be wrong though.
     
    Blame Me, Oct 17, 2007 IP
  8. unitechy

    unitechy Peon

    Messages:
    350
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #8
    i played with the stlesheet and now my problem is solved :)
     
    unitechy, Oct 20, 2007 IP
  9. Blame Me

    Blame Me Guest

    Messages:
    162
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Tell us how you fixed it in case someone else comes across the same problem.

    Its always useful to do that.

    Its also nice to see if we were pointing you in the right direction or just completely of the mark.

    :)
     
    Blame Me, Oct 20, 2007 IP