[HTML] Open randjes in design - Softwareontwikkeling

woensdag 28 september 2005 13:38

Acties:

Topicstarter

Hallo,

vandaag aan het design begonnen met slicen, na de slice zag alles er goed uit, totdat ik de roll-overs erin ging zetten, na de roll-overs zag het er zo uit:"

Afbeeldingslocatie: http://www.uploadweb.nl/upfiles/foutje.JPG

Afbeeldingslocatie: http://www.uploadweb.nl/upfiles/foutje.JPG

Nu heb ik alle plaatjes (afmetingen) nagelopen, en de voor/after kloppen allemaal, de maten van de tabellen en afbeeldingen kloppen ook allemaal, en er is verder niks veranderd... dus ik vraag me af wat er nou aan de hand is, en het belangrijkste, hoe los ik dit op

woensdag 28 september 2005 13:39

Acties:

AtleX

Tyrannosaurus Lex 🦖

Door de relevante code te geven en eventueel ook een linkje naar de site. Dan kunnen we er tenminste even naar kijken

.

Sole survivor of the Chicxulub asteroid impact.

woensdag 28 september 2005 13:41

Acties:

Willem

Heb je al eens naar de mogelijkheden van CSS gekeken?
border-collapse, margin, padding

Motor onderhoud bijhouden

woensdag 28 september 2005 13:43

Acties:

Thrilled

Topicstarter

css hou ik er liever buiten, ben ik (nog) niet goed in, dus voorlopig even zo, ik kan wel die lap code geven, maar kan je even aangeven welk stukje je nodig hebt..?

woensdag 28 september 2005 13:46

Acties:

sariel

heb je niet een linkje naar de pagina? dat is makkelijker voor iedereen. zo nee, dan zijn de stukjes nodig waar het fout gaat

ps: css is best makkelijk hoor, hier staat hoe je het kan gebruiken

[ Voor 31% gewijzigd door sariel op 28-09-2005 13:47 ]

Copy.com

woensdag 28 september 2005 13:49

Acties:

Thrilled

Topicstarter

de link is www.sicerow.com/alpha-blunt

maar dat is de originele, zonder rollovers, daarvoor hebben ze mij ingehuurd (A)

ik zal even trialversie van een ftp programmatje downloaden, en heel die code online zetten, krijg je zo een link...

woensdag 28 september 2005 13:52

Acties:

Bram77

offtopic: http://stud.fh-heilbronn.de/~jdebis/leechftp/downloads.html

woensdag 28 september 2005 13:55

Acties:

Noork

Waar moet eigenlijk de content komen? Dat is me nog onduidelijk.

Niks trial versie, gewoon --> http://filezilla.sourceforge.net/

[ Voor 35% gewijzigd door Noork op 28-09-2005 13:56 ]

woensdag 28 september 2005 13:55

Acties:

Thrilled

Topicstarter

Linkje naar broncode (Doel opslaan als)

Hier is ie dan

[ Voor 183% gewijzigd door Thrilled op 28-09-2005 13:58 ]

woensdag 28 september 2005 14:00

Acties:

Noork

Thrilled schreef op woensdag 28 september 2005 @ 13:55:
Linkje naar broncode (Doel opslaan als)

Hier is ie dan

Die doet het niet. Maar kun je niet gewoon de site online zetten. Inclusief images dus. Zo heb je er nl. weinig aan.

[ Voor 11% gewijzigd door Noork op 28-09-2005 14:03 ]

woensdag 28 september 2005 14:05

Acties:

Thrilled

Topicstarter

is goed, ik zal de site even online PROBEREN te zetten, hieronder voorlopig de code dan

code:

<HTML>
<HEAD>
<TITLE>alphasite01</TITLE>


                <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
                <script language="JavaScript" type="text/JavaScript">
                <!--
                function MM_swapImgRestore() { //v3.0
                  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
                }
                
                function MM_preloadImages() { //v3.0
                  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
                    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
                    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
                }
                
                function MM_findObj(n, d) { //v4.01
                  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
                    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
                  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
                  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
                  if(!x && d.getElementById) x=d.getElementById(n); return x;
                }
                
                function MM_swapImage() { //v3.0
                  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
                   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
                }
                //-->
                </script>

  </HEAD>
