CSS word niet meer goedgekeurd sinds CSS controle - Stoute bugs

woensdag 26 augustus 2020 21:20

Acties:

0 Henk 'm!

Topicstarter

waarom kan ik dat niet uit zetten. de CSS controle is gewoon fucked up. soms word @media afgekeurd, soms word auto margin afgekeurd. kortom: fucked up.

kortom: laat mij het uit zetten. ik weet blijkbaar beter dan de software die jullie gebruiken welke CSS werkt, laat mij daar voor kiezen AUB.

[ Voor 41% gewijzigd door dec0de op 26-08-2020 21:22 ]

woensdag 26 augustus 2020 21:27

Acties:

0 Henk 'm!

crisp

Devver

Pixelated

-webkit-backdrop-filter werkt bij mij prima (en kan volgens mij tegenwoordig ook gewoon zonder -webkit- prefix). Post eens een compleet stuk css wat bij jou niet werkt?

[ Voor 18% gewijzigd door crisp op 26-08-2020 21:28 ]

Intentionally left blank

woensdag 26 augustus 2020 21:29

Acties:

0 Henk 'm!

dec0de

Topicstarter

hij word rood @crisp
hier mijn oude 500 lijnen CSS waar ik weet niet hoe veel "fouten" in zitten:

code:

@media only screen and (min-width: 1220px) {
body{
background: #474747;
}

/*######################################################################## 
                                          BORDERS WEGWERKEN
#######################################################################*/
.keywordSearch, #userbar li.icon.flag.nl::after, .keywordSearch:hover, #top, #categoryBrowser div, #categoryBrowser.sidebar div, #categoryBrowser, .galleryHeadingContainer, .galleryHeadingContainer div, 
#entity, #entity div, #search input.submit, table.pwListTable td, #contentArea {
border: none !important;

}


/*########################################################################
                            BOVENSTE GEDEELTE EN ZOEKBAR EN MENU
########################################################################*/
.keywordSearch{
background: #474747;
}

#menubar{
background-image: none;
background-color:#090909cc;
border-bottom: none;
box-shadow: inherit;
}

.menubottom span{
display: none;
}



.menubottom:after{
content:'wij hebben geen webdesigners in dienst, maar als je voldoende karma hebt mag je het fixen!';
}

#menubottombar .menubottom{
margin: 6px;
margin-left: 208px;
}

#menu, #search, #contentArea, #ticker, #about {
width: 80%;
}

/*################################
LELIJKE ICOONTJES VERANDEREN en social media
################################*/
#userbar li.notifications a {
background-position: 0 -25px;
background: url("https://tweakers.net/ext/f/fqKfrbeDGIEA5qj49Z2exz8J/full.png") no-repeat; 
background-position-y: 0%;
background-size: auto auto;
background-size: 20px;
background-position-y: 6.5px;
background-position-x: 4px
}

#menubottombar div.socialcount{
height: 0px;
width: 0px;
visibility: hidden;
left: 10000px;
}

#userbar li.icon.flag.nl::after{
height: 0px;
width: 0px;
background: none;
left: 10000px;
}

#userbar li.messages a{
background: url("https://tweakers.net/ext/f/HpWcDHA5p7EbDAIzLBfrZvXg/full.png") no-repeat;
background-size: 20px;
background-position-y: 7.5px;
background-position-x: 5px;
}

.icon.compare.empty{
width: 0px !important;
height: 0px !important;
visibility: hidden;
left: 100000000px;
}
/*######################
EINDE LELIJKE ICOONTJES
######################*/





#mainSearch .submit{
border-bottom-right-radius: 15px;
border-top-right-radius: 15px;
}







#searchbar{
background: #474747;
}


.keyword .text{
border-bottom-left-radius: 15px !important;
border-top-left-radius: 15px !important;
}

/*########################################################################
                                             ALGEMENE DINGEN
########################################################################*/
#bottom div.hr {
background: #474747
}

h1, h2 {
color: #000;
}



#contentArea {
padding: 10px;
padding-right: 20px;
padding-left: 20px;
margin-bottom: 150px;
border-radius: 5px; 
margin-top: 50px;
width: 80%
}
 

 
#layout {
background: #474747
}



/*########################################################################
                                                   SETTINGS
########################################################################*/
.settingsContent{
width: 80%
}


#categoryBrowser div, #categoryBrowser.sidebar div{
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
backgound: #dedede !important;
}

#categoryBrowser div{
background-color: #dedede;
}



#categoryBrowser{
padding: inherit;
padding-left: 10px;
background: #dedede;
border-radius: 5px;
}


#categoryBrowser div ul{
border-radius: 5px;
}

#categoryBrowser ul{
background: #dedede;
}



/*##################################################################
                                          USER GALLERY
##################################################################*/

.galleryHeadingContainer, .galleryHeadingContainer div{
background: #474747;
}

.pageTabsContainer{
background: #474747;
}

.memberInfo h1, .memberInfo h2, .memberInfo h3 {
color: #fff;
}

.galleryHeading .karma{
color: #efefef;
}

.vaInfo .count a {
color: #000;
font-size: 15px;
font-weight: bolder;
}

/*#######################################################################
                                            PRICEWATCH
######################################################################*/


#entity, #entity div {
background: #474747;
}


#filterForm{
width: 210px;
}


.filterGroup .filters{
padding-left: 10px;
}


.articleColumn {
    float: left;
    line-height: 1.6;
    width: 999px;
    padding-left: 521.7px;
}


.entityHeader h1 {
color: white;
}

.sublist.images.no_scroll.large ul{
background-color: #fff !important;
}

#categoryBrowser .sublist{
top: 2px;
height: 380px;
}

/*########################################################################
                                                        FRONTPAGE
########################################################################*/


.fpaItemsWrapper, .fpaItems .fpaItem{
border: 0px;
}

.ankeiler.large {
margin-left: 400px;
}

#highlightedProducts .fpaItem{
border-top: none;
}


.fpAnkeiler.fullWidth {

    height: 300px;
    margin-bottom: 15px;
    width: 980px;
    padding-left: 500px;
    padding-right: 500px;
    margin-left: 33px;
    margin-right: 50px;
    padding-top: 20px;
}

.fpAnkeiler {
margin: 50px;
margin-left: 0px;
}

.mainColumn.frontpage{
width: 940px;
border-right: none;
margin-right: 50px;
padding-left: 300px;
}


.fpaItems{
margin: 0 auto;
}


#categoryBar h2{
padding-bottom: 10px;
font-size: 24px;
}


 #categoryBar{
text-align: center;
}
.articleColumn.wide {
width: 999px;
padding-left: 521.7px;
}


table.highlights .replies{
padding-right: 10px;
}


.publicationTime {
background: #dedede;
padding-right: 5px !important;
}

table.highlights .type{
background: #dedede
}


.secondColumn.frontpage{
width: 400px;
}


#highlightedProducts h2 {
text-align: center;
font-size: 24px;
}


table.highlights td, table.highlights{
border: none;
}


#jobs {
    width: 0px;
    height: 0px;
    padding: 0px;
    visibility: hidden;
    left: 10000px;
}

/*########################################################################
                                                             FORUM
########################################################################*/
h2.bar.question{
width: 0px;
height: 0px;
padding: inherit;
visibility: hidden;
left: 10000px;
background: inherit;
}
/*#######################################################################
                                             DARK MODE MET CUSTOM COLOR
#######################################################################*/

body.customColor #contentArea{
background: #575757;
}


body.customColor div.message{
background-color: #8d8d8d;
background-image: none;
border: none;
box-shadow: inherit;
}


body.customColor #searchbar, body.customColor{
background: #474747;
}

body.customColor form.form1{
background: #8d8d8d;
border: none;
box-shadow: inherit;
}

body.customColor #reageer{
background: #8d8d8d;
border: none;
}


/*#####################################################################
                                          TEXT COLOR  AANPASSEN VOOR DARKMODE
#####################################################################*/

body.customColor h1, body.customColor h2, body.customColor #header, body.customColor label{
color: white;
}

body.customColor a {
color: #cbcbcb;
}


.customColor p.edit a, .customColor .messagecontent p.edit, .customColor  .signature a {
color: #eee;
}


 body.customColor h3{
color: black;
}

background-color: #8d8d8d;


