Permalänk
Medlem

Problem med CSS

Jag har ett problem med min CSS kod och Div´ar...
TV&A Scribble - www.schello.se

Om ni går in på den sidan så ser ni att jag har allt i mittenspalten där den ska vara men den texten som är allra längst i botten ska liksom ligga på högra sidan brevid mittenspalten, som en sidebar.

Vore tacksam om nån kan svaret...
// Tulle

* EDIT:
Har lagt upp en länk på sidan där du kan tanka hela sidan, med PHP filer osv.

Visa signatur

Intel Core i5-3570K @ 3.40Ghz / 16 GB ram / 120 GB SSD / 1 TB HDD / Geforce GTX 580 / Acer s273HL 27" LED

- Windows 8? Avgå!

Permalänk
Medlem

på din sidebar har du "width:502;" ingen enhet samt att det tillsammans med den andra överskrider 712px som #allmain har.. kanske är det som spökar?

Permalänk
Medlem

Problemet är att du inte har en bredd på #sidebar.

Sen har du andra problem i koden också, men det är det som direkt gör att det inte fungerar som du vill.

Visa signatur

Kom-pa-TI-bilitet

Permalänk
Permalänk
Medlem

Okej jag lyckades få bort det från botten, men nu har jag ett nytt problem. Hur får jag sidebaren att stanna längst upp med det andra innehållet? Så den inte flyter ner till mitten...

Untitled Document
http://schello.se/tulle/tva/style.css

Visa signatur

Intel Core i5-3570K @ 3.40Ghz / 16 GB ram / 120 GB SSD / 1 TB HDD / Geforce GTX 580 / Acer s273HL 27" LED

- Windows 8? Avgå!

Permalänk
Medlem

Det underlättar felsökning om koden validerar, dvs är "godkänd" och korrekt (i alla fall strukturmässigt), då undviker du många små missar som spökar.
Till att börja med får du endast ha en "id" per namn, om du vill ha många element eller divvar av samma typ ska du istället använda "class".

Om du fixar alla småfel som validatorn meddelar så kommer du att hitta en rad som säger
"Line 49, Column 8: end tag for element "div" which is not open" och det låter då som att du stänger en div för mycket.

EDIT: Vid fixande, fixa bara den första och sedan kolla igen, ett fel i början kan skapa massor med fel längre ner i koden. Sedan fortsätter du så tills alla är fixade

Permalänk
Medlem
Skrivet av jangs:

Det underlättar felsökning om koden validerar, dvs är "godkänd" och korrekt (i alla fall strukturmässigt), då undviker du många små missar som spökar.
Till att börja med får du endast ha en "id" per namn, om du vill ha många element eller divvar av samma typ ska du istället använda "class".

Om du fixar alla småfel som validatorn meddelar så kommer du att hitta en rad som säger
"Line 49, Column 8: end tag for element "div" which is not open" och det låter då som att du stänger en div för mycket.

EDIT: Vid fixande, fixa bara den första och sedan kolla igen, ett fel i början kan skapa massor med fel längre ner i koden. Sedan fortsätter du så tills alla är fixade

Jag har lagt in ny validerad CSS nu, så det ska underlätta att felsöka nu.
Men jag ska kolla igenom om det är så att jag stängt en för mycket, och se om det löser sig.

Visa signatur

Intel Core i5-3570K @ 3.40Ghz / 16 GB ram / 120 GB SSD / 1 TB HDD / Geforce GTX 580 / Acer s273HL 27" LED

- Windows 8? Avgå!

Permalänk
Medlem
Skrivet av hemfrid:

Okej jag lyckades få bort det från botten, men nu har jag ett nytt problem. Hur får jag sidebaren att stanna längst upp med det andra innehållet? Så den inte flyter ner till mitten...

Untitled Document
http://schello.se/tulle/tva/style.css

Den flyter ner för att du har den i slutet av koden: ett element som ska flyta direkt till höger eller vänster om något måste komma innan elementet som det ska flyta vid.

Visa signatur

Kom-pa-TI-bilitet

Permalänk
Medlem
Skrivet av hemfrid:

Okej jag lyckades få bort det från botten, men nu har jag ett nytt problem. Hur får jag sidebaren att stanna längst upp med det andra innehållet? Så den inte flyter ner till mitten....

#allmain {
background-color : #ffffff;
width : 512px;
float: left;
}

#sidebar {
background-color : #ffffff;
width : 200px;
float: right;
margin-top : inherit;
}

Visa signatur

EPoX 8RDA+, XP2500+, 2x256Mb PC3200 (DualCh), Club3D 9800PRO, Seagate 7200.7 160Gb 8Mb Limited edition

Permalänk
Medlem

Fick det att fungera någorlunda nu ...
Hur ser det ut tycker ni? För att vara nybörjare ...

Visa signatur

Intel Core i5-3570K @ 3.40Ghz / 16 GB ram / 120 GB SSD / 1 TB HDD / Geforce GTX 580 / Acer s273HL 27" LED

- Windows 8? Avgå!

Permalänk
Medlem

ren nyfikenhet, finns det ett "syfte" för sidan eller är det ett projekt i att lära sig webbdesign?

layoutmässigt känns det som att du har två "huvudmenyer" med startsidan etc där uppe och dreamweaver mm i mitten. Det tycker jag gör att det blir svårnavigerat, speciellt med tanke på att det än så länge är rätt så grått, dvs inget som gör att blicken dras mer mot den ena. Förutom pennan och pappret förståss.

Hur nyheterna presenteras känns det som att du kan ha något bra på gång, lite mer filande bara så ska du se att det blir bra

Kodmässigt är det lite onsyggt att positionera med mellanslag och <br> element

Permalänk
Medlem
Skrivet av jangs:

ren nyfikenhet, finns det ett "syfte" för sidan eller är det ett projekt i att lära sig webbdesign?

layoutmässigt känns det som att du har två "huvudmenyer" med startsidan etc där uppe och dreamweaver mm i mitten. Det tycker jag gör att det blir svårnavigerat, speciellt med tanke på att det än så länge är rätt så grått, dvs inget som gör att blicken dras mer mot den ena. Förutom pennan och pappret förståss.

Hur nyheterna presenteras känns det som att du kan ha något bra på gång, lite mer filande bara så ska du se att det blir bra

Kodmässigt är det lite onsyggt att positionera med mellanslag och <br> element

Syftet är i dagsläget bara att lära sig CSS och PHP igentligen. Jag har börjat med PHP filerna men inte kommit så lång. Sen ska det nog bli mitt Wordpress tema. Men det ligger i framtiden.

Syftet med fältet med Pennan och pappret är att där ska de mest populära kategorierna hamna. Så att det ska gå snabbare att navigera. Tycker du kanske att jag ska byta plats på de två?

Vad kan du tipsa om att använda istället för att positionera med mellanslag och <br> ?

Visa signatur

Intel Core i5-3570K @ 3.40Ghz / 16 GB ram / 120 GB SSD / 1 TB HDD / Geforce GTX 580 / Acer s273HL 27" LED

- Windows 8? Avgå!

Permalänk
Medlem
Skrivet av hemfrid:

Syftet är i dagsläget bara att lära sig CSS och PHP igentligen. Jag har börjat med PHP filerna men inte kommit så lång. Sen ska det nog bli mitt Wordpress tema. Men det ligger i framtiden.

Syftet med fältet med Pennan och pappret är att där ska de mest populära kategorierna hamna. Så att det ska gå snabbare att navigera. Tycker du kanske att jag ska byta plats på de två?

Vad kan du tipsa om att använda istället för att positionera med mellanslag och <br> ?

Njaa, kanske inte byta plats på dem egentligen, men huvudmenyn borde vara större eller mer framträdande i alla fall. Jag är inte så bra på design så det är något någon annan borde svara på

Positionera ska du göra "element" och boxar egentligen. Eftersom man taggar upp all text i element så blir det dem du får bestämma position och bredd på.
datumet under nyheten kanske du kan lösa såhär, har inte testat koden men principen är det jag menar.

<div style=" clear: both; overflow: hidden;"> <div style="float:left; width: 200px; text-align-left:">2010 04 15</div> <div style="float:left; width: 200px; text-align-left:">21:47 </div> <div style="float:left; width: 200px; text-align-left:">Tobias Andersson</div> </div>

Alternativt istället för div runt de enstaka texterna kan du använda span och klasser istället för style.

Och din <div id="latest">Nyhetens namn...</div> borde kanske vara en h1/h2 istället för div osv

Sen får en id vara dyka upp en gång på sidan och inte återanvändas som du gjort, en id ska vara unik, alltså bara förekomma en gång. Annars är det klass du ska använda.

Permalänk
Medlem
Skrivet av jangs:

Njaa, kanske inte byta plats på dem egentligen, men huvudmenyn borde vara större eller mer framträdande i alla fall. Jag är inte så bra på design så det är något någon annan borde svara på

Positionera ska du göra "element" och boxar egentligen. Eftersom man taggar upp all text i element så blir det dem du får bestämma position och bredd på.
datumet under nyheten kanske du kan lösa såhär, har inte testat koden men principen är det jag menar.

<div style=" clear: both; overflow: hidden;"> <div style="float:left; width: 200px; text-align-left:">2010 04 15</div> <div style="float:left; width: 200px; text-align-left:">21:47 </div> <div style="float:left; width: 200px; text-align-left:">Tobias Andersson</div> </div>

Alternativt istället för div runt de enstaka texterna kan du använda span och klasser istället för style.

Och din <div id="latest">Nyhetens namn...</div> borde kanske vara en h1/h2 istället för div osv

Sen får en id vara dyka upp en gång på sidan och inte återanvändas som du gjort, en id ska vara unik, alltså bara förekomma en gång. Annars är det klass du ska använda.

Jo jag har säkert en hel del att städa upp i koden, jag är inte så hundra på det här med kodning, är mer inne på designbiten. Men jag har gett mig fan på att lära mig.

Men i <div id="latest">Nyhetens namn...</div>, om jag inte använder div id, hur blir det då en div box som allt hamnar i? Går det att skriva t.ex <div class="latest">Nyhetens namn...</div> ?

Jag kanske ska ta och byta ut det mesta där jag använd id till class? Är det det ni försöker säga =P ?

Visa signatur

Intel Core i5-3570K @ 3.40Ghz / 16 GB ram / 120 GB SSD / 1 TB HDD / Geforce GTX 580 / Acer s273HL 27" LED

- Windows 8? Avgå!

Permalänk
Medlem
Skrivet av hemfrid:

Jo jag har säkert en hel del att städa upp i koden, jag är inte så hundra på det här med kodning, är mer inne på designbiten. Men jag har gett mig fan på att lära mig.

Men i <div id="latest">Nyhetens namn...</div>, om jag inte använder div id, hur blir det då en div box som allt hamnar i? Går det att skriva t.ex <div class="latest">Nyhetens namn...</div> ?

Jag kanske ska ta och byta ut det mesta där jag använd id till class? Är det det ni försöker säga =P ?

Jajjamen, ochså måste du ju definera om "#latest {...}" i din css till ".latest {...}". Brädgården är id definition och punkten säger att det är en class.

Du får försöka tänka vad det är för en typ av objekt som varje textdel är, det finns troligen en egen "tagg" för varje. I ditt fall är "nyhetens namn.." mest troligt en rubrik och bör taggas som det. "<h1>" är huvudrubriken på sidan och bör bara finnas en av om jag lärt mig rätt, sedan "h2" som underrubrik osv..

Brödtext ska till exempel placeras inom "<p>..</p>" som är ett stycke. Fördelarna är att sökmotorer vet exakt vad varje element är för något och kan lättare kategorisera ditt innehåll. Sedan kan folk med med synfel exempelvis med hjälp av en textläsare få alla rubriker på din sida upplästa osv..

Divar brukar jag använda för att hålla ihop resten på det sätt jag önskar.

Självklart kan man göra allt på lika många olika sätt som det finns idéer och det här är bara mitt sätt att tänka, göra saker på.

Sök till exempel på "css box model" på google så finns det lite guider hur man kan göra
w3 har massor av vettiga guider och referenser (bland annat box model också )
CSS Tutorial

webdesignskolan har lite matnyttigt också
- - - W e b d e s i g n s k o l a n - - -

Permalänk
Medlem

Okej ... jag har fixat lite i koderna nu ... Det är säkert inte klanderfritt, men mitt huvud brinner snart upp ...
Just nu är det lite blandat HTML och PHP men jag orkar inte bry mig.

TV&A Scribble - www.schello.se
http://www.schello.se/tulle/tva/style.css

Jag har för övrigt fått utskällning tidigare här på Sweclockers för att jag använt Webdesignskolan, då den sidan tydligen ska vara värdelös. Men jag har så dålig koll själv.

Visa signatur

Intel Core i5-3570K @ 3.40Ghz / 16 GB ram / 120 GB SSD / 1 TB HDD / Geforce GTX 580 / Acer s273HL 27" LED

- Windows 8? Avgå!

Permalänk
Medlem
Skrivet av hemfrid:

Okej ... jag har fixat lite i koderna nu ... Det är säkert inte klanderfritt, men mitt huvud brinner snart upp ...
Just nu är det lite blandat HTML och PHP men jag orkar inte bry mig.

TV&A Scribble - www.schello.se
http://www.schello.se/tulle/tva/style.css

Jag har för övrigt fått utskällning tidigare här på Sweclockers för att jag använt Webdesignskolan, då den sidan tydligen ska vara värdelös. Men jag har så dålig koll själv.

Haha, utskällningar vet jag inte om du borde få. Kanske om du om och om igen envisas med att använda en bristfällig site som utgångspunkt trots att bristerna påvisats, och då är det bara för att vi bryr oss

Det finns några konkreta grejer i din kod som jag tycker du ska fundera på. Varför använder du tables för menyer till exempel? En annan grej är att du använder   för att skapa horisontellt utrymme mellan olika element. Det är lika illa som att använda <br> för att dela in text i stycken eller skapa vertikala vitutrymmen. Slutligen har du en rad <p align='center'> där align är ett avvecklat attribut som bäst ersätts med CSS, samt att dubbelt citationstecken ska användas runt attributvärde.

Visa signatur

Kom-pa-TI-bilitet

Permalänk
Medlem
Skrivet av Teknocide:

Haha, utskällningar vet jag inte om du borde få. Kanske om du om och om igen envisas med att använda en bristfällig site som utgångspunkt trots att bristerna påvisats, och då är det bara för att vi bryr oss

Det finns några konkreta grejer i din kod som jag tycker du ska fundera på. Varför använder du tables för menyer till exempel? En annan grej är att du använder   för att skapa horisontellt utrymme mellan olika element. Det är lika illa som att använda <br> för att dela in text i stycken eller skapa vertikala vitutrymmen. Slutligen har du en rad <p align='center'> där align är ett avvecklat attribut som bäst ersätts med CSS, samt att dubbelt citationstecken ska användas runt attributvärde.

Jag använde tables i menyn eftersom menybakgrunden är uppdelad i 3 delar, och jag vet inte hur jag ska göra för att få flera delar att hamna brevid varandra. Sen så kan jag inte CSS koden för att centrera saker. Därför så blir det en <p align="center">

Några tips?

Visa signatur

Intel Core i5-3570K @ 3.40Ghz / 16 GB ram / 120 GB SSD / 1 TB HDD / Geforce GTX 580 / Acer s273HL 27" LED

- Windows 8? Avgå!

Permalänk
Medlem
Skrivet av hemfrid:

Några tips?

text-align:center för centrerad text. Ett tips på CSS-referens är CSS Reference

<table width="712" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td><div id="menu"></div></td> <td><div id="menu_b"> <p align='center'><a href='#'>Startsidan</a>   <a href='#'>Blogg</a>   <a href='#'>Tutorials</a>   <a href='#'>Musik</a>   <a href='#'>Video</a>   <a href='#'>Om mig</a>   <a href='#'>Länkar & Partners</a>   <a href='#'>Forum</a>   <a href='#'>Kontakt</a></p> </div></td> <td><div id="menu_c"></div></td> </tr> </table>

ersättes i enklast möjliga form med

<p id="meny"> <a ... dina länkar här </p>

samt CSS-koden

#meny { background:url(helabakgrunden.png) no-repeat; margin:0; padding:20px; width:672px; }

Visa signatur

Kom-pa-TI-bilitet

Permalänk
Medlem
Skrivet av Teknocide:

samt CSS-koden

#meny { background:url(helabakgrunden.png) no-repeat; margin:0; padding:20px; width:672px; }

Akta sig för att kombinera padding med width bara, den kombinationen beter sig olika i IE/Alla andra.

http://www.thesishacker.com/wp-content/uploads/2009/03/box-mo...

Visa signatur

"Memory is like an orgasm. It's a lot better if you don't have to fake it." - Seymore Cray

Permalänk
Medlem
Skrivet av VRaptor:

Akta sig för att kombinera padding med width bara, den kombinationen beter sig olika i IE/Alla andra.

http://www.thesishacker.com/wp-content/uploads/2009/03/box-mo...

Detta var kanske sant för fem år sedan, men knappast idag. De webbläsare som används nu för tiden, IE6 inkluderat, följer den standardiserade boxmodellen om man har en ordentlig doctype i början av dokumentet.

Padding + Width är inga problem.

Visa signatur

Kom-pa-TI-bilitet

Permalänk
Medlem

OKej jag är sjukt tacksam för all hjälp ... Jag ska försöka mig på det där och se om jag får någon rätsida på det hela. Annars så kommer jag antagligen att lämna det med tables eftersom det fungerar endå. Det kanske inte är det ultimata, men det fungerar =P

Sen skrev ju Teknocide följande kod: background:url(helabakgrunden.png) no-repeat;
Anledningen till att jag har den i tre delar är för att mitten delen endast är 2px bred, och är därmed inte en så stor fil att ladda. Har jag helabakgrunden.png så blir den filen större och tar då upp mer bandbredd, eller har jag fel?

Visa signatur

Intel Core i5-3570K @ 3.40Ghz / 16 GB ram / 120 GB SSD / 1 TB HDD / Geforce GTX 580 / Acer s273HL 27" LED

- Windows 8? Avgå!

Permalänk
Medlem
Skrivet av hemfrid:

OKej jag är sjukt tacksam för all hjälp ... Jag ska försöka mig på det där och se om jag får någon rätsida på det hela. Annars så kommer jag antagligen att lämna det med tables eftersom det fungerar endå. Det kanske inte är det ultimata, men det fungerar =P

Sen skrev ju Teknocide följande kod: background:url(helabakgrunden.png) no-repeat;
Anledningen till att jag har den i tre delar är för att mitten delen endast är 2px bred, och är därmed inte en så stor fil att ladda. Har jag helabakgrunden.png så blir den filen större och tar då upp mer bandbredd, eller har jag fel?

Ska det vara så svårt med 3 divar i rad då?

Permalänk
Medlem
Skrivet av hemfrid:

Sen skrev ju Teknocide följande kod: background:url(helabakgrunden.png) no-repeat;
Anledningen till att jag har den i tre delar är för att mitten delen endast är 2px bred, och är därmed inte en så stor fil att ladda. Har jag helabakgrunden.png så blir den filen större och tar då upp mer bandbredd, eller har jag fel?

Du tänker rätt och fel på samma gång, avsikten är god men mödan för arbetet oproportionelig. Faktum är att du sannolikt får sämre prestanda som det är nu.

Här har vi bilden test.png, enligt min W7-installation 5101 bytes:

5 kilobytes är till att börja med en struntsumma, men vi leker med tanken på hur mycket vi kan spara genom att hacka upp den..

test-a, 1752 bytes:

test-b, 264 bytes:

test-c, 1709 bytes:

Summa: 3725. Sparade bytes: 1376.

1.4k är en fjantigt liten förtjänst. Lägg där till att en användares webbklient måste göra tre stycken HTTP-anrop istället för ett, samt att du har en massa extra HTML-kod som är både ful och onödig. Jag vågar påstå att man förlorar på att hacka upp en såpass liten bild. Då har jag heller inte räknat med att de tre filerna tillsammans med stor sannolikhet är större på disk, tack vare klusterstorlek, än vad den ensamma 5k-filen är.

Det finns några lägen då slicing kommer till sin rätt, exempelvis om du ska ha dynamisk vidd på hemsidan och mitten av menyn måste kunna sträckas eller skjutas ihop. I det fallet görs det dock inte för att spara bandbredd utan för att tillgodose ett annat krav.

Visa signatur

Kom-pa-TI-bilitet

Permalänk
Medlem
Skrivet av Teknocide:

Detta var kanske sant för fem år sedan, men knappast idag. De webbläsare som används nu för tiden, IE6 inkluderat, följer den standardiserade boxmodellen om man har en ordentlig doctype i början av dokumentet.

Padding + Width är inga problem.

I stand corrected, tackar för infon.

Visa signatur

"Memory is like an orgasm. It's a lot better if you don't have to fake it." - Seymore Cray

Permalänk
Medlem
Skrivet av jocke92:

Ska det vara så svårt med 3 divar i rad då?

Men när jag lägger tre divvar i rad, så byter dom rad. Det blir tre divar i rad vertikalt, jag vill ha dom horisontellt. HUr gör jag för att få dom så?

*EDIT:
Har lagt ihop hela sajten i en rar fil, så det underlättar lite för er som är så godhjärtade att ni vill hjälpa er!
Finns på sidan TV&A Scribble - www.schello.se

Visa signatur

Intel Core i5-3570K @ 3.40Ghz / 16 GB ram / 120 GB SSD / 1 TB HDD / Geforce GTX 580 / Acer s273HL 27" LED

- Windows 8? Avgå!

Permalänk
Medlem
Skrivet av hemfrid:

Men när jag lägger tre divvar i rad, så byter dom rad. Det blir tre divar i rad vertikalt, jag vill ha dom horisontellt. HUr gör jag för att få dom så?

Du använder float. Googla på float:s egenskaper och lär dig hur du bäst använder det.

Finns position-attributet i CSS, dock rekommenderar jag float.

Visa signatur

POSTCARDS FROM ITALY

Permalänk
Medlem
Skrivet av ViLANDER:

Du använder float. Googla på float:s egenskaper och lär dig hur du bäst använder det.

Finns position-attributet i CSS, dock rekommenderar jag float.

Okej ... jag hittade CSS position property
Men om man anger en position i pixlar relaterat till var i webbläsaren den ska vara, ändras inte det för folk med olika skärmupplösningar?

Visa signatur

Intel Core i5-3570K @ 3.40Ghz / 16 GB ram / 120 GB SSD / 1 TB HDD / Geforce GTX 580 / Acer s273HL 27" LED

- Windows 8? Avgå!

Permalänk
Medlem

<!---^ovre menyn---> <div align="" style="width: 730px; margin-left: auto; margin-right: auto; height: 60px;"> <div id="menu"></div> <div id="menu_b"> <p align="center"><a href="#">Startsidan</a>   <a href="#">Blogg</a>   <a href="#">Tutorials</a>   <a href="#">Musik</a>   <a href="#">Video</a>   <a href="#">Om mig</a>   <a href="#">Länkar & Partners</a>   <a href="#">Forum</a>   <a href="#">Kontakt</a></p> </div> <div id="menu_c"></div> </div> <!---logotyp---> <div id="logo"><a href="http://www.schello.se"><img border="0" src="images/logo.jpg"></a></div> <!---undre menyn---> <div style="margin-left: auto; margin-right: auto; width: 730px; height: 80px;"> <div id="submenu_a"></div> <div id="submenu_b"><span class="style2">Populära kategorier</span> <a href="#">Dreamweaver</a>    <a href="#">Photoshop</a>    <a href="#">Apple</a>    <a href="#">Musik</a>    <a href="#">Video</a>    <ahref="#">Tankar om allt</ahref="#"></div> <div id="submenu_c"></div> </div>

lösningen utan sketna tabeller.

Permalänk
Medlem

Tänkte bara säga att det semantiska riktiga är att använda osorterad lista för menyer, efter som det är en lista av alternativ.

Visa signatur

Primär - C2D T6500 :: 4GB :: Mobility 4570.
Sekundär - AMD64x2 6000+ :: 2GB :: 8800GT 1GB