Dismiss Notice
You are browsing this site as a guest. It takes 2 minutes to CREATE AN ACCOUNT and less than 1 minute to LOGIN

Web designer help

Discussion in 'Tech, Gadgets & Science Forum' started by Mtazamaji, Apr 4, 2012.

  1. Mtazamaji

    Mtazamaji JF-Expert Member

    #1
    Apr 4, 2012
    Joined: Feb 29, 2008
    Messages: 5,972
    Likes Received: 27
    Trophy Points: 0
    Wakuu wenye maujuzi ya web designing nadhani itakuwa sahihi niseka wa case hii web designingI mean CSS



    nina issue kwenye hii Gym yangu ya mazoezi ya IT kwa vitendo . Baada ya muda nmefikiria nibadilishe design iwe na column tatu na sio mbii kama sasa .

    Sasa nimecheza cheza nayo ile column ya tatu nayotaka ikae upande wa kulia haikai juu badala yake iko chini ama unavyoona kwenye kiunganisho hicho niichoweka hapo juu. Sasa nauliza natakiwa nifanye nini Hiyo colum ya tatu ikae juu

    CSS ya page nzima hii hapa
    Code:
     #page-wrap { position: relative; 
    width: 960px; 
    padding: 30px; 
    margin: 30px auto 5px; 
    background: white; -moz-box-shadow: 0 0 20px black; }
    Mwanzoni width iikuwa 740 so nimeongeza kwenda 960 ii hiyo nafasi ( 220px) ichukuliwe na column nayotaka kuweka. Tatizo lingine hapa nafasi inatokea katikati na sio upande wa kulia . Why? Nifanye nini hii free space itokee upande wa kulia na si kati kati?

    CSS inayotakiwa kubeba colum/ content za kati kati ni
    Code:
     #main-content {float: right; width: 450px; margin: 100px 0x 0px 0px; position: relative; z-index: 20; }
    
    CSS inayobeba colum ya kushoto ni
    Code:
     aside { float: left; width: 215px; margin: 170px 0 0 0; }
    So far hii ya ushoto haina tatizo.....

    CSS ya upande wa kulia amayo ndyo nayotaka kuchomeka ni
    Code:
    #sidebar {
        
        float: right;
        margin: 10px 0px 0px 0px;
        width: 200px;
        margin-left:-200;
    }

    Kifupi inakubali ila tatizo inakwenda chini na si upande wa kulia.

    So far nimejaribu kugoogle tovuti kama Hii Dynamic drive na nyingine lakini bado sijaua nini natakiwa kufanya au kubadilisha kwenye template ya twentyten ya wordpress iliyochakachuliwa

    Karibuni n nitashukuru kwa ushaurinamsaada wa kiufundi .
     
  2. k

    kotinkarwak JF-Expert Member

    #2
    Apr 4, 2012
    Joined: Aug 5, 2010
    Messages: 386
    Likes Received: 0
    Trophy Points: 0
    See if firebug can assist you when troubleshooting such issues.
    I have loaded your page in firebug mode and I can't figure it out myself, tried to disable the css settings and find out which ones are concerned with the layout, no joy.

    Have tried using wakanda application to layout something similar and this is what is the CSS generated.

    Code:
    /*
        This CSS file was generated by Wakanda through the Styles tab for the Interface page and widgets.
        Changes to this CSS file might be lost when it is regenerated.
    */
    
    #container6 {
         top: 35px;
         bottom: 35px;
         left: 35px;
         right: 35px;
        
         position: absolute;
         
    }
    
    #container7 {
         width: 350px;
         height: 98px;
         top: 0px;
         left: 0px;
        
         position: absolute;
         
    }
    
    #container8 {
         width: 350px;
         height: 417px;
         top: 98px;
         left: 0px;
        
         position: absolute;
         
    }
    
    #container9 {
         width: 138px;
         height: 417px;
         top: 0px;
         left: 0px;
        
         position: absolute;
         
    }
    
    #container10 {
         width: 212px;
         height: 417px;
         top: 0px;
         left: 138px;
        
         position: absolute;
         
    }
    
    #container11 {
         width: 200px;
         height: 200px;
         top: auto;
         left: auto;
         position: absolute;
         
    }
    
    #container1 {
         width: 128px;
         height: 417px;
         top: 0px;
         left: 0px;
        
         position: absolute;
         
    }
    
    #container2 {
         width: 84px;
         height: 417px;
         top: 0px;
         left: 128px;
        
         position: absolute;
         
    }
    
     
  3. Mtazamaji

    Mtazamaji JF-Expert Member

    #3
    Apr 4, 2012
    Joined: Feb 29, 2008
    Messages: 5,972
    Likes Received: 27
    Trophy Points: 0
    thanks konti

    Can u gues waht could be the reason why that Sidebar (Div tag) as placed at the botton right hand side and not top right hand side. Its something to do with CSS but i need some fresh eyes frorm someone .
     
  4. Codezilla

    Codezilla Member

    #4
    Apr 7, 2012
    Joined: Sep 11, 2011
    Messages: 54
    Likes Received: 0
    Trophy Points: 0
    Hi Mtazamaji,
    i would like to mention that their are a number of CSS frameworks out there that can really help you with your lessons,personally i design using baseline css framework,it comes in handy in rapid development...
    All the best
     
  5. Mtazamaji

    Mtazamaji JF-Expert Member

    #5
    Apr 7, 2012
    Joined: Feb 29, 2008
    Messages: 5,972
    Likes Received: 27
    Trophy Points: 0
    Thanks codezzila
    But this practice site of mine is built on WordPress platform and twentyten theme. How can i know/identify which CSS framework twentyten template uses.

    i feel your advice is good for designing CSS from scratch .Correct me if am wrong but for knowledge purpose I will check and learn those CSS framework
     
  6. H

    Hadoop Member

    #6
    Apr 7, 2012
    Joined: Oct 28, 2011
    Messages: 89
    Likes Received: 0
    Trophy Points: 0
    Mtazamaji:
    1.Hizo columns tatu unatumia nini? div au td?
    >Na assume unatumia div:
    solution:
    >weka float:left kwenye kila css inayodefine hizo div tatu
    >pia ondoa hizo margin declaration kwenye css, mfano umeweka negative value kwenye column ya tatu, sijui ulimaanisha nini hapo.
     
  7. H

    Hadoop Member

    #7
    Apr 7, 2012
    Joined: Oct 28, 2011
    Messages: 89
    Likes Received: 0
    Trophy Points: 0
    Pia hiyo column ya kati umetumia float:right, ni mistake pia, ndio maana inalala kulia, just use float:left.
    Column ya tatu umesema haina content, so hiyo ni issue , usitegemee itaonekana kama iko empty, unapokuwa kwenye design type hata text mstari mmoj kuhakikisha inakuwa na kitu.
    Epuka kutumia hizo autogenerated tags, mafano position:relative, z-index:?. Ni poa, lakini si poa kivile.
    Njia nzuri ya ku declare css content ni kuanza na zile tags zinazogusa basic layout ya parent container(eg. width:value, float:left ) kwa kila div kati ya hizo tatu.
    Then ikiwa imekaa sawa hiyo, ndio uanze kupendezesha layout kwa kutumia hizo tags nyinginezo kwa mfano margin, padding, n.k.
     
  8. H

    Hadoop Member

    #8
    Apr 7, 2012
    Joined: Oct 28, 2011
    Messages: 89
    Likes Received: 0
    Trophy Points: 0
    Nimeweka simple code kurahisisha mpango mzima.
    Code:
    <html>
    <head>
    <!--Author:Hadoop-->
    <!--Job:Hadoop MapReduce Developer-->
    <title>DIV Test!</title>
    <style type="text/css">
    #page-wrap{width:885px;}
    #left{width:215px;float:left;background-color:#00ff00;}
    #middle{width:450px;float:left;background-color:#ffffff;}
    #right{width:220px;float:left;background-color:#b0c4de;}
    </style>
    </head>
    <body>
    <center>
    <div id="page-wrap">
       <div id="left">This is left div. Back ground color set to green!</div>
       <div id="middle">This is middle div. Back ground color set to white!</div>
       <div id="right">This is right div. Back ground color set to light bue!</div>
    </div>
    </center>
    </body>
    </html>
    
     
  9. Mtazamaji

    Mtazamaji JF-Expert Member

    #9
    Apr 7, 2012
    Joined: Feb 29, 2008
    Messages: 5,972
    Likes Received: 27
    Trophy Points: 0
    Aksate sana mkuu hizo -VE niikuwa najaribu jaribu baada ya kusomal hapa Dymnamicdrive lakini haikusaidia.Baadae kama unavyoshauri float left kwa template hii ndio ilikuwa mpango mzima
     
Loading...