I need your help to fix my css !!!

Question

andanjin 0 Newbie Poster

16 Years Ago

Here is my testing site. <a href="http://holyrock.zxq.net?">testing home</a>
I would like to change like <a href="http://holyrock.zxq.net/index1.html">this.</a>
Please help me to fix my problem....
I want to open my menu link page in the main context secction.
Do I need to use include fuction in php or java?
Or So I need to use ifram?
I need your advanced skill in css...
Please help me!!!

html-css:bootstrap web-design

2 Contributors
2 Replies
202 Views
3 Days Discussion Span
Latest Post 16 Years Ago Latest Post by andanjin

Dani AI

Generated 7 Months Ago

Use a single template page and server-side includes so the header/menu stays in place while only the main area changes. As suggested, PHP is the simplest, most accessible solution (works without JavaScript). Avoid tables for layout and avoid iframes unless you must—iframes add complexity, break history/bookmarks, and hurt accessibility.

Safe, minimal PHP pattern (whitelist pages, then include):

<?php
$allowed = ['home','about','contact'];   // filenames in /pages/
$page = 'home';
if (!empty($_GET['page']) && in_array($_GET['page'], $allowed, true)) {
  $page = $_GET['page'];
}
include __DIR__ . '/includes/header.php';
include __DIR__ . '/pages/' . $page . '.php';
include __DIR__ . '/includes/footer.php';
?>

Keep nav links like href="index.php?page=about". The whitelist prevents directory traversal and arbitrary includes.

Make the header fixed and let the main area scroll (IDs changed from your example so it doesn't repeat existing code):

html,body { height:100%; margin:0; }
#site-header { position:fixed; top:0; left:0; right:0; height:120px; z-index:100; }
#site-footer { position:fixed; bottom:0; left:0; right:0; height:50px; }
#site-main { position:absolute; top:120px; bottom:50px; left:0; right:0; overflow:auto; padding:15px; }

Troubleshooting notes: remove overflow:hidden from the body (that blocks page scrolling), fix typos like sub=right (should be id="sub-right"), and avoid malformed target values (use _self or omit). If PHP is unavailable, use progressive enhancement: load fragments into #site-main via fetch() or jQuery .load() and still keep proper links so navigation works without JavaScript.

All 2 Replies

macneato 29 Posting Pro in Training

16 Years Ago

I'm not too sure what you on about. But this is what I'm getting.

You would like one menu, to link to all your pages, so that you will not need to edit every individual page to update your menu?

You could use ajax to call your menu from a seperate page, only issue with this solution would be if the user does not have javascript enabled they will not be able to navigate your site. So lets pass on it.

PHP is properly the best way to tackle this. Here is an example

Index.php:

<!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" xml:lang="en" lang="en">
<head>	
</head>
<body>
  <div id="header">
    <?php include('includes/topnav.php'); ?>
  </div>
</body>
</html>

Then we will add the following to "includes" directory
topnav.php

<ul id="nav">
    <li>
        <a href="#">Main</a>
        <ul>
            <li>
                <a target="intro" href="main.html">Main</a>
            </li>
            <li>
                <a target="intro" href="admin.html">Administration</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="@">Buisness</a>
        <ul>
            <li>
                <a target="intro.html" href="business.html">Biz news</a>
            </li>
            <li>
                <a class="daddy" href="#">Business Newspaper</a>
                <ul>
                    <li>
                        <a target="_blank" href="http://www.nytimes.com/pages/business/index.html">NY Times Business</a>
                    </li>
                    <li>
                        <a target="_blank" href="http://online.wsj.com/public/page/news-business-us.html">Wall Street Journal Biz</a>
                    </li>
                    <li>
                        <a target="_blank" href="http://www.bloomberg.com/?b=0&amp;Intro=intro3">Bloomberg</a>
                    </li>
                    <li>
                        <a target="_blank" href="http://www.businessweek.com/">BusinessWeek</a>
                    </li>
                    <li>
                        <a target="_blank" href="http://www.bnet.com/">B-nNet</a>
                    </li>
                    <li>
                        <a target="_blank" href="http://www.forbes.com/">Forbes</a>
                    </li>
                </ul>
            </li>
            <li>
                <a class="daddy" href="#">Business Media</a>
                <ul>
                    <li>
                        <a target="_blank" href="">NBR</a>
                    </li>
                    <li>
                        <a target="_blank" href="http://abcnews.go.com/business">ABC News-Money</a>
                    </li>
                    <li>
                        <a target="_blank" href="http://www.cbsnews.com/sections/business/main500395.shtml?tag=hdr;cnav">CBS Business</a>
                    </li>
                    <li>
                        <a target="_blank" href="http://www.cnbc.com/">CNBC</a>
                    </li>
                    <li>
                        <a target="_blank" href="http://www.foxbusiness.com/index.html">FOX-Business</a>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        <a href="#">Education</a>
    </li>
    <li>
        <a href="#">IT</a>
        <ul>
            <li>
                <a target="_self" href="asp.html">ASP</a>
            </li>
            <li>
                <a target="_self" href="html-css.html">(D/X)HTML, CSS, &amp; Color Chart</a>
            </li>
            <li>
                <a target="-self" href="java.html">Java Script</a>
            </li>
            <li>
                <a class="daddy" href="#">MYSQL &amp; XML</a>
            </li>
            <li>
                <a target="_self" href="php.html">PHP,/a&gt;</a>
            </li>
        </ul>
        <a target="_self" href="php.html"></a>
    </li>
</ul>

That should be it, just style id's and classes as necessary

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

andanjin 0 Newbie Poster · Answer 1 · 2010-02-12T05:48:54+00:00

i correct according to your instruction
and I need little more your help
If I clcik my menu from menudiv within header, it has to be locate in the main context
where I can scroll.

Do I need to use table, ifram or php
give me detail instruction please

<!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">

body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%;
max-height: 100%;
}

#framecontentTop, #framecontentBottom{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 125px; /*Height of top frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: navy;
color: white;
}

#sub-left {
float:left;
width:300px;
}
#sub-right {
float:right;
width:240px;
text-align: right;
}

#framecontentBottom{
top: auto;
bottom: 0;
height: 50px; /*Height of bottom frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: navy;
color: white;
}

#maincontent{
position: fixed;
top: 125px; /*Set top value to HeightOfTopFrameDiv*/
left: 0;
right: 0;
bottom: 50px; /*Set bottom value to HeightOfBottomFrameDiv*/
overflow: auto;
background: #fff;
}

.innertube{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}

* html body{ /*IE6 hack*/
padding: 125px 0 50px 0; /*Set value to (HeightOfTopFrameDiv 0 HeightOfBottomFrameDiv 0)*/
}

* html #maincontent{ /*IE6 hack*/
height: 100%;
width: 100%;
}

</style>
</head>

<div id="framecontentTop">
<div class="innertube">
<div id="sub-left">
H-R Infoway
</div>
<div id="sub=right">
Menu bar goes here
</div>
</div>
</div>

<h3>Copy rigth and other goes here</h3>

</div>
</div>

<h1>Main Content goes here</h1>

Here is content of the header design example with div or table 1:

<table border="3">
<tr>
<th>Logo sign goes here(div1-topleft): H-R Infoway </th>
<th>projection or screen link(div2-topright) goes here</th>
</tr>
<tr>
<th>Favicon Image(div3-bottomleft) goes here</th>
<th>menu bar(div4-bottomright) goes here</th>
</tr>
</table>
Div 1 to 4 will be located inside of header div
<br>
or
something like this

2nd example looks like this:
<table border ="1">
<tr>
<th>logo image with alt function</th>
<th>Site Name (H-R Intorway)</th>
<th>Menu Link bar goes here</th>
</tr>
</table>

<p> this is my daniweb forum</P>
<br>
<a href="http://www.daniweb.com/forums/post1124844.html#post1124844">andanjin's 2nd forum</a>

</div>
</div>

</body>

</html>

I need your help to fix my css !!!

Dani AI

Recommended Answers Collapse Answers

All 2 Replies

Recommended Answers