Zmiana szerokości paneli Opcje

[pawelek1261]

Witam! jak mogę zmienić szerokość środkowych paneli?

[IceManSpy]

Szklana kula, która rozlała kawę z fusami mówi, że trzeba wykorzystać parametr width

[batman]

Witam! jak mogę zmienić szerokość środkowych paneli?

O tak - http://www.youtube.com/watch?v=KkfPEHOUwzQ

[pawelek1261]

Może ja pokaże swój .css bo ja w nim od środkowych paneli nie widze za bardzo żadnych kierunków dotyczących width

Kod

/* Comment element properties */

a {
    color: #FFF;
    text-decoration: none;
}

a:hover {
    color: #FFF;
    text-decoration: underline;
}

a.side {
    color: #CBCBCB;
    text-decoration: none;
}

a:hover.side {
    color: #FFF;
    text-decoration: underline;
}

a.white, li.white a {
    color: #FFF;
    text-decoration: none;
    padding: 6px 15px 6px 15px;
    border-width: 0 1px 0px 0px;
    border-color: #292a2c;
    border-style: solid;
}

a:hover.white, li.white a:hover {
    color: #1c1c1c;
    text-decoration: none;
    padding: 6px 15px 6px 15px;
    border-width: 0 1px 0px 0px;
    border-color: #292a2c;
    border-style: solid;
}


body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #CBCBCB;
    background: #000;
    margin: 0px;
}

hr {
    height: 1px;
    border: 1px solid #272727;
}

hr.side-hr {
    height: 1px;
    border: 1px solid #272727;
}

td {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
}

pre {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
}

.alt {
    color: #CBCBCB;
}

.spacer {
    margin-bottom: 10px;
}
.admin-message {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-align: center;
    color: #CBCBCB;
    background-color: #323232;
    border: 1px solid #000;
    padding: 3px 4px 5px 4px;
    margin-bottom: 5px;
}

a.menuu span {

display:none;

padding:2px 3px;

margin-left:5px;

width:180px;



}

a.menuu:hover span{

display: block;

z-index: 3;

position: absolute;

margin: -2px 0 0 -15px;

border:0px solid #ffffff;



color:#000000;



}

#fff; padding:3px; border:1px solid #3a93d2; white-space:nowrap; width:90px; z-index:400; height:auto;}


/* Form element properties */

form {
    margin: 0px;
}

.button {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: bold;
    color: #fff;
    background-color: #404040;
    background-image: url(images/button.gif);
    height: 20px;
    border: 1px solid #000;
    margin-top: 2px;
}

.bbcode {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #000;
    background-color: #eee;
    border: 1px solid #000;
    margin-top: 2px;
}

.textbox {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #CBCBCB;
    background-color: #323232;
    border: 1px solid #000;
}

/* Header and footer properties */

.sub-header ul{
    margin: 0;
    padding: 0;
}

.sub-header ul li{
    display: inline;
}

.sub-header ul li.first-link .bullet{
    display: none;
}

.full-header {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #399afc;
    padding: 0px 0px 0px 0px;
}

.glowna {
        padding: 0px 100px 0px 0px;}

.main-footer {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 9px;
    color: #888;
    padding: 5px;
}

.bottom-footer {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #CBCBCB;
    background-color: #323232;
    padding: 4px 4px 5px 4px;
}

.main-body {
    font-size: 10px;
    color: #CBCBCB;
    background-color: #1c1c1c;
    border-width: 0 1px 0 1px;
    border-color: #272727;
    border-style: solid;
    padding: 10px 10px 0 10px;
}

/* Side-Panel properties */

.side-border-left {
    color: #777;
    padding: 0px 0 5px 5px;
    width: 175px;
}

.side-border-right {
    color: #777;
    padding: 0px 5px 5px 0;
    width: 175px;
}

.scapmain {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: bold;
    color: #FFF;
    background-color: #323232;
    background-image: url(images/side.png);
  background-repeat: repeat-x;
}

.scapmain-left {
    width: 10px;
    height: 27px;
    background-color: #323232;
    background-image: url(images/side-left.png);
}

.scapmain-right {
    width: 10px;
    height: 27px;
    background-color: #323232;
    background-image: url(images/side-right.png);
}

.side-body {
    font-size: 10px;
    color: #fff;
    background-color: #1c1c1c;
    border-width: 0 0 0 1px;
    border-color: #272727;
    border-style: solid;
    padding: 10px 10px 0 10px;
}

.sideb {     background-image: url(images/sideb.png);     background-repeat: repeat-x; }

