Avatar billede Slettet bruger
19. november 2009 - 22:13 Der er 16 kommentarer

Hjælp til css koder (design af hp)

Ja min kæreste sidder og roder med sin hjemmeside, men hun er stødt på lidt problemer. Hun ønsker at ændre hendes udseende på hendes hjemmeside.

Hendes hjemmeside kan ses her: http://incendia-rats.weebly.com

Hun ønsker at vide hvordan hun fjerne de to blå bannere i hver side. Derudover ønsker hun også at vide hvordan hun ændre de to blå bannere til et andet billed/farve, hvis hun nu sku få lyst til at disse bannere skulle blive på siden.

Derudover ønsker hun at vide hvordan hun ændre tekst-farven på de links der er i menuen øverst.


Her er koderne som de står uden ændringer:

/* Css originally by mejobloggs  Design by Aran @ stuio7designs.com  Please email me if you use this, as I would love to see how it is being used, also you can join my linkshare to help you with your google ranking */
body {
  font-family: trebuchet ms, verdana, arial, tahoma;
  font-size: 90%;
  color: #888;
  background-color: white;
  line-height:1.5;
  margin: 0;
  padding: 0;
  text-align: center;
}

/* Set the page width */
#wrapper-menu-top, #header, #wrapper-content, #wrapper-footer {
  width: 768px;
  margin: 0 auto;
  text-align: left;
}

#wrapper-menu-top {
  background: white url('bg02-white-left.png') no-repeat left top;
}

#menu-top {
  width:768px;
  background: transparent url('bg02-white-right.png') no-repeat right top;
  overflow: hidden; /* no idea why this works, but it fixes a FF problem */ 
}

#menu-top ul {
  margin: 0 20px;
  padding: 1em 0 0 0;
  list-style: none;
  font-size: 85%;
  float: left;
}

#menu-top li {
  display: inline;
  float: left;
}

#menu-top a {
  float: left;
  background:url(menuleft.png) no-repeat left top;
  margin:0;
  padding:0 0 0 4px;
  text-decoration:none;
  line-height: 1.5em;
}

#menu-top a span {
  background: transparent url(menuright.png) no-repeat right top;
  padding:5px 15px 4px 6px;
  color:#5b8fbe;
  display: block;
  float: left;
  cursor: pointer; /* IE doesnt display the hand when you roll over the link for some reason. This fixes it */
}

#menu-top a:hover { background-position:0% -42px; }
#menu-top a:hover span {  background-position:100% -42px; }

#menu-top li.active a { background-position:0% -42px; }
#menu-top li.active a span { background-position:100% -42px; }

#wrapper-header {
  background: transparent url('bg.png') top center repeat-x;
}

#header {
  background: #eee url('%%HEADERIMG%%') no-repeat center top;
}

#wrapper-header2 {
  background: transparent url('bg02-blue-left.png') top left no-repeat;
}

#wrapper-header3 {
  background: transparent url('bg02-blue-right.png') top right no-repeat;
}

#header h1 {
  margin: 0 25px;
  padding: 0;
  height: 192px;
  line-height:1.5;
  color: #636363;
  font-size: 130%;
}

#wrapper-content {
  background: white url('bg02-white-left.png') no-repeat left top;
}

* html #wrapper-content { height: 1%; }

#content {
  background: transparent url('bg02-white-right.png') no-repeat right top;
  padding: 15px 40px;
  min-height:400px;
  height:auto !important;
  height:400px;
  line-height:1.5;
}
/*
#wrapper-menu-page {
  float: right;
  width:10px;
  margin: 20px 0px 3em 0px;
  text-align: center;
  line-height: 140%;
  font-family:"Lucida Grande","Lucida Sans Unicode",arial,sans-serif;
}

* html #wrapper-menu-page { margin-right: 15px; }
*/
#menu-page { padding-top: 5px; }

#menu-page ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 90%;
}

#menu-page h3 {
  font-size: 75%;
  text-transform: uppercase;
  margin: 1em 0 0.3em 0;
  color: #5b8fbe;
  font-weight: normal;
  letter-spacing: 0.15em;
}

#menu-page a:link, #menu-page a:visited { color: #888; }
#menu-page a:hover { color: #5b8fbe; }

#wrapper-footer {
  margin-top: 1em;
  text-align: center;
}

#footer {
  margin: 0 20px;
  background-color: #e5f0fc;
  border: 1px solid #ccc;
  border-bottom: 0;
  clear: both;
}

h2 { font-size: 110%; }
h3 { font-size: 100%; }

a:link, a:visited { color: #5b8fbe; text-decoration: none; }
a:hover{ color: #666; text-decoration: none; }
/****************************** flyout menus ******************************/

#weebly-menus .weebly-menu-wrap {
  z-index: 5000;
}

#weebly-menus .weebly-menu {
  padding: 0;
  margin: 0;
  list-style: none;
}

#weebly-menus .weebly-menu li {
  float: left;
  clear: left;
  width: 170px;
  text-align: left;
}

#weebly-menus .weebly-menu li a {
  position: relative;
  display: block;
  width: 100%;
  background: #fff;
  border-right: 2px solid #bbd0dd;
  border-left: 2px solid #bbd0dd;
  border-bottom: 1px solid #bbd0dd;
  text-decoration: none;
  font-size: 11px;
  font-weight: normal;
  line-height:1;
  padding:3px;
  color: #5b8fbe;
}

#weebly-menus .weebly-menu li a:hover {
  background: #d6e7f2;
}

#weebly-menus span.weebly-menu-title {
  display: block;
  padding: 5px 10px;
}

#weebly-menus span.weebly-menu-more {
  background: transparent url(http://images.weebly.com/weebly/images/submenu_arrow.gif) no-repeat center top;
  display: block;
  position: absolute;
  right: 5px;
  top: 0;
  font-family: Courier;
  height: 28px;
  line-height: 28px;
  padding:1px 0 3px 0;
}
Avatar billede mall Nybegynder
19. november 2009 - 22:39 #1
Hvis du fjerner:


#wrapper-header {
  background: transparent url('bg.png') top center repeat-x;
}

Så forsvinder det blå banner..
Hvis hun senere skulle ønske at have et banner med en anden farve, så skal dette laves i et billedredigerings program.. Hun skal bare lave det i samme dimmensioner som det nuværende.. "http://incendia-rats.weebly.com/files/theme/bg.png?618032"

For at ændre tekst farven på de øverste links skal i skifte koden ud for color:

#menu-top a span {
  background: transparent url(menuright.png) no-repeat right top;
  padding:5px 15px 4px 6px;
  color:#5b8fbe;
  display: block;
  float: left;
  cursor: pointer; /* IE doesnt display the hand when you roll over the link for some reason. This fixes it */
}
Avatar billede Slettet bruger
19. november 2009 - 22:52 #2
tekstfaven i menu virker.

hun slettede:
#wrapper-header {
  background: transparent url('bg.png') top center repeat-x;
}

men det virkede ikke. de er der stadig.
Avatar billede mall Nybegynder
19. november 2009 - 22:59 #3
Det er det eneste sted i css'en at den henter baggrunden..
Ellers, så slet bg.png.. Så kan den ikke finde filen..
Avatar billede norsgaard Nybegynder
19. november 2009 - 23:16 #4
Ser også ud som om der er lidt baggrundsbilleder under

#wrapper-header2 {
  background: transparent url('bg02-blue-left.png') top left no-repeat;
}

og

#wrapper-header3 {
  background: transparent url('bg02-blue-right.png') top right no-repeat;
}

Prøv at slette de 2 elementer og se om det fjerner den blå bjælke helt.
Avatar billede norsgaard Nybegynder
19. november 2009 - 23:23 #5
Ups, fik vist smidt et svar der. Det var ikke meningen, men sådan kan det jo gå første gang her på sitet.

Det var ikke for at prøve at hugge points fra mall :P
Avatar billede mall Nybegynder
19. november 2009 - 23:26 #6
Det gør ikke spor, gider ikke at samle på dem :P
Men ja, det havde jeg ikke opdaget..!
Avatar billede Slettet bruger
19. november 2009 - 23:42 #7
hun har slette bg.png og det virker delvist. (se hendes hp nu)

hun har også prøvet at slette disse, men det virker ikke:
#wrapper-header2 {
  background: transparent url('bg02-blue-left.png') top left no-repeat;
}

#wrapper-header3 {
  background: transparent url('bg02-blue-right.png') top right no-repeat;

nu står hun tilbage med to blå striber hun vil af med.
Avatar billede mall Nybegynder
19. november 2009 - 23:47 #8
Slet:
bg02-blue-left.png
bg02-blue-right.png

Virker sku mærkeligt at den beholder css'en, selvom i fjerner det.. Der må ligge en anden fil et sted, som den henter og som i ikke kan redigerer i..
Avatar billede norsgaard Nybegynder
19. november 2009 - 23:53 #9
Har kigget lidt på siden med FireBug og det ser ud som om den css du har "vist" er lidt anderledes end den, som bliver brugt på siden.

Ser ud som om filen /files/main_style.css bliver brugt, og der er lidt andre elementer der. Men hvis du gør som mall siger, burde det virke :)
Avatar billede Slettet bruger
19. november 2009 - 23:59 #10
dette virker heller ikke (at slette bg02-blue-left.png og bg02-blue-right.png)
Avatar billede norsgaard Nybegynder
20. november 2009 - 00:03 #11
Hvad med ind under theme/ ?
Avatar billede Slettet bruger
20. november 2009 - 00:17 #12
nu har hun redigeret baggrundsfarven, bare for at teste. de blå streger er nu forsvundet. banneret går dog ud og dækker der hvor de blå streger før var. baggrundsfarven går heller ikke helt ind til selve siden. der er nu en hvid kant med skygge? (se hendes hp)

hun har ikke ændret andet end det overstående og baggrunds farven.?
Avatar billede mall Nybegynder
20. november 2009 - 00:23 #13
Det er altså noget af en større opgave i har sat jer igang med..
Der er en masse der skal laves om for at opnå det resultat som i går efter..
I kan ikke bare regne med at det er så nemt at gå ind og ændre i noget som i ikke har sat jeg godt nok ind i..

Det hvide er der for at give illusionen af skyggen.. Der skal slettes flere billeder, og ændres i css'en, som i åbenbart ikke kan..
Avatar billede Slettet bruger
20. november 2009 - 00:28 #14
hun har før rodet med med css på andre layout og uden problemer. Men dette vil bare ikke.
Avatar billede Slettet bruger
13. marts 2011 - 10:49 #15
Mall Smid et svar så får du point. Selvom det ikke hjalp 100% hjalp du os meget!
Avatar billede Slettet bruger
25. oktober 2011 - 19:58 #16
Mall giver dig lige en chance mere for at smide et svar ellers lukker jeg selv :)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Kurser inden for grundlæggende programmering

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester