Gå til innhold

Forslag til forbedring av «looken» på en nettside

Bro2

Anbefalte innlegg

Videoannonse

Videoannonse
Annonse
selurdog

selurdog

Skrevet
Skrevet
Hei

 

Jeg ønsker noen tips/forslag til forbedring av «looken» på en nettside jeg har laget.

 

Meny-knappene skal være blå, men de andre fargene kan godt endres, hvis det er til det bedre ;-)

 

http://xmm.sourceforge.net

 

Takk

 

 

Vil hjelpe deg med penere og enklere CSS:

Dette skal fungere på samme måte som den du har, med 150 linjer mindre kode.

Gjorde dette fort, så vær obs på mulige feil, men se over hva jeg har gjort, og lær litt av det.

 

 

body {

margin: 0;

padding: 0;

}

 

#top {

margin: 0 auto;

width: 750px;

height: 170px;

z-index: 2;

}

 

#title {

font: bold 40px Garamond, "Trebuchet MS", Arial, Helvetica, sans-serif;

color: #6DA6E2;

margin-top: 40px;

}

 

/**************** header styles ****************/

#header {

margin: 0 auto;

width: 750px;

border: 0;

padding: 10px 0;

 

/*background-color: #FFFFFF;

*/

clear: both;

/* border: 2px solid #00FFFF; cyan */

}

 

#header p {

margin-left: 15px;

font-size: 14px;

color: #705858;

}

 

#header img {

float: right;

}

 

#clearheader {

height: 100px;

}

 

#container {

margin: 0 auto;

width: 746px;

z-index: 1;

min-height: 100%;

 

/*

background-color: #F6F9FB;

*/

/* border: 2px solid #2763A5; blue */

}

 

#container p {

padding :15px 15px 0;

}

 

#sidebar {

position: relative;

overflow: visible;

width: 200px;

padding: 30px 0 10px 0;

float: right;

 

/* border: 2px solid #2763A5; blue */

}

 

#sidebar p {

padding: 0 0 0 15px;

}

 

#sidebar .external_links {

line-height: 2em;

padding-left: 15px;

font-size: 13px;

}

 

#poll {

overflow: visible;

width: 330px;

padding-left: 0px;

line-height: 1.6em;

 

/* border: 1px solid #000000; black */

}

 

#poll p {

padding-left: 0px;

}

 

#content_border_top {

float: left;

position: relative;

width: 530px;

height: 30px;

background: url("/images/border/top-rising2.blue.jpg") no-repeat center;

z-index: 3;

}

 

#content_border_bottom {

float: left;

position: relative;

width: 530px;

height: 30px;

background: url("/images/border/bottom-rising2.blue.jpg") no-repeat center;

z-index: 3;

}

 

#content_container {

min-height: 100%;

width: 530px;

float: left;

position: relative;

z-index: 2;

margin: 30px auto 0;

 

/*padding-bottom: 20px; */

 

/* background: url("/images/border.silver.530.jpg") repeat-y top;

*/

 

/* border: 2px solid #2763A5; Blue */

}

 

#content p {

margin-left: 0 15px;

}

 

#content .query {

margin-left: 60px;

color: #0000FF;

}

 

#content {

background: url("/images/border/border-rising2.blue.bg.jpg") repeat-y top;

}

 

#help {

color: #0000FF;

font-size: 17px;

color: #6DA6E2;

margin: 0 27px;

}

 

.p {

margin-left: 12px;

}

 

hr.hr {

margin: 28px auto 33px;

width: 85%;

text-align: center;

border: none;

height: 1px;

border-bottom: 1px solid #DDD;

 

hr.hr-smaller {

margin: 28px auto 18px;

width: 85%;

text-align: center;

border: none;

height: 1px;

border-bottom: 1px solid #DDDDDD;

}

 

#sidebar hr.hr {

margin: 20px 0;

border: none;

height: 1px;

border-bottom: 1px solid #DDDDDD;

}

 

p.clear50 {

clear: both;

height: 50px;

}

 

p.clear20 {

clear: both;

height: 20px;

}

 

p.clear10 {

clear: both;

height: 10px;

}

 

p.clear0 {

clear: both;

height: 0px;

}

 

#clearfooter {

clear:both;

height:100px;

}

 

#footer {

margin: 0 auto;

clear: both;

width: 742px;

padding: 60px 0 8px;

border-bottom: 3px solid #2763A5;

}

 

#footer p {

color:#FFF;

padding: 5px;

text-align: center;

}

 

#footer p a {

color: #FFF;

background-color:#2763A5;

font-weight: 100;

border-bottom: 1px dotted #FFF;

}

 

#footer p a:hover {

