Webwereld

[hulp] style.css krijg ik niet goed

Gestart doorPotloodjes3 reacties22 weergaven
Log in om mee te praten

4 berichten · pagina 1 van 1

Potloodjes

Lid · Topicstarter

Berichten
2.399
Reputatie
0
Punten
0,00
Lid sinds
Laatst gezien
Hallo,

bij bit.ly/gwF6UZ krijg ik de style.css niet helemaal goed. Heb hem maar al aardig aangepast. Maar krijg de kleur type niet zwart.

de letters bij kopje delen > Delen
de letters bij kopje login > gebruikersnaam, wachtwoord en remember me
de letters bij kopje laatst toegevoegt in de content > v olgende updates: Llayout aanpassingen en een engelse versie.
Upcoming updates: Layout adjustment and a English translation.
Vorige Volgende

dat is allemaal wit, maar dat kan je natuurlijk niet zien in de witte background. Ik weet niet hoe ik deze kan aanpassen naar zwarte lettertyp. De bovenkant header krijg ik wel wit wat ook zo moet blijven, alleen die bovenstaande dingen wat ik zwart wil hebben krijg ik die zwart.

Style.css
Spoiler tonen
@charset "utf-8";

body {
    margin: 0;
    background-color: #DDD;
    color: #fff;
    font: 11px "Helvetica Neue",Helvetica,Arial,sans-serif;
    min-width: 1080px;
}

#header-wrapper {
    min-width:1080px;
    background-color:#222;
    color:#f0f4f7;
    padding: 0;
    position: relative;
    border-top: 1px solid #043353;
    border-bottom: 1px solid #043353;
}

#h-bar {
    height: 50px;
    max-width: 1060px;
    margin: 0 auto;
}

#h-bar h1 {
    margin: 0;
    float: left
}

#h-bar h1 a {
    display: block;
    padding: 20px 18px 10px 0;
    height: 20px;
    line-height: 20px;
    font-size: 18px;
    width: 165px;
    text-indent: -9999px;
    overflow: hidden;
    background-image: url(/../images/logo.png);
    border-right: 1px solid #333; 
}

#h-bar ul.navi-menu li a:hover,#h-bar ul.navi-menu li a:visited:hover{
    color:white;
}

#h-bar ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    overflow: hidden;
}

#h-bar ul.navi-menu {
    float:left;
    overflow: visible;
}

#h-bar ul.navi-menu li {
    float: left;
}

#h-bar ul.navi-menu li a {
    color: #2222;
    display: block;
    font-weight: bold;
    font-size: 12px;
    height: 10px;
    padding: 20px 25px;
    border-right: 1px solid #333;
}

#h-bar ul.navi-menu li a.now {
    color: #fff;
    background-color: #222;
}

ul {
    list-style-type: none;
}

* {
    outline: none;
}

#h-bar ul.user-menu {
    float: right;
    margin: 13px 10px 0 0;
}

#h-bar ul.user-menu li {
    float:left;
    padding-right: 10px;
}

#container {
    width: 1060px;
    margin: 0 auto;
    position: relative;
    min-height: 650px;
}

#main-content {
    margin-top: 30px;
    width: 740px;
    float: left;
}

#page-bar {
    background-color: #222;
    border-radius: 9px 9px 0 0;
    -webkit-border-radius: 8px 8px 0 0;
    -moz-border-radius: 8px 8px 0 0;
    height: 43px;
    overflow: hidden;
    box-shadow: 0 1px #FFF inset, 0 -1px #DDD inset;
    -moz-box-shadow: 0 1px #FFF inset, 0 -1px #DDD inset;
    -webkit-box-shadow: 0 1px #FFF inset, 0 -1px #DDD inset;
}

#page-content {
    box-shadow: 0 1px 2px #aaa;
    -moz-box-shadow: 0 1px 2px #aaa;
    -webkit-box-shadow: 0 1px 2px #aaa;
    border-radius: 9px
}

