Member Avatar for zelrick

Hello Web Developers;

I'm having a hard time figure out why I can't do a simple table.

I have an lines that contain ul and li, If i put them inside the table tr and th

the bullet comes out which is I set it none.

Please help me with my code (I hope you guys can understand my trash messy code)

This is my HTML file:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.nms.org/">
<html>
<head>
    <title> NMS WRF PORTAL </title>
    <link rel="stylesheet" href="MasterStyle.css">
    <!-- <style types="text/css">

    </style> -->
</head>

<body background="bbg.png">
<!-- This is where the navigation menu will be placed -->

<div id="banner">
    <div id="wrapper" style="width:100%; overflow:hidden;">
        <div id="container" style="width:100%; margin-right:auto;">
            <img style="width: 100%;" src="MasterBanner.jpg">
        </div>
    </div>
</div>

<ul class="navbar" style="list-style-type:none">&nbsp&nbsp&nbsp&nbsp&nbsp
    <li><a href="Home.html">Home</a>
    <li><a href="Sample1.html">Configure Domains</a>
    <li><a href="Sample2.html">Schedule</a>
    <li><a href="Sample3.html">Monitor WRF</a>
    <li><a href="Sample4.html">WRF View</a>
    <li><a href="Sample5.html">Launch IDV</a>
    Browse: &nbsp&nbsp&nbsp
    <li><a href="Sample6.html">Plots</a>
    <li><a href="Sample7.html">Work</a>
    <li><a href="Sample8.html">Data</a>
    <li><a href="Sample9.html">Logs</a>
    <li><a href="Sample3.html">Monitor Cluster</a>
    <li><a href="Sample3.html">Cluster Info(ROCKS)</a>
</ul>

<!-- Main content here -->
<br><br><br><br><br><br><br><br>
<p>Welcome to PAGE </p>
<br>

<!-- Data/Credits/Any/Italic -->
<address> Made 26 October 2015 <br>
by NMS. </address>

</body>
</html>

and this is my CSS File:

body {
    <!-- padding-left: 15em; -->
    font-family: Georgia, "Times New Roman", Times, serif;
    color: purple;
    }

ul.navbar {
    position: fixed;
    padding: 1px;
    }

ul.navbar li {
    display:inline;
    }

ul.navbar li a {
    background-color: black;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 4px 4px 0 0;
    }

a:hover {
    text-align: center;
    font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;
    color: red;
    background-color: gray;
    }

.wrapper {
    width: 100%;
    overflow: hidden;
    }

.container {
    width: 100%
    margin: 0 auto;
    }

.banner-img {
    width: 100%;
    }

About the iFrame I just simply add <iframe></iframe> and a small frame comes out.

Please help me also how I can make it fit/fix.

Thank you and God Bless

-zelrick

  • 3 Contributors
  • 9 Replies
  • 368 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by diafol
Member Avatar for jemdev03

Hi, I need some clarifications here. What are you trying to achieve on your codes? Do you want help with the navigation bar? Because I don't see any table and iframe tags anywhere in your codes. I will be glad to help but it will be better if you elaborate the problem further so that we are clear.

Member Avatar for zelrick

Hello Sir jemdev03,

I'm sorry I do erase my code in table.

<table> <tr> <th> are under the <a href>

I was trying to put a table in the links - Home, Configure Domains, Schedule and so on..

and a table inside of a table for - Browse: Plots, Work, Data, Logs

In the iFrame problem, I just want to make it fit in the MasterPage.

I'm into the design coz really it's hard for me to fix the outline.

Thank you and God Bless

-zelrick

Member Avatar for zelrick

web.jpg UPDATE to my problem:

In the red box in the image:

Those links that look like a button; if I put them in a table all of them turns into bullet type links. Since it was really a bullet type links that is why I change there interface into button look a like without using javascript. (I don't know if I'm right in here)

About the iFrame I manage somehow on using it;

So in our image; Red box is iFrame1 and Blue box is iFrame2

