- This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
-
AuthorPosts
-
December 6, 2011 at 11:53 am #35493
SVTony
MemberI’ve been trying to get rid of the empty space on the right side of my page. I think the problem lies inside the css code. Any help will be appreciated. I’m including here the code and also a picture of the page (the website hasn’t been uploaded yet). The page should end where the arrow is pointing and I want to get rid of that space where the circle is: Picture
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
/* Reset for HTML 5 Elements
*/
/* tells browsers that don't read html 5 tags to render like divs */
header, footer, aside, nav, article, section {
display: block;
margin: 0;
padding: 0;
}
/* clears containers with floated elements, no need for extra markup! */
.clear:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* Layout
*/
body {
background: #f0f0f0;
border: none;
color: #333;
margin: 0 auto;
font: 14px/24px Helvetica, Arial, sans-serif;
width: 960px;
}
h1 {
font: normal bold 34px/50px Arial, Helvetica, sans-serif;
padding-top: 30px;
}
h2 {
font-size: 28px;
line-height: 44px;
padding: 22px 0;
}
h3 {
font-size: 18px;
line-height: 22px;
padding: 11px 0;
}
p {
font-weight: normal;
padding-bottom: 22px;
}
a {
color: #CC6600;
text-decoration: none;
}
a:visited {
color: #CC6600;
outline: none;
text-decoration: none;
}
a:hover {
color: #FF9900;
text-decoration: underline;
}
a:active {
color: #CC6600;
outline: none;
text-decoration: none;
}
a:focus {
outline: 1px dotted;
}
#mast h1 {
padding: 30px 0 20px 40px;
}
nav#global {
padding: 10px 0;
position: absolute;
left: 0;
width: 100%;
background-color: #333;
}
nav#global ul {
margin: 0 auto;
width: 960px;
border: none;
}
nav#global ul li {
display: inline;
list-style: none;
padding-left: 40px;
}
nav#global ul li a {
color: #777;
background-color: #222;
border: 2px solid #222;
font: normal bold 14px/44px Arial, Helvetica, sans-serif;
padding: 10px;
margin-right: 40px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
text-align: center;
}
nav#global ul li a:hover, nav#global ul li a:focus {
background-color: #111;
border: 2px solid #444;
color: #FF9900;
text-decoration: none;
}
nav#global ul li a.selected {
color: #fff;
}
nav#global ul li a.selected:hover {
color: #FF9900;
}
#intro {
background-color: #ccc;
margin-top: 100px;
padding: 40px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
#intro header h2 {
font-weight: normal;
line-height: 30px;
padding: 0 0 15px 0;
width: 370px;
}
#intro p {
width: 370px;
}
#intro a {
color: #fff;
background-color: #333;
font: normal bold 14px/44px Arial, Helvetica, sans-serif;
padding: 10px;
margin-right: 40px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
text-align: center;
}
#intro a:hover {
color: #FF9900;
background-color: #222;
text-decoration: none;
}
#intro #photo {
background-color: #fff;
float: right;
margin-top: -170px;
-moz-box-shadow: 0 1px 10px #333;
-webkit-box-shadow: 0 1px 10px #333;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
width: 400px;
height: 300px;
}
#photo div {
background-color: #333;
margin: 10px auto 0 auto;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
width: 380px;
height: 260px;
text-align: center;
}
#photo div h3 {
color: #fff;
font-size: 25px;
line-height: 25px;
padding: 115px 0 0 0;
}
div#main {
background: url(../images/main_bkgd.png) repeat-y top right;
border: none;
}
#main #articles {
float: left;
margin-left: 40px;
width: 600px;
border: none;
}
article {
border-bottom: 1px dotted #aaa;
padding: 15px 0;
}
article:last-child {
border-bottom: none;
}
aside {
float: right;
margin-top: 40px;
margin-right: 40px;
}
aside section {
background-color: #F5F5F5;
margin-bottom: 30px;
padding: 20px 40px 20px 20px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
aside h3 {
padding: 0 0 11px 0;
}
nav#categories ul li, nav#archives ul li {
list-style: none;
margin: 5px 0;
}
footer {
position: absolute;
left: 0;
width: 100%;
background-color: #333;
}
footer div {
margin: 0 auto;
padding: 40px 0 20px 40px;
width: 920px;
border: none;
}
footer div section {
color: #777;
float: left;
margin-right: 25px;
width: 230px;
border: none;
}
footer div section h3 {
color: #fff;
}
nav#blogRoll ul li, nav#siteMap ul li {
color: #777;
list-style: disc;
margin-left: 15px;
}
footer #about {
margin-right: 60px;
width: 330px;
}December 6, 2011 at 1:07 pm #92003TheDoc
MemberI’ve never been a fan of putting a width on the body.
If you use a wrapper instead, this should fix the problem. Having said that, without a live link it would take too long to go through all of your code. Live link is always the best!
December 8, 2011 at 3:08 am #92178MemberYes, I want to extend the nav bar to the edge of the screen. There is even a horizontal bar being created a the bottom of my page, because of the extra space that I don’t need.
My knowledge of HTML and CSS is quite limited, I’m still learning. Could you explain, elneco, how to do this div you are talking about – using the code above?
-
AuthorPosts
Viewing 3 posts - 1 through 3 (of 3 total)
- The forum ‘CSS’ is closed to new topics and replies.