#content {
    background-color: white;
    border-radius: 0 0 9px 9px;
    -webkit-border-radius: 0 0 9px 9px;
    -moz-border-radius: 0 0 9px 9px;
    margin-bottom: 60px;
    overflow: hidden;
    padding-top: 20px;
    min-height: 800px;
    padding-left:20px;
}

#content-main {
    background-color: white;
    border-radius: 0 0 9px 9px;
    -webkit-border-radius: 0 0 9px 9px;
    -moz-border-radius: 0 0 9px 9px;
    margin-bottom: 60px;
    overflow: hidden;
    padding-top: 20px;
    min-height: 800px;
}


h3 {
    padding: 0 0 15px 20px;
    font-size: 15px;
    font-weight: bold;
}

#list {
    padding: 20px 20px;
}

#list ul.list-1 {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

#list ul.list-1 li:first-child {
    padding-top: 0;
}

#info-content {
    width: 460px;
    float: left;
    margin-right: 20px;
}

#info-panel {
    width: 220px;
    float: left;
}

#image-title {
    color: #222;
    Font-size: 20px;
    font-weight: normal;
}
#image-info {
    color: #AAA;
    font-weight: normal;
    font-size: 11px;
}

#list ul #info-panel ul.buttons {
    padding: 0;
    list-style-type: none;
    margin: 10px 0;
    overflow: hidden;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    background-color: #2A7A16;
    border: 1px solid #DDD;
    box-shadow: 0 1px #fff inset;
    -moz-box-shadow: 0 1px #fff inset;
    -webkit-box-shadow: 0 1px #fff inset;
    text-indent: -999px;
}

#list ul #info-panel ul.comms {
    padding: 0;
    list-style-type: none;
    margin: 10px 0;
    overflow: hidden;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    background-color: #F4F4F4;
    border: 1px solid #DDD;
    box-shadow: 0 1px #fff inset;
    -moz-box-shadow: 0 1px #fff inset;
    -webkit-box-shadow: 0 1px #fff inset;
}

#list ul #info-panel ul.buttons li a {
    color: #222;
    text-decoration:none;
    overflow: hidden;
    width: 71px;
    height: 30px;
    -webkit-transition: background-color 0.2s linear;
    -moz-transition: background-color 0.2s linear;
}

#list ul li a, #list ul li img {
    display: block;
    border: none;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5px;
    margin-bottom: auto;
}

#list ul #info-panel ul.buttons li {
    float: left;
    margin: 0;
    border-bottom: none;
}
#list ul #info-panel ul.buttons  li a.d-like {
    border-right: 1px solid #DDD;
    color: #222;
}

#list ul #info-panel ul.buttons  li a.like {
    width: 72px;
    border-left: 1px solid #FBFBFB;
    border-right: 1px solid #DDD;
    color: #222;
}

#list ul #info-panel ul.buttons  li a.rapp {
    border-left: 1px solid #FBFBFB;
    color: #222;
}

#list ul #info-panel ul.comms li {
    margin: 0;
    border-bottom: none;
}

#list ul #info-panel ul.comms  li a.comment {
    padding: 10px 0 10px 0;
    text-align:center;
    line-height:10px;
    color: #222;
}

#side-bar {
    width: 300px;
    overflow: hidden;
    margin-left: 20px;
    margin-top: 30px;
    float: left;
    background-color:#222;
    min-height:300px;
    border-radius: 9px 9px 9px 9px;
    -webkit-border-radius: 9px 9px 9px 9px;
    box-shadow: 0 1px 2px #aaa;
    -moz-box-shadow: 0 1px 2px #aaa;
    -webkit-box-shadow: 0 1px 2px #aaa;
}

#pr-box {
    border-radius: 9px 9px 9px 9px;
    -webkit-border-radius: 9px 9px 9px 9px;
    -moz-border-radius: 9px 9px 9px 9px;
    background-color: #E8E8E8;
    width:250px;
    height:200px;
    margin-right:auto;
    margin-left:auto;
    margin-top:20px;
    margin-bottom:20px;
    box-shadow: 0 1px 2px #aaa;
    -moz-box-shadow: 0 1px 2px #aaa;
    -webkit-box-shadow: 0 1px 2px #aaa;
}