/* Center-Panel properties */

.news-category {
    border: 0;
    margin: 3px 5px 0 0;
    float: left;
}

.news-footer {
    font-size: 10px;
    color: #CBCBCB;
    background-color: #1c1c1c;
    border-width: 0 1px 0 1px;
    border-color: #272727;
    border-style: solid;
    padding: 3px 4px 0 4px;
}

.capmain {
    font-family: sans-serif, Helvetica, Verdana, Arial;
    font-size: 11px;    
      font-weight: bold;
    color: #399afc;
    background-color: #1c1c1c;
    background-image: url(images/cc.png);
    border-width: 0px 0px 0 0px;
    border-color: #272727;
    border-style: solid;
    padding: 0px 4px 4px 4px;
}

.capmain-left {
    width: 10px;
    height: 27px;
    background-color: #323232;
    background-image: url(images/cleft.png);
}

.capmain-right {
    width: 10px;
    height: 27px;
    background-color: #323232;
    background-image: url(images/cright.png);
}

.main-bg {
    color: #CBCBCB;
    padding: 0px 5px 0 5px;
}

/* General table properties */

.center {
    margin: 0 auto;
}

.tbl-border {
    background-color: #000;
}

.tbl {
    font-size: 11px;
    color: #CBCBCB;
    padding: 4px;
}

.tbl1 {
    font-size: 11px;
    color: #fff;
    background-color: #2c2c2c;
    padding: 4px;
}

.tbl2 {
    font-size: 11px;
    color: #fff;
    background-color: #1c1c1c;
    padding: 4px;

}

.forum-caption {
    font-size: 11px;
    font-weight: bold;
    color: #fff;
    background-color: #2c2c2c;
    padding: 2px 4px 4px 4px;
}

.quote {
    font-size: 11px;
    color: #CBCBCB;
    background-color: #323232;
    padding: 4px;
    margin: 0px 20px 0px 20px;
    border: 1px solid #000;
}

.poll {
    height: 12px;
    border: 1px solid #000;
}

.comment-name {
    font-weight: bold;
    color: #CBCBCB;
}

.shoutboxname {
    font-weight: bold;
    color: #888;
}

.shoutbox {
    color: #CBCBCB;
}

.shoutboxdate {
    font-size: 8px;
    color: #888;
}

.small {
    font-size: 10px;
    font-weight: normal;
}

.small2 {
    font-size: 10px;
    font-weight: normal;
    color: #CBCBCB;
}

.side-small {
    font-size: 10px;
    font-weight: normal;
    color: #CBCBCB;
}

.side-label {
    color: #CBCBCB;
    margin: 2px 0 2px 0;
    padding: 2px 2px 3px 2px;
}

/* Vertical Navigation */

#navigation h2 {
    font-size: 10px;
    font-weight: normal;
    background-color: #323232;
    margin: 0;
    padding: 4px;
}
    
#navigation ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

* html #navigation ul li{
   height: 1%;
}

#navigation a {
    display: block;
    color: #CBCBCB;
    padding: 2px;
    text-decoration: none;
}

#navigation a:hover {
    color: #CBCBCB;
    background-color: #323232;
}

/* Page Navigation */

.pagenav {
    padding: 4px;
}

.pagenav span {
    color: #CBCBCB;
    background-color: #323232;
    border: 1px solid #000;
    padding: 2px 4px 2px 4px;
    margin: 2px;
}

.pagenav a {
    color: #CBCBCB;
    background-color: #323232;
    border: 1px solid #000;
    padding: 2px 4px 2px 4px;
    margin: 2px;
    text-decoration: none;
}

.pagenav a:hover {
    color: #CBCBCB;
    background-color: #323232;
    margin: 2px;
    text-decoration: none;
}

PS @Batman fajne zachowanie z twojej strony jako moderator:)

Ten post edytował pawelek1261 13.07.2012, 16:17:53

[sobol6803]

Linka daj...

PS @Batman fajne zachowanie z twojej strony jako moderator:)

Adekwatne do Twojego wyczerpującego opisania problemu.

Ten post edytował sobol6803 13.07.2012, 16:19:51

[pawelek1261]

Nie mogę za bardzo bo dopiero tworze strone;/

[sobol6803]

Nie mogę za bardzo bo dopiero tworze strone;/

To skąd mamy wiedzieć gdzie i jak wyglądają te Twoje środkowe panele? Kontraktu z wróżbitą Maciejem nie podpisaliśmy. Chociaż daj kod HTML tych "środkowych paneli".

[pawelek1261]

No dlatego pokazuję wam CSS. Chodzi mi tylko aby zmienić ich szerokość na mniejszą

Ten post edytował pawelek1261 13.07.2012, 16:23:39

[batman]

PS @Batman fajne zachowanie z twojej strony jako moderator:)

Mimo iż forum jest nastawione głównie na PHP oraz tematy z tym językiem powiązane, zdarzają się czasami przypadki, iż młody adept sztuki programowania, poszukuje pomocy w dziedzinie nieco odbiegającej od głównej tematyki forum. Przyjąłem, niesłusznie jak się okazało, że chodzi o panele podłogowe. Nie wiem, co mną powodowało, gdy pisałem odpowiedź na wyczerpująco zadane pytanie.

A na poważnie. Jeśli chcesz uzyskać odpowiedź na swoje pytanie, to:
a) Jak poprawnie zadać pytanie
zamieść gdzieś przykład (np. na http://jsfiddle.net) demo.

[sobol6803]

No dlatego pokazuję wam CSS. Chodzi mi tylko aby zmienić ich szerokość na mniejszą

Dzięki komentarzom w css możemy ukrócić to do:

[CSS] pobierz, plaintext 
/* Center-Panel properties */
 
.news-category {
    border: 0;
    margin: 3px 5px 0 0;
    float: left;
}
 
.news-footer {
    font-size: 10px;
    color: #CBCBCB;
    background-color: #1c1c1c;
    border-width: 0 1px 0 1px;
    border-color: #272727;
    border-style: solid;
    padding: 3px 4px 0 4px;
}
 
.capmain {
    font-family: sans-serif, Helvetica, Verdana, Arial;
    font-size: 11px;    
      font-weight: bold;
    color: #399afc;
    background-color: #1c1c1c;
    background-image: url(images/cc.png);
    border-width: 0px 0px 0 0px;
    border-color: #272727;
    border-style: solid;
    padding: 0px 4px 4px 4px;
}
 
.capmain-left {
    width: 10px;
    height: 27px;
    background-color: #323232;
    background-image: url(images/cleft.png);
}
 
.capmain-right {
    width: 10px;
    height: 27px;
    background-color: #323232;
    background-image: url(images/cright.png);
}
 
.main-bg {
    color: #CBCBCB;
    padding: 0px 5px 0 5px;
}
[CSS] pobierz, plaintext 

Jednak to dalej nic nie wyjaśnia! Pokaż te div'y z pliku html (lub php), które odpowiadają za "środkowe panele". Po omacku się nie da.

Ew. próbuj do każdego selektora powyżej dodać

[CSS] pobierz, plaintext 
   width: 200px;
[CSS] pobierz, plaintext 

lub inną wartość w pikselach. Może trafisz na właściwy selektor.

[Kshyhoo]

Nie mogę za bardzo bo dopiero tworze strone;/

Nie tworzysz, tylko psujesz to, co już ktoś napisał. Dlaczego tak sądzę? Po komentarzach w kodzie, który załączyłeś.
Panowie, Panie, moim zdaniem grzebać trzeba tu:

[CSS] pobierz, plaintext 
/* Side-Panel properties */
 
.side-border-left {
    color: #777;
    padding: 0px 0 5px 5px;
    width: 175px;
}
 
.side-border-right {
    color: #777;
    padding: 0px 5px 5px 0;
    width: 175px;
}
[CSS] pobierz, plaintext 

[pawelek1261]

Kshyho side-border-right i side-border-left są od paneli bocznych, bo już to zmieniałem.
Dam też poniżej theme.php może ktoś to da rade rozszyfrować

Kod

<?php
if (!defined("IN_FUSION")) { die("Access Denied"); }

define("THEME_BULLET", "<span class='bullet'><img src='".THEME."/images/bullet.gif'></span>");


require_once INCLUDES."theme_functions_include.php";

function render_page($license=false) {
    
    global $settings, $main_style, $locale;

echo"





<table align='center' cellspacing='0' cellpadding='0' id='main'>

    <tr>

    <td>

    

    <table cellpadding='0' cellspacing='0' width='100%'>

    <tr>

    <td class='full-header'>

    

    <table cellpadding='0' cellspacing='0' width='100%'>

    <tr>

    <td>".showbanners()."</td>

    </tr>

    </table>

    

    </td>

    </tr>

    </table>";
//Content
    echo "<table cellpadding='0' cellspacing='10' width='100%' class='$main_style'>\n<tr>\n";
    if (LEFT) { echo "<td class='side-border-left' valign='top'>".LEFT."</td>"; }
    echo "<td class='main-bg' valign='top'>".U_CENTER.CONTENT.L_CENTER."</td>";
    if (RIGHT) { echo "<td class='side-border-right' valign='top'>".RIGHT."</td>"; }
    echo "</tr>\n</table>\n";

    
    //Footer
    echo "</tr>\n</table>\n";
    echo "<table cellpadding='0' cellspacing='0' width='100%'>\n<tr>\n";
    echo "<td align='left' class='main-footer'>Desing created by <a href='mailto:lrd_olteanu@yahoo.com'>Look</a> | Coded by <a href='mailto:ewe_3w3@ayhoo.com'>eWe</a><br />Theme by <a href='http://gfxpixel.info'>GFXpixel.info</a><br />Design Downloaded from <a href='http://www.template4all.com/php-fusion/' title='free phpfusion themes' target='_blank'>free phpfusion themes</a> | <a href='http://www.freethemes4all.com/' title='free website templates' target='_blank'>free website templates</a> | <a href='http://www.seodesign.us/' title='free psd files download' target='_blank'>free psd files</a><br />".showcounter()."";

    if (!$license) { echo "\n".showcopyright(); }
    echo "</br> ".stripslashes($settings['footer']);
    echo "</td>\n";
    echo "</tr>\n</table>\n";


    
}



function render_news($subject, $news, $info) {

    echo "<table cellpadding='0' cellspacing='0' width='100%'>\n<tr>\n";
    echo "<td class='capmain-left'></td>\n";
    echo "<td class='capmain'>".$subject."</td>\n";
    echo "<td class='capmain-right'></td>\n";
    echo "</tr>\n</table>\n";
    echo "<table width='100%' cellpadding='0' cellspacing='0'>\n<tr>\n";
    echo "<td class='main-body middle-border'>".$news."</td>\n";
    echo "</tr>\n<tr>\n";
    echo "<td align='center' class='news-footer middle-border'>\n";
    echo newsposter($info," ?").newsopts($info,"?").itemoptions("N",$info['news_id']);
    echo "</td>\n";
    echo "</tr>\n</table>\n";
    echo "<table cellspacing='0' cellpadding='0'><tr><td align='left'><img src='".THEME."/images/sideb-left.png' class='spacer'></td>
    <td align='center' class='sideb' width='100%'></td>
    <td align='right'><img src='".THEME."/images/sideb-right.png' class='spacer'></td>
    </tr></table>\n";
}

function render_article($subject, $article, $info) {
    
    echo "<table width='100%' cellpadding='0' cellspacing='0'>\n<tr>\n";
    echo "<td class='capmain-left'></td>\n";
    echo "<td class='capmain'>".$subject."</td>\n";
    echo "<td class='capmain-right'></td>\n";
    echo "</tr>\n</table>\n";
    echo "<table width='100%' cellpadding='0' cellspacing='0'>\n<tr>\n";
    echo "<td class='main-body middle-border'>".($info['article_breaks'] == "y" ? nl2br($article) : $article)."</td>\n";
    echo "</tr>\n<tr>\n";
    echo "<td align='center' class='news-footer'>\n";
    echo articleposter($info," ?").articleopts($info,"?").itemoptions("A",$info['article_id']);
    echo "</td>\n</tr>\n</table>\n";
    echo "<table cellspacing='0' cellpadding='0'><tr><td align='left'><img src='".THEME."/images/sideb-left.png' class='spacer'></td>
    <td align='center' class='sideb' width='100%'></td>
    <td align='right'><img src='".THEME."/images/sideb-right.png' class='spacer'></td>
    </tr></table>\n";

}

function opentable($title) {

    echo "<table cellpadding='0' cellspacing='0' width='100%'>\n<tr>\n";
    echo "<td class='capmain-left'></td>\n";
    echo "<td class='capmain'>".$title."</td>\n";
    echo "<td class='capmain-right'></td>\n";
    echo "</tr>\n</table>\n";
    echo "<table cellpadding='0' cellspacing='0' width='100%'>\n<tr>\n";
    echo "<td class='main-body'>\n";

}

function closetable() {

    echo "</td>\n";
    echo "</tr>\n</table>\n";
    echo "<table cellspacing='0' cellpadding='0'><tr><td align='left'><img src='".THEME."/images/sideb-left.png' class='spacer'></td>
    <td align='center' class='sideb' width='100%'></td>
    <td align='right'><img src='".THEME."/images/sideb-right.png' class='spacer'></td>
    </tr></table>\n";

}

function openside($title, $collapse = false, $state = "on") {

    global $panel_collapse; $panel_collapse = $collapse;
    
    echo "<table cellpadding='0' cellspacing='0' width='100%'>\n<tr>\n";
    echo "<td class='scapmain-left'></td>\n";
    echo "<td align='center' class='scapmain'>$title</td>\n";
    if ($collapse == true) {
        $boxname = str_replace(" ", "", $title);
        echo "<td class='scapmain' align='right'>".panelbutton($state, $boxname)."</td>\n";
    }
    echo "<td class='scapmain-right'></td>\n";
    echo "</tr>\n</table>\n";
    echo "<table cellpadding='0' cellspacing='0' width='100%'>\n<tr>\n";
    echo "<td class='side-body'>\n";    
    if ($collapse == true) { echo panelstate($state, $boxname); }

}

function closeside() {
    
    global $panel_collapse;

    if ($panel_collapse == true) { echo "</div>\n"; }    
    echo "</td>\n</tr>\n</table>\n";
    echo "<table cellspacing='0' cellpadding='0'><tr><td align='left'><img src='".THEME."/images/sideb-left.png' class='spacer'></td>
    <td align='center' class='sideb' width='100%'></td>
    <td align='right'><img src='".THEME."/images/sideb-right.png' class='spacer'></td>
    </tr></table>\n";

}
?>

Ten post edytował pawelek1261 13.07.2012, 20:59:08

[sobol6803]

Z tego wynika, że jednak musisz zmniejszyć panele boczne. Mogę się mylić, ale spróbuj dać parametr width na 150px, 120px, itp.

[CSS] pobierz, plaintext 
    /* Side-Panel properties */
 
    .side-border-left {
    color: #777;
    padding: 0px 0 5px 5px;
    width: 175px;
    }
 
    .side-border-right {
    color: #777;
    padding: 0px 5px 5px 0;
    width: 175px;
    }
[CSS] pobierz, plaintext 

To jest php-fusion, tak?

[thek]

Patrząc na funkcje wklejone..Tak, to php-fusion, bo miałem kiedyś z nim do czynienia i openside, closetable tyczyły sidebarów.

[pawelek1261]

Tak php fusion. Kurde bo właśnie panele boczne (prawy) chcę mieć większy a środkowy troche pomniejszyć

Ten post edytował pawelek1261 14.07.2012, 05:36:38

[Kshyhoo]

Zmniejsz parametry tego, o czym wcześniej pisałem. Jak widzisz, są trzy komórki tabeli: side-border-left + main-bg + side-border-right odpowiedzialne za szerokość thema. Swoją drogą, poszukaj lepiej thema z divami...

[PHP] pobierz, plaintext 
echo "<table cellpadding='0' cellspacing='10' width='100%' class='$main_style'>\n<tr>\n";
    if (LEFT) { echo "<td class='side-border-left' valign='top'>".LEFT."</td>"; }
    echo "<td class='main-bg' valign='top'>".U_CENTER.CONTENT.L_CENTER."</td>";
    if (RIGHT) { echo "<td class='side-border-right' valign='top'>".RIGHT."</td>"; }
    echo "</tr>\n</table>\n";
[PHP] pobierz, plaintext 

Ten post edytował Kshyhoo 14.07.2012, 08:07:48

[sobol6803]

Tak php fusion. Kurde bo właśnie panele boczne (prawy) chcę mieć większy a środkowy troche pomniejszyć

Z tego co widać, to ustalasz tylko rozmiary bocznych paneli, a środkowy ustawia się sam, więc zwiększ width prawego, to wtedy środkowy powinien się pomniejszyć.

[pawelek1261]

No właśnie jak powiększe np. do 500px prawy to on się maksymalnie powiększy do 300pxdlatego właśnie, że blokuje go środkowy;/

[IceManSpy]

Zainstaluj sobie w Firefox lub Chrome dodatek Firebug i zobacz jakie parametry ma środkowy panel. Tak będzie Ci łatwiej to znaleźć i edytować.

[pawelek1261]

Ok jakoś sobie z tym już poradziłem. A mam jeszcze jedno pytanie trochę mniej dotycząca paneli. Bo na stronie mam menu i zaraz pod nim system newsów to jako mogę odzielić menu od systemu newsów aby między nimi była większa odległość?

Ten post edytował pawelek1261 15.07.2012, 08:25:23