/*########################################################################
                                          EINDE DESKTOP LAYOUT
########################################################################*/
}
/*####################DIT BRACKET LATEN STAAN! !! !! !! !! !! !! !!###############*/
@media only screen and (max-width: 1220px) {
@media only screen and (min-width: 1000px){
#menubar{
background-image: none;
background-color:#0006;
border-bottom: none;
box-shadow: inherit;
-webkit-backdrop-filter: blur(10px);
}


body.customColor #contentArea{
background: #575757;
}


body.customColor div.message{
background-color: #8d8d8d;
background-image: none;
border: none;
box-shadow: inherit;
}


body.customColor #searchbar, body.customColor{
background: #474747;
}

body.customColor form.form1{
background: #8d8d8d;
border: none;
box-shadow: inherit;
}

body.customColor #reageer{
background: #8d8d8d;
border: none;
}


/*#####################################################################
                                          TEXT COLOR  AANPASSEN VOOR DARKMODE
#####################################################################*/

body.customColor h1, body.customColor h2, body.customColor #header, body.customColor label{
color: white;
}

body.customColor a {
color: #cbcbcb;
}


.customColor p.edit a, .customColor .messagecontent p.edit, .customColor  .signature a {
color: #eee;
}

body.customColor h3 {

}

 body.customColor h3{
color: black;
}


/*#######################   DEZE BRACKETS LATEN STAAN##################*/
}
}
/*#######################   DEZE BRACKETS LATEN STAAN##################*/

#tracker .fakeTop{
background-image: none !important;
background-color: #474747;
}