#pr-title {
    padding: 5px 0 5px 20px;
    font-size: 15px;
    font-weight: bold;
    border-bottom: 1px solid #DDD;
}

#featured-image {

}

#adimg {

}

#login {
    border-radius: 9px 9px 9px 9px;
    -webkit-border-radius: 9px 9px 9px 9px;
    -moz-border-radius: 9px 9px 9px 9px;
    background-color: #E8E8E8;
    width:250px;
    height:200px;
    margin-right:auto;
    margin-left:auto;
    margin-top:20px;
    margin-bottom:20px;
    box-shadow: 0 1px 2px #aaa;
    -moz-box-shadow: 0 1px 2px #aaa;
    -webkit-box-shadow: 0 1px 2px #aaa;
}

#footer {
    width: 100%;
    min-width: 780px;
    clear: both;
    border-top: 1px solid #043353;
    border-bottom: 1px solid #043353;
    background-color: #222;
    height:50px;
}

#footer-content {
    color: #F0F4F7;
    margin:0 auto;
    text-align:center;
}

#image-navi {
    overflow: hidden;
    padding: 20px;
    border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    clear: both;
    text-align:center;
    box-shadow: 0 1px #fff inset;
    -moz-box-shadow: 0 1px #fff inset;
    -webkit-box-shadow: 0 1px #fff inset;
}
}

.footer a:link {
 color:#F0F4F7;
 outline: none;
  text-decoration:underline;
  border:0px;
}
.footer a:hover {
  color:#A6A6A6;
  outline: none;
  text-decoration:underline;
   border:0px;
}

.footer a:visited {
 color:#F0F4F7;
 outline: none;
  text-decoration:underline;
  border:0px;
}

.footer a:visited:hover {
  color:#A6A6A6;
  outline: none;
  text-decoration:underline;
   border:0px;
}

a:link {
 color:#fff;
 outline: none;
  text-decoration:underline;
  border:0px;
}
a:hover {
  color:#A6A6A6;
  outline: none;
  text-decoration:underline;
   border:0px;
}

a:visited {
 color:#fff;
 outline: none;
  text-decoration:underline;
  border:0px;
}

a:visited:hover {
  color:#A6A6A6;
  outline: none;
  text-decoration:underline;
   border:0px;
}
a img { 
border:0;
}

.button, .art-button {
    background-color: #00A5F0;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 1px rgba(255, 255, 255, 0.4) inset, 0 1px #FFF;
    -moz-box-shadow: 0 1px rgba(255, 255, 255, 0.4) inset, 0 1px #FFF;
    -webkit-box-shadow: 0 1px rgba(255, 255, 255, 0.4) inset, 0 1px #FFF;
    color: white;
    font-size: 12px;
    font-weight: bold;
    text-shadow: 0 -1px rgba(0, 0, 0, 0.2);
    height: 32px;
    width: 88px;
    padding: 0;
    margin: 10px 0 0 8px;
}
.message {
    padding: 5px 5px 5px 5px;
}

.info-tool {
    width:700px;
    background-color: #E8E8E8;
    border-radius: 9px 9px 9px 9px;
    -webkit-border-radius: 9px 9px 9px 9px;
    -moz-border-radius: 9px 9px 9px 9px;
    height: 43px;
    overflow: hidden;
    box-shadow: 0 1px #FFF inset, 0 -1px #DDD inset;
    -moz-box-shadow: 0 1px #FFF inset, 0 -1px #DDD inset;
    -webkit-box-shadow: 0 1px #FFF inset, 0 -1px #DDD inset;
}

h1 {
    display: block;
    font-size: 2em;
    -webkit-margin-before: 0.67em;
    -webkit-margin-after: 0.67em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}
wie kan mij hierbij helpen? Beloning 0.5 punt.

//sjoerdedit: code in spoiler.
0
Alemaalte

Lid

Berichten
5.957
Reputatie
0
Punten
0,00
Lid sinds
Laatst gezien
color: #fff; op die body ... doe ofwel enkel color op je headermenu of overwrite de body color in je content vak.
Spoiler tonen
@charset "utf-8";

body {
    margin: 0;
    background-color: #DDD;
    font: 11px "Helvetica Neue",Helvetica,Arial,sans-serif;
    min-width: 1080px;
}

#header-wrapper {
    min-width:1080px;
    background-color:#222;
    color:#fff;
    padding: 0;
    position: relative;
    border-top: 1px solid #043353;
    border-bottom: 1px solid #043353;
}

#h-bar {
    height: 50px;
    max-width: 1060px;
    margin: 0 auto;
}

#h-bar h1 {
    margin: 0;
    float: left
}

#h-bar h1 a {
    display: block;
    padding: 20px 18px 10px 0;
    height: 20px;
    line-height: 20px;
    font-size: 18px;
    width: 165px;
    text-indent: -9999px;
    overflow: hidden;
    background-image: url(/../images/logo.png);
    border-right: 1px solid #333; 
}

#h-bar ul.navi-menu li a:hover,#h-bar ul.navi-menu li a:visited:hover{
    color:white;
}

#h-bar ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    overflow: hidden;
}

#h-bar ul.navi-menu {
    float:left;
    overflow: visible;
}

#h-bar ul.navi-menu li {
    float: left;
}

#h-bar ul.navi-menu li a {
    color: #2222;
    display: block;
    font-weight: bold;
    font-size: 12px;
    height: 10px;
    padding: 20px 25px;
    border-right: 1px solid #333;
}

#h-bar ul.navi-menu li a.now {
    color: #fff;
    background-color: #222;
}

ul {
    list-style-type: none;
}

* {
    outline: none;
}

#h-bar ul.user-menu {
    float: right;
    margin: 13px 10px 0 0;
}

#h-bar ul.user-menu li {
    float:left;
    padding-right: 10px;
}

#container {
    width: 1060px;
    margin: 0 auto;
    position: relative;
    min-height: 650px;
}

#main-content {
    margin-top: 30px;
    width: 740px;
    float: left;
}

#page-bar {
    background-color: #222;
    border-radius: 9px 9px 0 0;
    -webkit-border-radius: 8px 8px 0 0;
    -moz-border-radius: 8px 8px 0 0;
    height: 43px;
    overflow: hidden;
    box-shadow: 0 1px #FFF inset, 0 -1px #DDD inset;
    -moz-box-shadow: 0 1px #FFF inset, 0 -1px #DDD inset;
    -webkit-box-shadow: 0 1px #FFF inset, 0 -1px #DDD inset;
}

#page-content {
    box-shadow: 0 1px 2px #aaa;
    -moz-box-shadow: 0 1px 2px #aaa;
    -webkit-box-shadow: 0 1px 2px #aaa;
    border-radius: 9px
}

#content {
    background-color: white;
    border-radius: 0 0 9px 9px;
    -webkit-border-radius: 0 0 9px 9px;
    -moz-border-radius: 0 0 9px 9px;
    margin-bottom: 60px;
    overflow: hidden;
    padding-top: 20px;
    min-height: 800px;
    padding-left:20px;
}

#content-main {
    background-color: white;
    color:black;
    border-radius: 0 0 9px 9px;
    -webkit-border-radius: 0 0 9px 9px;
    -moz-border-radius: 0 0 9px 9px;
    margin-bottom: 60px;
    overflow: hidden;
    padding-top: 20px;
    min-height: 800px;
}


h3 {
    padding: 0 0 15px 20px;
    font-size: 15px;
    font-weight: bold;
}

#list {
    padding: 20px 20px;
}

#list ul.list-1 {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

#list ul.list-1 li:first-child {
    padding-top: 0;
}

#info-content {
    width: 460px;
    float: left;
    margin-right: 20px;
}

#info-panel {
    width: 220px;
    float: left;
}

