ilch Forum » Ilch Clan 1.1 » Design und Templates » Forum verbreitern -auch über linkes Menü

Geschlossen
  1. #1
    User Pic
    Tyrargo Mitglied
    Registriert seit
    30.01.2006
    Beiträge
    5.541
    Beitragswertungen
    7 Beitragspunkte
    Bei meinem Test-Design ist es ja so, dass wenn ich auf das Forum gehe, die rechten Boxen ausgeblendet werden und das Forum so breiter wird.

    Nun hätte ich es gern so, dass man das auch mit der linken Seite machen kann. Das dort das Menü und Boxen auch ausgeblendet werden.

    Ich habe schon versucht die index anzupassen, aber dann hing das Design halb in der Luft.

    Hier mal der Code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>{TITLE}</title>
    <link rel="stylesheet" type="text/css" href="include/designs/mar_BlackSolution_modCS/modCSstyle.css">
    <script type="text/javascript" src="include/designs/mar_BlackSolution_modCS/flash/js/swfobject/swfobject.js">
    <link href="_stylesheet.css" rel="stylesheet" type="text/css">
    <script src="js/bbcode.js" language="jscript" type="text/javascript"></script>
    
    <!--Waitbox begin-->
    <div id="waitDiv" class="waitbox" style="left: 27%; visibility: hidden; position: absolute; top: 426px" align="center">
    <table cellpadding="6" summary="Splash-Screen Wait">
    
    <tbody>
    <tr>
    <td><div align="center"><b></b><br><img src="include/designs/mar_BlackSolution_modCS/bilder/wait.gif" border="0" align="top"><br clear="all"></div></td>
    </tr>
    </tbody>
    </table>
    </div>
    
    <script type="text/javascript">
    var DHTML = (document.getElementById || document.all || document.layers);
    function ap_getObj(name)
    {
    if (document.getElementById) { return document.getElementById(name).style; }
    else if (document.all) { return document.all[name].style; }
    else if (document.layers) { return document.layers[name]; }
    }
    function ap_showWaitMessage(div,flag)
    {
    if (!DHTML) return; var x = ap_getObj(div); x.visibility = (flag) ? 'visible':'hidden'
    if(! document.getElementById) if(document.layers) x.left=280/2; return true;
    }
    ap_showWaitMessage('waitDiv', 1);
    
    </script>
    <!--Waitbox end-->
    
    <style type="text/css">
    
    #dropmenudiv{
    border-left:0px none; border-right:0px none; border-top:0px none; border-bottom:0px none; position:absolute;
    line-height:18px;
    z-index:100; font-style:normal; font-variant:normal; font-weight:normal; font-size:12px; font-family:Verdana
    }
    
    #dropmenudiv a{
    width: 100%;
    display: block;
    text-indent: 3px;
    border-bottom: 0px solid black;
    padding: 1px 0;
    color: #a5a5a5;
    text-decoration: none;
    font-weight: bold;
    background-image:url('include/designs/mar_BlackSolution_modCS/bilder/menu_stand.png');
    }
    
    #dropmenudiv a:hover{            /*hover background color*/
    color: #0077CC;
    background-image:url('include/designs/mar_BlackSolution_modCS/bilder/menu_over.png') ;
    }
    
    </style>
    
    <style type="text/css">
    {
    body { margin: 5% auto; text-align:center;}
    #cu3er-container {width:414px; outline:0;}
    }
    </style>
    <script type="text/javascript">
    		var flashvars = {};
    		flashvars.xml = "include/designs/mar_BlackSolution_modCS/flash/config.xml";
    		flashvars.font = "font.swf";
    		var attributes = {};
    		attributes.wmode = "transparent";
    		attributes.id = "slider";
    		swfobject.embedSWF("include/designs/mar_BlackSolution_modCS/flash/cu3er.swf", "cu3er-container", "414", "128", "9", "include/designs/mar_BlackSolution_modCS/flash/js/swfobject/expressInstall.swf", flashvars, attributes);
    </script>
    
    <script type="text/javascript">
        var box = 4;
        var chosbox = 1;
        function togglebox (tshow) {
            tshow = isNaN(tshow) ? 1 : tshow;
            if (tshow < 1 || tshow > box) {
                tshow = (chosbox < box) ? chosbox + 1 : 1;
            }
            document.getElementById('boxx_'+chosbox).style.display = 'none';
            document.getElementById('boxx_'+tshow).style.display = '';
            chosbox = tshow;
        }
    </script>
    
    <script type="text/javascript">
    
    /***********************************************
    * AnyLink Drop Down Menu- © Dynamic Drive (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit http://www.dynamicdrive.com/ for full source code
    ***********************************************/
    
    //Contents for menu 1
    var menu1=new Array()
    menu1[0]='<a href="?news">Neuigkeiten</a>'
    menu1[1]='<a href="?gbook">Gästebuch</a>'
    menu1[2]='<a href="?gallery">Bildergalerie</a>'
    menu1[3]='<a href="?kalender">Kalender</a>'
    
    //Contents for menu 2, and so on
    var menu2=new Array()
    menu2[0]='<a href="?teams">Teams</a>'
    menu2[1]='<a href="?joinus">JoinUs</a>'
    menu2[2]='<a href="?fightus">FightUs</a>'
    menu2[3]='<a href="?wars">Wars</a>'
    menu2[4]='<a href="?trains">Training</a>'
    menu2[5]='<a href="?rules">Regeln</a>'
    
    //Contents for menu 3, and so on
    var menu3=new Array()
    menu3[0]='<a href="?forum">Forum</a>'
    menu3[1]='<a href="?user">Mitglieder</a>'
    menu3[2]='<a href="?links">Links</a>'
    menu3[3]='<a href="?downloads">Downloads</a>'
    menu3[4]='<a href="?awaycal">Away</a>'
    
    //Contents for menu 4, and so on
    var menu4=new Array()
    menu4[0]='<a href="?contact">Kontakt</a>'
    menu4[1]='<a href="?impressum">Impressum</a>'
    menu4[2]='<a href="?rules">Regelwerk</a>'
    menu4[3]='<a href="?history">Geschichte</a>'
    menu4[4]='<a href="?awards">Auszeichnungen</a>'
    
    var menuwidth='123px' //default menu width
    var menubgcolor='write'  //menu bgcolor
    var disappeardelay=250  //menu disappear speed onMouseout (in miliseconds)
    var hidemenu_onclick="yes" //hide menu when user clicks within menu?
    
    /////No further editting needed
    
    var ie4=document.all
    var ns6=document.getElementById&&!document.all
    
    if (ie4||ns6)
    document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')
    
    function getposOffset(what, offsettype){
    var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
    var parentEl=what.offsetParent;
    while (parentEl!=null){
    totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
    parentEl=parentEl.offsetParent;
    }
    return totaloffset;
    }
    
    
    function showhide(obj, e, visible, hidden, menuwidth){
    if (ie4||ns6)
    dropmenuobj.style.left=dropmenuobj.style.top="-500px"
    if (menuwidth!=""){
    dropmenuobj.widthobj=dropmenuobj.style
    dropmenuobj.widthobj.width=menuwidth
    }
    if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
    obj.visibility=visible
    else if (e.type=="click")
    obj.visibility=hidden
    }
    
    function iecompattest(){
    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
    }
    
    function clearbrowseredge(obj, whichedge){
    var edgeoffset=0
    if (whichedge=="rightedge"){
    var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
    dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
    if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
    edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
    }
    else{
    var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
    var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
    dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
    if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?
    edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
    if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?
    edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge
    }
    }
    return edgeoffset
    }
    
    function populatemenu(what){
    if (ie4||ns6)
    dropmenuobj.innerHTML=what.join("")
    }
    
    
    function dropdownmenu(obj, e, menucontents, menuwidth){
    if (window.event) event.cancelBubble=true
    else if (e.stopPropagation) e.stopPropagation()
    clearhidemenu()
    dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
    populatemenu(menucontents)
    
    if (ie4||ns6){
    showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
    
    dropmenuobj.x=getposOffset(obj, "left")
    dropmenuobj.y=getposOffset(obj, "top")
    dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
    dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
    }
    
    return clickreturnvalue()
    }
    
    function clickreturnvalue(){
    if (ie4||ns6) return false
    else return true
    }
    
    function contains_ns6(a, b) {
    while (b.parentNode)
    if ((b = b.parentNode) == a)
    return true;
    return false;
    }
    
    function dynamichide(e){
    if (ie4&&!dropmenuobj.contains(e.toElement))
    delayhidemenu()
    else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
    delayhidemenu()
    }
    
    function hidemenu(e){
    if (typeof dropmenuobj!="undefined"){
    if (ie4||ns6)
    dropmenuobj.style.visibility="hidden"
    }
    }
    
    function delayhidemenu(){
    if (ie4||ns6)
    delayhide=setTimeout("hidemenu()",disappeardelay)
    }
    
    function clearhidemenu(){
    if (typeof delayhide!="undefined")
    clearTimeout(delayhide)
    }
    
    if (hidemenu_onclick=="yes")
    document.onclick=hidemenu
    
    </script>
    	<link rel="stylesheet" href="include/includes/lightbox/css/lightbox.css" type="text/css" media="screen" />
    
    	<script type="text/javascript" src="include/includes/lightbox/js/jquery.smooth-scroll.min.js"></script>
    	<script type="text/javascript" src="include/includes/lightbox/js/jquery-1.7.2.min.js"></script>
    	<script type="text/javascript" src="include/includes/lightbox/js/jquery-ui-1.8.18.custom.min.js"></script>
    	<script type="text/javascript" src="include/includes/lightbox/js/lightbox.js"></script>
    </head>
    <body>
    <div align="center"><div id="all">
    <!-- BREAK //-->
    
    <div id="img01" align="left" style="margin-top: 37px">
    </div>
                    <td><table width="517" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                      <td><img src="include/designs/mar_BlackSolution_modCS/bilder/links_leer.png" name="image23" width="22" height="29" border="0"></a></td>
                      <td><a href="#" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '105px')" onMouseout="delayhidemenu()"><img src="include/designs/mar_BlackSolution_modCS/bilder/infotainment.png" name="image1" width="105" height="29" border="0"></a></td>
                      <td><a href="#" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu2, '121px')" onMouseout="delayhidemenu()"><img src="include/designs/mar_BlackSolution_modCS/bilder/clansection.png" name="image2" width="121" height="29" border="0"></a></td>
                      <td><a href="#" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu3, '129px')" onMouseout="delayhidemenu()"><img src="include/designs/mar_BlackSolution_modCS/bilder/communityarea.png" name="image3" width="129" height="29" border="0"></a></td>
                      <td><a href="#" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu4, '123px')" onMouseout="delayhidemenu()"><img src="include/designs/mar_BlackSolution_modCS/bilder/miscation.png" name="image4" width="123" height="29" border="0"></a></td>
                      <td><img src="include/designs/mar_BlackSolution_modCS/bilder/rechts_leer.png" name="image29" width="17" height="29" border="0"></a></td>
                    </tr>
    </table>
    <div id="img02" align="left" valign="top" >
    </div>
    <div id="bsstatistik" align="left" valign="top"  style="margin-top: 42px">
          <div id="bsstatistik-inhalt">{_boxes_statistikgv}</div>
    </div></div>
    
    <div id="img03" align="left" valign="top">
          <div id="img03-login">{_boxes_logincs}</div>
          <div id="img03-infopanel" align="left" ><div align="center">
    <a  href="javascript:void(0);" onclick="togglebox(1);"><img src="include/images/icons/boxen/nextcs.png" border="0" alt="Lastforum"></a>
    <a  href="javascript:void(0);" onclick="togglebox(2);"><img src="include/images/icons/boxen/topiccs.png" border="0" alt="Toptopic"></a>
    <a  href="javascript:void(0);" onclick="togglebox(3);"><img src="include/images/icons/boxen/membercs.png" border="0" alt="Topmember"></a>
    </div>
    <div id="boxx_1">{_boxes_lastforumcs}</div>
    <div id="boxx_2" style="display:none">{_boxes_toptopiccs}</div>
    <div id="boxx_3" style="display:none" class="lang_font">{_boxes_topmembercs}</div></div>
          <div id="img03-slider"><div id="cu3er-container">
        <a href="http://www.adobe.com/go/getflashplayer">
            <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
        </a>
    </div>
    </div></div>
    <div id="img04" align="left" valign="top" >
          <div id="ticker">{_boxes_ticker}</div>
    </div>
    
      <div id="contentbs_forum">
     
     <div id="left_col">
           {_list_menunr1@
            <table width="210" cellpadding="0" cellspacing="0" border="0">
              <tr>
                <td style="width: 200px; height: 40px; background: url(include/designs/mar_BlackSolution_modCS/bilder/boxmenu_links.png) no-repeat bottom left;" align="center"><b class="btitle">%1</b></td>
              </tr><tr>
                <td style="min-height:20px; padding: 4px;">%2</td>
              </tr>
            </table>
            <br />
            }
    
      </div>
        <div id="topmenu_forum" align="left" valign="top" ><font><b> &nabla; </b>{HMENU}</font></div>
      <div id="main_col_forum">{EXPLODE}</div>
    
      <br style="clear: both;" />
      </div>
    
    <div id="bsfoot" align="left" valign="top" >
          <div id="marfoot"><div align="center">All rights reserved by <a href="index.php?impressum" title="Imprint"><u>{SITENAME}</u></a>&nbsp;&nbsp;&nbsp;&copy; Design by <a href="http://www.maretz.eu" title="Maretz.eu - Digital Art | GFX-Support"><u>Maretz.eu - Digital Art</u></a>&nbsp;&nbsp;&nbsp;CMS by <a href="http://www.ilch.de" title="Ilch.de"><u>ilch.de</u></a></div>
    </div></div>
    </body>
    <div id="login_slider" class="login_slider" style=" right: 0px; width: 70px; position: fixed; top: 100px;
    background:url(/include/images/tsslider/slider-white.png) repeat scroll 0% 0% transparent; height: 500px; z-index: 999;" >
                 
    <div style=" margin-top:20px; margin-left:80px; text-align:left; height: 450px; overflow:auto; overflow-x: hidden";;>
          {_boxes_tsviewer}
          </div>
          </div>
      <script type="text/javascript">
      var state = 0;
      var wait = false;
    
      function changeSlider()
      {
        if(state==1){
            $('#login_slider').animate({width: 70 }, "slow", function(){state = 0;}
            );
          }
        else
            $('#login_slider').animate({width: 300 }, "slow", function(){state = 1;}
          );
          }
          $('#login_slider').hover(function(){
          changeSlider();
        });
          </script>
    </html>
    <!-- {_list_DDDmenupoint@<strong><big>&middot;</big></strong><a %1 class="box" href="%2">%3</a><br />}
    {_list_hmenupoint@<li><a target="%1" class="box" href="%2">%3</a>|</li>|<br />|</ul></li>}
    {_list_hmenubegi@<ul>}
    {_list_hmenuende@</ul>}
    {_list_vmenupoint@<a target="%1" class="menu" href="%2">%3</a>}
    {_list_vmenubegi@}
    {_list_vmenuende@}//-->
    
    <!--Waitbox-finish begin--> 
    <script type="text/javascript"> 
    <!-- 
    setTimeout("ap_showWaitMessage('waitDiv', 0);",800) 
    //--> 
    </script> 
    <!--Waitbox-finish end-->


    Das ist jetzt schon der Code für das verbreiterte Forum.


    verwendete ilchClan Version: 1.1 P

    betroffene Homepage: test.vistauri.net
    0 Mitglieder finden den Beitrag gut.
  2. #2
    User Pic
    Siggi Hall Of Fame
    Registriert seit
    08.02.2007
    Beiträge
    6.558
    Beitragswertungen
    327 Beitragspunkte
    list_menunr1@ entfernen und <div id="main_col_forum">{EXPLODE}</div> ggfl in der style.css anpassen wie du es halt bei der anderen seitenbox auch gemacht hast
    0 Mitglieder finden den Beitrag gut.
  3. #3
    User Pic
    mabu78 Mitglied
    Registriert seit
    19.07.2013
    Beiträge
    38
    Beitragswertungen
    4 Beitragspunkte
    so spontan würde ich sagen

    left_col ausblenden
    und
    main_col_forum auf 100% erweitern!

    Ich weiß nicht ob es an der Anzeige hier liegt, aber schön zu lesen ist der Code nicht! lächeln
    selten diese Leere!
    0 Mitglieder finden den Beitrag gut.
  4. #4
    User Pic
    Tyrargo Mitglied
    Registriert seit
    30.01.2006
    Beiträge
    5.541
    Beitragswertungen
    7 Beitragspunkte
    Habe diesen Code entfernt
    <div id="contentbs_forum">
      
     <div id="left_col">
           {_list_menunr1@
            <table width="210" cellpadding="0" cellspacing="0" border="0">
              <tr>
                <td style="width: 200px; height: 40px; background: url(include/designs/mar_BlackSolution_modCS/bilder/boxmenu_links.png) no-repeat bottom left;" align="center"><b class="btitle">%1</b></td>
              </tr><tr>
                <td style="min-height:20px; padding: 4px;">%2</td>
              </tr>
            </table>
            <br />
            }
     
      </div>


    Jetzt fängt das Forum zwar links an, wird aber rechts nicht erweitert: test.vistauri.net/?forum

    Hier noch der Eintrag in der .css Datei:

    #topmenu_forum {
                   position:relative;
                    width: 825px; 
                    top: 3px;
                    left: 18px;
                    float: left;
                    color: #0077CC;
                    font-size: 10px;
                    text-align:left;
                    font-family: Verdana;Arial,
    	   text-decoration: none;
    }



    Zuletzt modifiziert von Tyrargo am 28.07.2013 - 15:30:01
    0 Mitglieder finden den Beitrag gut.
  5. #5
    User Pic
    mabu78 Mitglied
    Registriert seit
    19.07.2013
    Beiträge
    38
    Beitragswertungen
    4 Beitragspunkte
    Na die Mitte ist doch breiter als 825px; !?!
    Setze es mal auf 100% oder eben die Gesamtbreite! lächeln
    selten diese Leere!
    0 Mitglieder finden den Beitrag gut.
  6. #6
    User Pic
    Tyrargo Mitglied
    Registriert seit
    30.01.2006
    Beiträge
    5.541
    Beitragswertungen
    7 Beitragspunkte
    Logisch... ^^ passt nun, Danke!
    0 Mitglieder finden den Beitrag gut.
Geschlossen

Zurück zu Design und Templates

Optionen: Bei einer Antwort zu diesem Thema eine eMail erhalten