Sååå, hur ska jag xhtml:a till den här html-snutten?

Kolla in http://www.456bereastreet.com/lab/flexible_custom_corners_borders/

mv icaaq

tack, verkar vettigt - men jag kan inte hitta hur man faktiskt gör det :)

1. Använd xhtml 1.0 Transitional
2. Validera koden - Du kommer att se att det enda du behöver göra är att ta bort height som attribut, och istället lägga in height: i de style-attribut du redan har.
3. Gör om alla <img ...> till <img ... />

Klart!

Att köra med XHTML är inte svårare än att köra med validerande HTML!

Kör man Transitional kan man tillochmed fortsätta använda <font>-taggar på samma sätt som man kan i HTML4 Transitional om man skulle vilja det ;)

... och det finns heller inget som förbjuder dig att använda tabeller för layout i XHTML, vare sig i Transitional eller Strict - Precis lika lite som det finns något "tabellerförlayoutförbud" i HTML 4 ;)
http://www.webforum.nu/showthread.php?s=&postid=1040006#post1040006

Jag tror faktiskt att bassebhu menade "Sååå, hur ska jag strict:a till den här transitional-snutten?"

Dvs, använda rätt element till rätt grejjer... Att det står ett "X" före HTML har mindre med saken att göra. :)

Nu har jag inte bilderna, så jag har ingen aning hur du vill att det ska se ut... Men som jag ser det borde koden se ut ungefär såhär:

<p>Innehåll i min lilla box</p>

...och om det behövs så kan du slänga dit några DIVar runt stycket för att applicera bakgrundsbilder på. ;)

zcorpan skrev:

Jag tror faktiskt att bassebhu menade "Sååå, hur ska jag strict:a till den här transitional-snutten?"

Ja i så fall - Då behöver du i princip bara flytta in "width" (och ev. "border") i dina befintliga style-attribut också - i övrigt fungerar (och validerar) den lösning jag beskrev även i XHTML 1.0 Strict!

Jag håller med om att frågan "Tabeller eller inte" ingenting har att göra med om man använder HTML eller XHTML, men den har faktiskt heller inte ett jota med skillnaderna mellan Strict och Transitional att göra om man nu skall vara så petig :bla

Och ärligt talat - att "slänga in några DIVar" är väl varken mer eller mindre "rent" kodmässigt än att ta till en tabell - jag menar, hur man än vänder och vrider på semantiken så skapar man ju artificiellt utrymme för layoutändamål med taggar som är avsedda för dokumentstruktur oavsett om taggen är <td> eller <div> - eller hur :P

Och om man nu skall vara riktigt riktigt noga så är väl det att rata äpplen till förmån för päron och hävda att man har valt en häst - dvs det är inte helt uppenbart att det ena är "striktare" än det andra eftersom det bara är två olika sätt att "tweaka" strukturen för layoutändamål :moose

Oh well
BasseBoy - om du menar att få till runda hörn utan tabeller, så hjälper vi dig gärna med det om inte artikeln som icaaq länkade till hjälper.
Menar du det som står i frågan (att gå över till XHTML) så behöver du i princip inte göra speciellt mycket utöver det som du ändå hade behövt göra för att få din sida validerad - oavsett om du har tabellen liggande i ett dokument som är HTML4 Strict eller HTML4 Transitional (se mina svar ovan) :birp

Ja, fast DIV är en generisk "container", medan TD har en helt annan semantisk betydelse. Det handlar inte om huruvida dokumentet validerar eller vilken DOCTYPE man använder, utan om att man använder rätt element till rätt sak. Att använda en tabell för layoutändamål är klart fel semantiskt sett. Om man har fyra DIVar runt ett stycke är ju förstås meningslöst ur en semantisk synvinkel, men det försör inte semantiken. Det är fortfarande ett stycke.

Om vi kunde använda CSS3 hade vi inte ens behövt slänga in några DIVar, eftersom då hade border-image och dess vänner gjort jobbet åt oss. Men just nu kan vi bara använda CSS2.1, och om vi vill vara snälla mot IE kan vi inte ens använda ::before- eller ::after-pseudo-elementen. Därför kan vi behöva använda några meningslösa DIVar för att hänga upp stilregler på.

zcorpan skrev:

Om man har fyra DIVar runt ett stycke är ju förstås meningslöst ur en semantisk synvinkel, men det försör inte semantiken. Det är fortfarande ett stycke.

Njae - Du får rent semantiskt ett stycke i en container i en container i en container i en container - Titta på dokumentet via DOM får du se...

... och semantiskt är "ett stycke i en container i en container i en container i en container" lika stort "förstörande av semantiken" som "en tabell med ett stycke i en cell på en rad" om man semantiskt egentligen menar "ett stycke".

... och om vi nu skall vara så inibängen noga med att hacka på det ena, borde vi IMHO även hacka på det andra om det enda skälet "strukturellt" eller "semantiskt" - Fast jag förespråkar inte den destruktiva petimeterigheten utan tycker att bägge är lika användbara genvägar förbi visuella renderingshinder så länge man har koll på skillnaderna :birp

Därför kan vi behöva använda några meningslösa DIVar för att hänga upp stilregler på.

Ja, eller (med exakt samma resonemang om brister i buggiga webbläsare) en meningslös tabell eftersom bägge tillvägagångssätten är "strikt", "strukturellt" och "semantiskt" lika meningslösa och alltså borde värderas på samma sätt eftersom bägge är "meningslösa" hack vars enda syfte är att ta sig förbi brister i aktuella renderingsmotorer :bla

Återigen - Låt oss ägna mer av vår tid på att besvara frågor istället för att ödsla den på att mästra varandra (och frågeställarna) med en massa pekpinnar (oavsett om de baserar sig på missuppfattningar eller ej)

Eller som jag brukar säga "teach - don't preach" :birp

Låt oss jämföra.

<div class="box"><div><div><div>
 <p>Text</p>
</div></div></div></div>

och

<table class="box"><tbody><tr><td>
 <p>Text</p>
</td></tr></tbody></table>

Vad säger specifikationen om DIV?

The DIV and SPAN elements, in conjunction with the id and class attributes, offer a generic mechanism for adding structure to documents. These elements define content to be inline (SPAN) or block-level (DIV) but impose no other presentational idioms on the content. Thus, authors may use these elements in conjunction with style sheets, the lang attribute, etc., to tailor HTML to their own needs and tastes.

Visst - men min punkt är att du lägger till struktur i dokumentet för att "fejka" dig förbi en visuell begränsning om du gör så oavsett vilken av metoderna du använder... Du citerar det ju själv - en DIV är

a generic mechanism for adding structure to documents.

Dvs - du kan helt enkelt inte nästla flera DIVar på det där sättet utan att påverka dokumentets struktur ;)

Bägge dina lösningar innehåller exakt samma dokumentstruktur och i bägge fallen innehåller de en massa "onödiga" element som skapar ett strukturmässigt (och i viss mån även semantiskt) onödigt komplicerat dokumentträd med enda syfte att "kunna få till" visuella effekter när dokumentet renderas visuellt.

Men jag menar, som sagt, att det är precis lika "fel" eller "rätt" (hur man nu ser på saken) att manipulera ett dokuments struktur med enbart DIV-taggar som det är att göra det med en tabell när det bara är i syfte att påverka den delmängd renderingar av ett dokument som råkar vara visuella och att det därför kan vara precis lika "fel" eller "rätt" att ta till en tabell som att mass-nästla div-element

... och i vilket fall som helst har det inte ett smack med konvertering av kod från HTML till XHTML att göra (hint - jag syftar på trådämnet) :moose

Så låt mig nu återigen citera mig själv:

jarvklo skrev:

Låt oss ägna mer av vår tid på att besvara frågor istället för att ödsla den på att mästra varandra (och frågeställarna) med en massa pekpinnar

:birp

Ok, ledsen för att missuppfatta frågan och för OT.

Ett enkelt sätt att konvertera till XHTML är att låta Tidy göra jobbet. ;)

zcorpan skrev:

Nu har jag inte bilderna, så jag har ingen aning hur du vill att det ska se ut... Men som jag ser det borde koden se ut ungefär såhär:

<p>Innehåll i min lilla box</p>

...och om det behövs så kan du slänga dit några DIVar runt stycket för att applicera bakgrundsbilder på. ;)

Det är en vanlig box bara. Hur lägger jag dessa divar i så fall?

Ni säger att det är ute med tabeller. Hur får jag då min box med bakgrundsbilder runt?

ok... lägger till följande fråga.
vilket attribut är det som gör att jag kan ha flera divar i sidled som om det vore celler? skapar jag flera divar så lägger de sig under varann nu.

jag skulle behöva läsa på om det här. länkförslag?

bassebhu skrev:

Det är en vanlig box bara. Hur lägger jag dessa divar i så fall?

Ni säger att det är ute med tabeller. Hur får jag då min box med bakgrundsbilder runt?

Hmm...
Tabeller har sina för- och nackdelar som sagt...
Ibland kan de vara praktiska och ibland inte...
IMHO är det därmed att de är "ute" diskuterbart (som sagt §e )...

Men i den frågan får du avgöra själv och jämföra teknikerna ;)

Så...
Om du vill utgå från samma bilder som du har i din tabell-lösning kan du t.ex. "bara lägga till några divar" såhär:

<div>
  <div style="background-image: url(images/main_tc.gif); height:10px; overflow:hidden;">
    <div style="float:left; height:10px; width:10px; background-image: url(images/main_tl.gif);">&amp;nbsp;</div>
    <div style="float:right; height:10px; width:10px; background-image: url(images/main_tr.gif);">&amp;nbsp;</div>
    &amp;nbsp;
  </div>
  <div style="background-image: url(images/main_ml.gif); padding-left:10px;">
    <div style="background-image: url(images/main_mr.gif); background-position: right; padding-right:10px;">
      <div style="background-image: url(images/main_bg.gif);">
        Innehåll i min lilla box
      </div>
    </div>
  </div>
  <div style="background-image: url(images/main_bc.gif); height:10px; overflow:hidden;">
    <div style="float:left; height:10px; width:10px; background-image: url(images/main_bl.gif);">&amp;nbsp;</div>
    <div style="float:right; height:10px; width:10px; background-image: url(images/main_br.gif);">&amp;nbsp;</div>
    &amp;nbsp;
  </div>	
</div>

Om du vill meka om dina bilder kan du komma ner på en lite kortare kod genom att du då kan välja att placera dina divar "lite effektivare" sinsemellan (se t.ex. icaaq:s svar ovan)

vilket attribut är det som gör att jag kan ha flera divar i sidled som om det vore celler? skapar jag flera divar så lägger de sig under varann nu.

Kombinera en fast bredd på varje div med stilen float:left... Lä gger du flera sådana efter varandra i koden, kommer de att fylla upp en rad successivt tills utrymmet i sidled "tar slut".

En sak att tänka på dock - Du kan inte enkelt få två divar med float:left som hamnar bredvid varandra att bli lika höga om du inte använder absoluta mått på deras respektive höjder...

Schyrreburre. Det var nästan nåt sånt jag kom fram till efter en jevvla maassa timmars testande igår. Blev sängen kl. 5 innan jag gav upp halvvägs :) Problemet jag stötte på var att jag ville lägga den där koden i en annan div och när jag började att använda float så försvann bakgrunden i content-diven av nån anledning. Samma sak om jag använde <P>-taggen först i diven.

Svårt att förklara. Vet vad jag gjorde för fel med hjälp av den beskrivningen hehe?

Tack hur som helst. Ska testa mer ikväll, men jag slänger nog in värdena i css-mallen i stället för med style..

jarvklo: tack för svaret, det var det jag var ute efter :)

MEN, din princip bygger på att man i "tr"-diven anger boxens mainbild så att säga och i varje hörn av den så lägger man kantbilder. Problemet jag då får är att jag har genomskinliga hörn på mina kantbilder och mainbilden visas därför utanför kantbilderna.

Hur ska jag lösa det? Alternativet jag har luskat ut är att ge kantbilderna samma bakgrundsfärg som på hemsidan, men då har jag erfarenheten att den färgen och sidans bakgrundsfärg inte stämmer överens så bra (trots att det är exakt samma hex-färg) och man då får fula kanter (på en del datorer, varför vet jag inte. det enda jag vet är att det har funkat bättre med genomskinliga kantbilder)...

Har lyckats knåpa ihop det här. Hur gör jag om jag vill att boxen (sub) ska kunna bli 100% utan att den spricker?

/* CSS */
#container {
	width: [b]960px[/b];
	margin: 10px auto 10px auto;
}
#main {
	width: 757px;
	float: left;
}
#sub {
	width: [b]196px[/b];
	float: right;
}

/* Header */
/* oviktig kod här */

/* Body */
/* oviktig kod här */

/* Sub */
#sub_tl {
	width: [b]14px[/b];
	height: 14px;
	background: url(../images/sub_tl.gif) no-repeat;
	float: left;
}
#sub_tm {
	width: [b]168px[/b];
	height: 14px;
	background: url(../images/sub_tm.gif) repeat-x;
	float: left;
}
#sub_tr {
	width: [b]14px[/b];
	height: 14px;
	background: url(../images/sub_tr.gif) no-repeat;
	float: right;
}
#sub_ml {
	width: 14px;
	background: url(../images/sub_ml.gif) repeat-y;
	float: left;
}
#sub_bg {
	width: 100%;
	background: url(../images/sub_bg.gif) repeat;
	float: left;
}
#sub_mr {
	width: 14px;
	background: url(../images/sub_mr.gif) repeat-y;
	float: right;
}
#sub_bl {
	width: 14px;
	height: 14px;
	background: url(../images/sub_bl.gif) no-repeat;
	float: left;
}
#sub_bm {
	width: 168px;
	height: 14px;
	background: url(../images/sub_bm.gif) repeat-x;
	float: left;
}
#sub_br {
	width: 14px;
	height: 14px;
	background: url(../images/sub_br.gif) no-repeat;
	float: right;
}

<!-- HTML -->

<div id="container">
	<!-- Main -->
	<div id="main">
		<!-- Header, oviktig kod här -->
		<!-- Body, oviktig kod här -->
	</div>
	<!-- Sub -->
	<div id="sub">
			<div id="sub_tl">&nbsp;</div><div id="sub_tm">&nbsp;</div><div id="sub_tr">&nbsp;</div>
			<div id="sub_ml">&nbsp;</div><div id="sub_bg">Sub</div><div id="sub_mr">&nbsp;</div>
			<div id="sub_bl">&nbsp;</div><div id="sub_bm">&nbsp;</div><div id="sub_br">&nbsp;</div>
	</div>
</div>

Om jag byter ut 168px mot 100% så får det inte plats i Sub-diven som endast tillåter 196px. (14px + 14px + 100% != 100%).

Finns det något sätt som jag kan komma runt det där men ändå få en bredd på 100% samt använda genomskinliga kantbilder?

Jättetack! Det börjar att lossna nu :D

r/ det ligger ett & nbsp; i de tomma sub-divarna... wF gjorde om det till mellanslag.

Fast det jag har gjort känns ändå inte helt snyggt. Skulle vilja använda icaaq's förslag, men det var som sagt det där kruxet med kantbilderna... Att byta till vit bakgrundsfärg är inte möjligt.

Scratchar tråden och går tillbaka till min fråga om hur jag gör en sådan box med genomskinliga kantbilder, ELLER hur jag får ogenomskinliga kantbilder att se bra ut mot "hex"-bakgrund (för jag kan väl inte vara ensam om att ha stött på det problemet)?

Taxi!

Nejdå - du är inte ensam...

Läs de fem översta artiklarna i den här sökningen :birp

Vet inte om den här artikeln om transparenta bilder hjälper:

http://www.wpdfd.com/editorial/wpd0604news.htm#feature2

Har bara ögnat igenom den en gång och inte testat om tipsen är bra.