...

View Full Version : Css Positioning Question



cssmaker
02-13-2012, 12:45 AM
Can someone help me with this website http://83152916.nhd.weebly.com/ . I am trying to position the header header (ul) at the top and make it wider (to show all the Topics instead of more).Also is it possible to posistion the heading below the picture?
CSS:

ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input{
margin:0;
padding:0;
}
ul{
list-style:none;
}
fieldset{
border:0;
}
a img{
border:0;
}
.clear{
clear:both;
}
body {
background: url(0904numba8.jpg) top repeat-x;
background-color:#000000;
font-family: arial, sans-serif;
font-size:12px;
color:#666666;
margin:0;
padding:0;
}
p {
line-height: 170%;
color: #fff;
font-size: 13px;
padding-bottom:12px;
margin: 5px 0px 5px 0px;
}
h1 {
font-size:30px;
font-weight:normal;
color:#ffffff;
margin: 0px 0px 10px 0px;
}
h2 {
font-size:24px;
font-weight:normal;
font-family: arial, sans-serif;
color:#bdbdbd;
padding: 8px 0px 8px 0px;
}
#wrapper {
width:960px;
margin:0pt auto;
}

#header{
width: 960px;
height: 96px;
text-align: right;
}

#headerleft{
float: left;
font-size:30px;
font-weight:normal;
height: 76px;
padding: 10px 30px 10px 0px;
}

#headerleft, #headerleft a{
color:#ffffff;
text-decoration:none;
}

#header ul{
position:relative;
top: 40px;
left: 20px;
display: inline;
margin: 0;
padding: 0;
}

#header ul li {
display: inline;
padding: 0 22px;
}

#header ul li a{
display: inline-block;
color: #230000;
font-size: 17px;
text-decoration: underline;
white-space: nowrap;
}

#header ul li a:hover , #header ul li#active a{
color: #;
}


#weebly-menus .weebly-menu-wrap { z-index: 5000; margin: 42px 0px 0px 0px; }
#weebly-menus .weebly-menu { padding: 0; margin: 0; list-style: none; }
#weebly-menus .weebly-menu li { float: left; clear: left; width: 163px; text-align: left; }
#weebly-menus .weebly-menu li a { position: relative; display: block; width: 161px; background: #525151; border-top: 1px solid #525151; border-bottom: 1px #525151 solid; text-decoration: none; font-size: 13px; font-weight: normal; line-height:1; padding: 6px 0px 6px 0px; color: #fff; border-left: 1px solid #333333; border-right: 1px solid #333333; border-bottom: 1px solid #333333; }
#weebly-menus .weebly-menu li a:hover { background: #636262; border-top: 1px solid #686868; border-bottom: 1px #333333 solid;}


#banner{
width: 954px;
height: 249px;
border: 1px #666666 solid;
padding: 2px 1px 1px 2px;
}

.weebly_header{
width: 954px;
height: 249px;
background: url(%%HEADERIMG%%);
}

#content{
width: 960px;
min-height: 450px;
_height: 450px;
padding: 20px 0px 20px 0px;
}

#content a{
color: #fc7b1b;
text-decoration: none;
}

#footer{
width: 960px;
padding: 31px 0px 20px 0px;
border-top: 1px #666666 solid;
color: #666666;
font-size: 14px;
font-weight: 14px;
text-align: right;
}

#footer a{
color: #fc7b1b;
text-decoration: none;
}

#footer .weebly-footer a{
color: #666666;
}

Excavator
02-13-2012, 01:16 AM
Hello cssmaker,
A few changes might get you started, see the ones I've made highlighted in red -
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,div.paragraph,blockquote,fieldset,input{ margin:0; padding:0; }
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input{ margin:0; padding:0; }
ul{ list-style:none; }
fieldset{ border:0; }
a img{ border:0; }
.clear{ clear:both; }
body {
background: url(theme/0904numba8.jpg?807462) top repeat-x;
background-color:#000000;
font-family: arial, sans-serif;
font-size:12px;
color:#666666;
margin:0;
padding:0;
}
div.paragraph { line-height: 170%; color: #fff; font-size: 13px; padding-bottom:12px; margin: 5px 0px 5px 0px; }
p { line-height: 170%; color: #fff; font-size: 13px; padding-bottom:12px; margin: 5px 0px 5px 0px; }
h1 { font-size:30px; font-weight:normal; color:#ffffff; margin: 0px 0px 10px 0px; }
h2 { font-size:24px; font-weight:normal; font-family: arial, sans-serif; color:#bdbdbd; padding: 8px 0px 8px 0px; }
#wrapper { width:960px; margin:0pt auto; }

#header{
width: 100%;
margin: 355px 0 0;
height: 96px;
text-align: right;
}

And

<div id="header">
<div id="headerleft"><span class="wsite-logo"><table style="height:76px"><tbody><tr><td><a href="/index.html"><span id="wsite-title">The Battle of Blair Mountain</span></a></td></tr></tbody></table></span></div>
<ul><li style="position: relative;" id="active"><a style="position: relative;" href="/index.html">Home</a></li><li style="position: relative;" id="pg830122987650692201"><a style="position: relative;" href="/treatment-of-coal-workers.html">Treatment of Coal Workers</a></li><li style="position: relative; display: none;" id="pg744621763812776075"><a style="position: relative;" href="/matewan-massacre.html">Matewan Massacre</a></li><li style="position: relative; display: none;" id="pg336979416115679333"><a style="position: relative;" href="/assassination-of-sid-hatfield.html">Assassination of Sid Hatfield </a></li><li style="position: relative; display: none;" id="pg342059157494798662"><a style="position: relative;" href="/start-of-a-revolution.html">Start of a Revolution</a></li><li style="position: relative; display: none;" id="pg268537233661099741"><a style="position: relative;" href="/battle-for-blair.html">Battle for Blair</a></li><li style="position: relative; display: none;" id="pg535998694648904643"><a style="position: relative;" href="/the-national-labor-relations-act-of-1935.html">The National Labor Relations Act of 1935</a></li><li style="position: relative; display: none;" id="pg499390511951469871"><a style="position: relative;" href="/timeline.html">Timeline</a></li><li style="position: relative; display: none;" id="pg269890566874056348"><a style="position: relative;" href="/key-members.html">Key Members</a></li><li style="position: relative; display: none;" id="pg343368065614174748"><a style="position: relative;" href="/todays-battle-for-blair-mountain.html">Today's Battle for Blair Mountain</a></li><li style="position: relative; display: none;" id="pg597385495307754940"><a style="position: relative;" href="/process-paper.html">Process Paper</a></li><li style="position: relative; display: none;" id="pg585590759207269632"><a style="position: relative;" href="/annotated-bibliography.html">Annotated Bibliography</a></li><li style="position: relative;" class="wsite-nav-more"><a id="wsite-nav-more-a" style="position: relative;" href="#">more...</a></li></ul>
</div>

<div id="wrapper">
<div id="banner">
<div class="wsite-header">
</div>
</div>
<div id="content"><div id="wsite-content" class="wsite-not-footer">
<div class="wsite-not-footer">

cssmaker
02-13-2012, 03:02 AM
hello, Thianks, but I dont see any of the code you pasted on the original one I pasted.

Excavator
02-13-2012, 06:03 AM
hello, Thianks, but I dont see any of the code you pasted on the original one I pasted.

It's your link - http://83152916.nhd.weebly.com/



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum