Wordpress Help... Options

[theerinkal]

I can't get my layout to work.

I just started using WP and I'm having trouble making my own layout for the first time.

See.

The footer works but the content area is big but the text is in a small area.

Here's my style.css page coding:

CODE

/*
Theme Name: Awesome
Theme URI: http://www.foreverangel.info/
Description: My first theme
Version: 1.0
Author: Erin
Author URI: http://www.foreverangel.info/
*/

body{ background-color: #313131;
font-size: 62.5%; /* Resets 1em to 10px */
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
color: #000000;
margin: 0 0 25px 0;
}

#container {background-color: white;
font-size: 11px;
width: 800px;
float: center;
margin: 0 auto;
text-align: left;
background-color: #ffffff;
-moz-border-radius: 6px;
padding: 10px;
}

#header {font-size: 35px;
text-align: center;
padding: 0px;
margin: 0 auto;
border-bottom: 10px solid #035645;
background-color: white;
}

/* Begin Sidebar */
#sidebar {-moz-border-radius: 6px;
width: 250px;
float: left;
padding: 2px;
background-color: white;
}

#sidebar form {
margin: 0;
}
/* End Sidebar */

/* Begin Navigation */
#navcontainer {margin: 0;}

#navlist {
width: auto;
padding: 12px;
text-align: center;
background-color: #313131
font-weight: normal;
color: #df3b18;
text-align: center;
margin: 0;
}

#navlist ul, #navlist li {
display: inline;
list-style-type: none;
}

#navlist a:link, #navlist a:visited {
float: inherit;
font-size: 12pt;
font-family: "century gothic";
text-transform: uppercase;
color:#df3b18;
margin: 0px;
padding: 5px 5px 5px 5px;
font-weight: normal;
text-decoration: none;
display: inline;
}

#navlist a:hover {
color: #ee9e21;
margin: 0px;
}
/* End Navigation */

/* submenu START */
#menus li ul {
display:none;
background:#F4F5F7;
border:solid #A6A6A6;
border-width:1px 1px 0;
line-height:0;
position:absolute;
z-index:1;
}
#menus li li {
float:none;
margin:0;
padding:0;
list-style:none;
}
#menus li li a {
float:none;
padding:7px 18px 7px 10px;
text-decoration:none;
border-bottom:1px solid #DDD;
margin:0;
background-image:none;
height:auto;
line-height:145%;
color:#999;
display:block;
width:175px;
}
#menus li li a.last {
border-color:#A6A6A6;
}
#menus li li a:hover,
#menus li li a.current {
background-color:#EDEFF0;
color:#382E1F;
}
#menus li li a.subtitle,
#menus li li a.subtitle:hover {
background-image:url(img/arrow.gif);
background-position:right;
background-repeat:no-repeat;
}
/* submenu END */

#wrapper {
float: left;
width: 575px;
padding: 0 3px 0 3px;
}

#wrapper h2, #wrapper h2 a {
font:normal 22px 'Trebuchet MS', Verdana, Tahoma;
color:#BD218F;
text-decoration: none;
}

#footer{
clear: both;
width: 700px;
text-align: center;
margin: 0 auto;
padding: 3px;
background: #ede7e2;
-moz-border-radius: 6px;
}

.post {
margin: 0 0 40px;
text-align: justify;
}

.alignright {
float: right;
}

.alignleft {
float: left
}

/* Begin Lists

Special stylized non-IE bullets
Do not work in Internet Explorer, which merely default to normal bullets. */

#sidebar ul ul li:before {
content: "�BB �20";
}

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

#sidebar ul, #sidebar ul ol {
margin: 0;
padding: 0;
}

#sidebar ul li {
list-style-type: none;
list-style-image: none;
margin-bottom: 15px;
}

#sidebar ul p, #sidebar ul select {
margin: 5px 0 8px;
}

#sidebar ul ul, #sidebar ul ol {
margin: 5px 0 0 10px;
}

