WinFuture-Forum.de: CSS Problem - WinFuture-Forum.de

Zum Inhalt wechseln

Nachrichten zum Thema: Entwicklung
Seite 1 von 1

CSS Problem Finde den Fehler nicht...

#1 Mitglied ist offline   expou 

  • Gruppe: Mitglieder
  • Beiträge: 12
  • Beigetreten: 27. April 11
  • Reputation: 0

  geschrieben 27. April 2011 - 10:34

Hi Folks,

hab nen kleines Problem mit meinem CSS Code und finde den Fehler einfach nicht.

Hier der Screenshot:
Eingefügtes Bild
Man sieht unter dem Warndreieck ein von mir nicht definiertes margin. bzw. padding,
wie kriege ich es weg und so wie auf der linken Seite hin ?

Der innere Container wird bei /*** CONTENT ***/ und /*** LAYOUT ***/ definiert,
die beiden Sidebars bei /*** CONTENT ***/ (#column_left/right ), sowie /*** BOX MODULES ***/.
CMS ist opencart.

=> LINK

CSS:

CODE
/*** RESET ***/
html {
overflow: -moz-scrollbars-vertical;
margin: 0;
padding: 0;
}
p {
margin-top: 0px;
}
form {
padding: 0;
margin: 0;
display: inline;
}
input, textarea, select {
margin: 3px 0px;
}

/*** FONTS ***/
body {
font-family: 'Goudy Bookletter 1911', Georgia, serif;
}
body, td, th, input, textarea, select, a {
font-size: 12px;
}
#inner-container .menu a, .box .top, .button span, #content h1, .heading, #search .searchbtn {
font-family: 'Goudy Bookletter 1911', Georgia, serif;
}

/*** LAYOUT ***/
body {
margin: 0px;
padding: 0px;
text-align: center;
background: url(../image/background-pattern.jpg) repeat;
}
#glow {
background: url(../image/background-glow.png) no-repeat top center;
}
#container {
width: 960px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
.clear {
overflow: hidden;
width: 100%;
}

/*** LINKS ***/
a, a:visited {
color: #000000;
text-decoration: underline;
cursor: pointer;
}
a:hover {
text-decoration: none;
}
#column_left a, #column_right a {
text-decoration: none;
}
#column_left a:hover, #column_right a:hover {
text-decoration: underline;
}
a img {
border: none;
}

/*** HEADER ***/
#header .logo {
float: left;
padding: 0px;
}
#header .quicklinks {
float: right;
padding-top: 0px;
height: 38px;
}
#header .quicklinks a {
margin-left: 15px;
padding: 1px 0px 2px 20px;
background-repeat: no-repeat;
background-position: left center;
}
#breadcrumb {
clear: left;
float: left;
padding: 7px 0 11px 20px;
height: 13px;
color: #FFC;
}
#breadcrumb a {
color: #FFC;
}
#header .tools {
float: right;
margin: 20px 20px 0 0;
}
#search {
clear: right;
float: right;
margin: 20px 20px 0 0;
height: 26px;
color: #ffffff;
border: 1px solid #666666;
}
#search .searchbtn {
font-size: 16px;
padding: 0 5px;
}
#search a, #search a:hover {
color: #ffffff;
text-decoration: none;
}
#search input {
background: none;
border: none;
padding: 2px;
}

/*** MENU ***/
#inner-container .menu {
width: 100%;
height: 60px;
background: url('../image/menu-bg.png') no-repeat;
text-align: center;
margin: 0 0 20px;
}
#inner-container .menu a {
display: inline-block;
width: 120px;
height: 60px;
line-height: 60px;
text-align: center;
color: #ffffff;
text-decoration: none;
font-size: 24px;
}
#inner-container .menu a.selected, #inner-container .menu a:hover {
color: #FFC;
}

/*** CONTENT ***/
#inner-container-top {
background: url('../image/inner-container-top.png') no-repeat;
height: 20px;
clear: both;
}
#inner-container-btm {
background: url('../image/inner-container-btm.png') no-repeat;
height: 20px;
margin-bottom: 20px;
}
#inner-container {
background: url('../image/inner-container-bg.png') repeat scroll;
border-left: 1px solid #673b15;
border-right: 1px solid #673b15;
padding: 0 0px;
width: 956px;
}
.switcher {
float: right;
margin-top: 3px;
margin-left: 10px;
}
.switcher a {
text-decoration: none;
display: block;
}
.switcher .selected {
background: ;
}
.switcher .selected a {
border: 1px solid #666666;
background: url('../image/arrow_down.png') 116px center no-repeat;
color: #666666;
padding: 2px 5px 2px 5px;
width: 121px;
}
.switcher .selected a:hover {
background: #333333 url('../image/arrow_down.png') 116px center no-repeat;
}
.switcher .option {
position: absolute;
z-index: 3;
border-left: 1px solid #666666;
border-right: 1px solid #666666;
border-bottom: 1px solid #666666;
background: #000000;
display: none;
width: 131px;
}
.switcher .option a {
color: #666666;
padding: 3px 5px 3px 5px;
}
.switcher .option a:hover {
background: #333333;
}
.switcher img {
position: relative;
top: 1px;
}
#column_left {
float: left;
width: 180px;
margin-right: 10px;
margin-left: 20px;
clear: left;
}
#column_right {
float: right;
width: 180px;
margin-right: 20px;
margin-left: 10px;
clear: right;
}
#content {
margin: 0 190px 10px;
padding: 0 20px;
}
#content h1, .heading {
color: #000000;
font-size: 24px;
margin: 0 0 10px;
font-weight: normal;
line-height: 36px;
height: 36px;
text-align: center;
}
.content {
background: #F7F7F7;
border: 1px solid #DDDDDD;
padding: 10px;
margin-top: 3px;
margin-bottom: 10px;
}

/*** BOX MODULES ***/
.box {
margin-bottom: 10px;
}
.box .top .left {
background: url('../image/box-top-left.png') no-repeat;
width: 16px;
height: 36px;
float: left;
}
.box .top .right {
background: url('../image/box-top-right.png') no-repeat;
width: 16px;
height: 36px;
float: right;
}
.box .top .center {
background: url('../image/box-top-ctr.png');
height: 36px;
line-height: 36px;
margin: 0 16px;
color: #ffffff;
font-size: 16px;
}
.box .main {
padding: 10px;
}
#category ul, #information ul {
margin: 0 0 0 8px;
padding-left: 12px;
list-style: url('../image/bullet-1.png');
}
#category ul li, #information ul li {
padding-bottom: 3px;
}
.cart {
border-collapse: collapse;
width: 100%;
border: 1px solid #EEEEEE;
margin-bottom: 10px;
}
.cart th {
background: #EEEEEE;
padding: 5px;
font-weight: normal;
}
.cart td {
padding: 5px;
}
.tags, .tags a {
font-style: italic;
font-size: x-small;
}
#module_cart .middle {
padding: 10px;
}
.cart_module_total {
padding: 0 3px 0 3px;
font-size: 0.9em;
color: #222;
}
.cart_remove {
margin-top: 3px;
background: url('../image/list_remove_btn.gif') no-repeat left center transparent;
padding-right:10px;
cursor:pointer;
}
.cart_remove_loading {
margin-top: 3px;
background: url('../image/ajax_load.gif') no-repeat transparent;
padding-right:10px;
}
.button_add_small, a.button_add_small:visited {
margin-top: 3px;
background: url('../image/button_add_small.png') no-repeat left center transparent;
padding:5px;
text-decoration: none;
cursor:pointer;
}

/*** MESSAGES ***/
.success {
padding: 5px 0px;
margin-bottom: 10px;
background: #E4F1C9;
border: 1px solid #A5BD71;
font-size: 11px;
font-family: Verdana, Geneva, sans-serif;
text-align: center;
}
.warning {
padding: 5px 0px;
margin-bottom: 10px;
background: #FFDFE0;
border: 1px solid #FF9999;
font-size: 11px;
font-family: Verdana, Geneva, sans-serif;
text-align: center;
}
.wait {
padding: 5px 0px;
margin-bottom: 10px;
background: #FBFAEA;
border: 1px solid #EFEBAA;
font-size: 11px;
font-family: Verdana, Geneva, sans-serif;
text-align: center;
}
.required {
color: #FF0000;
font-weight: bold;
}
.error {
color: #FF0000;
display: block;
}
.help {
cursor: pointer;
}
.tooltip {
border: 1px solid #666666;
background: #cccccc;
padding: 5px;
font-size: 11px;
width: 250px;
}

/*** BUTTONS ***/
.button {
padding-left: 8px;
display: inline-block;
margin-right: 5px;
background: url('../image/button_left.png') top left no-repeat;
text-decoration: none;
color:#ffffff;
}
.button span {
color: #ffffff;
display: block;
padding: 4px 12px 5px 5px;
background: url('../image/button_right.png') top right no-repeat;
}
.buttons {
background: #F8F8F8;
border: 1px solid #DDDDDD;
padding: 5px;
margin-bottom: 10px;
}
.buttons input {
padding: 0px;
margin: 0px;
}
.buttons table {
width: 100%;
border-collapse: collapse;
}
.buttons table td {
vertical-align: middle;
}

/*** PRICE CLASSES ***/
.price {
font-weight: bold;
color: #000000;
}
.model {
color: #999;
font-size: 11px;
}
.discount {
color: #900;
text-decoration: line-through;
}
.special {
color: #ff0000;
font-weight: bold;
}

