Drewamweaver - CSS problem

[fjed]

Så här ser det ut i Dreamweaver:


Grejerna ligger ovanpå varandra, men i webbläsaren ser det normalt ut. Alltså såhär:


Om jag skriver  float: inherit; så blir det rätt i dreamweaver men Centrerat men det ska vara vänster justerat. Alltså  float: left; Men det är då de hamnar ovanpå i Dreamweaver. Så hur ska jag skriva så de inte hamnar ovanpå varandra i Dreamweaver?

[Daniel_82]

Använder du Internet Explorer?
I så fall är det det som är problemet. Internet Explorer är inte CSS-kompitabel, utan du måste skriva dubbel/extra kod för Internet explorer.
Som tur väl är så ska IE 8, som finns i beta-version nu, vara fullt CSS-kompitabel.

Testa att kolla sidan i t.ex. Firefox så skulle jag tro att det ser rätt ut.

För att lösa problemet kan du testa att använda dig av float: left men lägg även till clear: left på rutan som ska vara längst ned (eller clear: right på rutan som ska vara längst upp)

[fjed]

På något lustigt sätt så lyckades jag lösa det ändå, men har ingen aning om hur jag gjorde. Men nu kom problem 2.

Brevid texten ska jag ha bilder, så jag har tänkt lägga upp en "cell" på högersidan där bilderna ska vara. Men cellen hamnar på högersidan men längst ner. Och i Firefox visar den att den är utanför själva sidan, alltså inte i samma cell som cellen med texten är i. Så här ser det ut i Dreamweaver.
Den med blå markering ska hamna högst upp i samma höjd med texten.
 

[Daniel_82]

Du nämner celler. Använder du dig av tabeller för att positionera sakerna på sidan?
Eller använder du '<div>'-taggar?

Använder du tabeller, så kontrollera att rutan som 'hoppar ned' inte råkat hamna utanför table-taggarna. Kontrollera även vilken bredd du angivit för tabellen. Är inte tabellen tillräckligt bred så får inte alla rutor plats och då kan sådana här problem uppstå.

Om du använder div-taggar, kontrollera om du har angett "clear: right" eller clear: both" på den översta vänstra rutan?
I så fall är det det som orsakar "felet". clear innebär att du 'rensar' upp allt som finns på den sida om objektet som du anger. Om du t.ex anger "clear: right" på en ruta så kommer allt som finns till höger om den rutan att hoppa ned och hamna nedanför rutan.
Samma sak gäller om du har angivit "clear: left" på rutan som ska vara till höger. Då 'rensas' allt till vänster om rutan och det kommer alltid att hamna längst till vänster.

Även om du använder dig utav div-taggar så kan det handla om en felangiven bredd för någon ruta, men det ser inte ut så på bilden - det ser mer ut som ett fel med 'clear'- eller 'float'-egenskaperna.

[fjed]

Glömde tacka för hjälpen
Det har löst sig någelunda, det ser rätt ut på hemsidan och det hamnar nu rätt i dreamweaver också. Förutom att i dreamweaver blir inte cellerna centrerade. Det är inget jätte allvarligt fel, för den går att använda. Men om det finns en enkel lösning till varför det inte blir centrerat i dreamwever så är jag tacksam.

Jag använder mig av <div> taggar.
Jag provade testa hemsidan med firefox och sökte efter fel på sidan. då fick jag en del följande fel. Varning: Fel vid tolkningen av värdet för egenskapen ?float?.  Ignorerad deklaration.
Källkodsfil: http://127.1.1.1/scootermusic/styles.css
Rad: 37

Så verkar vara något fel i cssn?

Här postar jag det den klagar på.

#right
{
 width: 420px;
 margin: 0px;
 float: center;
 background-color: #d2d1d1;
 border-bottom:solid;
 border-left:solid;
 border-right:solid;


Men jag kan tänka mig att det inte finns något som kallas float: center;
Att det är det den klagar på. Men vad ska jag skriva för den ska hamna centralt på sidan?

[JoAr]

Float finns bara som right eller left så vitt jag minns. Hanteringen av float-taggen i CSS är f.ö. något som är rätt buggigt i IE 6 och 7.

Vill du centrera text kan du använda
text-align:center;

IE 6 och 7 stödjer absolut CSS, men det finns massor av buggar som gör att man måste arbeta sig runt dessa och det finns en del taggar som inte är implementerade så som standarden följer. Så CSS-kompatibel är ett luddigt begrepp. Det finns buggar i all CSS tolkning, inklusive Opera och FireFox. Men börja i vilket fall med att göra sidor för Opera och FireFox och testa sedan av dem i IE och patcha runt det som behövs. Det finns sidor på nätet som är fulla med tips på Internet Explorer hack för att komma runt buggar.

Se också till att validera din html-kod så att den följer standard. I Opera kan man göra det genom att högerklicka på sidan och välja Validate. Tycker det fungerar bättre än Dreamweavers validering, men jag har inte senaste versionen. Dreamweaver rendrerar inte heller sidorna korrekt i alla lägen utan det kan se annorlunda ut i webbläsaren, men jag har återigen inte senaste versionen av Dreamweaver så det har kanske bättrats på i nyare versioner.

CSS-kod är ett plus om också den är validerad. Det är dock rätt svårt att skriva helt validerbar CSS-kod som funkar i alla webbläsare då IE hacken ofta bryter mot CSS reglerna medvetet och det är det man utnyttjar för att få det att funka. Att använda Dreamweaver eller dyl. är ingen garnati för att automatgenerarad HTML och CSS kod är validerbar, snarare tvärtom.

Följande bör du ha i varje html-fil högst upp för att kunna validera HTML-koden korrekt på sidorna.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

[Daniel_82]

Inga problem...

Det är inte alltid det grafiska gränssnittet i webbdesign-programmen stämmer överrens med hur det ser ut i webbläsarna. Det är delvis pga det som jag brukar rekommendera att man lär sig koda sina sidor själv istället. Man bör alltid kontrollera sidan i en eller flera webbläsare när man gjort någon ändring och inte förlita dig på hur det ser ut i det program man använder sig av (Dreamweaver i ditt fall).



Angående float-egenskapen så har du helt rätt - värdet "center" finns inte för float.

För att centrera något får man använda sig av andra metoder. Det beror på lite vad man vill centrera. För text anger du bara "text-align: center;"

För att centrera en ruta (div-tagg, tabell, bild m.m) finns egentligen inget enkelt sätt. Man får helt enkelt lägga in en marginal till vänster om rutan (margin-left: ) och testa sig fram tills det ser bra ut.
Ett alternativ är att lägga in en "osynlig" ruta till vänster om den rutan du vill förflytta åt höger.
Lägg i så fall in en ny ruta till vänster om din ruta och ange bredden för den nya "osynliga" rutan så att den knuffar din ruta åt höger tills du är nöjd (lät invecklat, men du förstår nog vad jag menar).
Att få rutan osynlig är inget större problem - se bara till att den inte har några kantlinjer eller någon bakgrundsfärg.


Annars får man använda sig av det gamla sättet med tabeller istället för CSS när man gör layouten för sin sida.
Att få saker som man vill var betydligt enklare med tabeller, och många använder fortfarande den metoden.




Edit: Såg nu att JoAr hann före...

[fjed]

Sådärja! Tackar för era svar! Då har jag lärt mig en del nytt.

[fjed]

Nu kom jag till problem 2!

Det är inte bara i Dreamweaver det ser konstigt ut, även i Firefox ser det inte lika snyggt ut om i IE7. Firefox tar fel på några pixlar bredd så det ser inte snyggt ut!.

Sidan är uppe på en liten gratis server så ni kan kolla där med era webbläsare. http://scootermusic.net63.net/home.php

I CSSen har jag angett följande när det gäller med menyn:
#menu
{
margin: 125px 0px 0px 83px;
border: solid;
width: 620px;
height: 45px;
background:#CCCCCC;
position:fixed;

Menyn ska gå jämt med bannern. Bannern är 628 px bredd. Ändrar jag i menyn på cssen till 628px bredd så ser det rätt ut i Firefox men fel i IE7.

[Alexa]

Använder du rätt Doctypes? Mer information om det finns här!
Internet Explorer 7 hanterar inte koden korrekt som i Firefox 3 alltid gör. I Internet Explorer 8 som kommer ut inom kort är detta fixat.
Ett tips kan vara att kontrollera koden och det gör du via http://validator.w3.org/ och http://jigsaw.w3.org/css-validator/

[fjed]

Ja jag tror jag använder rätt iallafall. Det jag använder är iallafall <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Tack för länkarna! De visade en del fel, men inget med menyn eller just det jag letar efter hittar jag inget om.

[fjed]

Nu tror jag att jag har lyckats lösa det. Ser bättre ut nu iallafall. Tack för all hjälp