Webdesign probleem

[Tommmm15]

Hallo,

Op dit moment ben ik bezig met het maken van mijn website voor school,
Aangezien ik weinig ervaring heb met html css etc kom ik niet meer verder.
Ik wil mijn layout veranderen naar 3 kolommen waarvan de middelste de content bevat en een vaste width heeft en de twee aan de zijkanten die kunnen variëren zodat hij competable is voor verschillende resoluties. Ook wil ik dat de hover actie actief blijft als je erop geklikt hebt, zodat je kunt zien op welke pagina je bent.
Ik heb het hele internet afgezocht maar krijgt het niet in mijn code werkend.



Alvast bedankt voor de hulp.

[TERW_DAN]

Kun je hier je voorbeeldcode posten die je nu gebruikt (en bij voorkeur een online sample).
Hoe positioneer je je elementen op het moment?

[Tommmm15]

De code van de css code staat achter de link van mijn eerste bericht. Wil je de html code hebben of??

[Verwijderd]

de "middelste" colom moet je margin: 10px auto; in zetten. je hoeft niet twee andere colommen te maken. en wat betreft het leren van html en css, dit heb ik zelf uitgevonden door in de sourcecode van andere site's te kijken.

beter goed gejat dan slecht bedacht

[Dennahz]

Verwijderd schreef op vrijdag 07 december 2012 @ 16:20:

beter goed gejat dan slecht bedacht

Wie zegt dat de code die je 'gejat' heb goed is? Beter goed begrijpen, dan zomaar wat overnemen van anderen.

@TS: kan je niet gewoon de relevante code tussen [code] tags zetten? Dat is overzichtelijker dan met zo'n screenshot.

[OkkE]

Dennahz schreef op vrijdag 07 december 2012 @ 16:22:
@TS: kan je niet gewoon de relevante code tussen [code] tags zetten? Dat is overzichtelijker dan met zo'n screenshot.

Dit.
Verder zou een voorbeeld (schets/tekening/...) van hoe je het wil hebben ook handig kunnen zijn. Of wil je alleen de website centreren (dan is margin-left:auto;margin-right:auto; voldoende).

[RobIII]

OkkE schreef op vrijdag 07 december 2012 @ 16:25:
Of wil je alleen de website centreren (dan is margin-left:auto;margin-right:auto; voldoende).

Cascading Stylesheet:

margin:0 auto;

Korter

@TS: plaats even je code m.b.v. code tags in je topicstart; screenshots schieten niet op. En plaats inderdaad ook even tekeningetje ofzo hoe je 't wil hebben; werk 't desnoods even uit in een jsfiddle.

[OkkE]

RobIII schreef op vrijdag 07 december 2012 @ 16:36:

Cascading Stylesheet:

margin:0 auto;

Korter

Haha, ik zat al te wachten op zo'n reactie.

Klopt, het is korter en in veel gevallen ook prima, maar het 'reset' wel je -top en -bottom wat soms ongewenste gevolgen hebben. Zeker voor beginnende developers. Vandaar dat ik 't expliciet uit schreef.

[Tommmm15]

Weet niet precies of jullie dit bedoelde, maar hier is een schets van wat ik van plan was.

[ Voor 21% gewijzigd door Tommmm15 op 10-12-2012 09:44 ]

[GerbenRawr]

Ik kan niet beloven dat ik het bij het goede eind heb, maar goed, toch maar een poging.

Je website centreren zoals jij het wilt doe je inderdaad door je content in een element te plaatsen en deze vervolgens in de CSS het volgende te geven: (width is uiteraard maar een voorbeeld)

.elementnaam {
margin:0 auto;
width:960px;
}

Wat je qua navigatie kan doen, om aan te geven op welke pagina je bent is het geven van een apparte class aan het menu item.

Zo dus bijvoorbeeld:

<ul>
<li><a href="#">Home</a></li>
<li><a href="#" class="active">Over mij</a></li>
<li><a href="#">Contact</a></li>

En dan in je CSS gewoon .active zo stijlen zoals jij het wilt.

Hopelijk schiet je hier iets mee op!

[Tommmm15]

Ok maar hoe krijg ik nu die twee witte balken aan de zijkanten van het content gedeelte. En ik wil niet dat het content gedeelte kleiner wordt als je bijvoorbeeld je browser scherm halveert (bij windows 7 naar links/rechts sleept).

[ Voor 44% gewijzigd door Tommmm15 op 10-12-2012 14:49 ]

[Tommmm15]

body { margin-left:auto; margin-right:auto; width:60%; background-color: #333; font-family: myriad pro; } header nav ul { list-style: none; margin: 0px; padding: 10px; } header nav ul li { float: left; margin: 0 20px 0 20px } header nav ul li a { font-size: 30px; color: #C0C0C0; text-decoration: none; } header nav ul li a:hover { color: #15C5E8; }

[Tsjilp]

Dan moet je alle content wrappen in een element, bijvoorbeeld een div. Die geef je een vaste width en margin 0 auto;. Je body geef je background-color:#fff;
Sowieso niet met percentages willen als je niet wilt dat je content geschaald wordt bij het resizen van je browserwindow.

[Tommmm15]

Jeuj heb de drie kolommen.

[hiekikowan]

Ik heb niet naar je positioning-probleem gekeken, maar het vasthouden van de hover-style voor het actieve item wordt vaak als volgt gedaan.

Aan het actieve item (de pagina waar de gebruiker zich nu bevindt) wordt een class toegevoegd, bijvoorbeeld 'active'. In CSS doe je dan iets als volgt om dezelfde stijl voor :hover en .active te gebruiken...

Cascading Stylesheet:

a:hover, a.active {
    /* Stijl hier */
}

[Tommmm15]

Ok in de vakantie toch de draad maar weer opgepakt. Volgende probleem: http://imageshack.us/phot...09/showcasescrollbar.jpg/ krijg die scrollbar in de container div niet weg.... hij moet wel kunnen scrollen maar de rest moet allemaal op zn plaats blijven zitten.

[RobIII]

Tommmm15 schreef op maandag 10 december 2012 @ 14:47:
Ok maar hoe krijg ik nu die twee witte balken aan de zijkanten van het content gedeelte. En ik wil niet dat het content gedeelte kleiner wordt als je bijvoorbeeld je browser scherm halveert (bij windows 7 naar links/rechts sleept).

Tommmm15 schreef op woensdag 02 januari 2013 @ 23:09:
Volgende probleem: http://imageshack.us/phot...09/showcasescrollbar.jpg/ krijg die scrollbar in de container div niet weg.... hij moet wel kunnen scrollen maar de rest moet allemaal op zn plaats blijven zitten.

Mijn probleem met dit topic, en bovenstaande quotes specifiek, is dat dit onderhand een Kan iemand even...?-topic begint te worden en daar ben ik niet zo happig op. Je kunt voor een nieuw probleem prima een nieuw topic starten (en desnoods linken naar dit topic) maar hanteer dan in ieder geval de Quickstart bij 't typen van je topicstart; ik wil o.a. graag zien wat je zélf al geprobeerd/gezocht/gevonden hebt etc. Ook wijs ik je, nogmaals, op onze code tags i.t.t. het gemisbruiken van een table-tag voor 't plaatsen van code

[ Voor 31% gewijzigd door RobIII op 02-01-2013 23:38 ]