/*** MISC ***/
.list {
margin-bottom: 10px;
width: 100%;
}
.list td {
text-align: center;
vertical-align: top;
padding-bottom: 10px;
}
.sort {
margin-bottom: 10px;
background: #F8F8F8;
height: 30px;
width: 100%;
}
.sort .div1 {
float: right;
margin-left: 5px;
padding-top: 6px;
padding-right: 9px;
}
.sort .div2 {
text-align: right;
padding-top: 9px;
}
.sort select {
font-size: 11px;
margin: 0;
padding: 0;
}
.pagination {
display: inline-block;
width: 100%;
background: #F8F8F8;
margin-bottom: 10px;
}
.pagination .links, .pagination .results {
padding: 7px;
}
.pagination .links {
float: left;
}
.pagination .links a {
border: 1px solid #CCCCCC;
padding: 4px 7px;
text-decoration: none;
color: #000000;
}
.pagination .links b {
border: 1px solid #CCCCCC;
padding: 4px 7px;
text-decoration: none;
color: #000000;
background: #FFFFFF;
}
.pagination .results {
float: right;
}
.tabs {
width: 100%;
height: 31px;
margin-bottom: 0px;
}
.tabs a {
float: left;
display: block;
padding: 6px 8px 7px;
margin-right: 2px;
border-top: 1px solid #DDDDDD;
border-bottom: 1px solid #DDDDDD;
border-left: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
background: #FFFFFF url('../image/tab.png') repeat-x;
color: #000000;
font-weight: bold;
font-size: 13px;
text-decoration: none;
z-index: 1;
position: relative;
top: 1px;
}
.tabs a.selected {
background: #FFFFFF url('../image/tab.png') repeat-x;
border-bottom: 0px;
padding-bottom: 8px;
z-index: 3;
}
.tab_page {
border: 1px solid #DDDDDD;
background: #FFFFFF;
padding: 10px;
display: block;
z-index: 2;
margin-bottom: 10px;
}

/*** FOOTER ***/
#footer {
width: 100%;
clear: both;
padding: 5px 0 30px;
}
#footer .left {
float: left;
text-align: left;
}
#footer .right {
float: right;
text-align: right;
}

0

Anzeige

#2 Mitglied ist offline   Stefan_der_held 

  • Gruppe: Offizieller Support
  • Beiträge: 12.417
  • Beigetreten: 08. April 06
  • Reputation: 381

geschrieben 27. April 2011 - 11:05

Öhm werd jetzt nicht so ganz dolle schlau draus... wie sollte es denn nun ausschauen?

Versuche zwar etwas zu finden... aber evtl. hilft ja der Test des CSS schonmal

http://jigsaw.w3.org/css-validator/validat...ng=&lang=de

HTML ist schön valide bis auf eine Warnung

http://validator.w3.org/check?uri=http%3A%...ine&group=0

aber des CSS....

Dieser Beitrag wurde von Stefan_der_held bearbeitet: 27. April 2011 - 11:08

Eingefügtes Bild
0

#3 Mitglied ist offline   expou 

  • Gruppe: Mitglieder
  • Beiträge: 12
  • Beigetreten: 27. April 11
  • Reputation: 0

geschrieben 27. April 2011 - 11:19

Großteil der Fehler durch Google FontAPI

Zitat

Die gleichen Farben für den Vordergrund und den Hintergrund

?
:cool:

Hab doch geschrieben wie es aussehen soll, wie auf der linken Seite,
also kein Abstand von Menü (rotes Band) und dem Rand der Contentbox
0

#4 Mitglied ist offline   expou 

  • Gruppe: Mitglieder
  • Beiträge: 12
  • Beigetreten: 27. April 11
  • Reputation: 0

geschrieben 27. April 2011 - 11:26

Fehler wurde gefunden:

Zitat

Das Hintergrundbild der Navigation war 920 Pixel breit, die Navigation aufgrund der bei #inner-container definierten 956px 36 Pixel breiter.
Da hast du deinen Abstand, das Bild hört einfach vor dem Rand auf.
gruß,
take

Quelle

Danke Stefan, um die CSS Validität kümmere ich mich noch :cool:

Dieser Beitrag wurde von expou bearbeitet: 27. April 2011 - 11:27

0

#5 Mitglied ist offline   Witi 

  • Gruppe: aktive Mitglieder
  • Beiträge: 5.940
  • Beigetreten: 13. Dezember 04
  • Reputation: 43

geschrieben 27. April 2011 - 11:31

#inner-container ist 956px + 2px border = 958px. Das Bild in #inner-container-top hat allerdings die Breite von 960px.

Edit: Ach...da war ich wohl zu langsam. :cool:

Dieser Beitrag wurde von Witi bearbeitet: 27. April 2011 - 11:32

witi@jabber.ccc.de 0xAAE321A2

50226 - Witis Blog
0

#6 Mitglied ist offline   expou 

  • Gruppe: Mitglieder
  • Beiträge: 12
  • Beigetreten: 27. April 11
  • Reputation: 0

  geschrieben 27. April 2011 - 11:49

Beitrag anzeigenZitat (Witi: 27.04.2011, 12:31)

#inner-container ist 956px + 2px border = 958px. Das Bild in #inner-container-top hat allerdings die Breite von 960px.

Edit: Ach...da war ich wohl zu langsam. :cool:


Trotzdem Danke :blush:
0

Thema verteilen:


Seite 1 von 1

1 Besucher lesen dieses Thema
Mitglieder: 0, Gäste: 1, unsichtbare Mitglieder: 0