[CS4] Spry Tabs

Status
Niet open voor verdere reacties.
B

bartvj

Gebruiker
Lid geworden
21 okt 2009
Berichten
49
Ik ben bezig een website aan het maken en de bedoeling is dat de kopjes en de content er als papieren archief tabbladen eruit ziet. Ik heb zit allemaal al gemaakt met photoshop en daarna in Dreamweaver verwerkt met Spry, alleen stuut op de volgende problemen:

-De tabs moeten de bladen overlappen (omdat er geen lijntje mag zijn bij openstaande pagina's, bij de afbeelding is dit HOME).
-De tabs moeten zelf elkaar ook kunnen overlappen, zoals in Google Chrome.
-Hoe kan ik het beste de kopjes op de tabs aanpassen?
-Dit allemaal moet gecentreerd worden op de pagina.

[smallIMG]http://i48.tinypic.com/149qh77.jpg[/smallIMG]

Ik gebruik tevens Adobe Dreamweaver CS4.
 
Laatst bewerkt door een moderator:
Hoi bartvj,
Voor het centreren kan je in de css opnemen:
Code: 
body {
   width: 980px;   /* de breedte van de hangmap */
   margin: 0 auto;
}
Het "auto" zorgt ervoor dat links en rechts de margins (kantlijn-afstanden) automatisch geregeld worden, d.w.z. evenveel links als rechts.
Voor de tabjes zou je eens kunnen kijken hoe ze het op www.fiftyfoureleven.com/sandbox/doors-meets-mountaintops-1 gedaan hebben.
Of deze: htmldog.com/examples/tabs6.html, een voorbeeld bij dit artikel: htmldog.com/articles/tabs.

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
huh? dat centreren lukt niet, hoe moet ik het dan veranderen? dit is mijn code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--

body {
background: url(Afbeeldingen/background%205.jpg) repeat-x fixed;
}

#apDiv1 {
position:absolute;
left:0px;
top:0px;
width:900px;
height:800px;
z-index:1;
margin:auto
}
#apDiv2 {
position:absolute;
left:0px;
top:100px;
width:900px;
height:800px;
z-index:1;
background-image: url(Afbeeldingen/Tab-Content.png);
margin:auto
}
#apDiv3 {
position:absolute;
left:0px;
width:900px;
height:40px;
z-index:2;
top: 100px;
margin:auto
}
-->
</style>
<script src="Spry/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="Spry/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="apDiv3">
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">Home</li>
<li class="TabbedPanelsTab" tabindex="0">Info</li>
<li class="TabbedPanelsTab" tabindex="0">Diensten</li>
<li class="TabbedPanelsTab" tabindex="0">Referenties</li>
<li class="TabbedPanelsTab" tabindex="0">Contact</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">
<p>&nbsp;</p>
</div>
<div class="TabbedPanelsContent">Content 2</div>
<div class="TabbedPanelsContent">Content 3</div>
<div class="TabbedPanelsContent">Content 5</div>
<div class="TabbedPanelsContent">Content 4</div>
</div>
</div>
</div>
<script type="text/javascript">
<!--
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
//-->
</script>

</div>

</body>
</html>


En als ik in een browser op een tab klik komt er een oranje rechthoek omheen. Hoe moet ik dit oplossen?
 
Laatst bewerkt:
Aha! Heb je al geprobeerd:
Code: 
[FONT="Courier New"][SIZE="2"]body {
     width: 900px;   /* toevoegen */
     margin: 0 auto; /* toevoegen*/
     background: url(Afbeeldingen/background%205.jpg) repeat-x fixed;
     }[/SIZE][/FONT]
en:
Code: 
[FONT="Courier New"][SIZE="2"]#apDiv3 {
     position: absolute;
     width: 900px;   /* toevoegen */
     height: 40px;
     top: 100px;
     margin: 0 auto; /* wijzigen */
/*   left: 0px;      ***  wissen */
     z-index:2;
     }[/SIZE][/FONT]
?
Verklaring:
  • Alleen de <body> centreren helpt in dit geval niet genoeg.
  • De container #apDiv3 heeft een absolute positie, en trekt zich dan niets aan van de centreer-instructies voor de <body>.
  • De container #apDiv3 had een positie aan de uiterste linkerkant: { left: 0px; }. Die moet dus verwijderd worden, anders komt ie nooit in het midden.
  • Verder krijgt ie zijn eigen instructies om te centreren: weer een opgegeven breedte, en een { margin: 0 auto; } om links en rechts van die breedte evenveel ruimte te krijgen: gecentreerd! :)
Met vriendelijke groet,
CSShunter

PS:
  • Ben je je ervan bewust, dat als javascript uit staat in de browser van de bezoeker, er dit te zien is (excl. het background-img; dat heb ik niet)? D.w.z. alle inhouden van alle tabs?
  • En dat hetzelfde geldt voor iemand die een pure text-browser gebruikt?
  • En dat iemand die een voorleesbrowser gebruikt die wel javascript kent, dit te horen krijgt (zonder dat gemeld wordt dat de bullets eigenlijk links zijn)?
  • En dat iemand die een voorleesbrowser gebruikt die géén javascript kent, dit te horen krijgt (ook weer met alle contenten)?
Met dit spry-menu zullen sommigen dus helemaal niet content zijn over de toegankelijkheid van de site: ontoegankelijk... :confused:
 
het werkt! dankjewel!
maar de overige problemen zijn er nog steeds.

Is er een manier om de website te converteren naar een meer gangbaar formaat? naar flash? want als idd niet iedereen javascript heeft, dan is de website niet echt toegangkelijk
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan