website verticaal centreren in Dreamweaver

Status
Niet open voor verdere reacties.
B

burriquito

Nieuwe gebruiker
Lid geworden
26 mei 2009
Berichten
2
Wie kan mij in 'ontwerp-modus-taal', dus niet in code, uitleggen hoe ik een website VERTICAAL kan centreren in Dreamweaver CS4?
(moet uiteraard in zowel FireFox als Safari en Internet Explorer hetzelfde eruit zien.)
 
Je moet dan de tabel centreren waarin je alle content plaatst.
 
website verticaal centreren

Bijgaand een afbeelding met de waarden voor een volledig gecentreerde container in Dreamwaver. (geen tabel dus)

Bij het verkleinen of vergroten van de weergave in IE zal deze uit het midden schieten.

In Safari, Firefox en Opera gaat het trouwens wel goed.

Laat iedereen maar gewoon een (i)Mac kopen en geen Internet Explorer meer gebruiken, dan zijn we van een hoop problemen af!

http://www.apple.com/nl/imac/design.html
 

Bijlagen

  • Afbeelding 1.png
    Afbeelding 1.png
    18,6 KB · Weergaven: 82
pagina centreren in safari

hallo ik werk op de mac en dreamweaver cs4
en mijn probleem lijkt op deze vraag.
ik ben in dreamwever een beginner dus vergeef mij alsik stomme vragen stel
mijn site is nog niet on line en ik werk dus nog lokaal

het probleem wat ik heb ontstaat bij controle in de browser
De pagina's in opera en IE worden wel gecentreerd maar niet in safari

ik heb in css stylen

#main {

width:800px;
margin: 0px auto 0px auto;
border: 0px solid #f0f0f0;
}

dat zou volgens de regels goed moeten zijn
het ziet er in dreamweaver goed uit maar bij controle in de browser van safarie gaat het fout de pagina wordt links gecentreerd weergegeven.:evil:

wie kan deze oude man helpen:eek:
 
Hoi adriaan47,
Gelukkig ben ik niet bang voor oude mannen. ;)
Eerst een paar vraagjes:
  • Heb je bovenaan als eerste in de pagina een geldig DOCtype staan? Die zijn zo nodig hier te vinden.
  • Komt je pagina heelhuids door de html-validator? Die is hier te vinden (je kan ook een lokale pagina checken d.m.v. uploaden).
  • Komt je pagina heelhuids door de css-validator? Die is hier te vinden (je kan ook ... enz.).
Als je deze 3 vragen met een volmondig Ja hebt kunnen beantwoorden, dan snap ik het even niet. D.w.z.:
  • Met jouw code centreert een verder kale testpagina prima in Safari: zie hier. :)
  • Centreert die bij jou ook? - Zo nee, dan zou het moeten zitten in je Safari-instellingen.
  • Zo ja, dan zou het moeten zitten in de rest van de css-regels en/of in de combinatie daarvan met de html-code van je pagina.
In dat geval: kan je de complete pagina (html + css) hier posten?

Met vriendelijke groet,
CSShunter
 
centreren opgelost

hallo css hunter bedankt voor je reactie

via de html validatie inderdaad enkele fouten gevonden u nu is het centreren correct
en krijg ik 0 fouten bij html en css validatie

alleen wat ik nu nog heb is dat is de navigatie regel in opera en safari correct wordt weergegeven
alleen niet in ie voor de mac
zie de plaatjes
weergave safari/opera en weergave iemac

ik hoop dat een bekend en oplosbaar probleempje is

nogmaals mijn dank voor de genomen moeite
 

Bijlagen

  • weergave iemac.jpg
    weergave iemac.jpg
    98,2 KB · Weergaven: 70
  • weergave safari:opera.jpg
    weergave safari:opera.jpg
    95,7 KB · Weergaven: 80
Laatst bewerkt:
Mooi dat het nu werkt in het merendeel van de browsers. :)
Wat betreft de IEmac: die heb ik niet, dus dat kan ik niet testen.
Maar het verschijnsel lijkt op een oude IE6-Win bug, die bij een horizontaal menu de regelovergangen tussen list-items aanzag voor spaties:
HTML: 
<ul> 
   <li><a href="index.htm">Home</a></li> 
   <li><a href="behandelingen.htm">Behandelingen</a></li> 
   <li><a href="salon.htm">Salon</a></li> 
   <li><a href="workshops.htm">workshops</a></li> 
   enz.
</ul>
Dit viel dan te repareren (zonder kwaad voor de rest), door de regels middenin een tag af te breken:
HTML: 
<ul
><li><a href="index.htm">Home</a></li
><li><a href="behandelingen.htm">Behandelingen</a></li
><li><a href="salon.htm">Salon</a></li
><li><a href="workshops.htm">workshops</a></li
></ul>
Dit werd soms de "list-fish" genoemd: ><>
Misschien werkt dat ook wel voor IEmac?

Met vriendelijke groet,
CSShunter

PS: als je de css en de html van het menu hier post, kan iemand anders er misschien iets zinnigers over zeggen.
 
verschil in de diverse IE5 mac

hallo csshunter,

bedankt voor je snelle reactie.
de codes die jij op geeft zie ik niet in mijn pagina.
bij mij staan ze zo gedefinieerd via export uit fireworks en ze werken wel.


zie onderstaand


<body>
<div id="main">
<img src="afbeeldingen/kopbanner.jpg" id="kopbanner" alt="kopbanner" />
<br class="clearfloat" />
<a href="home.htm">
<img src="afbeeldingen/HomeLINK.gif" id="HomeLINK" alt="homelink" />
</a>
<a href="behandel.htm">
<img src="afbeeldingen/BehandLink.gif" id="BehandLink" alt="behandel" />
</a>
<a href="salon.htm" id="SalonLink">
<img src="afbeeldingen/SalonLink.gif" id="SalonLink" alt="salon" />
</a>
<a href="workshops.htm">
<img src="afbeeldingen/WorkshopLink.gif" id="WorkshopLink" alt="workshop" />
</a>
<a href="kadobon.htm">
<img src="afbeeldingen/KaobonLink.gif" id="KaobonLink" alt="kadobon" />
</a>
<a href="aanbiedingen.htm">
<img src="afbeeldingen/AanbLink.gif" id="AanbLink" alt="aanbieding" />
</a>
<a href="fashion.htm">
<img src="afbeeldingen/fasion.gif" id="fasion" alt="fashion" />
</a>
<a href="nieuws.htm">
<img src="afbeeldingen/home_r2_c13.gif" id="home_r2_c13" alt="nieuws" />
</a><a href="kontakt.htm"><img src="afbeeldingen/KontaktLink.gif" id="KontaktLink" alt="kontakt" />
</a><br class="clearfloat" />


in mijn css staat er geen code voor deze links



@charset "UTF-8";
body {
background-color: #f1c6e1;
margin:0px;
padding:0px;
font-family: Georgia, "Times New Roman", Times, serif;
}

#main {

width:800px;
margin: 0px auto 0px auto;
border: 0px solid #f0f0f0;
}
#kopbanner {
margin-left:0px;
margin-top:0px;
width:800px;
height:163px;
margin-bottom:0px;
float:left;
display:inline;

}
.sidebar {
background-color: #663399;
float: left;
width: 230px;
}


img {
border:0px;
float: left;

}
.footer {
width: 800%;
background-color: #9f0b64;
text-align: center;
height: 70px;
clear: both;
}
.rowWrap {
width: 100%;
}
.clearfloat {
clear:both;
}


#home_gezicht {
width:230px;
height:230px;
float:left;
display:inline;
clear: none;
left: 0px;
top: 200px;
margin: 0px;
}
#home_voeten {
margin-left:0px;
width:230px;
height:246px;
margin-bottom:0px;
float:left;
display:inline;
clear: both;
}

