Need to move content up, CSS help

  • Resolved gouldimal

    (@gouldimal)


    16 years, 2 months ago

    Hello, I’m a bit new to WordPress, though I have some background knowledge of HTML and CSS. I’m looking to have the content of my website moved up so that it is closer to my header. Here it is (still working on it) https://www.markgouldblog.com/ Currently, there is a pretty big gap. Here’s some of my CSS. Any help would be very much appreciated. I’m doing my best to learn as I go along. If you need additional info, please let me know.

    body{margin: 0; padding: 0 0 100px 0; font: 12px Arial, Helvetica, sans-serif;  background: #632520 url(images/bg-body.jpg); text-align: center}
a, a:visited{color: #5E1619; text-decoration: none}
a:hover, a:active{text-decoration: underline}
a img{border:0}
h1{font:25px normal Georgia, "Helvetica", Times, serif}
h2{font:1.4em Georgia, "Helvetica", Times, serif}
h3{font-size:1em;margin-bottom: 0;}
caption{border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; background-color: #f2f2f2}
code{background: #D2ECE8}
pre code{color: black; background: none;}
pre{ height: auto; padding: 40px 12px 12px 12px; background: #FAF8EB url(images/bg-pre.jpg) no-repeat top left; overflow-x:scroll;}
fieldset{margin: 0; padding: 0; border: 0}
label{display:block; margin: 10px 0 5px 0;}
#container{margin: 0 auto; width: 876px; text-align: left}
.navigation{margin: 20px 0; height: 27px;}
.alignleft{float:left}
.alignright{float:right}
.aligncenter{text-align: center; float:none}
.comments a{background:url(images/ico-speech.gif) no-repeat top left; padding-left: 18px;}
.tags a{background:url(images/ico-tags.gif) no-repeat top left; padding-left: 18px;}
h1.post{margin-bottom: 0;}
.posted{margin-bottom: 10px;}
.download{display: inline-block; padding: 5px 10px 5px 52px; background:#ECF3FF url(images/54_32x32.png) no-repeat 12px 5px; font:22px Georgia, "Helvetica", Times, serif; color:#384D92; text-decoration:none; line-height: 32px;border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px}
/* header styles */
#header{ width:879px; height:88px;  margin: 0 0 30px 0; padding: 10px 0 0 0; background:url(images/header.png) no-repeat top left; text-align:center; }
#header h1{ margin: 0 40px 0 40px; padding: 8px 0; background-color:#aa1f10; opacity: 0; filter:alpha(opacity=0)}
#header h1 a{color: white}
#header a{ display: block;}
#header-page{background: url(images/white-page-header.png) no-repeat top right; margin: 0; width: 693px; height:59;text-align:right}
#header-page img{margin: 20px 30px 0 0}
#main{background: url(images/bg-content.png) repeat-y top left; position: relative; margin: 0; padding: 20px 0 0 0; width: 876px}
#content{ display: inline; float: left; width: 640px; margin-left: 30px; }
#content div.inner{ padding: 4px 40px 20px 40px }
#content .postfooter{background:url(images/bg-post-footer.png) no-repeat top left; width: 561px; height: 30px; line-height: 30px; margin-bottom: 35px; text-indent: 10px}
#content .calendar{background:url(images/ico-calendar.png) no-repeat top left; width: 39px; height: 41px; float: left; margin: 0 20px 0 0; text-align: center}
#content .calendar small{font: 10px Arial, Helvetica, sans-serif; color: #fff; line-height: 1.5em; text-transform:uppercase;display: block}
#content .calendar strong{font: bold 22px Arial, Helvetica, sans-serif; color: #2e7368; line-height: 0.9em;display: block}
#content h1{margin-top:0}
#sidebar{ float: right; width: 198px; background: url(images/bg-sidebar.png) repeat-y top right; color: white;}
#sidebar div{margin: 10px 10px 20px 10px}
#sidebar h2{ margin: 0 0 10px 0; padding: 0; color: white; line-height: 1.8em; text-indent: 10px; background: url(images/sidebar-h2.png) no-repeat top left; width: 171px; height: 32px;}
#sidebar ul, #sidebar ul li{ margin: 0 0 0 5px; padding: 0; list-style:none;}
#sidebar ul{ margin: 0 0 20px 5px; }
#sidebar a{ color: #bcf3ea;}
Viewing 5 replies - 1 through 5 (of 5 total)

  • I’ve noticed that your #header has a fixed height of 83px, which is quite a bit. You could take that down to something smaller.

    By the way, if you want to learn to work with HTML and CSS, try the Firebug extension for Firefox. You can click on elements and see all the properties applied to them. Helpful for situations like this.

    you’ve got 2 closing

    </body>
</html>

    tags at the bottom.

    I suspect you may also have some other unclosed divs as well – fix these issues before focussing on the CSS. The extra space is quite possibly being caused by incorrect HTML markup.

    Thread Starter gouldimal

    (@gouldimal)

    Thank you so much for the speedy replies. This forum is great. Glad I came across it. As far as the header, I’ve reduced its size and now the header image gets cut off.

    Thanks for recommending Firebug. I’ve had it for a while and it has taught me quite a bit about code.

    What file would I look in for the HTML? I understand about closing divs and the issues that might cause. All I’m seeing is PHP files.

    Good job spotting that markup issue @zeniph.

    @gouldimal Those PHP files are exactly what you want. WordPress uses the PHP language for theming. The files are a mix of everyday HTML tags and PHP tags that are replaced with the dynamic content from the software. Don’t be intimidated by the PHP tags, it’s actually pretty simple to understand once you tinker a bit. I suggest starting here to learn more about templates: https://codex.www.ads-software.com/Stepping_Into_Templates.

    Regarding your theme, you might check that any <div>s being opened in header.php are being closed in footer.php. These two files are used as the top of each page and the bottom of each page, respectively, and it’s easy to drop a closing or opening div in one of them and not realize it.

    Thread Starter gouldimal

    (@gouldimal)

    Thank you both so much. I have been able to for the most part reslove my issues. Your detailed and timely responses are very much appreciated. The links are also helping me to learn.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Need to move content up, CSS help’ is closed to new replies.

Tags