Help! Problemen met DW CS3

[Djuly]

Hallo
Ik ben een beginner met DW en ik loop tegen een paar onverklaarbare problemen aan. Op dit moment kom ik echt niet verder... kan iemand mij helpen?

1. Halverwege de pagina (content) heb ik drie tabellen naast elkaar geplaatst. In Safari en Firefox zitten deze tabellen gewoon naast elkaar maar in IE zit een kleine witte rand ertussen terwijl ik alle marges en paddings op 0 heb staan!

2. Over deze zelfde drie tabellen: op dit moment heb ik de linker en de rechter tabellen de width bepaald en de middelste tabel op relative zodat deze altijd aanpast aan de grootte van de browser. Ik wil dit omdraaien: middelste balk vast zetten en de linker en rechter tabellen relative maken.
Het is me niet gelukt door de eigenschappen om te ruilen...???

3. Nu heb ik een foto die ik ook als hyperlink gebruik. Helaas maakt DW een klein randje om de foto wanneer je hierop klikt om naar de link te gaan. Hoe kan ik dit kleine randje weghalen?

Alvast bedankt voor de reactie!

 

[Frenske123]

Wat het randje betreft border="0" zie hieronder .

<img src="xxx.jpg" alt="xx" border="0" width="129" height="80">

of zet dit hieronder in de head van je pagina of algemeen style blad, schakel je gelijk alle "randjes" uit.

<style type="text/css">
img { border: none;
}
</style>

 

[Djuly]

Hallo Frenske123,

Tnx voor de reply . Ik begrijp het antwoord niet helemaal want ik sprak namelijk over 2 randjes. 1 betreffende de witte randen tussen de tabellen in IE. 2 betreffende een randje (stippel lijntje) van de plaatjes op de pagina die verschijnt wanneer ik deze gebruik als hyperlink.

Welke bedoel je?

Ps ik heb wel alle marges en paddings van mijn hele pagina op 0 gezet door gebruik te maken van een CSS rule '*' die alle paddings en marges op 0 zet.

 

[Frenske123]

Ik dacht dat je de blauwe borders om afbeeldingen bedoelde , die staat er meestal standaard en schakel je met border 0 uit

ik denk dat je deze meent , wat betreft (uitschakelen) stippellijnen om afb.
plaatsen in je CSS

a:focus {outline: 0;}
a:active {outline: 0;}

wat de tabellen betreft weet ik zo niet, plaats eens wat code !

 

[Djuly]

Hoi Frenske123

Hier zijn mijn codes:

