Patrik81Medlem sedan okt. 2001537 inlägg
Hejsan :)
Här följer ett utdrag av lite html kod jag pillar med.
Nedan bifogar jag även den css som är relevant här.
Problemet jag har är att texten inte hamnar i mitten (lodrätt) av <div>-taggen, som jag vill att den skall. Jag kan ju ganska exakt positionera ut texten, men då uppstår istället problem om jag skulle få för mig att lägga text på två eller fler rader.
<!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" xml:lang="en" lang="en">
<head>
<title>css-test</title>
<link rel="stylesheet" href="obj.start.css" />
</head>
<body>
<div class="objStart">
<p class="objStartText">Lite text på en eller flera rader</p>
</div>
</body>
</html>
.objStart{
position: absolute;
top: 50%;
left: 0px;
height: 150px;
width: 100%;
margin-top: -75px;
background-image: url("gfx/4x2.gif");
color: #990000;
border-top: 1px #cc0000 solid;
border-bottom: 1px #cc0000 solid;
vertical-align: middle;
}
p.objStartText{
text-align: center;
height: 150px;
vertical-align: middle;
}
Vad jag vill är alltså att <div>-taggen skall sträcka sig från höger till vänster sida, och i denna div skall sedan text läggas in, och oavsett hur mycket text det är (hur många rader) så skall det alltid vara lika mycket luft mellan den övre kanten på div:en som den undre.
Men jag får verkligen inte till det. Gjorde en lite snabb sökning, så kan säkert ha missat något, men har suttit hela kvällen med det och blivit mer och mer frustrerad med att inget ivll fungera, så jag behövde i "terapisyfte" också få skriva av mig lite ;)
MVH Patrik
doggelitoMedlem sedan juni 20003 100 inlägg
vertical-align är inte riktigt till för att användas på det sättet.
http://devguru.com/Technologies/css/quickref/css_verticalalign.html
varför inte bara sätta topp- och bottenmarginal på p-elementet?
InsiderMedlem sedan jan. 20001 003 inlägg
Kika på den här länken och se om det finns nån lösning där.
http://www.student.oulu.fi/~laurirai/www/css/middle/
Patrik81Medlem sedan okt. 2001537 inlägg
Hmm, då har man lärt sig något nytt då (ang. vertical-align.)
Det funkade inte jättebra med marginaler i p-elementet.
Eftersom jag använder negativa marginaler för att positionera ut div:en så stannar den alltid kvar på den exakta sträckan från toppen av sidan, även om p-elementet skulle innehålla så mycket att den expanderade, expansionen skulle alltså bara gå nedåt.
Så för att helt från början tänka om hela upplägget:
Jag skulle vilja lägga en div i mitten på sidan (lodrätt), som jag skall klä med en bakgrundsbild och kantlinjer uppe och nere i detta lager (border-bottom/-top)
Inuti detta lager, centrerat både vågrätt och lodrätt skall det infogas text, som kan spänna sig över en eller flera rader. Denna div skall i grundutförande inte ta upp mycket mer än 150px i höjdled (och skulle den nu expandera till följd av för mycket text inuti den så skall den expanderar både upp och ned så att det fortfarande är lika mycket luft både ovanför div:en som nedanför.) Och när texten inte fyller ut div:en så mycket att den expanderar, så skall texten ordna sig så att det finns lika mycket luft ovan, upp till div:en border-top, som det finns luft nedanför ned till div:ens border-bottom.
Det måste väl gå att läsa på något vänster? Vill ju så gärna undvika att använda tabeller till layouten...
MVH Patrik
/r: Det bör ju naturligtvis tilläggas att jag testade och experimenterade lite med lösningarna från den andra länken, men som sagt utan större framgångar.
Det kanske är helt enkelt är så att jag jag är ute på fel spår och undgår att se någon jättesimpel lösning?
jarvkloMedlem sedan juli 20013 295 inlägg
Hmm...
Den jättesimpla lösningen är (iallafall i en ideal värld) att ställa in "display:table-cell" på din div... (se http://www.webforum.nu/showthread.php?s=&postid=870936#post870936)
Men det stöds inte av MSIE - så det är ingen heltäckande lösning.
Undrar om du inte skule börja fundera på hur du kan göra detta med Javascript istället...
Patrik81Medlem sedan okt. 2001537 inlägg
Hej :)
Den ideala världen vore ju underbar, men tror nog att jag får se närmare på javascript-lösningen istället.
Och jag antar att teorin runt det javascriptet är att det, när sidan laddats, kollar av vilka grejer som behöver justeras, eller?
MVH Patrik
jarvkloMedlem sedan juli 20013 295 inlägg
Yep - du borde kunna köra ett sådant script från <body onload="..."> ;)
PepeJeriaMedlem sedan feb. 2003779 inlägg
Provade du att byta ut vertical-align:middle mot line-height:150px?
För då hamnar texten i mitten. Fast endast om du inte använder dig av <br> inne i paragrafen...
Patrik81Medlem sedan okt. 2001537 inlägg
Tjenare :)
PepeJeria: Jag satt uppe till gryningen och experimenterade, men eftersom jag inte kan vara helt säker på att det inte någon gång i framtiden kommer att finnas text där, som ligger över flera rader (och skall ligga över flera rader)
Hmmm, för att få en liten knuff i rätt riktning här nu...
Scriptet jag behöver skriva skall alltså kolla dels vad upplösningen är, och dels hur mycket utrymme som texten i paragrafen kommer ta upp (hur många rader) och vilken teckenstorlek texten har, och sedan baserat på dessa värden räkna ut hur mycket de olika elementen behöver justeras. Har jag glömt/missat något?
:)
MVH Patrik
PepeJeriaMedlem sedan feb. 2003779 inlägg
Att använda sig av Javascript för att placera ut text är något jag personligen är emot. Lösningen är att köra med display:table-cell, men eftersom IE inte stöder det så är det inte en komplett lösning.
Jag skulle hellre använda mig av en tabell än att ha ett stort script som ska räkna ut massor med saker. Tänk på dem som inte har Javascript på, eller att scriptet kanske inte kommer att fungera i alla browsers. Allt detta för vad? För att inte använda en tabell?
PepeJeriaMedlem sedan feb. 2003779 inlägg
Jag fann denna sida med världens fulaste hack för att få det att fungera i IE, kanske är intressantare/lättare än en Javascript lösning.
Patrik81Medlem sedan okt. 2001537 inlägg
Hej :)
Jo, det är sant det du säger, fast jag hoppas ändå kunna göra det utan tabeller, då det verkligen "låser" upp hela designen. Jag har tänkt mig göra ett par olika layouts för sidan, och sedan genom lite php-kod kunna välja vilken layout sidan skall kläs i, och denna layouten just nu, skall ha ett fält som sträcker sig (lodrätt i mitten) över skärmen, med texten centrerad vågrätt och lodrätt inuti detta fält, men i nästa layout kanske texten skall ligga uppe i höger hörne (inte troligt, men gillar friheten ;)) iaf. så i detta fall går "den rätta anledningen till att inte använda tabeller till layout" hand i hand med mina egna anledningar.
Och att knåpa ihop ett php-script som dynamiskt inkluderar ett javascript här, när denna layout skall visas, tror jag att jag kommer klara med lätthet, men visst, hade jag kunnat klara mig utan javascript, och MSIE inte varit så jädrans jobbig att jobba med, så hade jag mer än gärna valt ett "trevligare" och för den sakens skull mycket enklare alternativ. It´s an imperfect world :(
Men rent teoretiskt skulle jag väl kunna definera upp en "halvsnygg" style, som funkar, och sedan med javascriptet skriva över den informationen med javascriptet (så att även de utan javascript kan se det någorlunda bra) eller?
MVH Patrik
BäckmanMedlem sedan nov. 2001339 inlägg
Det funkar inte med margin: auto 0 auto 0;?
Patrik81Medlem sedan okt. 2001537 inlägg
Hejsan igen :)
Jag tackar för det visade intresset. Ju mindre jag måste in och ändra (och lägga till) i php-koden, desto gladare är jag, och ful-hacket såg bra ut i både MSIE och FF, jag är lite bekymrad över Mac användare, men nåväl. Det är ingen ideal värld :(
Tack återigen :)
MVH Patrik
/r: Till Bäckman: Testade ditt förslag, men då hamnade det tyvärr bara överst i div:en (möjligt att jag använde mig utan koden fel, men nu funkar det ju iaf :) Tack ändå.