#home_nagels {
width:230px;
height:307px;
float:left;
display:inline;
clear: both;
}
#home_ligend {
width:300px;
float:right;
display:block;
clear: both;
clip: rect(auto,auto,auto,250px);
margin-left: 250px;
}
#Div {
background-color: #9f0b64;
width:800px;
padding-top:0px;
margin-left:0px;
margin-top:0px;
margin-bottom:0px;
float:left;
display:inline;
text-align: center;
clear: both;
height: 65px;
}

.footertext {
width:800px;
float:none;
display:inline;
font-size:0.8em;
font-family:Arial, Helvetica, sans-serif;
color: #fff;
line-height: normal;
clear: both;
margin: 0px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 10px;
padding-left: 5px;
}

.prijs {
font-weight: bold;
font-size: 1em;
float: right;
}
#main #apDiv1 {
font-size: 1.2em;
color: #663399;
padding: 0px;
width: 500px;
float: right;
display: block;
text-align: left;
margin: 15px;
}

#main #apDiv2 {
font-size: 0.9em;
float: right;
color: #FFF;
width: 500px;
}
#main .sidebar img {
padding: 0px;
float: left;
}
#main .sidebar h3 {
padding: 15px;
color: #fff;
width: 200px;
float: left;
text-align: center;
}
#main .sidebar p {
color: #FFF;
width: 200px;
float: left;
text-align: center;
font-size: 1.3em;
padding-top: 0px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 15px;
clear: both;
}


ik hoop dat je er wat aan hebt om de oorzaak te vinden.
 
Hoi Adriaan,
de codes die jij opgeeft zie ik niet in mijn pagina.
Klik om te vergroten...
Nee, inderdaad. Ik had er op gegokt dat het een <ul><li> lijstje zou zijn, maar het blijken een serie image-links te zijn die in de html "koud achter elkaar" geplaatst zijn (verdient niet helemaal de schoonheidsprijs; een lijst heeft meer structuur en is beter toegankelijk).

Maar de middenin-afbreken-truc kan misschien ook hier werken:
HTML: 
<body>
<div id="main">
   <img src="afbeeldingen/kopbanner.jpg" id="kopbanner" alt="kopbanner" />
   <br class="clearfloat" /><a 
   href="home.htm"><img src="afbeeldingen/HomeLINK.gif" id="HomeLINK" 
   alt="homelink" /></a><a 
   href="behandel.htm"><img src="afbeeldingen/BehandLink.gif" id="BehandLink" 
   alt="behandel" /></a><a 
   href="salon.htm" id="SalonLink"><img src="afbeeldingen/SalonLink.gif" id="SalonLink" 
   alt="salon" /></a><a 
   href="workshops.htm"><img src="afbeeldingen/WorkshopLink.gif" id="WorkshopLink" 
   alt="workshop" /></a><a 
   href="kadobon.htm"><img src="afbeeldingen/KaobonLink.gif" id="KaobonLink" 
   alt="kadobon" /></a><a 
   href="aanbiedingen.htm"><img src="afbeeldingen/AanbLink.gif" id="AanbLink" 
   alt="aanbieding" /></a><a 
   href="fashion.htm"><img src="afbeeldingen/fasion.gif" id="fasion" 
   alt="fashion" /></a><a 
   href="nieuws.htm"><img src="afbeeldingen/home_r2_c13.gif" id="home_r2_c13" 
   alt="nieuws" /></a><a 
   href="kontakt.htm"><img src="afbeeldingen/KontaktLink.gif" id="KontaktLink" 
   alt="kontakt" /></a><br class="clearfloat" />
Wie weet is de macIE hier tevreden mee?

Ik hoop het!
Met vriendelijke groet,
CSShunter

PS:
Aan de andere kant zou ik er ook niet zo mee zitten als het niet lukt in IE/Mac. De Wiki zegt:
In juni 2003 heeft Microsoft besloten om Internet Explorer voor Mac OS X niet verder te ontwikkelen. Microsoft stopte de ondersteuning voor Mac OS X op 31 december 2005 en op 31 januari 2006 was het niet meer mogelijk om de Mac-versie van de browser te downloaden.
Klik om te vergroten...
Dus zo'n 7 jaar geleden stopte Microsoft al met het uitbrengen van updates. De meeste Mac-gebruikers zullen denkelijk op Safari of Firefox enz. surfen, en de IE/Mac al lang bij de vuilnis hebben gezet. Of heb ik het mis?
 
vervolg op centreren

goede morgen op deze witte valentijnsdag.

een paar zaken
de pagina zoals ik die had en in IE5 mac de fout geeft,
doet het wel goed in op een pc op een andere lokatie.zoals ik vanmorgen testte:thumb: met een hogere IE versie.
ik zal mij dus niet meer druk maken over de resultaten van IE5 mac

alleen vraag ik mij af moet ik dan nu steeds ook alles op een externe pc gaan testen :( of is er een mogelijkheid om de gewone pc browswers ook op de mac testen zoals ik dat doe met safarie / opera en firefox?

een andere zaak betreft jouw opmerking dat de gebruikte codes niet de schoonheidsprijs verdienen. :eek: dat kan bij een beautysalon natuurlijk niet.

de code is zo door mijn prototype vanuit fireworks geexporteert
waar ik eerst de plaatjes heb geplaatst en vervolgens via slices de links heb geconfugereerd.

kan en of wil je svp mij ook vertellen hoe ik een betere code kan maken?
al of niet van uit fireworks?
of valt deze vraag geheel buiten de oorspronkelijke vraag stelling?

ik hoor het graag
maar tot zover in ieder geval bedankt

adriaan
 
Laatst bewerkt:
Alleen vraag ik mij af: moet ik dan nu steeds ook alles op een externe pc gaan testen, of is er een mogelijkheid om de gewone pc browsers ook op de mac testen, zoals ik dat doe met Safari / Opera en Firefox?
Klik om te vergroten...
Tja, ik denk dat je voor het testen van de Internet Explorers (versie 6, 7, 8; die kunnen verschillen :confused:) aangewezen bent op een Windows-machine.
Je zou voor meer informatie hierover eens kunnen kijken of vragen op de Mac OS pagina van dit forum.
De code is zo door mijn Prototype vanuit Fireworks geëxporteerd.
Klik om te vergroten...
Dan valt jou niets te verwijten. :)
Maar mmm, het lijkt erop alsof Fireworks meer dingen voorspiegelt dan ze kunnen waarmaken. Het pal achter elkaar plaatsen van links die eigenlijk een rijtje vormen en met <ul><li> zouden moeten zijn gestructureerd, vind ik niet echt je-dat. In elk geval bij Adobe zelf hebben ze het ook over de beperkingen van het ontwerpen in Fireworks en het exporteren van CSS & Images enz. tot een webpagina. Zie hier: het kan lang niet in alle gevallen.
Kan en of wil je svp mij ook vertellen hoe ik een betere code kan maken?
Al of niet van uit Fireworks?
Of valt deze vraag geheel buiten de oorspronkelijke vraagstelling?
Klik om te vergroten...
Het laatste zeker:
  • Dit topic begon met "website verticaal centreren in Dreamweaver",
  • toen ging het naar "pagina centreren in Safari",
  • dat bleek "pagina horizontaal centreren in Safari" te zijn,
  • toen kwamen we op "tussenruimtes in IE voor Mac",
  • toen kwamen we op "schoonheidsprijzen voor de html-structuur",
  • toen kwamen we op "testen van IE op een Mac?"
  • en nu zitten we op "hoe maak ik betere html dan een duur Adobe-programma?" ;)
