CSS frågor

[Rickard.v]

Har börjat läsa CSS så jag kan göra lite moderna websidor.

Så då är det CSS som gäller, fick jag tips om.

 

Nu lite nybörjar frågor:

 

1 Kan jag väva ihop mina nya CSS sidor med mina gamla htm sidor så de visar i mainbox. Ungefär som att visa sidor i en annan frame.

Har startat med en mall från dreamwiever innehållande header main och footer.

 

Eller är det som jag misstänker att det inte går utan jag måste göra om alla sidor till CSS med innehåll som header och footer och meny o logo i header??

 

2 om sidan är väldigt lång. Blir sidan väldigt lång eller blir det scroll i mainboxen där innehållet visas??

 

Hajjar ni??

[Rickard.v]

Men hallå alla kunninga! Var är ni???

 

Majkeel2 , Tema eller Gerhard hoppas på svar från er!!!!

[_Michael_]

Ahm, tror inte jag hänger med riktigt på vad du menar... Känns som att du väljer teknik innan du vet vad du vill göra.

 

Försök förklara bättre så får du nog fler svar

[nestea]

Nej, jag hajar inte riktigt. Vad är det för "mainbox" du pratar om? Kan du inte bifoga koden eller en länk till sidan?

[Rickard.v]

De omtalade har valt teknik åt mig.

 

kan jag visa ett htm dokument i en css layout! Ungeför som att visa innehåll i en annan frame.

Då kan hela websides layouten (header main o footer) visas i webläsarfönstret och dokumentet som är för långt scrollar man i.

Men det verkar som att ett långt dokument blir flera skärmar högt och footer hamnar långt under bordet? (som skärmen står på)

Fattar du något??

 

bilprovningen har scrollbart innehåll på sidan och footer visas alltid längst ner i fönstret, o följer med oavsett storlek på fönstret.

Det gillar jag.

Aftonbladet är fruktansvärt långt och man måste scorlla som fan. Och footer är längst ner. Långt under bordet.

 

Fattar du skillnaden???

[Rickard.v]

Nej, jag hajar inte riktigt. Vad är det för "mainbox" du pratar om? Kan du inte bifoga koden eller en länk till sidan?

 

fel uttryck av mig med mainbox.

 

Min nya sida innehåller en container. I den är det 3 rader. En liten upptill som dreamwiever kallar header. I koden byggs de med div.

Mitten delen som är den stora som ska visa innehållet kallar DW för maincontent.

Sedan en liten del längst ner som kallas för footer.

 

Kan jag då göra en meny i header som ändrar innehållet i maincontent utan att ladda om hela sidan. Som med frames eller ska jag glömma det.

[nestea]

fel uttryck av mig med mainbox.

 

Min nya sida innehåller en container. I den är det 3 rader. En liten upptill som dreamwiever kallar header. I koden byggs de med div.

Mitten delen som är den stora som ska visa innehållet kallar DW för maincontent.

Sedan en liten del längst ner som kallas för footer.

 

Kan jag då göra en meny i header som ändrar innehållet i maincontent utan att ladda om hela sidan. Som med frames eller ska jag glömma det.

 

Aha, då förstår jag (har dock aldrig själv jobbat med Dreamweavers mallar då jag gör allt för hand själv ).

 

Men i alla fall. Det du vill uppnå är alltså att bara maincontent laddas om när man väljer en ny sida?

 

Om så är fallet, så går det givetvis att ordna med PHP t ex, eller för all del AJAX. Men jag tror nog att enklast för dig är (om du inte har kunskap inom dessa områden vill säga) att helt enkelt skapa nya sidor för varje sida.

 

Men som sagt, bifoga gärna lite kod för att man ska veta exakt vad du pratar om Det är möjligt att Dreamweavers mallar har funktionalitet för att uppnå denna effekt ... Men eftersom jag inte har jobbat med det så kanske någon annan kan svara bättre på just det.

[Anvil]

Är ganska övertygad om att det går att lösa på klientsidan också med lite javascript.

[nestea]

Är ganska övertygad om att det går att lösa på klientsidan också med lite javascript.

 

Japp! T ex Ajax

Men det kräver ju lite mer kunskap inom området ... även om t ex Jquery kan fixa det ganska enkelt

[nestea]

De omtalade har valt teknik åt mig.

 

kan jag visa ett htm dokument i en css layout! Ungeför som att visa innehåll i en annan frame.

Då kan hela websides layouten (header main o footer) visas i webläsarfönstret och dokumentet som är för långt scrollar man i.

Men det verkar som att ett långt dokument blir flera skärmar högt och footer hamnar långt under bordet? (som skärmen står på)

Fattar du något??

 

bilprovningen har scrollbart innehåll på sidan och footer visas alltid längst ner i fönstret, o följer med oavsett storlek på fönstret.

Det gillar jag.

Aftonbladet är fruktansvärt långt och man måste scorlla som fan. Och footer är längst ner. Långt under bordet.

 

Fattar du skillnaden???

 

Ja, jag tror att jag förstår.

Vill du att "maincontent" ska fyllas med ditt innehåll, så lägger du givetvis innehållet inom dess <div>-taggar. Sedan, för att denne alltid ska ha samma höjd och innehållet ska scrollas fram (om det finns mer innehåll än vad som får plats), så får du skriva följande i CSS-filen:

 

#maincontent
{
 overflow: auto;
 height: 300px; 
 width: 800px;
}

 

Detta förutsätter förstås att "maincontent" har just ID "maincontent" (vilket den med största sannolikhet har). Width och height kan man givetvis ha andra värden på, detta var bara de jag använde när jag provade.

Med ovanstående kod kommer allt innehåll som kräver mer plats än definierad höjd för elementet (i det här fallet är ju höjden, height, definierad till 300 px) trolla fram en liten scrollbar. Om innehållet kräver mindre än 300px i vertikalt utrymme så kommer ingen scrollbar att visas

[Rickard.v]

Tack för alla svar. Nestea ditt tips funkar kanon.

 

Nu har jag skrotat mallen från dreamwiever.

 

Började från sckratcch.

 

Har nu gjort 3 containers med snygga rundade hörn. En som header en som main o en som footer.

 

Men hur får jag en snyggt lite mellanrum i höjdled om säg 5pixlar?????????

[nestea]

Tack för alla svar. Nestea ditt tips funkar kanon.

 

Nu har jag skrotat mallen från dreamwiever.

 

Började från sckratcch.

 

Har nu gjort 3 containers med snygga rundade hörn. En som header en som main o en som footer.

 

Men hur får jag en snyggt lite mellanrum i höjdled om säg 5pixlar?????????

 

Vad bra!

Vet inte vilket element du vill ha mellanrum i höjdled på, men

 

 #element
{
margin-top: 5px; 
}

 

... borde funka för aktuellt element.

[Rickard.v]

Det är kanske inte lätt att förstå mig, fattar ju knappt själv vad jag gör ibland hehe.

 

Jag har fått till mellanrummet jag önskade. Använder absolut positionering på alla caontinerna. Det börjar likna något.

Jag ska slänga upp test sidan så ni ser o förstår.

 

Nu har jag problem med att de rundade hörnen inte följer med när jag ställer in en höjd på containern. Men om jag fyller med text så continer blir större så följer de med.

 

Här ser ni mina nybörjar försök. http://www.teamsundholmwelding.se/test.html

Kolla koden om ni vågar haha

 

Det blir en separat CSS fil senare. Nu kluddar jag bara.

 

Släng upp länk till någon sida ni har gjort så jag får imponeras.......

[jonkanon]

http://www.w3schools.com/css/

 

Kika igenom den där, är inte alls dum faktiskt.

[Rickard.v]

Nu är innehållet så långt så jag fixade scrollfunktionen då försvann de rundade hörden längst ner bakom footern.

Kanske ska ta bort de rundade hörden o mellanrummet mellan header-main och main footer.

(runda hörn högst upp o längst ner ska vara kvar så klart.)

 

Ny fil uppe med mera innehåll i main containern.

 

Har läst flera timmar på w3. har en flik uppe hela tiden.

[PixelHermit]

Har läst flera timmar på w3. har en flik uppe hela tiden.

Nja, W3C och W3Schools är inte riktigt samma sak... Förresten såg jag att din CSS validerar enligt standard, och det är förstås bra! Testa att validera din HTML också, om du inte redan gjort det - svaren man får kan ofta vara till stor hjälp när man felsöker sin kod, och även ganska små felaktigheter i HTML kan ibland göra att CSS-koden inte riktigt uppför sig som man förväntat. Dessutom brukar icke-standardiserad kod ibland hanteras lite väl styvmoderligt av Google, och kan i värsta fall göra att sidan hamnar längre ned på sökmotorernas ranking.

[Rickard.v]

Jag förkortade lite. det är w3schools jag kollar på.

[nestea]

Förstår jag dig rätt om du menar att du inte vill att de rundade hörnen längst upp i ska "scrollas" bort när man scrollar nedåt?

 

Om jag ser rätt i källkoden så finns själva "innhållet" i en div som har klassen "content", men du har lagt

 

	   overflow: auto;

 

på "#container2", vilket gör att det är hela denna div som kommer scrollas (inkl. de rundade hörnen) om innehållet är längre än dess höjd. Ändrar du istället så att overflow: auto; finns på ".content" istället så borde bara själva innehållet scrollas (inte de rundade hörnen ovan och under.

 

Borde funka

 

(Jag har gjort t ex soph.se )

[tema]

Men hallå alla kunninga! Var är ni???

 

Majkeel2 , Tema eller Gerhard hoppas på svar från er!!!!

Hedrande att bli nämnd!

 

Min nya sida innehåller en container. I den är det 3 rader. En liten upptill som dreamwiever kallar header. I koden byggs de med div.

Mitten delen som är den stora som ska visa innehållet kallar DW för maincontent.

Sedan en liten del längst ner som kallas för footer.

Försök att komma ifrån tabell- och frames-tänket. Med en css-design kan du ha innehåll organiserat hur och var du vill på sidan, tänk istället på vad du har för innehåll och hur du vill presentera detta (dvs. behöver du en footer överhuvudtaget, behöver du verkligen tre kolumner eller menar du att du vill ha plats för meny, huvudinnehåll och extrainnehåll - med css kan du organisera detta hur du vill, kanske i tre kolumner i webbläsaren men efter varandra i mobilen och utan meny vid utskrift). Alltså tänk utefter innehållet och sedan hur du vill visa det.

 

Kan jag då göra en meny i header som ändrar innehållet i maincontent utan att ladda om hela sidan. Som med frames eller ska jag glömma det.

Jo, det går att göra (med JavaScript) men det vanliga sättet att göra detta nuförtiden är att ladda om sidan, viktigt även för sökmotorer.

[Rickard.v]

nestea du förstår mig precis rätt.

 

Men nu har jag flyttat koden till content men vet ej om det hamnade rätt ändå för det blir pannkaka. Kolla!

 

Jag tycker att det borde bli rätt på container för ändrar man brakgrund på container så blir det ju bara innanför avrundningarna.

 

Måste man alltid provkolla i webläsare?? Det brukar ju funka i dreamwiever.

[nestea]

Ja, jag såg det! Det är för att du inte har tilldelat "content" någon höjd

[Rickard.v]

Ja nu funkar det som du säger nestea.

Och när jag flyttade Height till content så funkar det med. YES.

Men jag var tvungen att lägga till en siffra på content koden annars gäller det för alla när det är div class.

Eller ska jag ändra till Div ID. Eller måste jag ha siffran med i alla fall för att skilja de olika content inställningarna åt för respektive container??

 

http://www.teamsundholmwelding.se/test.html

 

Tack för svar!

 

(lästa ditt inlägg ovan efter jag skrivit)

[nestea]

Ja nu funkar det som du säger nestea.

Och när jag flyttade Height till content så funkar det med. YES.

Men jag var tvungen att lägga till en siffra på content koden annars gäller det för alla när det är div class.

Eller ska jag ändra till Div ID. Eller måste jag ha siffran med i alla fall för att skilja de olika content inställningarna åt för respektive container??

 

http://www.teamsundholmwelding.se/test.html

 

Tack för svar!

 

(lästa ditt inlägg ovan efter jag skrivit)

 

Det stämmer som du säger att alla element som tillhör samma klass reagerar på koden som tilldelas klassen. Fördelen med en klass är att man kan få väldigt många element att se likadana ut, t ex alla bilder på en sida, eller alla rubriker. Vill man istället styla ett specifikt element som bara kommer förekomma en gång (att tilldela flera element samma ID på samma sida kommer ge ett fel i validatorn) så använder man sig istället av ett ID.

Så ja, siffran måste du ha med om de olika "containrarna" ska ha olika styling (sen vilka namn du i slutändan väljer för de olika containrarna spelar mindre roll så länge de är unika, men det är inte så lätt för andra som granskar koden att förstå vad t ex "container2" är för en container)

 

När man har hållit på ett tag så faller det sig naturligt vilket man väljer

 

ID = individuell styling

Klass = flera element som ska ha samma styling

 

Nu börjar ju sidan likna något

[Rickard.v]

Ja jag förstår det med många element o samma utseende.

 

MEN hur ska jag göra då? Blev inte riktigt säker på hur du menade om jag ska behålla class på content???

Jag tycker ju att ID passar bättre eftersom alla containers har olika content.

 

Att någon annan ska förstå min kod är väl ointressant? huvudsaken webläsaren gör det

 

 

Ja det börjar likna något.

[Rickard.v]

Har ändrat storlek(mindre) på footer så nu är texten nästan utanför. Varför?