Lite frågor om css i allmänhet (och några i synnerhet)

5 svar · 606 visningar · startad av pakmannen 20 sep. 2005

pakmannenMedlem sedan dec. 2002227 inlägg

Frågan20 sep. 2005 18:58#1

Jag har använt mig av css ganska länge nu, och visst, jag kan en del. Men det känns fortfarande som om jag liksom inte greppat det fullt ut. I synnerhet inte tekniken för övergripande sidlayout (läs kolumner. grr.). Och att försöka göra sidor lite mindre enligt pixelmåttet och lite mer baserat på % är förvirrande, särskillt när man ska ha bakgrundsbilder och grejer. Okej, känns som jag har gnällt tillräckligt nu, till frågorna. :)

1. Okej, först vill jag veta hur man löser ett sånt här problem utan att använda fasta pixlar. Bild 1

Länken visar ett litet formulär där rubriken formaterats så den får en bakgrundsbild med lite rundade hörn. Bilden är ju 200px bred så om själva div:en där formuläret och rubriken ligger är bredare än så sträcks ju inte direkt bilden ut. Hur löser man bäst något sånt här?

2. Formuläret är sedan gjort med en tabell. Borde man formatera det med div:ar? Alltså lägga varenda ord och varenda input i varsin liten div med en class? Är det "bättre?". Ska man använda tabeller alls?

3. Säg att jag vill ha en sida med tre kolumner. Okej, först placerar jag dom med float. Sen ska jag ange bredden. Om man kör auto så lägger sig ju div:en nedanför om innehållet blir för långt, så man måste ju ange någon sorts bredd. Om jag kör med pixlar så brukar det väl fungera i största allmänhet, men det brukar ju alltid bli någon liten skillnad i olika browsers som kan få följden att en div blir för "bred" och hoppar ner.

Då kan man ju använda sig av % då. Fungerar bra i många lägen, men även det tolkas ju lite olika i explorer osv. Men bredden är fortfarande fast. Går det att få samma effekt som man får när man använder sig av en 100% bred tabell med tre celler, alltså att om innehållet i en cell är större än 33% så ökas bredden och en annan cell skalas ner?

Det blev ett långt inlägg. Dags att vila hjärnan lite nu.. :)

CheguelinMedlem sedan juli 2003303 inlägg

20 sep. 2005 20:49#2

1. Kanske såhär: http://stilmall.se/tamja-formular/ Verkar i och för sig lika semantiskt korrekt som att använda tabell tycker jag, men jag vet inte så noga. Det är ett alternativ i alla fall. :-)

Angående headern: http://www.456bereastreet.com/archive/200406/css_teaser_box_revisited/ Verkar läsvärd.

2. Helst ska du använda tabeller till formulär, men alltså, jag tycker att det är krångligt utan och har inga finfina förslag på hur man ska göra. Man kanske ska använda en label med en width uttryckt i em och en fixed input bredvid.

3. Jadu, jag kör nog med %, det som blir knasigt är när man blandar mått uttryckt i procent och mått uttryckt i pixlar. Sätt padding, margin och sådär med procent. Glöm att göra pixelperfekta grejer för det blir bara tok :-)

zcorpanMedlem sedan dec. 20042 245 inlägg

20 sep. 2005 22:11#3

FIELDSET/LEGEND skapades för att gruppera formulärobjekt, men det funkar lite sådär att ange stilregler för en LEGEND i vissa webbläsare... Men så här skulle man kunna göra:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <title>Beställ katalog</title>
  <style type="text/css">
   html { font:65% "Verdana", sans-serif; }
   form { position:relative; padding-top:2.5em; width:20em; }
   fieldset { border:none; padding:0; }
   legend span { position:absolute; top:0; left:0; width:19.5em;
                 background:#95AF94; border:.2em solid; 
                 border-color:#A0B1A1 #C0C2B4 #869A81 #ACB6AB; 
                 line-height:1.8; -moz-border-radius:.2em; 
                 border-radius:.2em; text-align:center;
                 font-weight:bold; color:white; }
   label { float:left; clear:left; }
   input { margin-left:9em; margin-bottom:.2em; display:block;
           font-size:100%; width:10em; border:1px solid #ddd; }
   * html input { margin-bottom:0; }
  </style>
 </head>
 <body>
  <form action="#">
   <fieldset>
    <legend><span>Beställ katalog</span></legend>
    <label for="kontaktperson">Kontaktperson:</label>
    <input id="kontaktperson" name="kontaktperson">
    <label for="foretag">Företag:</label>
    <input id="foretag" name="foretag">
    <label for="adress">Adress:</label>
    <input id="adress" name="adress">
    <label for="postadress">Postadress:</label>
    <input id="postadress" name="postadress">
    <label for="telefon">Telefon</label>
    <input id="telefon" name="telefon">
    <label for="fax">Fax:</label>
    <input id="fax" name="fax">
    <label for="email">E-mail</label>
    <input id="email" name="email">
   </fieldset>
  </form>
 </body>
</html>

pakmannen skrev:

Går det att få samma effekt som man får när man använder sig av en 100% bred tabell med tre celler, alltså att om innehållet i en cell är större än 33% så ökas bredden och en annan cell skalas ner?

Ja visst, med display:table och display:table-cell. ;)

pakmannenMedlem sedan dec. 2002227 inlägg

21 sep. 2005 12:45#4

zcorpan skrev:

Ja visst, med display:table och display:table-cell. ;)

*Bangs head* TACK!

Tack för de övriga svaren också, jag ska kolla in länkarna

pakmannenMedlem sedan dec. 2002227 inlägg

21 sep. 2005 15:22#5

Men vad tusan, fungerar inte display:table-cell i Internet Explorer? Vad gör man då?

zcorpanMedlem sedan dec. 20042 245 inlägg

21 sep. 2005 15:49#6

pakmannen skrev:

Men vad tusan, fungerar inte display:table-cell i Internet Explorer?

Nope. :(

pakmannen skrev:

Vad gör man då?

Missbrukar <table>? :i §e