color: #FFF;

text-decoration: none;

border-top: 1px dotted #FFF;

border-bottom: 0px dotted #FFF;

}

 

#copy {

background-color:#2763A5;

}

 

/**************** menu styles ****************/

 

#navigation {

margin: 0 auto 1px;

z-index:2;

height:36px;

width:750px;

font-size:93%;

padding-bottom: 2px;

border-bottom: 4px solid #2763A5;

line-height: normal;

 

/*

background-color: #FFFFFF;

*/

}

 

#navigation ul {

padding: 10px 10px 0 50px;

list-style: none;

}

 

#navigation li {

display: inline;

}

 

#navigation a {

float: left;

background: url("/images/navigation/tableft10.gif") no-repeat left top;

padding-left: 4px;

text-decoration: none;

}

 

#navigation a span {

float: left;

display: block;

background: url("/images/navigation/tabright10.gif") no-repeat right top;

padding: 7px 15px 6px 6px;

color: #FFF;

}

 

#navigation a span {

float: none;

}

 

#navigation a:hover {

background-position: 0% -42px;

}

 

#navigation a:hover span {

background-position: 100% -42px;

}

 

/* All below has no effect on the structure */

 

.title2 {

font-family: 'Impact';

font-size: 30px;

color: #656166;

background-color: #FFF;

}

 

h2 {

color: #666;

font-size: 21px;

font-family: Arial, Helvetica, sans-serif;

margin-left: 20px;

}

 

a {

color: #6DA6E2;

text-decoration: none;

font-weight: bold;

}

 

a:hover {

color: inherit;

font-weight: bold;

text-decoration: underline;

}

 

a[att=nolink] {

color: #6DA6E2;

text-decoration: none;

font-weight: bold;

font-size: 14px;

}

 

a[att=nolink]:hover {

text-decoration: none;

}

 

.nolink:hover {

color: #6DA6E2;

text-decoration: none;

}

 

.small_title {

margin-left: 20px;

font-size: 16px;

line-height: 1.6em;

font-weight: bold;

}

 

.small_title a {

margin-left: 5px;

font-size: 16px;

line-height: 1.6em;

font-weight: bold;

}

 

.smaller_title {

margin: 0 7px 15px;

font-size: 15px;

line-height: 1.6em;

font-weight: bold;

}

 

/**************** images styles ****************/

 

b hr{

border: none;

border-bottom: 1px solid #DDD;

}

 

a img {

border: none;

}

 

/* img.left,img.center,img.center_noblock,img.right {

padding: 4px;

border: 1px solid #a0a0a0;

margin: 0 6px;

}

*/

/*

img.left {

float: left;

margin: 0 12px 5px 0;

}

*/

 

img.center {

display: block;

margin: 0 auto 5px;

}

 

/*

img.right {

float: right;

margin: 0 0 5px 12px;

}

*/

 

img.center_noblock {

/*margin: 0 auto 5px;*/

margin: 0 7px 5px 8px;

}

 

img.padding {

padding: 3px;

}

 

#image_line {

margin-top: 30px;

}

 

.bullet_list {

padding-left: 40px;

}

 

.bullet_list ul {

list-style-image: url("/images/silver_bullet_12.gif")

}

 

.bullet_list li {

list-style-image: url("/images/silver_bullet_12.gif")

 

}

 

.bullet_list ul li {

list-style-type: decimal;

list-style-image: url("/images/silver_bullet_12.gif")

}

 

.help_links {

padding-left: 40px;

}

 

#screenshots {

vertical-align:middle;

text-align:center;

}

 

li {

margin-left: 15px;

}

 

ul {

margin: 0 15px 0 27px;

list-style-image: url("/images/silver_bullet_12.gif");

}

 

p ul {

margin-left: 35px;

}

 

ol li {

list-style: none;

list-style-image: url("/images/silver_bullet_8.gif");

}

 

li ul {

margin-left: 10px;

}

 

#content input {

background-color: #FFF;

color: #999;

border: 1px solid #2763A5;

padding: 3px;

}

 

#poll input {

border: 0;

color: #999;

padding: 3px;

}

 

#voteButton input {

background-color: #FFF;

color: #999;

border: 1px solid #2763A5;

width: 40px;

height: 25px;

padding: 3px;

}

 

textarea {

background-color: #FFF;

color: #999;

border: 1px solid #2763A5;

padding: 3px;

}

 

.button {

padding: 2px;

background-color: #6DA6E2;

color: #FFF;

border: 1px solid #2763A5;

}

 

#poweredby {

text-align:left;

}

Lenke til kommentar
  • 2 måneder senere...

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste
×
×
  • Opprett ny...