Hej, Har tyvärr bara ie att testa med här, men jag gjorde ett snabbt test och skrev följande: Niklas, Kolla in koden på http://www.wpdfd.com/editorial/thebox/deadcentre3.html det kanske går att mecka om den till att passa ditt syfte. Problemet är väl att alla de varianterna kräver att man har höjden eller bredden från början och kan räkna ut halva den. I så fall är det lika bra att använda margin för img:n. Varför kan du inte visa alla bilder i en tabell? Ett alternativ: Hillqvist, En fråga av nyfikenhet: Niklas, Jag tänkte mest att om det ska vara länkar till de större bilderna så fungerar de annorlunda än andra bilder eller länkar. Skulle gärna se en lösning som inte går "fuskvägen" via bakgrundbild, det var mer det. Jag tycker att man skall ha som riktlinje att placera informationsbärande bilder i förgrunden och rena designbilder i bakgrunden. Per, <b>Det är mycket "snyggare" att i mitt fall på en helt tom svart ruta än en img-tagg där den bilden man pekar på inte finns. /.../</b> <b>Har du ingen serversideskriptning som fixar det t.ex. genom att inte lägga ut något img-element eller genom att lägga ut en "förhandsvisning saknas"-bild?</b> Längst ner här är en princip som _borde_ fungera, men inte verkar göra det med IE, åtminstone. Borde du inte kunna centrara bilderna med javascript? Detta är en sida som är uppbyggd med bara CSS, DIV, SPAN, H1 o.s.v. Det är en bugg i IE. (Hur kommer det sig att jag inte förvånas? ;-) Det är inga problem att markera delar av texten i Mozilla Firefox. Och i IE funkar det att dubbelklicka på ett ord för att markera det. "Det är inga problem att markera delar av texten i Mozilla Firefox."Förenkla HTML
Jag skulle vilja förenkla följande HTML kod med hjälp av css så jag blir av med tabellen men, men eftersom valign verkar vara bortsprunget på allt utom tabeller & så får jag inte rätt på det. Det skall var en ruta med måtten 92*92px som har svrt bakgrund. I denna ruta skall en bild (som kan ha olika dimensioner men max 92*92px) centreras både vertikalt och horisontallt. Under den svarta rutan skall en text centreras.
[CSS]
p
{
float: left;
margin: 15px 5px;
padding: 0px;
}
p a
{
cursor: hand;
}
p .caption
{
font-familliy: verdana, tahoma, arial;
font-size: 15px;
}
p .image
{
background-color: #000000;
height: 92px;
width: 92px;
}
[HTML]
<p>
</p>
Text
Är övertygad om att det går att lösa med snyggare HTML så man slipper tabellen. Vill minimera mängden HTML som skickas då denna p-tagg kan komma att upprepas ett stort antal gånger på sidan (antalet genereras dynamiskt).
Tack!
Sv: Förenkla HTML
<html>
<head>
<style type="text/css">
.box {
width: 92px;
height: 92px;
background: black;
color: white;
}
div.box .im {
width: 92px;
height: 92px;
text-align: center;
vertical-align: middle;
}
div.box .tx {
text-align: center;
}
</style>
</head>
<body>
<div class="box">
<div class="im">bild</div>
<div class="tx">texten under</div>
</div>
</body>
</html>
Kanske kan ge något uppslag?
Lite osäker på om det är ok att ange en för liten yttre box och att på det sättet få den att få rätt storlek.
Sv: Förenkla HTML
Det är tyvärr inte riktig vad jag är ute efter. Bilden skall centeras både på höjd och bredd inne i den svarta boxen, och under boxen skall texten placeras. Själva svårigheten jag har är att få bilden centrerad på båda axlarna.
Jag har själv förenklat det en bit, men kan inte få till centreringen av bilden
[CSS]
p
{
float: left;
font-family: verdana, tahoma, arial;
font-size: 12px;
height: 92px;
margin: 15px 5px;
text-align: center;
width: 92px;
}
p span
{
background: black;
height: 92px;
text-align: center;
vertical-align: middle;
width: 92px;
}
[HTML]
<p>
<span><img src="images/smallthumb.gif"></span>
Texten under
</p>
Sv: Förenkla HTML
//Anna-KarinSv: Förenkla HTML
Testade runt lite (är absolut ingen expert på html eller css), men hur jag än trixade med line-height och vertical-align ville det inte fungera. I värsta fall får du väl skriva in <... style="margin-top:"+ditt beräknade värde> typ. En annan variant är ju naturligtvis att göra bilderna 92x92 med svart bakgrund där du vill ha den, men det är ju inte alltid möjligt.Sv: Förenkla HTML
Kan du inte visa koden som skriver ut sidan eller ett exempel på hur några av bilderna förhåller sig till varandra?Sv: Förenkla HTML
<code>
<html>
<head>
<style type="text/css">
<body>
DIV
{
width: 92px;
height: 92px;
margin: 15px 5px;
text-align: center;
font-size: 12px;
font-family: verdana, tahoma, arial;
background-color: black;
background-repeat: no-repeat;
background-position: center;
}
</style>
</head>
<body>
<DIV style="background-image: url('images/smallthumb.gif')">
Texten över
</DIV>
</body>
</html>
</code>
Fast det ger att texten hamnar över bilden.Sv: Förenkla HTML
Det var inte en dum idé, varför tänkte jag inte på den när jag använda background trick på andra ställen, he he. En liten modifikation gjorde att det blev bra
[CSS]
p
{
float: left;
font-family: verdana, tahoma, arial;
font-size: 12px;
height: 92px;
margin: 15px 5px;
text-align: center;
width: 92px;
}
p a
{
color: #000000;
cursor: hand;
text-decoration: none;
}
p span
{
display: block;
background: black;
background-position: center;
background-repeat: no-repeat;
height: 92px;
width: 92px;
}
[HTML]
<p>
Texten under
</p>
Anledningenarna till att jag inte vill använda en tabell är att det blir mindra information som skall föras över så här, samt att genom att sätta <b>float:left</b> på min p-tagg så får jag en flytande layout som anpassar sig med antalet rader och kolumner själv.. den lyxen får man inte med tabeller.
<b>Edit:</b> Testat med IE6 på PC, samt Opera, Mozilla, Safari och IE på Mac
Sv: Förenkla HTML
Fungerar verkligen bilderna som "riktiga bilder" - kan man t.ex. markera dem etc.?Sv: Förenkla HTML
Nej de funderar precis som en vanlig bakgrundsbild.. men hur ofta vill man kunna markera en bild, men kan juh ändå spara bakgrunden om man vill och i mitt fall spelar det ingen roll då det är tumnaglar på mycket större bilder.Sv: Förenkla HTML
Sv: Förenkla HTML
Tänker man sig t.ex. ett bildgalleri med ett flertal bilder ovanpå en bakgrund, så klarar man sig bra utan bakgrunden, men det blir ganska förvirrande om galleribilderna skulle försvinna. Bakgrunden skall vara just bakgrund, medan galleribilderna skall ligga i förgrunden (som img-element).
Jag tycker alltså att Pelle gjorde fel när han lade de små flaggorna i forumsöversikten som bakgrundsbilder trots att de är informationsbärande.Sv: Förenkla HTML
I detta fallet så är bilderna informationsbärande på så sätt att de visar tumnaglar som man kan klicka på. Att de skall använda image-taggar så de inte hamnar som bakgrundsbilder ser jag inte riktig fördelen med. Det är mycket "snyggare" att i mitt fall på en helt tom svart ruta än en img-tagg där den bilden man pekar på inte finns. På så sätt visar det att det fortfarande finns en bild (rutan visar det + texten under) men att det inte finns någon förhandsvisning.Sv: Förenkla HTML
Har du ingen serversideskriptning som fixar det t.ex. genom att inte lägga ut något img-element eller genom att lägga ut en "förhandsvisning saknas"-bild?
För att få det att funka i alla webbläsare bör du förresten hålla dig till standarden och använda "cursor: pointer" i stället för IE-påhittet "cursor: hand".Sv: Förenkla HTML
Kommer fortfarande inte ifrån att bilden inte går att placera i mitten av rutan (vertikla&hotizontellcentrering) utan att använda en tabell, då valign inte ät tillgänglig på något annat element.Sv: Förenkla HTML
http://www.w3.org/Style/Examples/007/center.html
Har inte möjlighet att testa med andra browsers här, men funkar det inte i IE brukar man ju få acceptera att man får ha en speciallösning ett tag till... =/
Edit: hittade två bra länkar till:
http://mrclay.org/web_design/centered_image/
som leder till
http://www.student.oulu.fi/%7Elaurirai/www/css/middle/Sv: Förenkla HTML
<code>
<html>
<head>
<style type="text/css">
DIV.TABLE P
{
width: 92px;
height: 92px;
margin: 15px 5px;
color: #000000;
background-color: black;
float: left;
text-align: center;
font-size: 12px;
font-family: verdana, tahoma, arial;
}
A
{
cursor: pointer;
text-decoration: none;
}
</style>
</head>
<body>
<DIV id="images" class="TABLE">
<P>
<IMG src="images/smallthumb.gif" />
Texten under
</P>
<P>
<IMG src="images/smallthumb.gif" />
Texten under
</P>
<P>
<IMG src="images/smallthumb.gif" />
Texten under
</P>
<P>
<IMG src="images/smallthumb.gif" />
Texten under
</P>
<P>
<IMG src="images/smallthumb.gif" />
Texten under
</P>
</DIV>
</body>
<SCRIPT type="text/javascript">
function centerImage(theImage)
{
alert(theImage.width + ' x ' + theImage.height);
}
var theTarget = document.getElementById('images');
var imgtags = theTarget.getElementsByTagName('IMG');
for (var i = 0; i < imgtags.length; i++)
{
var img = imgtags.item(i);
centerImage(img);
}
</SCRIPT>
</html>
</code>Sv: Förenkla HTML
http://csszengarden.com/
Du har många olika exempel men koden är den samma..
Enda skillnaden mellan alla ex. är att det är olika CSS filer och bilder.
Du hittar alla dom olika designerna till höger under "Select a Design".
Denna kod är ganska bra om man vill lära sig lite om XHTML och hur du kan utnyttja CSS till fullo. :)
Hoppas detta har hjälpt dig någonting på vägen ifall du skulle få frågor i framtiden. ;)Sv: Förenkla HTML
Sv: Förenkla HTML
Opera 7 har inte heller några problem... as always ;)
Tobias www.aljapaco.com