Behöver hjälp med att sätta en sida centrerad både horisontellt och vertikalt.
sidan är redan fixad med den horisontella delen med denna CSS kodningen;
body {
background-color:Black;
font-family:Georgia, Times, serifs;
}
#floater {
float:inherit;
}
Hur går jag vidare sen med den vertikala?
| Skriv ut#floater{
margin: 0 auto;
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xht...ransitional.dtd">
Försökte lite snabbt med
<div style="display: table; height: 399px; position: middle; overflow: hidden;">
<div style=" position: absolute; top: 20%;display: table-cell; vertical-align: middle;">
<div style=" position: middle; top: -10%">
display table fungera inte i IE6 (vet inte ens om det stöds för IE7 heller för den delen):
http://plugins.jquery.com/project/elementcenter - JQuery plugin
jaha, det var därför det inte fungerade riktigt mellan mozilla och IE då.
Får väl lära mig jQuery, börjar bli dags för det i vilket fall. ;)
Jari, så här använder du den jQuery och pluginen om jag fattat det hela rätt (inte testat så inte 100%). Inkludera gör du såhär: <script type="text/javascript" src="path/jquery.js"></script> och likadant för pluginen, dock byter du ju såklart ut jquery mot pluginens huvud javascript dokument
Först, inkludera både jQuery, och
<script type="text/javascript">
$(document).ready(function() {
$("#idpådiven").center({
horizontal: false
});
});
</script>
Du kanske undrar vad document ready saken är, den säger till att hela documentet måste läsas klart innan koden inom {} kan utföras (om jag fattat det hela korrekt)
Finns även intellisense för jQuery i visual studio (rättare sagt du kan lägga till), dvs den dropdown listen som kommer om du skriver tex. lbl1. [lista].
http://weblogs.asp.net/scottgu/arch...in-vs-2008.aspx
http://docs.jquery.com/Tutorials:Ge...ted_with_jQuery <- väldigt välskriven tutorial för jQuery.
Du behöver inkludera jquery och pluginet som finns i länken, sen kör du center funktionen.
Självklart menade jag inkludera båda två, dock inser jag att mitt ordval inte var det bästa ;)
Så.. ungefär såhär då?
<script src="js/jQuery.js" type="text/javascript"></script>
<scrip t type="text/javascript">
$(document).ready(function() {
$("#middle").center({
horizontal: false
});
});
</script>
center är ingen funktion i standard jquery, du behöver även ladda ner pluginet center (som finns i länken ovan) och inkludera den i din kod, men annars ser det korrekt ut.
ja, det är väl den som jag anropar i src="js/jQuery.js"?
Den jag hittade låg på sidan: http://plugins.jquery.com/files/jqu...center.js_0.txt
Det som stör mig är att den inte fungerar, ska jag ändra ngt i min CSS fil, eller ska jag döpa om mitt div element till något helt annat?
/J.
jquery.js låter ju som ett korkat namn att namnge ett plugin för.
http://plugins.jquery.com/files/jqu...center.js_0.txt är JS filen för pluginet du behöver båda JS filerna att få det att fungera.
Demo som fungera för mig:
http://voigt.se/sandbox/aspkoll/center/
redigerad:
Förmodligen så kan det vara din CSS som ställer till det, det hela med centreringen bygger egentligen på att man positionera "boxen" absolut mot parent-noden som har relative som position, sen vid varje event (resize,load) så positionera man boxen, med den höjd, border, margin den har.
Mitt projekt är något i särklass. Jag har skapat ett helt nytt projekt med mer eller mindre samma källkod som det du hade,
det fungerade klockrent, skickade in samma kod (fast med ett annat id på div:en) och det enda den gjorde var att höja min tabell
så man endast såg hälften av den.
Jag har tagit bort all CSS kod från alla ställen, använt länk istället för käll fil när jag inkluderar jQuery filen (precis så som du gjorde)
och granskat hela projektet.
Vad gör jag för fel?
/J.
Jag använder mig av masterpage, det kanske är en vettig sak att tala om också.