webForumDet fria alternativet

Texten flyttar sig

HTML & CSS

6 svar · 555 visningar · startad av Andreas_J

Medlem sedan aug. 20078 inlägg
Frågan#1

Ursäkta den dåliga rubriken, men kom inte på hur jag skulle formulera mig.

Det är så här att jag håller på med en design (html+css) men har stött på ett litet problem. Jag är nybörjare, så det kanske är lätt att fixa..

Sidan har två kolummer och problemet är att texten i de två kolumnerna inte kan ligga brevid varandra. Alltså, om jag skriver text längst upp i kolum 1 så flyttas texten i kolum 2 ner.

Bilder:
http://img489.imageshack.us/img489/8951/33890058xx9.jpg (texten kan inte ligga brevid varandra)
http://img489.imageshack.us/img489/6200/23629526wj5.jpg (texten i den svarta kolumnen kan inte ligga brevid loggan)

När jag kollar på sidan i firefox så funkar allting dock. Texten ligger brevid varandra och texten ("senaste") ligger uppe brevid loggan.

Någon som har nån idé om vad jag gör fel? :)

Medlem sedan juli 20013 378 inlägg
#2

Hmm...

Det är i princip omöjligt att säga utan att titta på din kod eftersom du inte talar om vilken CSS-metod du använder för att lägga ut kolumnerna, vilken <!DOCTYPE du kör med, huruvida bredderna är dynamiska eller fasta och så vidare (det finns många faktorer som kan spela in).

Vill du inte länka till sidan direkt, kan du lägga upp koden (både (X)HTML och CSS!) i "mina filer" här på webForum.

- Och du, välkommen till wF :birp

Medlem sedan aug. 20078 inlägg
#3

hehe, okej. :D

Jag la upp indexfilen och css-filen här : http://member.webforum.nu/12755/

Tack så mycket för välkomnandet och hjälpen! :)

Medlem sedan nov. 20051 596 inlägg
#4

Svårt att se vad du skull kunna ändra på när du "bara" användet class, men med dina paddingar, som IE räknar ut annorlunda än FF så är innehållet för brett.
Du kan t.ex testa att minska bredden i .header till width: 630px, så tror jag att texten kommer komma upp även i IE.
Förmodligen så är det inte en lösning du vill ha, men om du ändrar marginaler och paddingar så kommer det bli skillnad på alla andra ställen också som använder den klassen.

Medlem sedan juli 20013 378 inlägg
#5

Instämmer med tanten.
(får dock inte till dina problem från bilderna genom att bara lägga in text i header och kolumner - men det är enkelt att få till genom att "fulbredda" innehållet - lägg t.ex. in stilen

div{border: 1px solid black}

i stilmallen så utlöser du bägge dina problem så att säga "bakvägen")

Du *kan* ha råkat ut för att en marginal "kollapsat" (se http://www.w3.org/TR/CSS21/box.html#collapsing-margins ) så att innehållet du lagt in ger kolumnen ett marginalvärde (MSIE och FF tolkar detta lite olika i olika sammanhang har jag för mig) vilket skulle kunna förklara att den "containern" som berörs i så fall sedan blir för bred (iom att margin ligger "utanför" width). Prova t.ex. att göra indraget för ul med padding istället för med margin och se om det gör skillnad... Jag får (som sagt) inte till problemet du upplever i MSIE7/XP bara genom att lägga in text..

Att lämna "lite moms" (ett par pixel eller så) mellan kolumnerna när man kör med float-kolumner och sedan göra alla indrag enbart med padding är f.ö ett standardrecept som jag har bra erfarenhet av sedan länge
Och även om jag glömt bort var jag hittade den kokboksmetoden nånstans så har det arbetssättet funkat bra för mig.

Lycka till - och fråga igen (med mer detajer ;) ) om du kör fast igen :bire

Medlem sedan nov. 20051 596 inlägg
#6

Ett sätt är att "färglägga" sitt innehåll under tiden man jobbar, så syns fel lite lättare... Tog ner din sida för illustrera det... IE6 först och FF sist.
Jag kan se nu att det inte skulle räcka med att minska 10px på loggan utan det är den gröna som bör bli mindre...

IE.jpgff.jpg
Medlem sedan aug. 20078 inlägg
#7

ahh, tack så mycket tanten och jarvklo! :D

Mycket bra tips med färgerna där, såg man ju direkt hur det låg till :) Det var bilderna som jag hade i den högre kolumnen som gjorde kolumnen för bred, minskade lite på dom så nu ligger allt som det ska :)

Tackar, jag kommer säkert göra mer trådar under skapandes gång, ses! :)

313 ms totalt · 4 externa anrop · v20260731065814-full.6fe65c25
123 ms — deklarationer (db)
0 ms — hämta statistik (cache)
134 ms — hämta tråd, inlägg och bilagor (db)
175 ms — ändringar (db)