Panelen



Forumnavigering
Senast inloggade
RSS
Sponsorer

Forum > Klientspråk > CSS

lodrät centrering av bilder i en tabell.

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?

Alla har sina brister.
ID: #16873 | Skapades: 2009-07-22 13:20:50 | Tråden har 41 svar och har lästs 1123 gånger.
Sida: 1 23

voigtan
voigtan

Gradering

#16875

#floater{
margin: 0 auto;
}
Sen att centera en container vertikalt är lite mer jobb, du skriver inte heller vilken doctype du kör med, men enklast är att göra det med javascript, eller vertical-align: middle; men det är inte alltid du få det önskade resultat som man vill ha.

Hur man ställer en fråga: http://support.microsoft.com/kb/q555375
Redigerades av voigtan den 22 juli 2009. Läs tidigare inlägg.
ID: #16875 | Skapades: 2009-07-22 13:27:34

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xht...ransitional.dtd">


Den använder jag mig av. vertical-align:middle; har jag testat med innan, och nu igen, men den ville inte riktigt fungera som jag ville. Fick ett tips av en kille att jag skulle använda mig av ytterligare en tabell och sätta in en bild som är 100% hög, men jag kände att det blir rörig och "oren" kod.
Har jag fel?

Det jag håller på med är att göra om en hemsida helt och hållet; http://www.gunnarguldsmed.se/start.asp jag är klar med bilderna, ska bara lägga in dem på rätt position också.

Alla har sina brister.
ID: #16877 | Skapades: 2009-07-22 13:40:22

voigtan
voigtan

Gradering

#16878

Citerar OjsanHejsan:
Fick ett tips av en kille att jag skulle använda mig av ytterligare en tabell och sätta in en bild som är 100% hög
Det är en väg att göra det, men det är fel sätt att använda element på. förmodligen kan du få igång det med en korrekt display typ men IE6 kommer med rätt stor sannolikhet ställa till problem.

Hur man ställer en fråga: http://support.microsoft.com/kb/q555375
ID: #16878 | Skapades: 2009-07-22 13:52:38

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%">


Är jag på rätt spår?

Alla har sina brister.
ID: #16880 | Skapades: 2009-07-22 14:20:31

voigtan
voigtan

Gradering

#16882

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

Hur man ställer en fråga: http://support.microsoft.com/kb/q555375
ID: #16882 | Skapades: 2009-07-22 14:32:56

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. ;)

Alla har sina brister.
ID: #16883 | Skapades: 2009-07-22 14:46:31

Hultin
Hultin

Gradering

#16884

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.

... ORANGE HEARTS!
ID: #16884 | Skapades: 2009-07-22 16:31:44

voigtan
voigtan

Gradering

#16885

Du behöver inkludera jquery och pluginet som finns i länken, sen kör du center funktionen.

Hur man ställer en fråga: http://support.microsoft.com/kb/q555375
ID: #16885 | Skapades: 2009-07-22 16:33:05

Hultin
Hultin

Gradering

#16886

Självklart menade jag inkludera båda två, dock inser jag att mitt ordval inte var det bästa ;)

... ORANGE HEARTS!
ID: #16886 | Skapades: 2009-07-22 16:34:45

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>


Eller ska jag ta slut-taggen för script från den första biten och placera den längre ner i koden?

Alla har sina brister.
ID: #16905 | Skapades: 2009-07-23 09:54:48

voigtan
voigtan

Gradering

#16906

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.

Hur man ställer en fråga: http://support.microsoft.com/kb/q555375
ID: #16906 | Skapades: 2009-07-23 10:18:10

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.

Alla har sina brister.
ID: #16908 | Skapades: 2009-07-23 10:23:14

voigtan
voigtan

Gradering

#16909

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.

Hur man ställer en fråga: http://support.microsoft.com/kb/q555375
Redigerades av voigtan den 23 juli 2009. Läs tidigare inlägg.
ID: #16909 | Skapades: 2009-07-23 10:39:21

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.

Alla har sina brister.
ID: #16910 | Skapades: 2009-07-23 11:11:24

Jag använder mig av masterpage, det kanske är en vettig sak att tala om också.

Alla har sina brister.
ID: #16911 | Skapades: 2009-07-23 11:16:36
Sida: 1 23
© Copyright 2007-2009 Shadi Domat | Version 3.0 | Sidkarta | Policy