Avatar billede js_delphi Nybegynder
30. december 2009 - 21:55 Der er 13 kommentarer og
2 løsninger

Starthjaelp til simpelt design.

Hej,

Jeg er ret ny i programmering af hjemmesider, og arbejder med asp.net i Visual Studio 2008.
For at faa designet rigtig med fra starten, er jeg ved at saette mig ind i CSS (bog: CSS - the missing manual).

For at programmere den hjemmeside, jeg skal bruge i foerste omgang, har jeg brug for starthjaelp.

Det gaar ud paa, at jeg skal lave dette simple billede som hjemmeside:
http://www.mediafire.com/file/mylvtemmzic/Forside.jpg

En ren HTML side + et eksternt Style Sheet ville vaere fedt.

Asp.net programmeringen "bagved" klarer jeg selv.

Det er min erfaring at en saadan starthjaelp giver et ordentligt skub bagi, saa det skal ikke forstaaes som "lav noget faerdigt til mig, jeg gider ikke selv" :)

Tak paa forhaand!

P.s.
Jeg kan laegge "spoergsmaalet" ind under Opgaver i stedet, hvis det skulle vaere noedvendigt.
Avatar billede Slettet bruger
30. december 2009 - 22:37 #1
Hej js_delphi

Jeg får ikke meget ud af det billede... Kan du beskrive det lidt nærmere?

  // Steeven
Avatar billede zips Juniormester
31. december 2009 - 00:04 #2
Her er en prøve udfra det billede som ligger på den url du har henvist til.

http://zips.be/exp/test/js_delphi/
Avatar billede js_delphi Nybegynder
31. december 2009 - 09:47 #3
Hej zips,

Det ser lovende ud.
Saa vidt jeg kan se, har du lavet opsaetningen med forskellige tables. Er det den rigtige maade sammen med CSS, eller er det en vane du har fra foer CSS tiden?

Jeg mener, min CSS bog fortaeller noget om, at tables ikke boer anvendes i samme grad som tidligere, da man har andre (og smartere) muligheder med CSS.

Hvad mener du/I?
Avatar billede Slettet bruger
31. december 2009 - 10:13 #4
Tables bør benyttes til lister af data - ikke til struktur. Men det er naturligvis bare, hvis man vælger at se på table's oprindelse, og det er en hovedregel.
Flere vil sige, at tables er blevet misbrugt til stå for sidens opbygning, og at brugen går ud over det, der var meningen; andre vil sige, at det gør det hele meget lettere, hvor du slipper for (måske) forvirrende CSS m.m.

Ikke desto mindre kan en side opstilles med mindre og mere overskuelig kode, hvis der benyttes bokse, <div>-bokse.


  // Steeven
Avatar billede Slettet bruger
31. december 2009 - 10:29 #5
I CSS'en bruger du "width", "float" og "clear" og måske "position" til at placere dine div-bokse i forhold til hinanden.
"width" giver dem størrelse, "float" og "clear" benyttes til at få boksene op på siden af hinanden. Hvis du har nogle specielle bokse, kan du placere dem uafhængigt af alle de andre på siden og placere dem ud fra præcise pixels ved at give dem en "position".

Alt efter, hvordan du vil have siden opbygget, kan og bør det klares ved at fastsætte reglerne for boksene i CSS alene. Og benyt selvfølgelig eksterne CSS-filer.
Så får du en dejlig adskillelse af CSS og HTML og samtidig en helt simpel HTML-kode.

  // Steeven
Avatar billede js_delphi Nybegynder
31. december 2009 - 10:42 #6
Hej Steeven,

tak for de gode forklaringer.
Kan man lokke dig til at lave mit billede med de metoder, du naevner?

Det behoever ikke vaere saa detaljeret, som zips ellers gode eksempel, og "+" og "-" knapperne kan bare vaere almindelige buttons (input type "submit").
Avatar billede zips Juniormester
31. december 2009 - 13:22 #7
Jeg er enig i at en side med struktur skal opbygges i div, men når det er tabular data er det table som bruges, derfor er Steeven velkommen til at lave en i div som virker i de fleste browser.

Der er intet galt i at bruge table til det du viser, det samme glæder for skemaer osv.

De "+" og "-" knapper jeg har lavet er input type button blot stylet med images som jeg har klippet ud fra dit billede, de kan det samme som submit.
http://www.w3.org/TR/html401/interact/forms.html
Avatar billede js_delphi Nybegynder
31. december 2009 - 15:46 #8
Hej zips,

det kunne nu stadigvaek vaere fedt, hvis en af jer gad at lave samme design med <divs>.
Saa fatter jeg nemlig (maaske) begge metoder.

Flere point er til raadighed, hvis det skal til.
Avatar billede zips Juniormester
31. december 2009 - 16:28 #9
Ok her er en hurtig test med div http://zips.be/exp/test/js_delphi/
Avatar billede js_delphi Nybegynder
31. december 2009 - 17:24 #10
Saadan! Kan man faa koden at se??
Avatar billede Slettet bruger
31. december 2009 - 18:20 #11
Din browser har vel en "Vis kildekode"-knap...

  // Steeven
Avatar billede js_delphi Nybegynder
01. januar 2010 - 05:25 #12
Ja, men hvad med CSS filen?
Avatar billede zips Juniormester
01. januar 2010 - 13:52 #13
Her er et svar :-)

Sti til css står i index filen, men her er begge filer, dog kun med div koden.

index.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<title>Exp test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head><body>
<div id="main">
<div class="main-div">
<div class="text">EINGANG 26.0°C</div>
<div class="knapper-top"><input type="button" value="MODUS" class="knap"> <input type="button" value="MENU" class="knap"></div>
<div class="bordertop"> </div>
<div class="text">TOILETTE DECKE</div><div class="text">EINGANG DECKE</div>
<div class="text-value">0 %</div><div class="text-value">0 %</div>
<div class="knapper-top"><input type="button" class="knap-minus"> <input type="button" class="knap-plus"></div>
<div class="knapper-top"><input type="button" class="knap-minus"> <input type="button" class="knap-plus"></div>
<div class="text">TOILETTE ROLLO</div>
<div class="text">ENIGANG BODEN</div>
<div class="knapper"><input type="submit" class="knap-hoch" value=""><br><input type="button" class="knap-runter"></div>
<div class="text-value">0%</div>
<div class="knapper-top"><input type="button" class="knap-minus"> <input type="button" class="knap-plus"></div>
<div style="clear:both;"></div>
</div>
</div>
</body></html>


stylesheet.css

#main {
margin: 20px auto;
width: 570px;
padding: 0;
color: #565e82;
font-family: Verdana, Helvetica, Arial;
font-size: 28px;
}
.main-div {
background-color:#BAE3FF;
width: 554px;
border: 10px solid #272c51;
padding: 3px 1px;
margin: 0;
}
img {
border: 0;
}
div.bordertop {
background-color:#272c51;
float: left;
width: 554px;
line-height: 2px;
}
div.text {
float: left;
width: 276px;
margin-top: 8px;
}
div.text-value {
float: left;
width: 276px;
margin-top: 8px;
text-align: center;
}
div.knapper {
float: left;
width: 276px;
margin-top: 8px;
}
div.knapper-top {
float: left;
width: 276px;
margin: 1px 0;
}

input.knap {
color:#565e82;
font: 100% Verdana, Helvetica, Arial;
background-color: #BAE3FF;
width:128px;
height:45px;
margin: 2px 0;
}
input.knap-minus {
width: 128px;
height: 88px;
margin: 0;
padding: 0;
border: 0;
background: transparent url(minus.jpg) no-repeat center top;
cursor: pointer;
}
input.knap-plus {
width: 128px;
height: 88px;
margin: 0;
padding: 0;
border: 0;
background: transparent url(plus.jpg) no-repeat center top;
cursor: pointer;
}
input.knap-hoch {
width: 260px;
height: 60px;
margin: 0;
padding: 0;
border: 0;
background: transparent url(hoch.jpg) no-repeat center bottom;
cursor: pointer;
}
input.knap-runter {
width: 260px;
height: 60px;
margin: 0;
padding: 0;
border: 0;
background: transparent url(runter.jpg) no-repeat center bottom;
cursor: pointer;
}
Avatar billede js_delphi Nybegynder
04. januar 2010 - 21:32 #14
Saa fik jeg testet det hele af.
Steeven, laeg lige et svar, saa du kan faa et par point for dine forklaringer.

Tak for hjaelpen igen!
Avatar billede Slettet bruger
04. januar 2010 - 21:39 #15
Det var så lidt.

  // Steeven
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