• Top Members
    Reps
    Posts
  • 834 Replies
    2585 Replies
  • 716 Replies
    2025 Replies
  • 331 Replies
    1928 Replies

displaying links

User avatar
Mark
VIP - Donator
Posts: 370

displaying links

Thu Dec 10, 2015 4:42 pm

Hello

im having problems displaying my php code in my nav bar if you look here http://www.mbappz.co.uk the bottom links are messing up how can i fix this please this is the code below its whee is says test news.

Code: Select all

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>MBAPPZ.co.uk - Main Page</title>
<link rel="stylesheet" href="styles/styles.css" media="all" />
</head>

<body>

<div class="container">

    <div class="catlinks">
        <ul id="cat-menu">
            <li><a href="#">Home</a></li>
            <li><a href="#">Home</a></li>
            <li><a href="#">Home</a></li>
            <li><a href="#">Home</a></li>
            <li><a href="#">Home</a></li>
        </ul>
    </div>
    
    <div class="head">
        <img id="logo" src="images/logo.png" />
        <img id="banner" src="images/ad_banner.png" />
    </div>
    
    <div class="navbar">
        <ul id="nav-menu">
            
            <?php
            
                include("includes/connect.php");
                $get_cats = "select * from categories";
                $run_cats = mysql_query($get_cats);
                while ($cats_row = mysql_fetch_array($run_cats)){
                    $cat_id = $cats_row['cat_id'];
                    $cat_title = $cats_row['cat_title'];
                    
                    echo "<li><a href='index.php?cat=$cat_id'>$cat_title</a></li>";
                }
            
            ?>
        </ul>
    </div>
    
    <div class="post_area">
        something goes here
    </div>
    
    <div class="sidebar">
        Something goes here
    </div>
    
    <div class="footer_area">This is the footer</div>

</div>

</body>
</html>

Code: Select all

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
    background: #666;
}

.container {
    width: 1000px;
    margin: auto;
}

.catlinks {
    width: 1000px;
    height:  50px;
    background: #000;  
}

#cat-menu {
    line-height: 50px;
    float: left;
}

#cat-menu li {
    list-style-type: none;
    display: inline;
}

#cat-menu a{
    text-decoration: none;
    font-size: 16px;
    font-family: "Comic Sans MS", cursive;
    color: #FFF;
    margin: 5px;
    padding: 6px;
}

#cat-menu a:hover{
    color: #F63;
    text-decoration: underline;
}

.head {
    width:  1000px;
    height: 100px;
    background: #FFF;
}

#logo {float: left;}
#banner {float:  right;}

.navbar {
    width: 1000px;
    height:  50px;
    background: #000;
}

#nav-menu {
    line-height: 50px;
    float: left;
}

#nav-menu li {
    list-style-type: none;
    display: inline;
}

#nav-menu a{
    text-decoration: none;
    font-size: 16px;
    font-family: "Comic Sans MS", cursive;
    color: #FFF;
    margin: 5px;
    padding: 6px;
}

#nav-menu a:hover{
    color: #F63;
    text-decoration: underline;
}


.post_area{
    width: 750px;
    height: 600px;
    background: #fff;
    float: left;
}

.sidebar {
    width: 250px;
    height: 600px;
    background: #F99;
    float: right;
}

.footer_area {
    width: 1000px;
    height: 100px;
    background: #000;
    color: #fff;
    clear: both;
}

User avatar
CodenStuff
Site Admin
Posts: 4367

Re: displaying links

Thu Dec 10, 2015 6:41 pm

Try enclosing the page_area and sidebar in a DIV like so:

Code: Select all

<div>
       <div class="post_area">
           something goes here
       </div>
    
       <div class="sidebar">
           Something goes here
       </div>
    </div>
Welcome to CodenStuff.com Learn Code, Love Code. Thank you for being a member of the community.

User avatar
Mark
VIP - Donator
Posts: 370

Re: displaying links

Thu Dec 10, 2015 10:27 pm

hello,

i did that but still does the same

User avatar
CodenStuff
Site Admin
Posts: 4367

Re: displaying links

Fri Dec 11, 2015 4:39 pm

Try this:

Code: Select all

    <div style="float:left">
        <div class="post_area">
            something goes here
        </div>
        
        <div class="sidebar">
            Something goes here
        </div>
    </div>
I downloaded your page and tested it locally and it seems to work
Welcome to CodenStuff.com Learn Code, Love Code. Thank you for being a member of the community.

Post Reply

Return to “Help & Support”