Dus een klein beetje afgedwaald zijn we wel. :D
Maar daarom niet getreurd.
- Om betere code te maken, is het nodig om over de complete pagina met alle css en afbeeldingen te beschikken.
Dan kunnen we zien hoe alles precies in elkaar steekt, en wat daaraan verbeterd zou kunnen worden. Misschien krijgt dan iemand hier de inspiratie om Adobe een lesje te leren. ;) (ik ben niet de enige forum-beantwoorder, maar een van de vele bezoekers)
Kortom:
  • Heb je een link naar een (test)pagina ergens online?
Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
vervolg op dreamweaver perikelen

- Om betere code te maken, is het nodig om over de complete pagina met alle css en afbeeldingen te beschikken.
Dan kunnen we zien hoe alles precies in elkaar steekt, en wat daaraan verbeterd zou kunnen worden. Misschien krijgt dan iemand hier de inspiratie om Adobe een lesje te leren. ;) (ik ben niet de enige forum-beantwoorder, maar een van de vele bezoekers)
Kortom:
  • Heb je een link naar een (test)pagina ergens online?

helaas zover ben ik nog niet dat ik wat online heb :confused:
sterker nog ik zoek nog naar een goede provider en dan moet ik nog leren hoe ik een en ander daar naar toe ga oploaden en dergelijke.

het oploaden van mijn pagina's tot zover naar het forum is dat een goed alternatief?:rolleyes:
ik hoor het graag

vr gr adriaan
 
Hoi Adriaan,
Het oploaden van mijn pagina's tot zover naar het forum is dat een goed alternatief? :rolleyes:
Klik om te vergroten...
Ja, dat zou kunnen: dan moet iemand hier het geheel thuis reconstrueren en van daaruit reageren. Duurt iets langer, waarschijnlijk.

Als het goed is, staan al je geëxporteerde bestanden in een mapje met diverse submapjes (o.a. met de plaatjes).
  • Wat het handigste is, lijkt me om het hoofdmapje (dus inclusief alle submapjes en de daarin staande bestanden) in te zippen, en dat zip-bestandje hier als bijlage (via het paperclip-knopje) te uploaden. Zo'n zip-bestand mag in dit forum max. 100kB groot zijn; kom je daaroverheen, dan zou het kunnen met een paar opgesplitste zip-bestanden.
  • Maar als je een domeinnaam hebt die nog vrij is (voor de .nl namen kan je dat checken op www.sidn.nl), kan je voor nog geen 3 €-tientjes per jaar binnen een paar dagen een site bij een provider online hebben staan.
  • Voor het uploaden is weinig uitzoekwerk nodig: je kunt bv. het gratis FileZilla downloaden, en als je daarin de sitenaam en de gegevens die je van je provider krijgt (gebruikersnaam, wachtwoord) invult, kan je binnen 3 à 30 tellen een hele site uploaden. Dat gebeurt met twee verkenner-achtige venstertjes (linkerkant: je mappen en bestanden thuis; rechterkant: je mappen en bestanden op de server bij de provider), waarin je de mappen/bestanden gewoon heen en weer kunt slepen. Makkie! :)
Met vriendelijke groet,
CSShunter
 
betere navigatie code

oke csshunter,

dat zal ik doen
het kan wel even duren. ivm allerlei druktes
ik snap niet dat ik ooit tijd had om te werken:cool:

nog even wederom een kleine zijstap:eek:

ik heb vandaag firefox op mijn mac geinstaleerd. werkt goed voor extern
alleen voor het testen van mijn dreamwever files op local host gaat het niet.
via het web kreeg ik de aanbeveling

tik about:config in het adresvenster
ga naar local host
druk op enter en dat is het

alleen het werkt nog steeds niet:evil:
weet jij of een ander lid een oplossing??

bijvoorbaat dank
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan