Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Dec 2011
    Posts
    86
    Thanks
    1
    Thanked 0 Times in 0 Posts

    bit out of align

    Hey guys, as you can see from my current site, it's pretty out of align (especially the right hand side). Could anyone please see where the problem lays? My code is as follows:

    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>
    <style>
    /* Main menu settings */
    #navigation_bar {
       clear:both;
       float:left;
       margin:0;
       padding:0;
       width:100%;
       font-family:Verdana, Geneva, sans-serif; /* Menu font */
       font-size:90%; /* Menu text size */
       z-index:1000; /* This makes the dropdown menus appear above the page content below */
       position:relative;
    }
    
    /* Top menu items */
    #navigation_bar ul {
       margin:0;
       padding:0;
       list-style:none;
       float:centre;
       position:relative;
       right:50%;
    }
    #navigation_bar ul li {
       margin:0 0 0 0px;
       padding:0;
       float:left;
       position:relative;
       left:50%;
       top:0px;
       background:#b4e3ef;
    }
    #navigation_bar ul li a {
       display:block;
       margin:0;
       font-size:1em;
       line-height:1em;
       text-decoration:none;
       color:#444;
       font-weight:bold;
    }
    #navigation_bar ul li a:hover {
    /* Top menu items background colour */
       color:#fff;
       
    }
    #navigation_bar ul li:hover a,
    #navigation_bar ul li.hover a { /* This line is required for IE 6 and below */
     /* Top menu items background colour */
       color:#fff;
       
    }
    
    /* Submenu items */
    #navigation_bar ul ul {
       display:none; /* Sub menus are hidden by default */
       position:absolute;
       top:3em;
       left:0;
       right:auto; /*resets the right:50% on the parent ul */
       width:10em; /* width of the drop-down menus */
    }
    #navigation_bar ul ul li {
       left:auto;  /*resets the left:50% on the parent li */
       margin:0; /* Reset the 1px margin from the top menu */
       clear:left;
       width:100%;
    }
    #navigation_bar ul ul li a,
    #navigation_bar ul li.active li a,
    #navigation_bar ul li:hover ul li a,
    #navigation_bar ul li.hover ul li a { /* This line is required for IE 6 and below */
       font-size:.8em;
       font-weight:normal; /* resets the bold set for the top level menu items */
       color:#444;
       line-height:2.4em; /* overwrite line-height value from top menu */
       border-bottom:1px solid #ddd; /* sub menu item horizontal lines */
    }
    #navigation_bar ul ul li a:hover,
    #navigation_bar ul li.active ul li a:hover,
    #navigation_bar ul li:hover ul li a:hover,
    #navigation_bar ul li.hover ul li a:hover { /* This line is required for IE 6 and below */
       background:#36f; /* Sub menu items background colour */
       color:#fff;
    }
    
    /* Flip the last submenu so it stays within the page */
    #navigation_bar ul ul.last {
       left:auto; /* reset left:0; value */
       right:0; /* Set right value instead */
    }
    
    /* Make the sub menus appear on hover */
    #navigation_bar ul li:hover ul,
    #navigation_bar ul li.hover ul { /* This line is required for IE 6 and below */
       display:block; /* Show the sub menus */
    }
    	</style>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>HabFab V1</title>
    <link href="css/global.css" rel="stylesheet" type="text/css" />
    <link href="css/navigation.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://vis.im/player/embed?radioIp=193.33.186.20&radioPort=8110&div=radio_player&playIcon=http://habfab.com/v2/images/play.png&pauseIcon=http://habfab.com/v2/images/pause.png&volumeSlider=http://habfab.com/v2/images/volume-slider.png&volumeController=http://habfab.com/v2/images/volume.png&library=jquery&volumeStart=25"></script>
    <script type="text/javascript">
    
    /***********************************************
    * Dynamic Ajax Content- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
    ***********************************************/
    
    var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
    var loadedobjects=""
    var rootdomain="http://"+window.location.hostname
    var bustcacheparameter=""
    
    function ajaxpage(url, containerid){
    var page_request = false
    if (window.XMLHttpRequest) // if Mozilla, Safari etc
    page_request = new XMLHttpRequest()
    else if (window.ActiveXObject){ // if IE
    try {
    page_request = new ActiveXObject("Msxml2.XMLHTTP")
    }
    catch (e){
    try{
    page_request = new ActiveXObject("Microsoft.XMLHTTP")
    }
    catch (e){}
    }
    }
    else
    return false
    page_request.onreadystatechange=function(){
    loadpage(page_request, containerid)
    }
    if (bustcachevar) //if bust caching of external page
    bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
    page_request.open('GET', url+bustcacheparameter, true)
    page_request.send(null)
    }
    
    function loadpage(page_request, containerid){
    if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
    document.getElementById(containerid).innerHTML=page_request.responseText
    }
    
    function loadobjs(){
    if (!document.getElementById)
    return
    for (i=0; i<arguments.length; i++){
    var file=arguments[i]
    var fileref=""
    if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
    if (file.indexOf(".js")!=-1){ //If object is a js file
    fileref=document.createElement('script')
    fileref.setAttribute("type","text/javascript");
    fileref.setAttribute("src", file);
    }
    else if (file.indexOf(".css")!=-1){ //If object is a css file
    fileref=document.createElement("link")
    fileref.setAttribute("rel", "stylesheet");
    fileref.setAttribute("type", "text/css");
    fileref.setAttribute("href", file);
    }
    }
    if (fileref!=""){
    document.getElementsByTagName("head").item(0).appendChild(fileref)
    loadedobjects+=file+" " //Remember this object as being already added to page
    }
    }
    }
    
    </script>
    </head>
    
    <body>
    <div id="container">
    	<div id="wrapper">
        	<div id="left">
        	<div id="banner_container">
                    <div id="banner"></div>
                    <div id="navigation_bar">
                    <ul>
                            <li></li>
                            <li><a href="http://habfab.com/v2" id="thehablets"></a>
                            </li>
                            
                            <li><a href="http://habfab.com/v2/radio.html" id="radio"></a>
                            <ul>
                            <li><a href="javascript:ajaxpage('/staffpanel/_frontend/requests.php', 'content_container');">Request line</a></li> 
                            <li><a href="javascript:ajaxpage('/staffpanel/_frontend/timetable.php', 'content_container');">Timetable</a></li> 
                            <li><a href="javascript:ajaxpage('/staffpanel/_frontend/recent.php', 'content_container');">Recent Songs</a></li>
                            </ul> 
                            </li>
                            
                            <li><a href="javascript:ajaxpage('/staffpanel/_frontend/news.php', 'content_container');" id="news"></a>
                            <ul>
                            <li><a href="javascript:ajaxpage('/staffpanel/_frontend/news.php?cat=1', 'content_container');">Site News</a></li> 
                            <li><a href="javascript:ajaxpage('/staffpanel/_frontend/news.php?cat=3', 'content_container');">Habbo News</a></li> 
                            <li><a href="javascript:ajaxpage('/staffpanel/_frontend/news.php?cat=6', 'content_container');">Real Life News</a></li>
                            </ul> 
                            </li>
                            
                            <li><a href="#" id="guides"></a>
                            <ul>
                            <li>Coming soon!</li> 
                            </ul> 
                            </li>
                            
                            <li><a href="javascript:ajaxpage('/staffpanel/_frontend/events.php', 'content_container');" id="events"></a>
                            <ul>
                            <li><a href="javascript:ajaxpage('/staffpanel/_frontend/eventsToday.php', 'content_container');">Events Today</a></li> 
                            <li><a href="javascript:ajaxpage('/staffpanel/_frontend/events.php', 'content_container');">Events This Week</a></li> 
                            </ul> 
                            </li>
                            
                            <li><a href="#" id="media"></a>
                            <ul>
                            <li>Coming soon!</li> 
                            </ul> 
                            </li>
                            
                            <li><a href="#" id="jobs"></a>
                            <ul>
                            <li><a href="javascript:ajaxpage('/staffpanel/_frontend/jobApps.php', 'content_container');">Open Jobs</a></li> 
                            </ul> 
                            </li>
                            
                            <li><a href="#" id="forum"></a>
                            <ul>
                            <li><a href="http://habfab.com/forum" target="_blank">Board</a></li> 
                            <li><a href="http://habfab.com/forum/member.php?action=login" target="_blank">Login</a></li> 
                            <li><a href="http://habfab.com/forum/member.php?action=register" target="_blank">Register</a></li>
                            <li><a href="http://habfab.com/forum/showteam.php" target="_blank">Staff</a></li>
                            <li><a href="http://habfab.com/forum/donate.php" target="_blank">Donate</a></li>
                            </ul> 
                            </li>                      
       </ul>
        </div>
        </div>
                <div id="content_container">
                	<a href="#" id="advert1"></a>
                    <a href="../forum" id="advert2"></a>
                    <a href="#" id="advert3"></a>
                    <div class="content_top"></div>
                    <div class="content_background">
                    	<div class="greyheader">&raquo; Welcome to HABFAB</div>
                    	<div class="content_left">
                        	<div class="content_left">
                                <p><img src="http://www.habbo.com/habbo-imaging/avatarimage?user=Vernier&amp;action=crr=6&amp;direction=34&amp;head_direction=35&amp;gesture=sml&amp;size=l" alt="" class="left"/>
                                </p>
                                <p class="grey"><strong>Welcome!</strong></p>
                                <p>Hello there, and welcome to HabFab. HabFab is owend by Vims and ran by a very busy Habbo called<a href="http://www.habbo.com/home/Vernier"> Vernier</a>. 
                                Since he is a a busy person, he can’t run the website all on his own, 
                                he has hired some very dedicated and hard working staff to help him to keep the website up and running!                            </p>
    </div>
                            <hr class="seperator" />
                            <div class="content_left">
                            	<img src="http://www.habbo.com/habbo-imaging/avatarimage?user=DJC4LLY&amp;action=wlk&amp;direction=36&amp;head_direction=35&amp;gesture=sml&amp;size=l" alt="" class="right" />
                                <h1 class="blue">HabFab FM</h1>
                                HabFab FM is soon to be up after some funding!, that will save Habbos’ from complete boredom. 
                                We aim to keep this radio up and running 24/7 so habbos’ from all around the world will enjoy our entertainment. 
                                Running a radio station is very hard work, so that’s why we hired  <a href="http://www.habbo.com/home/DJC4LLY" class="blue">Cally</a> as our radio station manager.
                            If yo would like to apply to be a DJ, click here.</div>
                            <hr class="seperator" />
                            <div class="content_left">
                                <h1 class="pink">HabFab News &amp; Articles</h1>
                                <img src="images/misc/type.PNG" alt="type" class="right" />
                                Not only do we have a radio station, we also offer the latest Habbo & Real Life news & the latest music, film, book etc... reviews. 
                                We aim to be the first to update you with the breaking news. 
                                This department is ran by <a href="#" class="pink"> <strong><strong>Darkred</strong></strong></a>.
                            </div>
                        </div>
                        <div class="content_right">
                        	<div class="content_right">
                            	<img src="http://www.habbo.com/habbo-imaging/avatarimage?user=Vims&amp;action=std&amp;direction=36&amp;head_direction=35&amp;gesture=sml&amp;size=l" alt="" class="right" />
                                <h1 class="green">HabFab Discussion Boards</h1>
                                HabFab also has its very own forum! Known as the discussion boards around here. 
                                It is a place you can chat and discuss about anything really, the forum is ran by Someone and his team of dedicated moderators!
                                <br /><br />
                                To register or visit the forum please click <a href="http://habfab.com/forum" class="green">here</a>!
                            </div>
                            <hr class="seperator" />
                            <div class="content_right">
                                <img src="images/misc/group.PNG" alt="Group" class="right" style="margin-top: 7px;"/>                            
                                <h1 class="orange">HabHab Group</h1>
                                Want to get more involved in the community? Why not join one of our group by clicking <a href="http://www.habbo.com/client?forwardId=2&amp;roomId=52538909" class="orange">here</a>. 
                            </div>
                            <hr class="seperator" />
                            <div class="content_right">
                            	<img src="images/misc/events.PNG" alt="events" class="right" />
                                <h1 class="grey">Today's Events</h1>
                                Below is a list of all the events, TheHablets is running today on Habbo. To view all the week’s events please click <a href="/staffpanel/_frontend/events.php" class="grey">here</a>.
                                <iframe src="/staffpanel/_frontend/eventsToday.php"></iframe>
                            </div>
                        </div>
                    </div>
                    <div class="content_bottom"></div>
                    
                    <div class="disclaimer_top"></div>
                    <div class="disclaimer_background">
                    	<a href="#">Home</a> |
                        <a href="#">About</a> |
                        <a href="/support">Contact</a> |
                        <a href="#">Disclaimer</a> |
                        <a href="http://www.habbo.com">Habbo</a><br />
                        HabFab &copy; Copyrighted 2011<br />
                        Layout designed &amp; coded by Jake James
                    </div>
                    <div class="disclaimer_bottom"></div>
                    
                </div>
            </div>
    
            <div id="right">
                <div id="right_container">
                	<div class="box_top"></div>
                	<div id="radio_player">
                    <div class="box_background">
                     </div>
                     
                    <div class="box_bottom">
                    </div>
                    </div>
                	<div class="box_top"></div>
                    <div class="box_background">
                    	<div class="shade">
                    	  
                    	
    </div>
                    <div class="box_bottom"></div>
                    </div>
                    
                	<div class="box_top"></div>
                    <div class="box_background">
                    	<img src="images/misc/albumart.PNG" alt="Album Art" align="right" style="margin-top: 5px; margin-right: 5px;" />
                    	<div class="nonshade">
                            <strong>Current DJ:</strong><br />
                    	<span id="cc_stream_info_title"></span><br /></div>
                        <div class="shade">
                            <strong>Listener Count:</strong><br />
                            <span id="cc_stream_info_listeners"></span><br /></div>
                        <div class="nonshade">
                            <strong>Now Playing:</strong><br />
                        <span id="cc_stream_info_song"></span><br /></div>
                    
                    
                    <div id="djsays">
                    <script type="text/javascript">
    ajaxpage('/staffpanel/_frontend/djSays.php', 'djsays')
    </script>
                    </div>
                    
                    </div>
                    <div class="box_bottom" style="margin: 0;"></div>
                    
                <div id="right_bottom"></div>
                <div id="inner_right">
                <div id="radio_box">
                	<div class="radio_box_top"></div>
                    
                    <div class="radio_box_background">
                    	
                    </div>
                    <div class="radio_box_bottom"></div>
                    </div>
                    <div class="box2_top"></div>
                    <div class="box2_background">
                    	<div id="blueheader">
                    	<div class="blueheader">&raquo;Donators</div>
                        <script type="text/javascript">
    ajaxpage('/staffpanel/_frontend/donators.php', 'blueheader')
    </script>
    </div>
                    </div>
                    <div class="box2_bottom"></div>
                    
                    <div class="box2_top"></div>
                    <div class="box2_background">
                    	<div class="pinkheader">&raquo; Featured Content</div>
                        
                    </div>
                    <div class="box2_bottom"></div>               
    </div>
                    <div class="box2_top"></div>
                    <div class="box2_background">
                    	<div class="greenheader">&raquo; Member of the month</div>
                      <p><img src="images/misc/knifecrime.PNG" alt="Knife Crime" class="left" />There currently is not a member been chosen here...</p>
    </div>
                    <div class="box2_bottom"></div>
                </div>
                
               	</div>
                
            </div>
        </div>
    </div>
    <script language="javascript" type="text/javascript" src="http://shoutcast.zfast.co.uk/system/streaminfo.js"></script>
    <script language="javascript" type="text/javascript" src="http://shoutcast.zfast.co.uk/js.php/habfab/streaminfo/rnd0"></script></body>
    </html>
    Thanks guys

    ~ David
    Last edited by Vernier; 01-22-2012 at 08:56 PM.

  • #2
    New Coder
    Join Date
    Jan 2012
    Location
    Seattle, WA
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You need to define the width for the divs that are overflowing their containers.

    Everything else is showing up as aligned correctly for me

  • #3
    New Coder
    Join Date
    Dec 2011
    Posts
    86
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Faimos View Post
    You need to define the width for the divs that are overflowing their containers.

    Everything else is showing up as aligned correctly for me
    Thanks for your help, also on the right hand side half of the blue is missing.

    Thanks

    ~ David
    Last edited by Vernier; 01-22-2012 at 10:30 PM.

  • #4
    Regular Coder
    Join Date
    Dec 2011
    Location
    NW England
    Posts
    194
    Thanks
    8
    Thanked 15 Times in 15 Posts
    Are you talking about the bottom of it? It is there, but it is INSIDE the
    Code:
    <div id="right_container">
    I would assume it goes UNDER it like:
    Code:
    <div id="right_container">
    etc.
    </div>
    <div id="right_bottom"></div>

  • #5
    New Coder
    Join Date
    Dec 2011
    Posts
    86
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by melloorr View Post
    Are you talking about the bottom of it? It is there, but it is INSIDE the
    Code:
    <div id="right_container">
    I would assume it goes UNDER it like:
    Code:
    <div id="right_container">
    etc.
    </div>
    <div id="right_bottom"></div>
    How would i edit this as there's quite a few div tags.

    Cheers,

    ~ David

  • #6
    Regular Coder
    Join Date
    Dec 2011
    Location
    NW England
    Posts
    194
    Thanks
    8
    Thanked 15 Times in 15 Posts
    Inside your code, search for :
    Code:
    <div id="right_bottom"></div>
    Now move/cut that code so it is under this code:
    Code:
    <div class="box2_bottom"></div>
                </div>
    So it will now look like this:
    Code:
    <div class="box2_bottom"></div>
                </div>
    <div id="right_bottom"></div>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •