Søg
Avatar billede billen Nybegynder
15. september 2003 - 08:23 Der er 19 kommentarer og
1 løsning

Konverter design til css

Jeg har en hjemmeside, som er bygget op ved hjælp af tables. Jeg vil gerne have det konverteret til et css baseret design i stedet. Jeg har prøvet og prøvet, men kan simpelthen ikke få det til at spille.

Min hjemmeside kan ses her: http://www.mytolex.dk

Det jeg gerne vil have hjælp til er, hvis nogen ville lave grundskitsen på det (med farvede firkanter) så det kom til at ligne det her: http://www.mytolex.dk/css_ide.png
Jeg kan selv putte designet på, bare jeg har ideen til hvordan man gør.
Avatar billede Slettet bruger
15. september 2003 - 11:14 #1
her er det nu beskrevet meget godt, hvordan det gøres.
http://www.html.dk/artikler/00043/
Avatar billede billen Nybegynder
15. september 2003 - 12:00 #2
Jeg ved godt hvordan man laver css baseret layout. Men mit layout er bygget op om en fixed bredde, som så er centreret. Det er det som giver problemer.
Avatar billede powerade Nybegynder
15. september 2003 - 13:23 #3
Du vil ikke bare bruge frames istedet?
Avatar billede lordhead Nybegynder
15. september 2003 - 14:10 #4
powerade> frames er fra en glemt tid ;)
Avatar billede powerade Nybegynder
15. september 2003 - 14:13 #5
Hæh.. ja det vil nogen jo mene, blir man vel aldrig helt enige om... Synes dog det er et godt alternativ.
Avatar billede lordhead Nybegynder
15. september 2003 - 14:30 #6
Sig mig lige en gang; hvad er det gode ved frames, ud over at søgemaskiner o.lign. ikke kan finde siderne? ;)
Avatar billede powerade Nybegynder
15. september 2003 - 14:33 #7
Det gode er at det er nemt at lave et pænt layout. Desuden er det rart at hvis man f.eks. bruger en JavaScript menu el. lign. Så skal den ikke loades hver eneste gang man trykker på et link... Desuden kan man jo sagtens kommer uden om de "dumme" søgemaskiner, som linker til de forkerte sider.. Det er jo bare at sætte et lille Javascript ind i toppen af de sider der bliver linket forkert til.. Jeg bruger frames kan du nok forstå... ;o)
Avatar billede lordhead Nybegynder
15. september 2003 - 14:37 #8
Det lyder ihvetfald sådan ;o) men der er nu mange andre alternativer. v.h.a. noget SSI eller PHP kan man jo sagtens lave flotte designs også.. hvis der er et problem med en java menu, kan man jo bare bruge en anden menu der er lige så god - er personlig ikke til java menuer.. Jeg bruger ikke frames kan du vel nok forstå ;)

btw. hvad har frames egentlig med hans problem at gøre?
Avatar billede powerade Nybegynder
15. september 2003 - 14:42 #9
Har det med det at gøre at det var hurtigt overstået at lave et layout hvis han brugte frames istedet for CSS... Så sku hans billeder heller ikke loades hver gang man trykkede på et link... ;o)
Avatar billede lordhead Nybegynder
15. september 2003 - 14:44 #10
Jeg ved ikke med dig, men min computer skal kun loade billederne een gang, så når jeg trykker på links, loades de i en brøkdel af et sekund!
Avatar billede powerade Nybegynder
15. september 2003 - 14:46 #11
Jo jo... Det er rigtigt nok... Synes bare det er mere cool hvis de ikke lige ska blinke en gang ved hvert eneste klik... Er jo ikke alle der er ligeså nørdede som "os" der sidder og læser og svarer og hva har vi herinde... Er ikke alle der har de hurtigste forbindelser og computeret... Så der er der jo ikke bare tale om et blink... ;o)
Avatar billede lordhead Nybegynder
15. september 2003 - 14:48 #12
Som sagt; Der er delte meninger om frames. Og een ting er sikker: billen vil gerne have lavet sit design i CSS ;)
Avatar billede powerade Nybegynder
15. september 2003 - 14:50 #13
Mm.. Må han også gøre lige som han vil... Synes måske bare han sku overveje alternativet.. ;o)
Avatar billede lordhead Nybegynder
15. september 2003 - 14:51 #14
Det tror jeg han havde overvejet inden han oprettede spørgsmålet... men er selvfølgelig ikke sikker ;O)
Avatar billede swuppe Nybegynder
15. september 2003 - 21:29 #15
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<style>
body { text-align: center;}
#canvas { margin: 0 auto; width: 700px; }
#top { height: 100px; background: #ccc; border-left: 10px #aabbcc solid; border-right: 10px #aabbcc solid;}
#left { float: left; width: 180px; background: #aca; border-left: 10px #aabbcc solid; }
#right { float: right; width: 500px; background: #beb; border-right: 10px #aabbcc solid;}
.spacer { clear:both;}
</style>
</head>
<body>
<div id=canvas>
<div id=top>Top</div>
<div id=left>Venstre</div>
<div id=right>Højre</div>
<div class=spacer></div>
</div>
</body>
</html>

Har hurtigt bikset ovenstående sammen, mangler nok lidt før det virker cross browser men det er da en start -håber du kan bruge det.
Avatar billede billen Nybegynder
15. september 2003 - 21:53 #16
lordhead+powerade: LOL... grineren diskution. Jeg vil nok være 90% ovre på lordheads side.

swuppe: Jeg har prøvet det og det virker egentlig fint nok. Men når jeg prøver at indsætte en masse <br /> i højre, så er det kun den højre kant der følger med ned??? og hvad gør den spacer?
Avatar billede swuppe Nybegynder
15. september 2003 - 22:23 #17
jah, det er en af de små finurlige ting ved css; du kan angive højden i #left til 100% men _kun_ hvis du har angivet en eksplicit højde på #canvas. Der findes dog andre metoder hvis du ved noget om indholdet på forhånd. Hvis f.eks. #right altid er længere end #left; kan du sætte baggrunden på #canvas i stedet.

spaceren gør at div'en "omslutter" indholdet i mozilla og IE5 på mac m.fl.
Avatar billede billen Nybegynder
15. september 2003 - 22:27 #18
Jeg rodede lidt rundt, med det du havde lavet og kom frem til dette her, som funger i mozilla og opera (ved ikke med ie, da jeg sidder på linux):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<style>
body { text-align: center;}
#canvas { background-image: url(side.png); margin: 0 auto; width: 736px; }
#back { width: 704px; background: #fff; margin-left: 16px; }
#top { height: 100px; background: #ccc; }
#left { float: left; width: 200px; background: #aca; }
#right { width: 504px; background: #beb; margin-left: 200px; }
</style>
</head>
<body>
<div id=canvas>
<div id=back>
<div id=top>Top</div>
<div id=left>Venstre</div>
<div id=right>Højre<br /><br /><br /></div>
</div>
</div>
</body>
</html>


side.png kan hentes her: http://www.mytolex.dk/images/ramme/side.png
Avatar billede swuppe Nybegynder
15. september 2003 - 22:30 #19
yup præcis - takker for point.
Avatar billede billen Nybegynder
17. november 2003 - 22:46 #20
Lige en sen kommentar til hele frames diskutionen. Grunden til, at jeg vil benytte css er, at man der nemt kan lave en printvenligt version. Man skal jo bare lave en nye css fil, som tager sig af det. Det kan man ikke liiiigge i frames, vel powerade ;-)
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
IT-JOB

Capgemini Danmark A/S

Client Partner

Netcompany A/S

IT Consultant

Politiets Efterretningstjeneste

AI/ML udvikler i PET

Jyske Bank

Specialist til Teams Phone og Unified communications

Riskpoint A/S (Riskpoint Solutions Limited)

Senior Developer
Seneste spørgsmål Seneste aktivitet
I går 21:00 Libre Office Impress Af Frank i Andre styresystemer
I går 11:47 VB script Af Jenshentze i Word
I går 11:21 Popup ved opstart Af mort1 i Windows
04/0918:50 Slet lokal konto Af ErikHg i Windows
04/0916:05 Ændre tal i en celle Af xvid i Excel
White papers
Flere white papers »