WN

WN (https://www.wn.se/forum/index.php)
-   Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)
-   -   CSS som gäller idag? (https://www.wn.se/forum/showthread.php?t=28783)

Jonathan P 2008-08-07 11:26

Citat:

Originally posted by Syke@Aug 7 2008, 07:35
På en rad med enbart liggande bilder, ha en viss höjd på raden med bilderna centrerade i mitten (vertikalt).
På en rad med enbart stående bilder, ha en viss höjd på raden med bilderna centrerade i mitten (vertikalt).
På en rad med både stående och liggande bilder, ha en konstant höjd på raden (samma höjd som de stående bilderna + lite mellan rum). Samtidigt ha de liggande bilderna centrerade i mitten (vertikalt).

Wrappa bilderna i en container div, och sätt följande egenskaper på diven.
Kod:

display: table-cell;
vertical-align: middle;

Jag har inte provat det men det borde lösa det...

KarlRoos 2008-08-07 11:35

Citat:

Originally posted by Syke@Aug 7 2008, 10:20
Ett annat alternativ är att ha en css-fil som genereras dynamiskt beroende på vad HTML-sidan innehåller, men det har jag inte gjort på denna site (har aldrig funderat på hur det skulle gå till överhuvudtaget).

<?php
header("Content-Type: text/css");
?>

Syke 2008-08-07 12:31

Citat:

Ursprungligen postat av Jonathan P
Wrappa bilderna i en container div, och sätt följande egenskaper på diven.
Kod:

display: table-cell;
vertical-align: middle;

Jag har inte provat det men det borde lösa det...

Att wrappa varje bild i en div är inget alternativ, det är minst lika fel som att använda en tabell. Däremot kanske man kan göra varje LI till table-cell .. hmm ..

<!--QuoteBegin--KarlRoos[/i]
<?php
header("Content-Type: text/css");
?>
[/quote]

jo, men hur inkluderar man den CSS:en i just den HTML-filen? Blir det något i stil med:
Kod:

<link type="text/css" href="includes/galleryCSS.php?sammagetstringsomHTMLsidanhar" rel="stylesheet" media="screen" />

KarlRoos 2008-08-07 13:17

Citat:

Originally posted by Syke@Aug 7 2008, 12:31
jo, men hur inkluderar man den CSS:en i just den HTML-filen? Blir det något i stil med:
Kod:

link type=text/css href=includes/galleryCSS.php?sammagetstringsomHTMLsidanhar rel=stylesheet media=screen /

That's right.

Syke 2008-08-07 13:55

Citat:

Ursprungligen postat av KarlRoos
Citat:

Ursprungligen postat av Syke
jo, men hur inkluderar man den CSS:en i just den HTML-filen? Blir det något i stil med:
Kod:

link type=text/css href=includes/galleryCSS.php?sammagetstringsomHTMLsidanhar rel=stylesheet media=screen /

That's right.

Måste testas, vi får se om det löser problemet, även om det är en ganska omständig lösning på ett litet problem :)

goose 2008-08-07 21:36

Hej,

Jag har ett problem som jag inte lyckats lösa med div's som kanske någon av er som är duktiga på css och sånt kan lösa. Jag har en sida med tre divar bredvid varandra; left, content, right. Där left och right bara innehåller en bakgrundsbild som repeteras. Content kan vara olika hög på olika sidor, så att sätta en height funkar liksom inte. När jag kör IE så ser sidan bra ut, divarna left och right anpassar sig till rätt höjd, men i FF så ser man bara en bild, dvs bilden autoanpassas inte höjdmässigt till content. Hur fixar man detta?

allstars 2008-08-07 21:46

googla på faux columns

snabbt förklarat så har man en bakgrundbild i föräldradivven (wrapper) till dina tre övriga divvar.
Kod:


<div id="wrapper">
<div id="left">innehålll</div>
<div id="middle">innehålll</div>
<div id="right">innehålll</div>
</div>


goose 2008-08-07 22:03

aha, så istället för att dela upp sin bakgrund i tre delar left.jpg, content.jpg och right.jpg, så gör man en bg.jpg som är lika bred som själva sidan och sen kör man den i wrapper? kanonsmart, tack för hjälpen.

allstars 2008-08-07 22:31

spot on!

Robert 2008-08-07 22:50

Folk som nämner "semantisk html" och "div" i samma mening inser knappast tankevurpan.

Folk som tycker "css" är motsatsen till "tabeller" har också en läxa att läsa på.

Html (eller snarare xhtml) och css ska ses som två lager: en databärare och ett presentationslager. Att jämföra dessa är som att jämföra äpplen och päron. Och för de som är för semantiskt korrekt html och ser på detta som en religion vet att dom samtidigt måste vara otrogna varje gång de designar en sida då de använder exempelvis div'ar ENDAST i layoutsyfte, dvs de styr layouten från html-koden. Detta är ju den begränsning vi alla får leva med då CSS i dagsläget inte klarar av att helt axla ansvaret att sköta all layout. En sann databärare är ju XML, men det är inte det lättaste att få till snyggt på en klient...

Tills den dagen kommer så får vi stå ut med en soppa av nästlade div'ar blandat med semantisk korrekt html. För mig skulle dessa div'ar lika gärna kunna vara en tabell, det är liksom lika fel, men jag håller mig till containrar av modellen div då jag tror på framtiden... ;)

Syke 2008-08-08 07:58

Oj, här kommer brinnande fackla :)

Citat:

otrogna varje gång de designar en sida då de använder exempelvis div'ar ENDAST i layoutsyfte, dvs de styr layouten från html-koden.
På sätt och vis kan jag hålla med dig att en DIV styr presentationen, eftersom den påverkar layout och flödet på en sida. Det finns som du säger ingen total separation mellan presentation och innehåll i HTML. Men semantik handlar om att ge innehållet en betydelse genom att märka upp det med element som förklarar vad innehållet är. Och att då ha t.ex. två kolumner i varsin DIV kan fortfarande ses som korrekt eftersom elementet DIV betyder uppdelning och är till för att dela upp en sida i olika delar. Det ger ju också de verktyg som ska läsa koden en möjlighet att förstå att DIV:en i sig inte är särskilt viktig information att t.ex. läsa upp på en skärmläsare.

Att likställa DIV:ar med tabeller tycker inte jag håller riktigt..

Disclaimer: Det är tidigt på morgonen och jag kanske har gjort någon tankevurpa, so be it :)

Syke 2008-08-08 08:40

Tillägg: Jag ser inte riktigt hur semantiskt korrekt kod har att göra med diskussionen om separation av innehåll och presentation. Man kan fortfarande ge innehållet rätt betydelse, oavsett om elementet sen snurrar texten upp och ner och ger den två olika skrikiga färger.

... men jag blir mer än gärna upplyst i saken!

stakes 2008-08-08 09:32

Kan bara hålla med Syke här, en div och en span har inget semantiskt värde, en tabell har det.

Framtidsutopin har länge varit att någon gång skall all data på webben vara XML (XHTML 2.0), dock insåg man att detta inte var realistiskt, och det är därför man har återupptagit utvecklingen av HTML -> http://www.alistapart.com/articles/previewofhtml5
En till intressant artikel med lite bakgrundshistorik: http://immike.net/blog/2008/02/06/xhtml-2-vs-html-5/


Alla tider är GMT +2. Klockan är nu 20:54.

Programvara från: vBulletin® Version 3.8.2
Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.
Svensk översättning av: Anders Pettersson