<title>Ellen</title>
<link href="untitled.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
#header {
background-color: #669933;
height: 35px;
}
#nav {
position: relative;
font-family: "Bodoni SvtyTwo ITC TT-Book";
font-size: 14px;
}
#main1 {
background-color: #6600FF;
float: left;
width: 200px;
height: 400px;
margin: 0px;
padding: 0px;
position: fixed;
font-family: "Bodoni SvtyTwo ITC TT-Book";
font-size: 14px;
}
#main2 {
background-color: #006600;
float: right;
width: 200px;
height: 400px;
margin: 0px;
padding: 0px;
font-family: "Bodoni SvtyTwo ITC TT-Book";
font-size: 14px;
}
#main3 {
background-color: #330066;
position: relative;
height: 400px;
margin-top: 0px;
margin-bottom: 0px;
margin-right: 200px;
margin-left: 200px;
padding: 0px;
}
#main3 #foto {
background-color: #FF3300;
height: 337px;
margin-left: 0px;
margin-right: 0px;
padding-top: 30px;
float: none;
margin-top: 0px;
margin-bottom: 0px;
position: relative;
}
#footer {
background-color: #FFCC00;
font-family: "Bodoni SvtyTwo ITC TT-Book";
font-size: 12px;
padding-left: 5px;
}
* {
margin-top: 0px;
padding-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
-->
<style type="text/css">
img { border: none;}
</style>

</style>
<div id="header"></div>
<div id="logo"><img src="foto's/logo-dreamweaver kopie.png" width="279" height="71"></div>
<div id="nav">
<div align="center" class="style1"><a href="index.html">home</a> | styling | photography | about | contact</div>
</div>
<div id="main1">
<div align="right">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><< Back</p>
</div>
</div>
<div id="main2">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>Next &gt;&gt;</p>
</div>
<div id="main3">
<div id="foto">
<div align="center"><img src="foto's/accurate-madness_01 kopie.jpg" width="265" height="337"> <img src="foto's/accurate-madness_02 kopie.jpg" width="270" height="337"></div>
</div>
</div>
<div id="footer">&copy; all rights reserved to Ellen</div>

tnx!

 

[csshunter]

Hoi Djuly,
Piep-piep! Even een waarschuwingssignaal: het weghalen van de outline-stippeltjes kan ernstige gevolgen hebben voor de toegankelijkheid van de pagina.
Als er geen alternatief voor de focus-toestand van een link is gemaakt (bv. een css-hover, die dan wel expliciet ook de focus-eigenschap moet krijgen), kan iemand zonder muis de link niet aanklikken. Die komt niet verder dan de eerste pagina!
Maar iedereen heeft toch wel een muis? - Nee, er zijn bv. mensen die door een lichamelijke beperking geen muis kunnen bedienen, en aangewezen zijn op het toetsenbord of een apparaat dat het toetsenbord vervangt.

• Probeer deze maar eens uit.

Met vriendelijke groet,
CSShunter

 

[Djuly]

Tnx CSS Hunter

Misschien is het inderdaad niet verstandig om dit lijntje om een foto link weg te halen... hiermee kan iedereen mijn website benaderen, ook zonder muis!

Toch heb ik nog twee vragen waarmee ik aan het worstelen ben... kan iemand mij verder helpen?

1. Halverwege de pagina (content) heb ik drie tabellen naast elkaar geplaatst. In Safari en Firefox zitten deze tabellen gewoon naast elkaar maar in IE zit een kleine witte rand ertussen terwijl ik alle marges en paddings op 0 heb staan!

2. Over deze zelfde drie tabellen: op dit moment heb ik de linker en de rechter tabellen de width bepaald en de middelste tabel op relative zodat deze altijd aanpast aan de grootte van de browser. Ik wil dit omdraaien: middelste balk vast zetten en de linker en rechter tabellen relative maken.
Het is me niet gelukt door de eigenschappen om te ruilen...???

Tnx!

 

[csshunter]

Bij vraag 1:
Gelukkig zijn het geen echte tabellen, maar css-<div>'s. Ik werd al bang.
Ik heb 'm even nagebouwd, en zie in IE7 geen witte randjes optreden (niet bij resolutie 1024x768px, en niet bij 1280x1024px). Bij welke IE-versie / welke resolutie geeft de pagina het probleem?
Het zou ook te maken kunnen hebben met het DOCTYPE dat je helemaal bovenaan de pagina hebt gezet. Is dat een Strict-vorm? Dat is de beste! Zie in m'n handtekening voor de link naar de W3C-pagina met geldige DOCTYPE's.
- Maar vraag 2 haalt vraag 1 in!

Bij vraag 2:
Zoiets als beginnetje? (alleen getest in FF3 en IE7)
Hier zat wel a/d rechterkant een 1px dik verticaal lijntje in IE bij. Dat komt omdat IE soms een beetje slecht is in het afronden van percentages. Gefixt door de linker- en rechterkolom 1 px te laten overlappen met de middenkolom. Huppa: wie niet horen wil, moet voelen.

O ja, nog wat verspreide grutterswaren.

• Als je de html-validator uit z'n hok haalt, begint ie op een paar punten te blaffen.
• Er zit bv. een mini-stijlblokje binnen het stijlblok in de <head>: daar kan de <head> koppijn van krijgen.
• Je geeft als enige lettertype op: "Bodoni SvtyTwo ITC TT-Book". Maar die heeft lang niet iedereen op z'n pc (ik bv. niet), en dan valt het lettertype terug op de standaard-instelling, meestal een Times New Roman. - Je kan het beste een meerkeuze-antwoord geven (met komma's gescheiden; de eerste voorkeur vooraan, enz.), en altijd eindigen met serif (als het een letter met schreef moet zijn) of sans-serif (als het schreefloos moet zijn) of monospace (tikmachine-letters); zie verder de css-specificatie voor font-family.
• Je geeft de lettergrootten op in px: een vaste eenheid. Nadeel in Internet Explorer: bezoekers kunnen de letters niet via Beeld>Lettergrootte aanpassen aan hun behoefte. In alle andere browsers kunnen mensen dat wel, d.w.z. de elementen van een website moeten berekend zijn op groei! - Het beste is om de lettergrootten op te geven in em, d.w.z. in relatieve maten. Een lettergrootte van 1em is 100% van de standaard-lettergrootte bij een bepaalde resolutie. Daar kun je onder of boven gaan zitten.
• De eigenschap align is afgekeurde html. Je kunt in css { text-align: center; } of {text-align: right; } gebruiken als het om een tekstregel gaat; uit zichzelf lijnt een regel gewoon links uit. - Als het om een heel blok (een <div>) gaat, dan kan je { margin: 0 auto; } gebruiken om het blok te centreren.

Succes!
CSShunter

 

[Djuly]

Wauw!
Heel erg bedankt voor je antwoord en tijd die je hierin hebt gestoken! :thumb: Je hebt mij heel veel verder geholpen en ik ga hier meteen mee aan de slag.

Tnx again!

 

[Djuly]

Ik heb net de broninfo van de site overgenomen. Tnx again. Nog even een vraagje over de het midden stuk met de foto's (oranje balk)..deze is namelijk in dreamweaver niet meer zichtbaar. Hoe haal ik deze weer tevoorschijn, zodat ik de foto's in de design view kan zien?