#image-title {
    color: #222;
    Font-size: 20px;
    font-weight: normal;
}
#image-info {
    color: #AAA;
    font-weight: normal;
    font-size: 11px;
}

#list ul #info-panel ul.buttons {
    padding: 0;
    list-style-type: none;
    margin: 10px 0;
    overflow: hidden;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    background-color: #2A7A16;
    border: 1px solid #DDD;
    box-shadow: 0 1px #fff inset;
    -moz-box-shadow: 0 1px #fff inset;
    -webkit-box-shadow: 0 1px #fff inset;
    text-indent: -999px;
}

#list ul #info-panel ul.comms {
    padding: 0;
    list-style-type: none;
    margin: 10px 0;
    overflow: hidden;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    background-color: #F4F4F4;
    border: 1px solid #DDD;
    box-shadow: 0 1px #fff inset;
    -moz-box-shadow: 0 1px #fff inset;
    -webkit-box-shadow: 0 1px #fff inset;
}

#list ul #info-panel ul.buttons li a {
    color: #222;
    text-decoration:none;
    overflow: hidden;
    width: 71px;
    height: 30px;
    -webkit-transition: background-color 0.2s linear;
    -moz-transition: background-color 0.2s linear;
}

#list ul li a, #list ul li img {
    display: block;
    border: none;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5px;
    margin-bottom: auto;
}

#list ul #info-panel ul.buttons li {
    float: left;
    margin: 0;
    border-bottom: none;
}
#list ul #info-panel ul.buttons  li a.d-like {
    border-right: 1px solid #DDD;
    color: #222;
}

#list ul #info-panel ul.buttons  li a.like {
    width: 72px;
    border-left: 1px solid #FBFBFB;
    border-right: 1px solid #DDD;
    color: #222;
}

#list ul #info-panel ul.buttons  li a.rapp {
    border-left: 1px solid #FBFBFB;
    color: #222;
}

#list ul #info-panel ul.comms li {
    margin: 0;
    border-bottom: none;
}

#list ul #info-panel ul.comms  li a.comment {
    padding: 10px 0 10px 0;
    text-align:center;
    line-height:10px;
    color: #222;
}

#side-bar {
    width: 300px;
    overflow: hidden;
    margin-left: 20px;
    margin-top: 30px;
    float: left;
    background-color:#222;
    min-height:300px;
    border-radius: 9px 9px 9px 9px;
    -webkit-border-radius: 9px 9px 9px 9px;
    box-shadow: 0 1px 2px #aaa;
    -moz-box-shadow: 0 1px 2px #aaa;
    -webkit-box-shadow: 0 1px 2px #aaa;
}

#pr-box {
    border-radius: 9px 9px 9px 9px;
    -webkit-border-radius: 9px 9px 9px 9px;
    -moz-border-radius: 9px 9px 9px 9px;
    background-color: #E8E8E8;
    width:250px;
    height:200px;
    margin-right:auto;
    margin-left:auto;
    margin-top:20px;
    margin-bottom:20px;
    box-shadow: 0 1px 2px #aaa;
    -moz-box-shadow: 0 1px 2px #aaa;
    -webkit-box-shadow: 0 1px 2px #aaa;
}

#pr-title {
    padding: 5px 0 5px 20px;
    font-size: 15px;
    font-weight: bold;
    color:black;
    border-bottom: 1px solid #DDD;
}

#featured-image {

}

#adimg {

}

#login {
    border-radius: 9px 9px 9px 9px;
    -webkit-border-radius: 9px 9px 9px 9px;
    -moz-border-radius: 9px 9px 9px 9px;
    background-color: #E8E8E8;
    width:250px;
    height:200px;
    color:black;
    margin-right:auto;
    margin-left:auto;
    margin-top:20px;
    margin-bottom:20px;
    box-shadow: 0 1px 2px #aaa;
    -moz-box-shadow: 0 1px 2px #aaa;
    -webkit-box-shadow: 0 1px 2px #aaa;
}