@media  only screen and (max-width: 800px) {
@media only screen and (min-width: 80px){
#menubar{
background-image: none;
background-color:#0006;
border-bottom: none;
box-shadow: inherit;
-webkit-backdrop-filter: blur(10px);
}

woensdag 26 augustus 2020 21:49

Acties:

+6 Henk 'm!

crisp

Devver

Pixelated

Je hebt gewoon syntaxfouten; op regel 422 staat een property zonder rule; je nest een aantal keer @media-rules (op zich geen probleem, maar je kan het gewoon met 1 gecombineerde rule doen), en de laatste set sluit je niet af.

Hier een versie waarbij ik indenting voor de code heb gebruikt en de syntaxfouten heb gefixt:

Cascading Stylesheet:

@media only screen and (min-width: 1220px) {

  body {
    background: #474747;
  }

  /*########################################################################
                                            BORDERS WEGWERKEN
  #######################################################################*/

  .keywordSearch, #userbar li.icon.flag.nl::after, .keywordSearch:hover,
  #top, #categoryBrowser div, #categoryBrowser.sidebar div, #categoryBrowser,
  .galleryHeadingContainer, .galleryHeadingContainer div,
  #entity, #entity div, #search input.submit, table.pwListTable td, #contentArea {
    border: none !important;
  }

  /*########################################################################
                              BOVENSTE GEDEELTE EN ZOEKBAR EN MENU
  ########################################################################*/

  .keywordSearch {
    background: #474747;
  }

  #menubar {
    background-image: none;
    background-color:#090909cc;
    border-bottom: none;
    box-shadow: inherit;
  }

  .menubottom span {
    display: none;
  }

  .menubottom:after {
    content:'wij hebben geen webdesigners in dienst, maar als je voldoende karma hebt mag je het fixen!';
  }

  #menubottombar .menubottom {
    margin: 6px;
    margin-left: 208px;
  }

  #menu, #search, #contentArea, #ticker, #about {
    width: 80%;
  }

  /*################################
  LELIJKE ICOONTJES VERANDEREN en social media
  ################################*/

  #userbar li.notifications a {
    background-position: 0 -25px;
    background: url("https://tweakers.net/ext/f/fqKfrbeDGIEA5qj49Z2exz8J/full.png") no-repeat;
    background-position-y: 0%;
    background-size: auto auto;
    background-size: 20px;
    background-position-y: 6.5px;
    background-position-x: 4px
  }

  #menubottombar div.socialcount {
    height: 0px;
    width: 0px;
    visibility: hidden;
    left: 10000px;
  }

  #userbar li.icon.flag.nl::after {
    height: 0px;
    width: 0px;
    background: none;
    left: 10000px;
  }

  #userbar li.messages a {
    background: url("https://tweakers.net/ext/f/HpWcDHA5p7EbDAIzLBfrZvXg/full.png") no-repeat;
    background-size: 20px;
    background-position-y: 7.5px;
    background-position-x: 5px;
  }

  .icon.compare.empty {
    width: 0px !important;
    height: 0px !important;
    visibility: hidden;
    left: 100000000px;
  }

  /*######################
  EINDE LELIJKE ICOONTJES
  ######################*/

  #mainSearch .submit {
    border-bottom-right-radius: 15px;
    border-top-right-radius: 15px;
  }

  #searchbar {
    background: #474747;
  }

  .keyword .text {
    border-bottom-left-radius: 15px !important;
    border-top-left-radius: 15px !important;
  }

  /*########################################################################
                                               ALGEMENE DINGEN
  ########################################################################*/

  #bottom div.hr {
    background: #474747
  }

  h1, h2 {
    color: #000;
  }

  #contentArea {
    padding: 10px;
    padding-right: 20px;
    padding-left: 20px;
    margin-bottom: 150px;
    border-radius: 5px;
    margin-top: 50px;
    width: 80%
  }

  #layout {
    background: #474747
  }

  /*########################################################################
                                                     SETTINGS
  ########################################################################*/

  .settingsContent {
    width: 80%
  }

  #categoryBrowser div, #categoryBrowser.sidebar div {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    background: #dedede !important;
  }

  #categoryBrowser div {
    background-color: #dedede;
  }

  #categoryBrowser {
    padding: inherit;
    padding-left: 10px;
    background: #dedede;
    border-radius: 5px;
  }

  #categoryBrowser div ul {
    border-radius: 5px;
  }

  #categoryBrowser ul {
    background: #dedede;
  }

  /*##################################################################
                                            USER GALLERY
  ##################################################################*/

  .galleryHeadingContainer, .galleryHeadingContainer div {
    background: #474747;
  }

  .pageTabsContainer {
    background: #474747;
  }

  .memberInfo h1, .memberInfo h2, .memberInfo h3 {
    color: #fff;
  }

  .galleryHeading .karma {
    color: #efefef;
  }

  .vaInfo .count a {
    color: #000;
    font-size: 15px;
    font-weight: bolder;
  }

  /*#######################################################################
                                              PRICEWATCH
  ######################################################################*/

  #entity, #entity div {
    background: #474747;
  }

  #filterForm {
    width: 210px;
  }

  .filterGroup .filters {
    padding-left: 10px;
  }

  .articleColumn {
    float: left;
    line-height: 1.6;
    width: 999px;
    padding-left: 521.7px;
  }

  .entityHeader h1 {
    color: white;
  }

  .sublist.images.no_scroll.large ul {
    background-color: #fff !important;
  }

  #categoryBrowser .sublist {
    top: 2px;
    height: 380px;
  }

  /*########################################################################
                                                          FRONTPAGE
  ########################################################################*/

  .fpaItemsWrapper, .fpaItems .fpaItem {
    border: 0px;
  }

  .ankeiler.large {
    margin-left: 400px;
  }

  #highlightedProducts .fpaItem {
    border-top: none;
  }

  .fpAnkeiler.fullWidth {
    height: 300px;
    margin-bottom: 15px;
    width: 980px;
    padding-left: 500px;
    padding-right: 500px;
    margin-left: 33px;
    margin-right: 50px;
    padding-top: 20px;
  }

  .fpAnkeiler {
    margin: 50px;
    margin-left: 0px;
  }

  .mainColumn.frontpage {
    width: 940px;
    border-right: none;
    margin-right: 50px;
    padding-left: 300px;
  }

  .fpaItems {
    margin: 0 auto;
  }

  #categoryBar h2 {
    padding-bottom: 10px;
    font-size: 24px;
  }

  #categoryBar {
    text-align: center;
  }

  .articleColumn.wide {
    width: 999px;
    padding-left: 521.7px;
  }

  table.highlights .replies {
    padding-right: 10px;
  }

  .publicationTime {
    background: #dedede;
    padding-right: 5px !important;
  }

  table.highlights .type {
    background: #dedede
  }

  .secondColumn.frontpage {
    width: 400px;
  }

  #highlightedProducts h2 {
    text-align: center;
    font-size: 24px;
  }

  table.highlights td, table.highlights {
    border: none;
  }

  #jobs {
    width: 0px;
    height: 0px;
    padding: 0px;
    visibility: hidden;
    left: 10000px;
  }

  /*########################################################################
                                                               FORUM
  ########################################################################*/

  h2.bar.question {
    width: 0px;
    height: 0px;
    padding: inherit;
    visibility: hidden;
    left: 10000px;
    background: inherit;
  }

  /*#######################################################################
                                               DARK MODE MET CUSTOM COLOR
  #######################################################################*/

  body.customColor #contentArea {
    background: #575757;
  }

  body.customColor div.message {
    background-color: #8d8d8d;
    background-image: none;
    border: none;
    box-shadow: inherit;
  }

  body.customColor #searchbar, body.customColor {
    background: #474747;
  }

  body.customColor form.form1 {
    background: #8d8d8d;
    border: none;
    box-shadow: inherit;
  }

  body.customColor #reageer {
    background: #8d8d8d;
    border: none;
  }

  /*#####################################################################
                                            TEXT COLOR  AANPASSEN VOOR DARKMODE
  #####################################################################*/

  body.customColor h1, body.customColor h2, body.customColor #header, body.customColor label {
    color: white;
  }

  body.customColor a {
    color: #cbcbcb;
  }


  .customColor p.edit a, .customColor .messagecontent p.edit, .customColor  .signature a {
    color: #eee;
  }


  body.customColor h3{
    color: black;
  }

  /*########################################################################
                                            EINDE DESKTOP LAYOUT
  ########################################################################*/
}
/*####################DIT BRACKET LATEN STAAN! !! !! !! !! !! !! !!###############*/

@media only screen and (max-width: 1220px) and (min-width: 1000px) {
  #menubar {
    background-image: none;
    background-color:#0006;
    border-bottom: none;
    box-shadow: inherit;
    -webkit-backdrop-filter: blur(10px);
  }

  body.customColor #contentArea {
    background: #575757;
  }

  body.customColor div.message {
    background-color: #8d8d8d;
    background-image: none;
    border: none;
    box-shadow: inherit;
  }

  body.customColor #searchbar, body.customColor {
    background: #474747;
  }

  body.customColor form.form1 {
    background: #8d8d8d;
    border: none;
    box-shadow: inherit;
  }

  body.customColor #reageer {
    background: #8d8d8d;
    border: none;
  }

  /*#####################################################################
                                            TEXT COLOR  AANPASSEN VOOR DARKMODE
  #####################################################################*/

  body.customColor h1, body.customColor h2, body.customColor #header, body.customColor label {
    color: white;
  }

  body.customColor a {
    color: #cbcbcb;
  }


  .customColor p.edit a, .customColor .messagecontent p.edit, .customColor  .signature a {
    color: #eee;
  }

  body.customColor h3 {
    color: black;
  }
}
/*#######################   DEZE BRACKET LATEN STAAN##################*/

#tracker .fakeTop {
  background-image: none !important;
  background-color: #474747;
}

@media only screen and (max-width: 800px) and (min-width: 80px) {
  #menubar {
    background-image: none;
    background-color: #0006;
    border-bottom: none;
    box-shadow: inherit;
    -webkit-backdrop-filter: blur(10px);
  }
}

Intentionally left blank

donderdag 23 december 2021 14:44

Acties:

0 Henk 'm!

.oisyn

Moderator Devschuur®

Demotivational Speaker

@crisp is dit stuk gegaan? Ik krijg nu Syntax error in CSS: Identifier expected. Got “}” [line no: 3] als ik een @media blok probeer te gebruiken, met zoiets simpels als dit:

Cascading Stylesheet:

1
2
3

@media (min-width: 1220px) {
  div { width:auto; }
}

[ Voor 46% gewijzigd door .oisyn op 23-12-2021 14:45 ]

Give a man a game and he'll have fun for a day. Teach a man to make games and he'll never have fun again.