uitlijning div's

[Ladyke]

hallo,

ik ben nog redelijk nieuw in de html en css wereld maar heb mijn website gemaakt met paar basis delen (codrops)
nu wil ik een soort sidebalk maken die autmatisch op dezelfde plaats blijft en meescaled, naargelang de screen resolution van de gebruiker.
op onderstaande foto is het resultaat dat ik krijg op mijn laptop

zo wil ik dat het op elke resolutie komt (mijn laptop is 1333 fzo denk ik)

onderstaande toont mijn pc met resolutie 1920x1080

wat dus niet goed is.

de bovenste kolom waar uploaded instaat mag veranderen van hoogte, de onderste 2 moeten vaste hoogt hebben.
kan iemand me helpen ?

dit is de pagina : http://www.bjornmertens.net/new/contactkopie.html
de css bestanden kun je openen
alvast superveel bedankt !

Bjorn

 

[tiran818]

Beste Ladyke,

Het is me niet helemaal duidelijk wat je precies wilt doen.
Als je wilt dat de 'sidebalk' rechts blijft ongeacht de grootte van de pagina dan kun je in plaats van een relatieve positionering een absolute gebruiken en vanaf rechts in plaats vanaf links.
Het gaat hier vooral om de div die je page-wrap hebt genoemd.
Als je de volgende code aanpast dan blijven ze netjes rechts.

#page-wrap {
opacity: 0.9;
/* width: 200px; */
position: absolute;
top: 50px;
right: 20px;
margin: 20px auto;
min-height: 500px;
height: auto !important;
}

Verder valt het me op dat je een container div om je codrops top bar heen hebt staan die niks doet en een content div waarin je page-wrap staat die eigenlijk je sidebar is.
De naamgeving kan zo voor verwarring zorgen.
Ik raad je aan om je vast aan te wennen zinnige namen te gebruiken voor je divs omdat je anders zal merken dat het onderhoud later lastig wordt.
Zo min mogelijk divs gebruiken en zo veel mogelijk duidelijke namen geven er aan.
Een page-wrap is normaal een element dat er voor zorgt dat je pagina gecentreerd wordt of in ieder geval iets dat om je hele pagina heen staat. Een container kan van alles zijn maar heeft meestal wel een eigen nut, het zei om javascript aan te hangen, het zei voor stijl doeleinden.
Ik zou alle divs nalopen en kijken wat ze nou eigenlijk doen en of de naam daar bij past. Als je geen zinnige naam kunt bedenken kun je eventueel commentaar er bij zetten of een appart document bijhouden waar in je een omschrijving geeft van wat iets doet. Meestal is een omschrijving niet nodig als de naam duidelijk genoeg is.

Ik stel voor dat je het element dat nu page-wrap heet hernoemt naar sidebar-right oid en de container om je menu weg haalt.

Verder zou ik de sidebar buiten de content plaatsen. Content kan dan worden gebruik voor de daadwerkelijke content die verschilt per pagina. Deze is dan ook makkelijker uit te lijnen op een manier die er voor zorgt dat de content niet voor of achter de sidebar komt te staan.

Ik hoop dat je hier iets aan hebt en niet overdonderd bent door de hoeveelheid informatie. Als je vragen hebt of ik iets onduidelijk heb uitgelegd, vraag dan gerust Dan zal ik proberen het (op een andere manier) uit te leggen.

 

[Ladyke]

hoi,

Dit is inderdaad de bedoeling, de bovenste div ga ik een automatische hoogte laten krijgen. de 2 eronder statisch.
de code die je ver hebt gegeven werkt perfect
nu ik weet dat de code momenteel beetje onoverzichtelijk is :/ maar komt omdat deze code een basic template is on CC (creative commons) van de site codrops dus ik heb hem zelf mogen aanpassen.

ik ga op jouw post volgende week dieper reageren, zit deze week in mijn examens en dat is even belangrijker (afstuderen ) dus ik ga hier volgende week zeker op terugkomen
alvast super uber mega thanks

 

[Ladyke]

hoi,
eiindelijk gedaab met die examens
nu inderdaad het is soms een beetje on overzichtelijk. maar deze code in een demo van codrops, soort templates dieje mag implementeren in je site.
nu hier zie je eer 3 demo's verwerkt in 1 dus maar op welke soort naam structuur zou jij dan willen werken ?
de bedoeling is nu, de functionele opbouw in orde te krijgen en dan de site optimaliseren

Dankje

 

[tiran818]

Hey Ladyke,

Ik zie dat het gelukt is.

Ik zou de container om je codrops-top menu weg halen. Deze doet namelijk momenteel niks.
Als het wel wat doet zou het logischer zijn om hem bijvoorbeeld nav-container of top-container te noemen (zodat duidelijk is wat het precies is)
Verder zou ik page-wrap vervangen door sidebar-right omdat dan gelijk duidelijk is wat het is en moet doen.