Søg
Avatar billede chrede Nybegynder
14. juli 2004 - 21:58 Der er 27 kommentarer og
1 løsning

Nyt web layout...men hvordan?

Jeg er indehaver af verdens kedeligste hjemmeside som lige nu er på værksted på adressen: http://www.cgm-consult.dk/web100/

Jeg vil gerne have mit layout lavet om til noget mere "boks" aktigt noget.. lidt i stil med jubii og computerworld.

Jeg har tegnet en lille skitse som kan ses her www.cmoller.dk/nyweb.JPG

Tanken er at baggrunden skal være ens over det hele også imellem boksene.

Hvordan bør jeg gribe sådan et projekt an?
Skal jeg igang med CSS, Tabeller, noget andet?
eller kombination.

Jeg modtager gerne et skelet som jeg så selv kan arbejde videre med.

Hjælp :0)
Avatar billede Slettet bruger
14. juli 2004 - 22:13 #1
Jeg beklager, men min side er stadig kedeligere. Du har jo både lidt layout og nogle links til at muntre det op. ;-)

Hvilken metode, du skal anvende, kommer lidt an på, hvor gamle browsere, du vil rode med at have det pyntet op for.

Jeg vil anbefale en af følgende to modeller:

1) Ingen tabeller (undtagen til ting, der virkeligt er tabeller), og CSS til al layout.

2) En minimal tabel, så de gamle browsere også kan få den basale opstilling med, og CSS til styring af farver, baggrunde, skrifttyper og alt sådan noget.
Avatar billede chrede Nybegynder
14. juli 2004 - 22:15 #2
hvilken metode er bedst, nemmeste... og hvilke browser vælger man fra ved hvad?
Avatar billede Slettet bruger
14. juli 2004 - 22:48 #3
Version 4.x af både IE og Netscape havde meget dårlig CSS-understøttelse. Hvis du ønsker at disse browsere skal have fuldt udbytte af pynten på siderne, er du næsten nødt til at lave gammeldags tagsoup, og CSS er på det nærmeste uanvendeligt. Så har du til gengæld lukket for mobiltelefoner og andre specialbrowsere, da siden nok kun vil virke på netop de browsere, den er kodet til.

Version 5.x af IE havde noget bedre understøttelse af CSS. Mac-udgaven havde endda direkte god understøttelse efter den tids standard. Tilsvarende for Netscape 6 og gamle Mozillaer. Til disse browsere kan ovennævnte metode 2 anvendes.

IE 6.x har så tilpas god understøttelse af CSS2, at det kan anvendes. Nyere udgaver af Opera og ny Mozillaer har meget god CSS2-understøttelse. Til disse browsere kan metode 1 anbefales.

Bemærk dog, at ved metode 1 vælger man ikke nogen browsere fra. (Hvis man gør det rigtigt.) En side lavet på den måde kan stadig ses af gamle browsere, det er bare pynten, der er væk.
Avatar billede chrede Nybegynder
14. juli 2004 - 22:51 #4
Det skal virke på IE 5.5 og højere.. hvad er så bedst. og vil du lave et lille kode eksempel til mig, så jeg har noget at bygge videre på? eller skal der flere points på bordet så?
Avatar billede Slettet bruger
14. juli 2004 - 22:51 #5
Og den nemmeste er efter min mening metode 1, for med den kan man (hvis man har struktureret koden godt) lave et totalt layout-skifte kun ved at rette i CSS-filen. Dette kan for eksempel bruges til at lave forskellige skins til siden.
Avatar billede Slettet bruger
14. juli 2004 - 22:53 #6
Der kommer lidt kode om lidt.
Avatar billede chrede Nybegynder
14. juli 2004 - 22:54 #7
:-D
Avatar billede Slettet bruger
14. juli 2004 - 23:12 #8
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>cmoller.dk</title>
    <link rel="stylesheet" href="style.css" type="text/css">
  </head>
  <body>
    <table>
      <tr><th colspan="2" id="header"><h1>cmoller.dk</h1></th></tr>
      <tr>
        <td id="menu">menu</td>
        <td rowspan="2" id="indhold">Her kommer selve indholdet</td>
      </tr>
      <tr>
        <td id="submenu">Sekundær menu</td>
      </tr>
    </table>
  </body>