<BODY BGCOLOR=#FFFFFF onLoad="MM_preloadImages('images/news_05OVER.PNG','images/news_06OVER.PNG','images/news_07OVER.PNG','images/news_08OVER.PNG','images/news_09OVER.PNG','images/news_12OVER.PNG','images/news_13OVER.PNG','images/news_14OVER.PNG','images/news_15OVER.PNG')">
<!-- ImageReady Slices (alphasite01.psd) -->
<TABLE WIDTH=765 BORDER=0 CELLPADDING=0 CELLSPACING=0>
    <TR>
        <TD>
            [img]"images/spacer.gif"[/img]</TD>
        <TD>
            [img]"images/spacer.gif"[/img]</TD>
        <TD>
            [img]"images/spacer.gif"[/img]</TD>
        <TD>
            [img]"images/spacer.gif"[/img]</TD>
        <TD>
            [img]"images/spacer.gif"[/img]</TD>
        <TD>
            [img]"images/spacer.gif"[/img]</TD>
        <TD>
            [img]"images/spacer.gif"[/img]</TD>
        <TD>
            [img]"images/spacer.gif"[/img]</TD>
        <TD>
            [img]"images/spacer.gif"[/img]</TD>
        <TD>
            [img]"images/spacer.gif"[/img]</TD>
        <TD>
            [img]"images/spacer.gif"[/img]</TD>
        <TD>
            [img]"images/spacer.gif"[/img]</TD>
        <TD>
            [img]"images/spacer.gif"[/img]</TD>
        <TD>
            [img]"images/spacer.gif"[/img]</TD>
        <TD>
            [img]"images/spacer.gif"[/img]</TD>
        <TD></TD>
    </TR>
    <TR>
        <TD COLSPAN=15>
            [img]"images/news_01.png"[/img]</TD>
        <TD>
            [img]"images/spacer.gif"[/img]</TD>
    </TR>
    <TR>
        <TD ROWSPAN=7>
            [img]"images/news_02.png"[/img]</TD>
        <TD COLSPAN=7>
            [img]"images/news_03.png"[/img]</TD>
        <TD COLSPAN=7 ROWSPAN=2>
            [img]"images/news_04.png"[/img]</TD>
        <TD>
            [img]"images/spacer.gif"[/img]</TD>
    </TR>
    <TR>
        
    <TD ROWSPAN=3> <a href="news.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('news','','images/news_05OVER.PNG',1)">[img]"images/news_05.png"[/img]</a></TD>
        
    <TD ROWSPAN=3> <a href="alpha.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Alpha Blunt','','images/news_06OVER.PNG',1)">[img]"images/news_06.png"[/img]</a></TD>
        
    <TD ROWSPAN=3><a href="contact.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('contact','','images/news_07OVER.PNG',1)">[img]"images/news_07.png"[/img]</a> 
    </TD>
    <TD ROWSPAN=3> <a href="photo.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('photo','','images/news_08OVER.PNG',1)">[img]"images/news_08.png"[/img]</a></TD>
        
    <TD ROWSPAN=3> <a href="magazine.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('magazine','','images/news_09OVER.PNG',1)">[img]"images/news_09.png"[/img]</a></TD>
        <TD COLSPAN=2 ROWSPAN=4>
            [img]"images/news_10.png"[/img]</TD>
        <TD>
            [img]"images/spacer.gif"[/img]</TD>
    </TR>
    <TR>
        <TD ROWSPAN=3>
            [img]"images/news_11.png"[/img]</TD>
        
    <TD><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image42','','images/news_12OVER.PNG',1)">[img]"images/news_12.png"[/img]</a> 
    </TD>
    <TD><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image43','','images/news_13OVER.PNG',1)">[img]"images/news_13.png"[/img]</a> 
    </TD>
    <TD><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image44','','images/news_14OVER.PNG',1)">[img]"images/news_14.png"[/img]</a> 
    </TD>
    <TD COLSPAN=2><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image45','','images/news_15OVER.PNG',1)">[img]"images/news_15.png"[/img]</a> 
    </TD>
        <TD ROWSPAN=5>
            [img]"images/news_16.png"[/img]</TD>
        <TD>
            [img]"images/spacer.gif"[/img]</TD>
    </TR>
    <TR>
        <TD COLSPAN=5 ROWSPAN=2>
            [img]"images/news_17.png"[/img]</TD>
        <TD>
            [img]"images/spacer.gif"[/img]</TD>
    </TR>
    <TR>
        <TD COLSPAN=5 ROWSPAN=3>
            [img]"images/news_18.png"[/img]</TD>
        <TD>
            [img]"images/spacer.gif"[/img]</TD>
    </TR>
    <TR>
        <TD ROWSPAN=2>
            [img]"images/news_19.png"[/img]</TD>
        <TD COLSPAN=6>
            [img]"images/news_20.png"[/img]</TD>
        <TD ROWSPAN=2>
            [img]"images/news_21.png"[/img]</TD>
        <TD>
            [img]"images/spacer.gif"[/img]</TD>
    </TR>
    <TR>
        <TD COLSPAN=6>
            [img]"images/news_22.png"[/img]</TD>
        <TD>
            [img]"images/spacer.gif"[/img]</TD>
    </TR>
