Avatar billede MadsLundsen Nybegynder
10. april 2012 - 18:52 Der er 6 kommentarer

Min css kode

Hej eksperter, er der noget galt med min css kode, som jeg burde ændre?

body {
margin: 0;
padding: 0;
font-family: Helvetica,sans-serif;
background: #485567 url(/assets/background.png) repeat-x;
}

img {
  border-width: 0;
}

a {
color:#a7b3bf;
text-decoration: none;
font-weight: bold;
}

#header {
height:133px;
margin-top:15px;
background: url(/assets/banner.png) repeat-x;

}

#logo_text {
display:block;
margin: 0 auto;
padding-top:17px;
}


#background_buildings {
height: 434px;
background: url(/assets/background_buildings.png) repeat-x;
background-position: 0 -110px;
}

#content {
width:100%;
margin:0 auto;
position:absolute;

}

/* LOGIN SECTION */

#login_section {
width: 511px;
height: 322px;
display:block;
margin: 0 auto;
background: url(/assets/login_section.png);
}


#login_section .fields {
width:299px;
float:right;
position:relative;
right:50px;
top:115px;
}

#login_section .forgot_password{
float:left;
position:relative;
top:280px;
left:30px;
}

#login_section .actions {
float:right;
margin-top:35px;
}

#login_section input[type=text], input[type=password] {
width:299px;
height:48px;
border:none;
outline:none;
background: url(/assets/textbox.png) no-repeat;
padding-left: 10px;
font-size:1.2em
}

input[type=submit] {
width:104px;
height:41px;
background: url(/assets/login_button.png) no-repeat;
outline:none;
border:none;
cursor:pointer;
}

#forgot_password {

}

/* Other Elements */

#reflection {
display:block;
margin:10px auto;
}
Avatar billede claes57 Ekspert
10. april 2012 - 19:45 #1
ja
Avatar billede claes57 Ekspert
10. april 2012 - 19:45 #2
i afsnit
#login_section input[type=text], input[type=password] {
der manger et ; efter
font-size:1.2em
Avatar billede MadsLundsen Nybegynder
10. april 2012 - 20:58 #3
Mange tak:D
- Er der ellers ikke nogle "bad practice"?

Smid et svar så får du dine points:)
Avatar billede olebole Juniormester
10. april 2012 - 21:59 #4
<ole>

Nej, det er ikke en fejl at udelade et sidste semikolon i en CSS-regel. Det kan være god kodeskik, altid at sætte det, da man så ikke glemmer det, hvis reglen udvides.

Hvad din kode angår, så er det vigtigt at huske, at en valid kode ikke nødvendigvis en god kode. Jeg forstå ikke dine #login_section .fields og #login_section .forgot_password. Det synes at være en sær kombi af position, float, left og top.

Generelt bruger man så at sige aldrig position:relative sammen med left og/eller top værdier. Float er beregnet til tekstomløb - ikke til at få block elementer til at ligge ved siden af hinanden. Når float bruges, burde der i 9 ud af 10 tilfælde være brugt display:inline-block i stedet. Brugen af dem alle sammen på samme element, ser yderst sær ud  =)

Generelt kan man ikke sige ret meget om kvaliteten af en CSS-kode uden at kunne se den tilhørende HTML-kode. Det svarer lidt til at blive spurgt, om denne læbestift og denne mascara vil klæde 'hende'. Jamen, det kommer jo helt an på, hvem hun er, hvordan hun ser ud, og hvordan hun er klædt. Udfra CSS-koden alene kan man sige noget om validitet, men intet om, hvad der god kodepkraksis. Det kommer an på koden, den skal 'sminke'.

Husk i øvrigt at teste din kode i IE7 og 8. Der er stadig en hel del 'derude'  *o)

/mvh
</bole>
Avatar billede MadsLundsen Nybegynder
15. april 2012 - 13:45 #5
Mange tak, smid et svar så får i jeres point :D

- Et sidste spørgsmål, kan man f.eks. godt sætte sin margin-top: til over 100? Eller er det en bad-practise?
Avatar billede olebole Juniormester
15. april 2012 - 14:12 #6
Der er intet i vejen med at sætte en top-margin på over 100px. Om det er hensigtsmæssigt, afhænger af konteksten.

Ellers tak, jeg samler ikke point. Det må være claes57's  =)
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
Vi tilbyder markedets bedste kurser inden for webudvikling

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