Hi,
Trying to create a nav bar in html and I also have some php code as well. But when I change the style in html it also changes the style of the php text.
Any help
Thank you
Any code?
3 Likes
Normally any content inserted using PHP is inserted as HTML, because that’s what the browser understands. So if you use CSS to style HTML on the page, it will style all of it, irrespective of its origin.
If you post the HTML and CSS for your page (or a link to a live page) we can give you more specific advice on how to target styles to particular sections.
It’s always a good idea to post all relevant code when you ask a question; otherwise, we can only guess or give general answers. You might find it helpful to read this topic: Forum Posting Basics
3 Likes
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
</style>
</head>
<body bgcolor="#E6E6FA">
<img src="phonegif.gif" alt="phonegif" style="width:100px;height:100px;" align="left"> <img src="phonegif.gif" alt$
<center><h1 style="color:blue;">fone Compare UK</h1></center>
<marquee behavior="alternate" bgcolor="white"> December 2016: Xiamoi Mi Mix -- 2017: Microsoft Surface Phone, OneP$
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<form action="login.php">
<input type="submit" value="SIGN IN">
</form>
<form action="register.php">
<input type="submit" value="REGISTER">
</form>
</body>
</html>
<?php require 'nexus6p.php';?>
<?php require 'nexus5x.php';?>
OK - so which elements are being styled here that you don’t want to be styled?
Off Topic
I notice you are using the <marquee> tag. Might I suggest you read this and rethink? https://www.w3.org/wiki/HTML/Elements/marquee
2 Likes
What do nexus6p.php and nexus5x.php do? I doubt they will be much help after the closing html tag.
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
I want to create the above into a nav bar
The nexus6p.php and nexus5x.php are just links to other php files, which just displays data from the Database.
That appears to be already in the page.
You should not be outputting any more content after the closing body tag.
3 Likes
There is no closing tag for the marquee which means that all the page afterwards moves.
You have quite a few obsolete elements and attributes in there.
1 Like
It is already in the page, but the style also affects the contents of the php files.
Any reason for this?
As far as the browser is concerned, there is no such thing as php, that all happens at the server. What gets sent to the server is all treated as html, it’s all one page.
To target your styling to specific elements you can use classes on elements which the css targets.
2 Likes
As I said in my first post, the PHP files are (presumably) outputting HTML content, and your styles will affect any lists on that page, whatever their origin.
You need to show us the full HTML output. Visit your page in a browser, then use “View Source” to see the HTML output of the full page, including whatever content those PHP files are adding. Then paste that HTML here so we can see it.
3 Likes
I would also recommend putting that code to the validator so you can see what that says about it.
2 Likes
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
</style>
</head>
<body bgcolor="#E6E6FA">
<img src="phonegif.gif" alt="phonegif" style="width:100px;height:100px;" align="left"> <img src="phonegif.gif" alt="phonegif" style="width:100px;height:100px;" align="right">
<center><h1 style="color:blue;">fone Compare UK</h1></center>
<marquee behavior="alternate" bgcolor="white"> December 2016: Xiamoi Mi Mix -- 2017: Microsoft Surface Phone, OnePlus 4 </marquee>
<ul>
<li><a href="#Home">Home</a></li>
<li><a href="#Manufact">Manufact</a></li>
<li><a href="#OS">OS</a></li>
<li><a href="#Contact">Contact</a></li>
</ul>
<form action="login.php">
<input type="submit" value="SIGN IN">
</form>
<form action="register.php">
<input type="submit" value="REGISTER">
</form>
</body>
</html>
<html>
<head>
<body>
<img src="nexus6p.png" alt="nexus6p" style="width:280px;height:228px;" usemap="#nexus6p">
<map name="nexus6p">
<area shape="rect" coords="5,5,150,230" alt="6p" href="nexus6p2.php">
</area></map>
</body>
</head>
</html>
<ul><h4>Nexus 6P</h4><li>Google</li><li>Android</li><li>Nano</li><li>8 MP</li><li>Single USB Type-C</li></ul></table>
<html>
<head>
<body>
<img src="nexus5x.jpg" alt="nexus5x" style="width:280px;height:228px;" usemap="#nexus5x">
<map name="nexus5x">
<area shape="rect" coords="5,5,150,230" alt="6p" href="nexus5x2.php">
</map>
</body>
</head>
</html>
<ul><h4>Nexus 5X</h4><li>Google</li><li>Android</li><li>Nano</li><li>5 MP</li><li>Single USB Type-C</li></ul></table>
First of all you need to validate the code.
Start by putting the php includes within the body of the document.
Then work through the errors one by one.
Whatever are you doing with that unordered list outside the html tags?
@alxmcc2k11: when you use PHP includes in this way, they don’t need <html>, <head> and <body> tags. You simply insert them where you wish them to appear on your page, inside the <body></body> tags of your main document. The HTML is generated as part of the overall page.
So your code above should look something like this:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
</style>
</head>
<body bgcolor="#E6E6FA">
<img src="phonegif.gif" alt="phonegif" style="width:100px;height:100px;" align="left"> <img src="phonegif.gif" alt="phonegif" style="width:100px;height:100px;" align="right">
<center><h1 style="color:blue;">fone Compare UK</h1></center>
<marquee behavior="alternate" bgcolor="white"> December 2016: Xiamoi Mi Mix -- 2017: Microsoft Surface Phone, OnePlus 4 </marquee>
<ul>
<li><a href="#Home">Home</a></li>
<li><a href="#Manufact">Manufact</a></li>
<li><a href="#OS">OS</a></li>
<li><a href="#Contact">Contact</a></li>
</ul>
<form action="login.php">
<input type="submit" value="SIGN IN">
</form>
<form action="register.php">
<input type="submit" value="REGISTER">
</form>
<img src="nexus6p.png" alt="nexus6p" style="width:280px;height:228px;" usemap="#nexus6p">
<map name="nexus6p">
<area shape="rect" coords="5,5,150,230" alt="6p" href="nexus6p2.php">
</area></map>
<ul><h4>Nexus 6P</h4><li>Google</li><li>Android</li><li>Nano</li><li>8 MP</li><li>Single USB Type-C</li></ul></table>
<img src="nexus5x.jpg" alt="nexus5x" style="width:280px;height:228px;" usemap="#nexus5x">
<map name="nexus5x">
<area shape="rect" coords="5,5,150,230" alt="6p" href="nexus5x2.php">
<ul><h4>Nexus 5X</h4><li>Google</li><li>Android</li><li>Nano</li><li>5 MP</li><li>Single USB Type-C</li></ul></table>
</body>
</html>
Note: This is simply an example to give you an idea of what your structure should look like. This is not good code. I have not fixed any of the other errors, such as stray opening or closing tags, or your use of non-standard/obsolete tags and inline styling. I’m just trying to help you reach the point where your page is in a state for you to start eliminating these errors.
5 Likes
alxmcc2k11,
Please take a look at this “How-To” demo file that describes how to set up a php include for a menu.
The basic idea can be applied to other includes.
How To Call a menu file with PHP
Please allow me to strongly suggest that you take a fundamental course in HTML/CSS. Your collection of errors suggest an absence of understanding about HTML page structure and a reliance on very outdated information/code. The couse would be very worthwhile… time well spent.
3 Likes
I can proudly say that I am a self-taught PHP enthusiast. The first year I started learning PHP, I didn’t even know a single thing. When I started using include, I only had the idea of using it to change content without having to change 100 files. The idea that I was thinking about was to include a single file that almost every file had such as a nav bar and then only change that 1 file and the 100 files will now have the same nav bar.
Not until late 2014 when I started understanding the difference between include and require. Now I prefer require over include. Simply because require will halt its execution if the file doesn’t exist or require fails to retrieve the requested file. On the other hand, include will still continue executing, but will omit a warning. IMO, it’s not safe to display any fatal errors or even warning errors on screen for users/ clients to see. They can simply see where the file is stored because the warnings and fatal errors will almost always display the file path to the current file that has include in it.