</html>

style.css kan så have indhold i denne stil:

#header, #menu, #indhold, #submenu {
  border: 1px red;
  padding: 5px;
  background: #FFFFFF;
  color: #000000;
}

#header {
  color: #66FF66;
}
Avatar billede Slettet bruger
14. juli 2004 - 23:19 #9
Det vil forresten nok være bedst at bruge en anden DOCTYPE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

For hvis du nu får brug for nogle stil-koder uden for CSS.
Avatar billede chrede Nybegynder
14. juli 2004 - 23:19 #10
hmm.. du har angivet noget med en border... den vises dog ingen steder
Avatar billede Slettet bruger
14. juli 2004 - 23:25 #11
Nej, det må jeg indrømme.

Men ret linien til:

border: 1px solid red;

og så virker det.
Avatar billede chrede Nybegynder
14. juli 2004 - 23:28 #12
Hvordan får jeg så noget afstand på og et noget baggrundsbillede halløj der også ligger sig imellem de røde bokse?
Avatar billede Slettet bruger
14. juli 2004 - 23:43 #13
Det kommer lidt an på, om du vil have et fast eller flydende layout, eller måske en kombination.

Men baggrunden kan ordnes med

body {
  background: url(billedfilnavn);
}

og så skal background på de andre nok sættes til transparent istedet for farveværdien.

Du kan få mellemrum ved at tilføje

cellspacing="20"

i table-taggen.
Avatar billede chrede Nybegynder
14. juli 2004 - 23:56 #14
hmm det 2 menuer følger med i størrelsen.. de skal jo gerne have en fast størrelse samtidig med en indholdsboksen kan have en længere længde... er du med på hvad jeg mener?
Avatar billede chrede Nybegynder
15. juli 2004 - 00:15 #15
sådan ser det ud nu... men det driller med de 2 menu-bokse som jeg ikke rigtig kan fastlåse i størrelse :-(
Avatar billede chrede Nybegynder
15. juli 2004 - 00:15 #16
sådan:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>cmoller.dk</title>
    <link rel="stylesheet" href="style.css" type="text/css">
  </head>
  <body background=baggrund.jpg>
    <table cellspacing=25 width=800>
      <tr><th colspan="2" id="header"><h1>cmoller.dk</h1></th></tr>
      <tr>
        <td id="menu" width=150>menu</td>
        <td rowspan="3" id="indhold">Her kommer selve indholdet<p>dfd</p>
        <p>&nbsp;</p>
        <br>sdfdsf       
        <br>sdfdsf       
        <br>sdfdsf
          fghf<p>fgh</p>
        <p>fgh</p>
        <p>fg</p>
        <p>fgh</p>
        <p>g</tr>
      <tr>
        <td id="submenu">Sekundær menu</td>
      </tr>
      <tr>
        <td></td>
      </tr>
    </table>
  </body>
</html>


filen--> style.css:

#header, #menu, #indhold, #submenu {
  border: 1px solid blue;
  padding: 5px; 
  background: #FFFFFF;
  color: #000000;
}

#header {
  color: blue;
}
Avatar billede Slettet bruger
15. juli 2004 - 13:35 #17
Undskyld svartiden.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>cmoller.dk</title>
    <link rel="stylesheet" href="style.css" type="text/css">
  </head>
  <body background="baggrund.jpg">
    <table id="layout" cellspacing="25">
      <tr><th colspan="2" id="header"><h1>cmoller.dk</h1></th></tr>
      <tr>
        <td id="menu">menu</td>
        <td rowspan="3" id="indhold">Her kommer selve indholdet<p>dfd</p>
        <p>&nbsp;</p>
        <br>sdfdsf     
        <br>sdfdsf     
        <br>sdfdsf
          fghf<p>fgh</p>
        <p>fgh</p>
        <p>fg</p>
        <p>fgh</p>
        <p>g</tr>
      <tr>
        <td id="submenu">Sekundær menu</td>
      </tr>
      <tr>
        <td></td>
      </tr>
    </table>
  </body>
</html>

#header, #menu, #indhold, #submenu {
  border: 1px solid red;
  padding: 5px;
  background: #FFFFFF;
  color: #000000;
  margin: 20px;
}

#header {
  color: #66FF66;
}

#layout {
  width: 800px;
}

#menu {
  width: 150px;
  height: 100px;
}

#submenu {
  width: 150px;
  height: 100px;
}
Avatar billede Slettet bruger
15. juli 2004 - 13:37 #18
Muligvis skal du sætte et &nbsp; i den tomme celle under menuboksene.
Avatar billede chrede Nybegynder
15. juli 2004 - 16:49 #19
det virker stadig ikke efter hensigten :-(

de 2 menu-bokse skifter størrelse alt efter indholdet i den store celle (højre)... jo mere tekst der er i den, jo højere bliver de 2 menuer.

Det er meningen at den tomme celle skal strække sig når den store celle vokse i højden.

jeg har sat &nbsp; i den tomme celle under menuboksene.
Avatar billede chrede Nybegynder
16. juli 2004 - 01:33 #20
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Forhindrer min div overflow:auto i at virke (scroll i tabel-celle)...hvordan kan det være? og hvad skal jeg gøre ved det?
Avatar billede Slettet bruger
16. juli 2004 - 13:40 #21
Vil det sige, at det virker, hvis du fjerner den DOCTYPE?
Avatar billede chrede Nybegynder
16. juli 2004 - 14:15 #22
ja... overflow gør
Avatar billede efunnydk Nybegynder
16. juli 2004 - 22:53 #23
Du kan også få et gratis på http://www.powerzone.dk/powerzone/index.php?id=36 her er der admin hvor du kan styre hele siden og vis du ikke er så god til at designe den kan jeg godt lave det design du har tegnet?
Avatar billede chrede Nybegynder
17. juli 2004 - 11:25 #24
efunnydk--> det må du meget gerne...

Jeg vil gerne have runde hjørner hvis det kan lade sig gøre. og jeg vil gerne have scroll i indholdsvinduet.... men kun når det er nødvendigt.
Alle boksene (cellerne) skal bare have fast størrelse. og hele siden vil jeg gerne have centreret (som helhed).

Håber du er med på hvordan jeg gerne vil have :-)
Avatar billede efunnydk Nybegynder
17. juli 2004 - 12:17 #25
Jeg kan lave en test men jeg skal vide om designet skal laves til brug af Easy WebManager (den side som du fik) så laver jeg det en i designet?
Avatar billede chrede Nybegynder
17. juli 2004 - 12:32 #26
Det tror jeg ikke, for når designet er på plads skal jeg kode det bagvedliggende i asp.net

Det kan jeg vel ikke hvis jeg anvender et CMS System? kan jeg?
Avatar billede efunnydk Nybegynder
17. juli 2004 - 13:12 #27
det er jeg ikke sigger på men jeg laver det og så får du det
Avatar billede chrede Nybegynder
18. juli 2004 - 22:44 #28
okay tak :-)
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
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
Se alle spørgsmål i kategorien Opret spørgsmål

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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
22/0821:38 webui_forge_cu121_torch231 med AMD Grafikkort. Af jonpet i Andet software
22/0820:06 email adresse Af Malm i Forslag til ændringer
22/0819:54 problem med google crome Af Malm i Andet software
22/0809:36 Alternativ holder til to skærme... Af Don G i Skærme
20/0815:01 Samsung smart TV Af postpeter@outlook.dk i Fri debat
White papers
Flere white papers »