- This topic is empty.
-
AuthorPosts
-
July 21, 2010 at 12:03 pm #29687Agt001Participant
Ok, i have a problem (obviously :lol: ).
The thing is that on my layout i see a margin which i didn’t declare anywhere in the css document.I have a main div (wrapper), which is centered and has padding 20px both on left and right side… But, on the right side i see 40px of extra space, and Chrome’s Inspect Element Tool on the Computed style shows a margi of 40px.
Maybe the div clear is causing problems… Can you check it out and suggest a solution. Here is the page code, as well as the css.
Page:
CSS:
Code:/*
Theme Name: Nesto
Version: 1.0
Author: The2MD
Author URI:
Tags: blue, gray, fixed-width
Description: Simple portfolio theme, first version.
*/* {
font-family: arial;
outline: 0;
padding: 0;
margin: 0;
border: 0;
text-decoration: none;
vertical-align: baseline;
white-space: normal;
}ul {
list-style-type: none;
}ol {
list-style-type: decimal;
}.clear {
clear:both
}body {
background: #333;
}.wrapper {
background:url(images/noise.png);
width:1000px;
margin-left:auto;
margin-right:auto;
padding-top:100px;
padding-left:20px;
padding-right:-80px;
}.header {
width:960px;
float:left;
}.header-logo {
background:url(images/logo.png) top right no-repeat;
width:648px;
height:100px;
float:left;
}.menu {
background:#35b5f7;
width:648px;
float:left;
clear:left;
}ul.menu {
padding:0px;
}ul.menu li, ul.menu li a {
display:inline;
color:#fff;
font-weight:bolder;
text-transform:uppercase;
letter-spacing:-2px;
font-size:40px;
margin-right:3px;
}ul.menu li a:hover{
background:#333;
}.menu-shadow {
background:url(images/menushadow1.png) center no-repeat;
height:27px;
}.header-right {
background:url(images/t.png) center no-repeat;
float:right;
margin:0px;
width:300px;
height:219px;
}.header-right:hover {
background:url(images/t-over.png) center no-repeat;
}.content-wrapper {
width:960px;
float:left;
}.content {
background:url(images/darknoise.png);
float:left;
width:648px;
height:300px;
}.sidebar {
background:url(images/darknoise.png);
float:right;
width:300px;
height:300px;
}.footer {
background:url(images/darknoise.png);
float:left;
margin-top:15px;
width:960px;
height:300px;
}July 21, 2010 at 12:11 pm #80161TheDocMemberDo you have a link to the page?
July 21, 2010 at 12:25 pm #80164Agt001Participanthttp://gleforu.com/djb/index.html
Also, one more question, regarding the ul. Why isn’t the whole are covered with gray on hover (thin blue line stays)…
July 21, 2010 at 4:05 pm #80175TheDocMemberMake your wrapper width 960px instead of 1000px.
On the <li>, instead of display: inline; try float: left;. That seems to take care of the little border on top.
July 21, 2010 at 6:35 pm #80184Agt001ParticipantThe solution to the first problem was to reduce the width of the wrapper from 100px to 960px…
And the float:left thingy also helped Thanks…
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.