Here is encountered problem in iFrame:

On Green box there was a link. I was not able to click everything on there.

I can't even highlight the text on there.

what so ever in the Green box is in the MasterPage. html code

Red and blue box have different html.

Please help.

Thank you and God Bless;

-zelrick

Edited by zelrick because: forgot the image to post
Member Avatar for diafol

Why are you using iframes? Can't see the need for them. Iframes would usually be used to include data or embeddable objects from another site. It sounds like you're trying to use iframes like the old frameset method of templating / including other files. Is this what you're doing?

WHy the HTML4 DocType?

Edited by diafol
Member Avatar for zelrick

Hello Sir diafol,

I will be honest, I really not familiar with the HTML4 DocType or any,

I just refering in the w3.org, I only know the basic or should I say the begginer in coding HTML. Dreamweaver or any application like visual studio that using c# will be hard for me so I just use the notepad++ for my coding (.html, .css, .js)

I'm using windows7 currently but will be transfer in Linux so I use GEdit if I transfer to Linux.

Right now I put that Green Box in an iframe again so I can click the link inside of it.

Will be trying now in putting jscript for effects.

Btw Sir diafol, why not using iframe? I would like to do like in Daniweb or facebook or any site that the banner? or header with menu is not moving. Whenever you scroll down or up the top menu is freeze.

So I ended up using iFrame for that. Any suggestions to make the web to be alive or attractive to the user? I will accept and try to look it up in web.

Thank you and God Bless

-zelrick

Member Avatar for diafol

No need for iframes. Use a fixed menu. Search for that. It will be a CSS thing. Notepad++ is OK. You may want to check out Sublime3 and Aptana.

Member Avatar for zelrick

picpic.jpg Hello Sir diafol,

I been using fixed menu not even knowing that is called "fixed menu"

I have a fixed menu below of my banner refering to my image earlier.

I just put it in iFrame coz earlier of my coding I don't know the style:

    position: fixed;

and I was thinking if my banner can do the position: fixed?

I have two menu: first menu was below my banner and the other one is on the side.

Please see the Image:

I was looking for more interactive buttons and look for a free template.

and I found this button. Been an hour getting the codes for the buttons.

Please help;

Thank you and God Bless

-zelrick

Edited by zelrick because: forgot to attach the image
Member Avatar for zelrick

Hello Sir diafol,

Please see this image, this is the original button that I was trying to get.

the arrow image was a .png file so this is the code I get to the original file.

@charset "UTF-8";
/* CSS Document */

/*
DEMO 4
*/

.a_demo_four {
    background-color:#3bb3e0;
    font-family: 'Open Sans', sans-serif;
    font-size:12px;
    text-decoration:none;
    color:#fff;
    position:relative;
    padding:10px 20px;
    padding-right:50px;
    background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
    background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
    background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0, rgb(44,160,202)),
    color-stop(1, rgb(62,184,229))
    );
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
    -moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
    -o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
    box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
}

.a_demo_four:active {
    top:3px;
    background-image: linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
    background-image: -o-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
    background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0, rgb(62,184,229)),
    color-stop(1, rgb(44,160,202))
    );
    -webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
    -moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
    -o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
    box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
}

.a_demo_four::before {
    background-color:#2591b4;
    background-image:url(../Img/right_arrow.png);
    background-repeat:no-repeat;
    background-position:center center;
    content:"";
    width:20px;
    height:20px;
    position:absolute;
    right:15px;
    top:50%;
    margin-top:-9px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    -webkit-box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;
    -moz-box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;
    -o-box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;
    box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;
}

.a_demo_four:active::before {
    top:50%;
    margin-top:-12px;
    -webkit-box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6;
    -moz-box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6;
    -o-box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6;
    box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6;
}

picca.png
Sorry for the double post.

Thank you and God Bless

-zelrick

Member Avatar for diafol

This is a different issue. Stsrrt a new thread on this and provide relevant tags.

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.