Tnx

 

[csshunter]

Hoeps! Geen idee!
Het zou best wel eens zo kunnen zijn, dat Dreamweaver deze layout niet aan kan in z'n (h'r) design view. Want design views van html-editors slaan er soms maar een slag naar, en tonen niet alles (goed) wat je in een echte browser ziet.
Maar ik heb geen Dreamweaver, dus kan niet met zekerheid zeggen of dat hier het geval is. Misschien een Deskundige Dreamweaveraar die dit leest?

Met vriendelijke groet,
CSShunter

PS: de iets minder dure (gratis ) KompoZer laat 'm in elk geval wel oranje zien in de design mode.

 

[Djuly]

Bedankt csshunter voor je advies.
Opzich ben ik er wel uitgekomen zonder dat het design view zichtbaar is. Kwestie van knippen en plakken van de foto's.

Daarnaast heb ik mijn website door de html validator gehaald (http://validator.w3.org/) zoals je adviseert. Er komen steeds dezelfde fout naar boven, namelijk dat mijn body niet in orde is... Weet jij waar mijn body tags moeten komen te staan in de html tekst?
website is ellenmirck.com

tnx!

 

[csshunter]

Hoi Djuly,
Inderdaad zegt de html-editor dat je body niet in orde is. Maar met je body is niet mis, hoor! De geheimtaal van de validator-verklaring betekent:

• De <body> staat op een verkeerde plaats.
• Namelijk midden in de <head>.
• Want de <head> is niet afgesloten met de </head> tag.
• Als je </head> toevoegt in een regel vlak voor <body> is het leed geleden.

Als je dan nog even alt="" toevoegt binnen de <img> tag, en in de laatste regels </html> en </body> van plekje verwisselt (wat het eerst geopend wordt, moet het laatst gesloten worden), zijn alle andere fouten ook opeens weggedooid.

Met vriendelijke groet,
CSShunter

 

[Djuly]

Hoi CSS-hunter,

Dank je wel voor de hulp wederom. Toch snap ik nog een dingetje niet..namelijk over de alt van de 'image tag'. De image tag is als volgt : <div align="center"><img src="foto's/logo-ellen-mirck-grijs.jpg" width="270" height="71" /></div>
Wat moet ik hier precies aan veranderen?

Alvast bedankt,

Groeten Djuly

 

[csshunter]

Hoi Djuly,
Met:

<div align="center">
   <img src="foto's/logo-ellen-mirck-grijs.jpg" width="270" height="71" alt="logo" />
</div>

is dit opgelost.
Reden van protest van de html-validator: alle afbeeldingen horen een "alt"-tekst te hebben ("alt" = "alternative"). Dit alternatief moet er zijn voor mensen die niet surfen met een grafische browser (op scherm), maar bv. met een spraakbrowser of een pure tekst-browser, die ook geen plaatjes kan weergeven. De tekstbrowser laat dan i.p.v. de afbeelding de alternatieve tekst zien, de spraakbrowser laat 'm horen.
Dit is met name belangrijk als het plaatje een link is: dan kan de alt-tekst vertellen waar de link naar toe gaat.

Als een afbeelding alleen maar een grafisch element op de pagina is, dat geen rol speelt voor de inhoud van die pagina, dan kan volstaan worden met een "lege alt", d.w.z. je kan dan alt="" gebruiken (alleen aanhalingstekens, zonder spatie ertussen). Daar is de html-validator ook tevreden mee.

Niet opgelost is de <div align="center">: dat is al 10 jaar afgekeurde html, maar de html-validator ziet dat door de vingers omdat je het Doctype "Transitional" gebruikt. Dat is eigenlijk bedoeld om hele oude sites toch nog min of meer correct te kunnen weergeven. Voor verse websites is het Doctype "Strict" het beste, want die geeft het beste resultaat in de meest uiteenlopende browsers (en dan valt deze code ook ogenblikkelijk door de mand ).

De oplossing is hier: de hele <div align="center"> (met z'n </div>) gewoon weglaten, dus:

<div id="main3">
  <div id="foto">
  	<img src="foto's/logo-ellen-mirck-grijs.jpg" width="270" height="71" />
  </div>
</div>

en dan toevoegen in de css:

[FONT="Courier New"][SIZE="2"]#main3 #foto {
   ...
   text-align: center;
   }[/SIZE][/FONT]

Met vriendelijke groet,
CSShunter

PS:
Internet Explorer geeft de alt-tekst weer als "tooltip" (zo'n klein verklarend geel pop-upje als je over iets heen hovert), maar dat is niet volgens de standaarden, en andere browsers doen dat dan ook niet. Om in alle browsers een tooltip weer te geven, moet je in een element de eigenschap title="..." opnemen. Dat is daarvoor bedoeld!