CSS en framelayout

[Termike]

Hey iedereen,

ik moet een nieuwe website maken voor men avondschool.
En we hebben zo de basisregels gekregen voor CSS, en nu wou ik een
mooie site ontwerpen, dus ik was begonnen met alles te maken in imageready,
dan slices maken, en die zelf met css code aan elkaar zetten.
Dit lijkt echter een RAMP te zijn, het lukt voor geen meter.


Dit is hoe de pagina er standaard moet uitzien, de knoppen zijn 3 voudig,
de standaard status, de hover, en de selected. Dat zijn allemaal aparte gifjes,
de frames links en rechts heb ik ook ontworpen tot kleine gifjes, en dat WOU
ik dan via background-repeat: repeat-y laten verder gaan. Maar ook dit wil niet werken.

http://users.skynet.be/robijnknuffelzacht/www ==> dat is een eerste ontwerp
Dit zijn de files die gebruikt zijn: Download


http://users.skynet.be/robijnknuffelzacht/www2 ==> dat is een 2de ontwerp
Dit zijn de files die gebruikt zijn: Download

Geen van beide goed dus


Iemand ideeën of bestaande ontwerpen om zoiets in elkaars laten te vloeien?
Men zegt dat divs vele gemakkelijker en flexibeler zijn om zulke dingen in elkaar te steken,
maar tot hiertoe moet ik eigelijk zeggen, dat ik tables voor zulke dingen een aardig stukje eenvoudiger vond!

[Borizz]

Het is maar net wat je gewend bent. Je bent gewend om alles te slicen, omdat je tabellen / frames gewend bent. Maar dit is helemaal niet nodig. De zwarte achtergrond (incl foto en logo), kan je prima in 1 plaatje stoppen.

Verder kan je voor de menu items gebruik maken van 3 verschillende plaatjes (of 1 enkel plaatje als je ze combineert tot een sprite) voor de achtergrond van de menu items in de verschillende statussen. Dan heb je enkel nog 5 plaatjes (of 1 enkel plaatje als je ze combineert) nodig voor de tekst in de menu items die je over de achtergrond plaatst.

Verder is het geen doel op zich om divjes te gebruiken, zo kun je je menu beter plaatsen in een (unordered) list.

[Termike]

Hoe plaats ik alles in één plaatje? ik moet juist zien dat de knoppen op het frame komen, en dan in het frame, moet de content komen, maar daarbij moet ik toch rekening houden met het feit dat niet elke pagina dezelfde lengte heeft? Dus de frame links, en rechts moet toch verder naar beneden lopen afhankelijk van de lengte van de pagina? daarom dat ik in gedachten had een een div te maken met een background, en dan een repeat-y erbij, maar ik kan er echt niet aanuit. Als ik alles centreer in het midden kan ik niet met absolute positions werken, en krijg ik niets netjes aan elkaar geplaatst. Maar daarbij komt ook als ik absolute neem, dan kan ik ook niet de pagina in lengte laten variëren, want de plaats van alles is vastgesteld!

Of zijn er andere manieren?

[Boelie-Boelie]

Borizz legt uit dat niet je site moet slicen zoals je gewend bent, maar met wat slim nadenken het aantal afbeeldingen kunt terugbrengen. Heb je het artikel waar naar verwezen wordt, gelezen? Dan ben je al een stap verder.
Je andere probleem is het positioneren. Je geeft zelf al aan dat absoluut positioneren een probleem is. Dat klopt, dat gebruiken de meeste mensen dan ook niet . Positioneren doet men vaak door slechts aan te geven width, margin, padding en evt. float.

• voorbeelden van css-layouts
• hoe floats werken

[Termike]

Ja ik ben die templates nu aan het uitzoeken naar een bruikbaar voorbeeld.

Ik hou jullie op de hoogte van de vorderingen...
Alvast bedankt voor jullie reacties :-)

[Dark Blue]

Let er wel op hè, CSS is een taal voor opmaak, niet een vervanger voor HTML!

Het is niet óf óf... het is HTML mét CSS, of HTML zónder CSS...

CSS kan zijn... het Ikea opbergsysteem waarmee je je garage op orde brengt, in plaats van alle spullen maar simpelweg op elkaar te stapelen...
(bovendien is CSS gratis en bij het verkrijgen ervan raak je ook niet je vrouw voor 3 uur kwijt!)

[Termike]

Dark Blue schreef op maandag 05 mei 2008 @ 10:56:
Let er wel op hè, CSS is een taal voor opmaak, niet een vervanger voor HTML!

Het is niet óf óf... het is HTML mét CSS, of HTML zónder CSS...

CSS kan zijn... het Ikea opbergsysteem waarmee je je garage op orde brengt, in plaats van alle spullen maar simpelweg op elkaar te stapelen...
(bovendien is CSS gratis en bij het verkrijgen ervan raak je ook niet je vrouw voor 3 uur kwijt!)

Ja hoor, dat wist ik al. Ik moet een website maken, waarin het voor de lkr overduidelijk moet zijn, dat ik ALLE opmaak in een style sheet gestoken heb, alle scripts in een javascript bestand, en de inhoud in een html bestand.

Dat is het idee. Alleen mijn ontwerp omzetten van imageready naar html/css lukt me nog niet echt. Daarom ben ik nu naar voorbeeld css files aan 't kijken!

[Termike]

Ok, ik heb met een template iets gevonden waar ik wel mee verder kan, op één ding na.

De hoogte, die moet ik zo nu per column instellen. Nu zie je op de site hieronder dat de left column tot onderaan komt, en de rechter niet, omdat ik hieraan een hoogte heb meegegeven, en rechts heb ik dat niet gedaan. Kan ik de hoogte niet 100% of iets dergelijks maken? Want de pagina kan natuurlijk van pagina tot pagina soms wat langer, en soms wat korter zijn. Ik kan toch moeilijk voor elke pagina de hoogte in pixels aanpassen ofwel?

Link

CSS code:

body
{
margin: 0;
padding: 0;
line-height: 1.5em;
}

b
{
font-size: 110%;
}
em
{
color: red;
}

#maincontainer
{
width: 950px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/

}

#topsection
{
background: #EAEAEA;
height: 90px; /*Height of top section*/
}

#topsection h1
{
margin: 0;
padding-top: 15px;
}

#contentwrapper
{
float: left;
width: 100%;
}

#contentcolumn
{
margin: 0 19px 0 180px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
}

#leftcolumn
{
float: left;
width: 180px; /*Width of left column in pixel*/
margin-left: -950px; /*Set margin to that of -(MainContainerWidth)*/
background: #C8FC98;
height: 350px;
}

#rightcolumn
{
float: left;
width: 19px; /*Width of right column*/
margin-left: -19px; /*Set left margin to -(RightColumnWidth)*/
background: #FDE95E;
}

#footer
{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}

#footer a
{
color: #FFFF80;
}

.innertube
{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}

[RobIII]

Pssst; gebruik eens code tags _{en wat minder uitroeptekens!}

Je vraag is een veel voorkomende (ook hier); ik heb me verder even niet super verdiept in je probleem/topic* maar ik denk dat je eens naar faux columns moet gaan kijken, of je HTML en body een height geven (html, body { height: 100%; })

* Ben even in a hurry

[ Voor 78% gewijzigd door RobIII op 05-05-2008 18:29 ]

[Termike]

Die height 100% heb ik eens even erin gezet, maar de side columns blijven gewoon één lijn hoog, die zouden dus eigelijk de hoogte moeten hebben van de middenste column, maar ook met min-height en height lukt het niet. Is er nog een andere tag dat erbij moet misschien?

[Zerora]

@ Termike,
Ik snap dat je het wilt leren enzo, maar ik heb een mooie kant en klare oplossing voor je

Check deze link: http://www.code-sucks.com/

Kant en klare faux columns oplossingen. Prima begin om het idee mee onder de knie te krijgen.

[ Voor 31% gewijzigd door Zerora op 05-05-2008 23:29 ]

[Dark Blue]

Zerora schreef op maandag 05 mei 2008 @ 23:29:
@ Termike,
Ik snap dat je het wilt leren enzo, maar ik heb een mooie kant en klare oplossing voor je

Ik heb wat leesvoer voor je
http://www.w3schools.com/css/css_intro.asp

Het is een mooie springplank om vanaf een bestaande stylesheet te beginnen, maar lees jezelf eerst eens in op het onderwerp. Dan weet je ook echt wat je doet en waarom het niet doet wat jij wil. Scheelt je een hoop trial & error!

[Termike]

Zerora schreef op maandag 05 mei 2008 @ 23:29:
@ Termike,
Ik snap dat je het wilt leren enzo, maar ik heb een mooie kant en klare oplossing voor je

Check deze link: http://www.code-sucks.com/

Kant en klare faux columns oplossingen. Prima begin om het idee mee onder de knie te krijgen.

Dankzij jou ben ik geslaagd in het volgende ontwerp te maken. Deze site heeft me erg veel geholpen qua inzicht. Ik heb verschillende templates uitgekleed, en dan terug in elkaar gestoken.
Op een paar rare dingen, qua pixel heights snap ik nu alles, en ben ik op het volgende, licht aangepaste ontwerp gekomen. (knoppen werken nog niet, die ga ik ook nog met CSS hovers maken)

LINK

Wat vind je ervan?

[Borizz]

Ik vind dat je teveel DIV elementen gebruikt, zeker voor je navigatie(knoppen). Kijk eens naar het artikel Taming lists op A List Apart (waar je overigens nog veel meer interessante artikelen kan vinden). Daarnaast kan je nogeens op semantiek ic.m. HTML zoeken.

Ik moet wel zeggen dat je al wel vorderingen maakt in ieder geval!

[ Voor 17% gewijzigd door Borizz op 07-05-2008 21:57 ]

[Termike]

Borizz schreef op woensdag 07 mei 2008 @ 21:55:
Ik vind dat je teveel DIV elementen gebruikt, zeker voor je navigatie(knoppen). Kijk eens naar het artikel Taming lists op A List Apart (waar je overigens nog veel meer interessante artikelen kan vinden). Daarnaast kan je nogeens op semantiek ic.m. HTML zoeken.

Ik moet wel zeggen dat je al wel vorderingen maakt in ieder geval!

Dankjewel voor de tip. In deze versie hieronder heb ik het aangepast, ik werk nu met één image van elke state van de knoppen, en dan met één div/span plaats ik de desbetreffende tekst in de knop. Ik vermoed dat je zoiets bedoelde?

SITE

[Borizz]

Nee je gebruikt nog steeds DIV elementen om je menu items te scheiden, dit kan je beter met een list (ul, ol) doen. Wat je nu hebt veranderd is trouwens ook al een verbetering hoor.