Web designer help

Mtazamaji · Apr 4, 2012

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 .

kotinkarwak · Apr 4, 2012

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;
     
}

Mtazamaji · Apr 4, 2012

kotinkarwak said:
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.

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 .

Codezilla · Apr 7, 2012

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

Mtazamaji · Apr 7, 2012

Codezilla said:
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

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

Hadoop · Apr 7, 2012

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.

Hadoop · Apr 7, 2012

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.

Hadoop · Apr 7, 2012

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>

Mtazamaji · Apr 7, 2012

Hadoop said:
Mtazamaji:

pia ondoa hizo margin declaration kwenye css, mfano umeweka negative value kwenye column ya tatu, sijui ulimaanisha nini hapo.

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

Web designer help

Mtazamaji

JF-Expert Member

kotinkarwak

JF-Expert Member

Mtazamaji

JF-Expert Member

Codezilla

Member

Mtazamaji

JF-Expert Member

Hadoop

Member

Hadoop

Member

Hadoop

Member

Mtazamaji

JF-Expert Member

Similar Discussions