#footer {
    width: 100%;
    min-width: 780px;
    clear: both;
    border-top: 1px solid #043353;
    border-bottom: 1px solid #043353;
    background-color: #222;
    height:50px;
}

#footer-content {
    color: #F0F4F7;
    margin:0 auto;
    text-align:center;
}

#image-navi {
    overflow: hidden;
    padding: 20px;
    border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    clear: both;
    text-align:center;
    box-shadow: 0 1px #fff inset;
    -moz-box-shadow: 0 1px #fff inset;
    -webkit-box-shadow: 0 1px #fff inset;
}
}

.footer a:link {
 color:#F0F4F7;
 outline: none;
  text-decoration:underline;
  border:0px;
}
.footer a:hover {
  color:#A6A6A6;
  outline: none;
  text-decoration:underline;
   border:0px;
}

.footer a:visited {
 color:#F0F4F7;
 outline: none;
  text-decoration:underline;
  border:0px;
}

.footer a:visited:hover {
  color:#A6A6A6;
  outline: none;
  text-decoration:underline;
   border:0px;
}

a:link {
 color:#fff;
 outline: none;
  text-decoration:underline;
  border:0px;
}
a:hover {
  color:#A6A6A6;
  outline: none;
  text-decoration:underline;
   border:0px;
}

a:visited {
 color:#fff;
 outline: none;
  text-decoration:underline;
  border:0px;
}

a:visited:hover {
  color:#A6A6A6;
  outline: none;
  text-decoration:underline;
   border:0px;
}
a img { 
border:0;
}

.button, .art-button {
    background-color: #00A5F0;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 1px rgba(255, 255, 255, 0.4) inset, 0 1px #FFF;
    -moz-box-shadow: 0 1px rgba(255, 255, 255, 0.4) inset, 0 1px #FFF;
    -webkit-box-shadow: 0 1px rgba(255, 255, 255, 0.4) inset, 0 1px #FFF;
    color: white;
    font-size: 12px;
    font-weight: bold;
    text-shadow: 0 -1px rgba(0, 0, 0, 0.2);
    height: 32px;
    width: 88px;
    padding: 0;
    margin: 10px 0 0 8px;
}
.message {
    padding: 5px 5px 5px 5px;
}

.info-tool {
    width:700px;
    background-color: #E8E8E8;
    border-radius: 9px 9px 9px 9px;
    -webkit-border-radius: 9px 9px 9px 9px;
    -moz-border-radius: 9px 9px 9px 9px;
    height: 43px;
    overflow: hidden;
    box-shadow: 0 1px #FFF inset, 0 -1px #DDD inset;
    -moz-box-shadow: 0 1px #FFF inset, 0 -1px #DDD inset;
    -webkit-box-shadow: 0 1px #FFF inset, 0 -1px #DDD inset;
}

h1 {
    display: block;
    font-size: 2em;
    -webkit-margin-before: 0.67em;
    -webkit-margin-after: 0.67em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}
0
Marjolein

Lid

Berichten
15.446
Reputatie
0
Punten
0,00
Lid sinds
Laatst gezien
#content-main {
background-color: white;
border-radius: 0 0 9px 9px;
-webkit-border-radius: 0 0 9px 9px;
-moz-border-radius: 0 0 9px 9px;
margin-bottom: 60px;
overflow: hidden;
padding-top: 20px;
min-height: 800px;
color:#000000;
}
zelfde met #pr-box #pr-title enz.
Maar wat alemaalte zegt, neem in de body als hoofdkleur zwart en pas alleen de header aan naar wit, lijkt me simpeler en minder werk.

En dan nog wat, je gebruikt #pr-title meerder malen, dit mag niet. Je moet dan class gebruiken oftewel .pr-title smile
0
One2xs

Bot

Berichten
93.699
Reputatie
0
Punten
1,27
Lid sinds
Laatst gezien
Ooit gehoord van spoilers?
0

Jouw reactie

Deel je idee, stel een vraag of help een ander verder.

Editor laden…

Praat mee met de One2xs-community.

Inloggen om te reageren