#sidebar ul ul ul, #sidebar ul ol {
margin: 0 0 0 10px;
}

ol li, #sidebar ul ol li {
list-style: decimal outside;
}

#sidebar ul ul li, #sidebar ul ol li {
margin: 3px 0 0;
padding: 0;
}
/* End Entry Lists */

/* Begin Form Elements */
#searchform {
margin: 0px auto;
padding: 5px 3px;
text-align: center;
}

#sidebar #searchform #s {
width: 108px;
padding: 2px;
}

#sidebar #searchsubmit {
padding: 1px;
}

.entry form { /* This is mainly for password protected posts, makes them look better. */
text-align:center;
}

select {
width: 130px;
}

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

#commentform {
margin: 5px 10px 0 0;
}
#commentform textarea {
width: 90%;
padding: 2px;
}
#respond:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#commentform #submit {
margin: 0 0 5px auto;
float: right;
}
/* End Form Elements */

/* Begin Comments*/
.alt {
margin: 0;
padding: 10px;
background: #eee;
-moz-border-radius: 5px;
}

.commentlist {
padding: 0;
text-align: justify;
}

.commentlist li {
margin: 15px 0 10px;
padding: 5px 5px 10px 10px;
list-style: none;
background: #eee;
-moz-border-radius: 5px;

}
.commentlist li ul li {
margin-right: -5px;
margin-left: 10px;
}

.commentlist p {
margin: 10px 5px 10px 0;
}
.children { padding: 0; }

#commentform p {
margin: 5px 0;
}

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

.commentmetadata {
margin: 0;
display: block;
}
/* End Comments */

/* Begin Calendar */
#wp-calendar {
empty-cells: show;
margin: 10px auto 0;
width: 155px;
}

#wp-calendar #next a {
padding-right: 10px;
text-align: right;
}

#wp-calendar #prev a {
padding-left: 10px;
text-align: left;
}

#wp-calendar a {
display: block;
}

#wp-calendar caption {
text-align: center;
width: 100%;
}

#wp-calendar td {
padding: 3px 0;
text-align: center;
}

#wp-calendar td.pad:hover { /* Doesn't work in IE */
background-color: #fff; }
/* End Calendar */

/* Begin Various Tags & Classes */
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;
}

.hidden {
display: none;
}

hr {
display: none;
}

a img {
border: none;
}

.navigation {
display: block;
text-align: center;
margin-top: 10px;
margin-bottom: 60px;
}
/* End Various Tags & Classes*/

/* Captions */
.aligncenter,
div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}

.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
margin: 10px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}

.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}

.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;
}
/* End captions */

Here's my index.php coding:

CODE

<?php get_header(); ?>

<div id="wrapper">
<?php get_sidebar(); ?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>

<div class="post" id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">
<?php the_title(); ?></a></h2>
<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>

<div class="entry">
<?php the_content('Read the rest of this entry &raquo;'); ?>
</div>

<p class="postmetadata">
Filed Under <?php the_category(', ') ?><strong> |</strong>
<?php edit_post_link('Edit','','<strong> |</strong>'); ?>
<?php comments_popup_link('No Comments &raquo;', '1 Comment &raquo;', '% Comments &raquo;'); ?>
</p>

<div>

<?php endwhile; ?>

<div class="navigation">
<div class="alignleft"><?php next_posts_link('&laquo; Older Entries') ?></div>
<div class="alignright"><?php previous_posts_link('Newer Entries &raquo;') ?></div>
</div>

<?php else : ?>

<h2 class="center">Not Found</h2>
<p class="center">Sorry, but you are looking for something that isn't here.</p>
<?php get_search_form(); ?>

<?php endif; ?>
</div></div></div>
<?php get_footer(); ?>

[Mikeplyts]

Looks fine to me.



Idk, adjust the width for the #wrapper id in the style.css file?

[theerinkal]

You can close this, I fixed it.

[manny-the-dino]

Topic Closed and Moved