hulp gevraagd bij opmaak template

Status
Niet open voor verdere reacties.
K

kimiez79

Gebruiker
Lid geworden
27 mrt 2011
Berichten
16
Hallo allemaal,

graag wil ik jullie hulp vragen bij het volgende. Ik ben bezig een template te bouwen, waarbij zowel het menu als de content variabel moeten zijn qua hoogte. Nu heb ik het bij de content al voor elkaar, maar bij het menu kom ik er niet helemaal uit ivm de opmaak. het gaat om deze site:

http://www.lasua.nl/cms/

het menu komt aan de linkerkant te staan (in dat vakje). Ik heb al geprobeerd om het met een tabel (in een divje) te doen, maar dan sluit het niet mooi op elkaar aan. Mijn probleem is dus dat dat vlakje ook moet doorlopen naar beneden.. Hoop dat ik het zo een beetje duidelijk uitleg.

Alvast heel erg bedankt voor jullie hulp.
 
Yeps, ik denk dat de <div id="groep"> een background-img moet krijgen in de breedte:

bg-groep.png

bg-groep.png​

Dit strookje kan je met repeat-y over de hele hoogte van de #groep laten lopen, zodat alles wat nu in het gat zit, ook een achtergrond krijgt. Voor de rest worden de al bestaande achtergrond-images er overheen geplakt in de andere div's, dus dat zou geen kwaad moeten kunnen.

Met vriendelijke groet,
CSShunter
 
Allereerst excuses voor de late reactie.. er kwamen een paar andere dingen tussendoor..

De site vordert redelijk, alleen blijf ik problemen houden met het submenu.. Zodra de content langer wordt dan het vak, loopt het submenu zelf wel verder door, maar de rest van de website niet.. de iconen eronder blijven gewoon staan.

Zou je me hier misschien ook nog mee willen helpen?

Wederom alvast heel erg bedankt!
 
Hoi kimiez79,
Ja, ik zie wat er mis gaat.
Er zit nogal een overdaad aan {float:left;} in verschillende containers, die verduisteren wat er aan de hand kan zijn.
Die er eerst maar eens uit halen:
  • #submenu-top, #submenu-content en #submenu-bottom hoeven niet te floaten, want ze zijn even breed als hun container #submenu, en komen vanzelf onder elkaar.
De container #submenu heeft een background: transparent url(../images/index_04_achtergrond.jpg);.
  • Die kan er ook uit, want die zit al in het middendeel #submenu-content.
De #submenu-content heeft een {min-height: 494px;}. maar de omvattende container #submenu heeft een vaste {height: 538px;} en kan in conflict komen met de inhoud van het submenu.
  • Die vaste height moet er dus ook uit.
De container #image2, die ook links drijft, moet direct onder het submenu komen, en moet niet extra naar links:
  • De margin-top en de margin-left van de #image2 moeten op 0 gezet worden.
Het resultaat hiervan is deze:
  • Testpagina: kimi-1.htm.
  • Het submenu is tijdelijk op een krappe hoogte gezet, om te kunnen zien of het mis gaat.
  • Met stippellijntjes zijn de omtrekken van de <div>'s aangegeven (voor Internet Explorer: > IE7 om ze te kunnen zien).
De container #image2 met de icoontjes staat nu rechts naast het submenu, in plaats van eronder. :confused:
En dat klopt: om er onder te komen, moet de #image2 een {clear: left;} krijgen.
Het resultaat hiervan is deze:
Mooi, maar nu heeft de #image2 ook de hele #content in z'n val meegesleept! :confused:
En dat klopt ook: een "clear" werkt door op alles wat erna komt.
De "clear" moet dus wel t.o.v. het submenu komen, maar niet t.o.v. de content.

Dat is te bereiken door het submenu en de #image2 samen in een nieuwe <div id="leftcolumn"> te zetten, die ook een {float: left;} krijgt.
Binnen die nieuwe div kan de "clear" nu ongestraft gebruikt worden, en de content komt er nu naast zoals de bedoeling is.
Het resultaat hiervan is deze:
  • Testpagina: kimi-3.htm. :)
  • En voor een grote inhoud van het submenu bijvoorbeeld:
  • Testpagina: kimi-4.htm. :)
  • En voor weinig inhoud in de content bijvoorbeeld:
  • Testpagina: kimi-5.htm. :)
Met vriendelijke groet,
CSShunter
 
Wauw! wat een geweldige uitleg! En wat super dat je er zo de tijd voor neemt.. ben echt sprakeloos, en zeer onder de indruk.

Ik ga er vanavond meteen mee aan de slag!

Weet niet hoe ik je moet bedanken hiervoor...
 
Graag gedaan. :) 't Is vaak makkelijker zelf vanaf 0 een ontwerp te maken dan een bestaand template aan te passen.
Je kan nog doen:
Code: 
#header {
   ...
   border-top: 10px solid black;
   }
om de L en de S niet pal tegen de rand van het scherm aan te laten staan.
En misschien het header-img wat meer kleurverzadiging geven, zodat de vliegende dame wat minder flets wordt.
 
Aha, er zijn weer een paar floatjes ingeslopen: :P
Code: 
#submenu-content ul {
   ...
   float: left;
   }
#submenu-content ul.joomla-nav {
   ...
   float: left;
   }
Weg ermee!
De icoontjes van onder het submenu zitten nu alvast op hun goede plek.

Er zit er bovenin het submenu nog wel een gaatje in de background. :confused:
Klopt!
Als ergens een <ul> staat, een inspringer met bullets, geven browsers die automatisch wat boven- en onder-margin, zodat de inspringer wat los komt te staan van de gewone tekst.
  • Net als hier!
Maar ... de submenu-content moet boven en beneden direct aansluiten bij de #submenu-top en #submenu-bottom waarin de ronde hoekjes zitten, en mag dus geen afstand (margin!) erboven hebben.
Ook niet automatisch, dat moet ongedaan worden gemaakt. Dus:
Code: 
#submenu-content ul {
   ...
   margin-top: 0;
   }
Om wat afstand tot de bovenrand te krijgen, kan wel een padding gebruikt worden, want dat is opvulling die binnen een element komt te zitten (en aan het element zelf hangt het background-img vast, dat gaat dus altijd goed).
Code: 
#submenu-content ul {
   ...
   margin-top: 0;
   padding-top: 10px;
   }
Nu staat er nog een geweldig gat aan de onderkant. Maar de oorzaak daarvan zal duidelijk zijn:
Code: 
#submenu-content ul {
   ...
   margin-bottom: 120px;
   }
Ook daar moet het een padding worden, en moet de margin-bottom expliciet op 0 worden gezet.
Dat zou 'm moeten zijn.

Met vriendelijke groet,
CSShunter
________
Bij deze ontdekkingsreis: dank aan de gids Firebug, die prachtig laat ziet waar wat zit, en met welke css-eigenschappen.
En waarin je even vlug online iets anders kunt proberen: zonder editor, uploaden of andere toestanden!
 
En wederom dank! ik heb idd firebug en de webdeveloper toolbar geinstalleerd.. maar toch kom ik nog vaak in de problemen met de floats, margins en paddings.. maar heb in ieder geval weer veel geleerd hiervan! Dank je..
 
padding, margin en breedte !

Bij paddings en breedtes stel ik me altijd voor dat het om schoudervulling gaat.


padding-geen.png

zonder padding

padding-met.png

met padding​

Een schoudervulling komt altijd bij de breedte van het lichaam!
  • Een padding ook: die wordt opgeteld bij de opgegeven breedte van een element.
  • De margin niet: dat is alleen de afstand tot het volgende element.

  • Een padding krijgt de achtergrond (kleur of figuur) die voor het element is opgegeven.
  • Een margin niet: die krijgt de achtergrond die er ook zonder de plaatsing van het element zou zijn.
In tekening:
padding-en-margin.png

het onderling verband​

Als je dit hebt in je css:
Code: 
body {
   background-color: white;
}
#mijnDiv {
    width: 200px; /* = de breedte van de inhoud van de div ! */
    margin-left: 20px;
    margin-right: 25px;
    padding-left: 10px;
    padding-right: 15 px;
    background-color: lavender;
    }
... dan:
  • is de breedte van de inhoud (bv. de tekst): 200px,
  • is de totale breedte: 225px (width van 200px + padding-left van 10px + padding-right van 15px),
  • is de vrije ruimte aan de linkerkant: 20px (de margin-left),
  • is de vrije ruimte aan de rechterkant: 25px (de margin-right),
  • loopt de lavendel-achtergrondkleur door over de padding (en pakt dus de volle breedte van element + paddings),
  • maar hebben de margins gewoon de witte achtergrondkleur van de <body>.
De breedte van een <div> is dus niet hetzelfde als de opgegeven "width", als er ook nog paddings een rol spelen!

MAAR (eigenlijk: "dus") ;):
Als je een totale breedte van een element weet, en je hebt ook nog paddings, dan moet je terugrekenen om de "width" van (de inhoud van) het element te bepalen. Bv.:
  • breedte van een kolom moet worden: 400px,
  • er moet links er rechts een padding in komen van 20px, om de tekst niet pal tegen de rand te krijgen.
Dan wordt het:
Code: 
#mijnKolom {
    width: 360px;
    padding-left: 20px;
    padding-right: 20px;
    }
Bij de hoogte van een element en de margin-top, padding-top, margin-bottom en padding-bottom werkt het op dezelfde manier. Ook daar komt een padding er steeds bij.
Dan zijn de paddings geen schoudervullingen, maar hoge hakken en/of een hoge hoed :):
ook die worden opgeteld bij de lengte van het lichaam, als je wilt weten of je nu wel of niet onder de deur door kan.

Met vriendelijke groet,
CSShunter
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan