[CSS] Joomla site template kapot

[Angelevo]

Beste allemaal; ten einde raad klop ik bij jullie aan. Een tijd terug heeft een kennis (met iets meer expertise) met Joomla een site voor me opgezet. De gfx heb ik zelf (heel amateuristisch) in photoshop gemaakt. Nu heeft die kennis absoluut geen tijd meer om de website af te maken. In principe werkt alles (CMS etc.) behalve de template. Zelf kan ik best e.e.a. aanpassen, maar op de een of andere manier lukt het me niet. Is er hier iemand bekend met Joomla?

Het is een site om een map in Warcraft III (spelletje) te promoten/aan te bieden, je kunt 'm hier zien:
www.sczonecontrol.nl/joomla

Ik heb al wat aan het script lopen klooien in de hoop dat het beter zou worden, maar ik zie de helft niet verschijnen. Ook valt me op dat IE het er nog slechter vanaf brengt dan firefox.

Uiteindelijk is de bedoeling dat ik bovenin een header heb, vervolgens een stuk met 5 buttons en dan een content deel, allen met borders. Het content deel zou moeten scalen (heb ik ook gfx voor). Daarnaast (deze is wel zichtbaar) een "marine" ter decoratie. (ik kan evt. een voorbeeld posten indien nodig)

En ja, de huidige Gfx zijn lelijk - die heb ik ondertussen al wat bijgewerkt, maar wil eerst de template recht trekken. Wie durft!? Alvast bedankt!

*doe maar niet*

code:

@media screen{

    html {
        font-family: Verdana;
        font-size: 10px;
    }

    body {
        margin: 0 0;
        padding: 0 0;
    }

    p {
      margin-top: 0;
      margin-bottom: 5px;
    }

    a{
       color: #343399;
       text-decoration: underline;
    }

    a:hover{
       text-decoration: underline;
    }

    img{
        border: 0px;
    }

    td{
        font-size:11px;
        text-align:left;
    }

    #container{
        background-color: #000;
        height: 1080px;
    }

    #website {
        margin-left: 0px;
        margin-right: 0px;
        padding: 0;
        text-align: left;
        width: 1349px;
        background-color: black;
        position: relative;
        overflow:hidden;
    }

    #header {
        position: relative;
        background-image: url(../images/header.png);
        background-repeat: no-repeat;
        left: 319px;
        width: 1024px;
        height: 219px;
    }

    #buttons{
        position: relative;
        left: 337px;
        background-image: url(../images/buttons.png);
        width: 989px;
        height: 69px;
    }

    #content{
        position:relative;
        background-image: url(../images/content.png);
        width: 1349px;
        height: 792px;
        background-repeat: no-repeat;
    }
    #text{
        color: #FFF;
        position: absolute;
        top: 335px;
        left: 370px;
        width: 925px;
        height: 700px;
        background-color: #000;
        overflow-y: scroll;
        overflow-x: hidden;
        scrollbar-3dlight-color:#BCBCBC;
        scrollbar-arrow-color:#000;
        scrollbar-track-color:#000;
        scrollbar-darkshadow-color:#000;
        scrollbar-face-color:#FFF;
        scrollbar-highlight-color:#BCBCBC;
        scrollbar-shadow-color:#BCBCBC;
    }
/* font family */
    h3,
    .kop1,
    span .kop1,
    h2 .kop1,
    .contentheading,
    .componentheading,
    .sectiontableheader{
        font-family: Verdana;
        font-weight: bold;
        padding-bottom:15px;
        font-size: 14px;
        color: #fff;
    }

    .kop2 {
        font-family: Verdana;
        font-weight: bold;
        font-size: 12px;
        color: #fff;
    }

    .kop3 {
        font-family: Verdana;
        font-weight: bold;
        font-size: 11px;
        color: #fff;
    }

    a:link,
    a:visited {
        text-decoration: none;
    }

    a:hover {
        text-decoration: none;
    }
}

[ Voor 15% gewijzigd door RobIII op 19-10-2009 21:18 ]

[Da Weef]

Is de code die je hierboven post voor de pagina waarnaar je linkt?

Een snelle blik met Firebug laat namelijk zien dat veel van elementen die je hierboven definieert niet aanwezig zijn:

#Container -> #Wrapper?
#Header -> #Top?

En voor #website en #buttons kan ik al hememaal niets vergelijkbaars vinden... Ik ben niet echt bekend met Joomla, maar het lijkt me dat je sowieso wat html moet aanpassen/toevoegen voordat je CSS gaat schrijven

[mad_max234]

De CSS die echt gebruikt word door de site is wat uitgebreider, en daar staat #wapper wel tussen.

Zal hem niet posten wat de css bestaat uit 900+ regels, vond het iets te veel.
http://www.sczonecontrol....d-j15-70/css/template.css

Met Firebug had je dat ook kunnen zien dat die #wapper op regel 33 staat.

Even terug naar je probleem, denk dat je je css eens goed moet bekijken en met firebug je pagina bekijken, dat is een plugin voor firefox waarmee je heel gemakkelijk je css van je pagina en de opmaak ervan kan bekijken via je browser. en geeft ook gelijk op welke regel je het kan vinden in je css bestand. succes met debuggen.

En let ook op margin verschillen in IE en firefox, zoek maar eens met google zijn paar goede Nederlandse sites die dat uitleggen en wat je er tegen kan doen.

[RobIII]

Toch valt dit topic onder Kan iemand even...? en daar doen we hier niet aan

We zien hier graag wat je al geprobeerd hebt ("Ik heb al wat aan het script lopen klooien" voldoet natuurlijk niet). Heb je de kennis niet in huis om de aanpassingen te maken dan kun je het uitbesteden aan iemand die dat wel heeft (maar niet hier; zie werving) of zorgen dat je die kennis zelf op doet door de nodige tutorials etc. door te nemen en veel te oefenen.

Het is niet de bedoeling dat wij de fouten gaan zoeken en voor je fixen.

Give a man a fish and feed him for a day. Teach a man how to fish and feed him for a lifetime.