</TABLE>
<!-- End ImageReady Slices -->
</BODY>
</HTML>

[ Voor 26% gewijzigd door Thrilled op 28-09-2005 14:23 ]

woensdag 28 september 2005 14:17

Acties:

Mad Marty

Je bent slimmer als je denkt!

Zou je dat alsjeblieft nog even tussen [code]-tags kunnen zetten?

edit:
Weet bijna zeker dat het iets met je JavaScript is, maar helaas ben ik daar niet zo in thuis. Lijkt me overigens, zoals eerder gesuggereerd, dat je dit veel beter met css op kunt lossen!

[ Voor 62% gewijzigd door Mad Marty op 28-09-2005 14:20 ]

Rail Away!

woensdag 28 september 2005 14:25

Acties:

Thrilled

Topicstarter

gedoet

woensdag 28 september 2005 14:37

Acties:

Willem

Weet je,

Hier schiet niemand wat mee op. Probeer eerst zelf te achterhalen waar het hem in zit in plaats van er vanuit te gaan dat wij alles wel even voor je nalopen.

En dat je niet aan CSS wilt moet je zelf weten, maar ik zou het niet onnodig moeilijk houden voor jezelf. Juist wat jouw probleem betreft is CSS de uitkomst bij uistek.

Motor onderhoud bijhouden

woensdag 28 september 2005 14:41

Acties:

Garyu

WW

Wat doen precies al die spacers tussen je plaatjes? Kan me voorstellen dat dat lege lijntjes zijn en dergelijke..

It's Difficult to Make Predictions - Especially About the Future

woensdag 28 september 2005 14:41

Acties:

Thrilled

Topicstarter

Ik weet dat css beter is, maar ik kan het gewoonweg nog niet... dus daar schiet ik ook niks mee op. Het lijkt mij dat er iets aan de hand is, dat de plaatjes uitgerekt zijn, waardoor de tabellen iets worden vergroot, en daardoor het hele design uit zn verband rukt.. maar aangezien de plaatjes allemaal even groot zijn (en de tabellen ook, vergeleken met de plaatjes die erin horen), snap ik het niet meer, en aangezien hier het dan wel altijd opgelost kan worden, kwam ik maar weer hier naartoe, en daarom hoop ik ook dat het gefixed kan worden...

woensdag 28 september 2005 14:43

Acties:

Erkens

Fotograaf

Thrilled schreef op woensdag 28 september 2005 @ 14:41:
Ik weet dat css beter is, maar ik kan het gewoonweg nog niet... dus daar schiet ik ook niks mee op. Het lijkt mij dat er iets aan de hand is, dat de plaatjes uitgerekt zijn, waardoor de tabellen iets worden vergroot, en daardoor het hele design uit zn verband rukt.. maar aangezien de plaatjes allemaal even groot zijn (en de tabellen ook, vergeleken met de plaatjes die erin horen), snap ik het niet meer, en aangezien hier het dan wel altijd opgelost kan worden, kwam ik maar weer hier naartoe, en daarom hoop ik ook dat het gefixed kan worden...

Waarom begin je dan niet gewoon met wat CSS, juist daarmee kan dit makkelijk gefixed worden. En zo moeilijk is dat CSS niet hoor.

woensdag 28 september 2005 14:44

Acties:

Noork

Zonder de plaatjes is je design in IE al verkloot. In Firefox wordt 't wel goed weergegeven. Maar je kan beter zelf wat leren over html en css ipv het gebruik van ImageReady en de hulp van GOT.

woensdag 28 september 2005 14:46

Acties:

Thrilled

Topicstarter

dat ben ik ook van plan, maar er zit aan deze site een tijdslimiet, en hij moet zsm af... maar ik begrijp dat ik hier geen hulp krijg

woensdag 28 september 2005 14:46

Acties:

Willem

Je wilt dus dat wij jouw probleem oplossen. Dat doen we door te zeggen: Ga CSS gebruiken (kun je het niet, ga het dan leren, zo moeilijk is het niet en het is alleen maar in je voordeel). Wil je dat niet, ja dan heb je toch echt pech.

Dus, wat wordt het?

Motor onderhoud bijhouden

woensdag 28 september 2005 14:50

Acties:

Thrilled

Topicstarter

haha, ik heb graag in dit geval dat jullie me nu uit de brand helpen

en na deze site ga ik CSS leren (beloofd)

woensdag 28 september 2005 14:58

Acties:

crisp

Devver

Pixelated

1 woord: whitespace

Intentionally left blank

woensdag 28 september 2005 14:59

Acties:

RM-rf

1 2 3 4 5 7 6 8 9

het design is waarschijnlijk een lelijke table die sliced ...

de extra ruimte ontstaat omdat in de tabelcellen er opeens extra ruimte is gekomen, bv door een extra return voor de afsluitende </td>

maak van

HTML:

1 2	<TD> <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=18></TD>

eens

HTML:

1	<TD><IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=18></TD>

(en dan overal in de HTML_code)

Inderdaad, zulke fouten komen vooral door een typischs 'slice'-handelswijze die gemaakt wordt met een tabel, als je net met CSS werkt (en semantisch correcte code) komen zulke fouten als het goed is niet meer voor

Intelligente mensen zoeken in tijden van crisis naar oplossingen, Idioten zoeken dan schuldigen

woensdag 28 september 2005 19:13

Acties:

Dark Blue

Compositionista!

Alpenmeisje

Thrilled schreef op woensdag 28 september 2005 @ 13:49:
maar dat is de originele, zonder rollovers, daarvoor hebben ze mij ingehuurd (A)

Thrilled schreef op woensdag 28 september 2005 @ 14:46:
dat ben ik ook van plan, maar er zit aan deze site een tijdslimiet, en hij moet zsm af... maar ik begrijp dat ik hier geen hulp krijg

Ik zal het je vriendelijk zeggen, ik lees je topic niet met plezier omdat jouw idee van ingehuurd worden voor een taak geheel niet spoort met mijn idee daarover. Ik vind dat je eerst capabel moet zijn van je taak en de mogelijke problemen alvorens je je daarvoor laat inhuren.

Thrilled schreef op woensdag 28 september 2005 @ 14:50:
en na deze site ga ik CSS leren (beloofd)

Niet beloven... hebben wij wat aan... gewoon doen...

Ja, goed plan Boelie-Boelie, dan heb ik ook nog zeg maar naast een kritisch deel, een informatief deel aan mijn post

A Farewell To Frames By Boelie-Boelie

Boelie-Boelie schreef op vrijdag 16 september 2005 @ 19:12:
Ik zou beginnen met lezen met het artikel 'Developing with webstandards', waarin o.a. structuur/semantiek, maar ook CSS aan bod komen. Eigenlijk de principes van het bouwen van een goede site.
En je vindt ook heel veel info op de site 'Webrichtlijnen.overheid.nl', waar je kunt lezen over waar je op moet letten voor het bouwen van een goede site.
Ook nuttig is 'Semantics, HTML, XHTML, and structure'.

Op Whitespace staat een artikel 'Learning CSS', met daarin enkele nuttige links.

Op CSS Help Pile en in het Webdevelopers Handbook vind je ook een gigantische hoeveelheid links naar nuttige info.

Op coda.co.za zijn diverse layout-technieken op een rij gezet.

Als je al die links afgaat en goed leest, kom je zeer waarschijnlijk een heel eind...

[ Voor 44% gewijzigd door Dark Blue op 28-09-2005 19:35 ]

heidiulrich.nl | adventura.nl : rugzakavonturen | pathwise.nl : prepping geeks to get jobs

woensdag 28 september 2005 19:33

Acties:

Boelie-Boelie

Geef dan op z'n minst wat nuttige links aan TS mee...
Enkele nuttige CSS-gerelateerde links

[ Voor 48% gewijzigd door Boelie-Boelie op 28-09-2005 19:34 ]

Cogito ergo dubito

woensdag 28 september 2005 19:46

Acties:

KappuhH

Site is gemaakt met Photoshop slices en Dreamwaver zie ik. Ik heb hetzelfde probleem gehad en opgelost door bij elke kolom/row de hoogte en breedte van de afbeelding er bij te zette... het is even werk maar het werkt wel. Dit kun je het beste in de code zelf doen en niet in Dreamwaver design scherm (of hoe je dat ook mar noemt).

code:

1 2	<TD ROWSPAN=2> [img]"images/news_19.png"[/img]</TD>

wordt dus:

code:

1 2	<TD width = "156" height = "96" ROWSPAN=2> [img]"images/news_19.png"[/img]</TD>

In slordig html

woensdag 28 september 2005 22:05

Acties:

Thrilled

Topicstarter

Het is in ieder geval opgelost, ik heb de oude variant helemaal verwijderd, opnieuw begonnen met slicen, rollover, voor rollover opgeslagen, en bekeken, en nu werkt hij prima (niks anders gedaan als daarnet...) dus nu is het dus mijn css leren gok ik