Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I'm just branching my way out into php as I want to have a central menu file that I can edit instead of having to change the code on 20+ pages each time I update it! However my php include does not seem to be working. I'm wondering if maybe my php file I'm trying to include is too complex or doesn't work how I'm thinking (my understanding is that the php include basically takes all the text within it (in this case the html) and replaces the php include line with it)? There is also some css that would format the html when it was actually in the webpage, and I'm wondering if that is what is breaking it? Code is below.
html:
<div id="buttonstrip">
<?php include 'menubar.php';?>
</div>
php:
<?php
echo '<nav>
<ul>
<li>Computing
<ul>
<li>For Individuals
<ul>
<li>Repair</li>
<li>Maintenance</li>
<li>New Builds</li>
<li>Tuition</li>
</ul>
</li>
<li>For Business
<ul>
<li>Appraisals</li>
<li>Installation</li>
<li>Maintenance</li>
<li>Upgrades</li>
</ul>
</li>
</ul>
</li>
<li>Branding
<ul>
<li>Logos & Branding</li>
<li>Stationary</li>
<li>Guidelines</li>
</ul>
</li>
<li>Web Design
<ul>
<li>For Individuals</li>
<li>For Business</li>
</ul>
</li>
<li>Graphic Design
<ul>
<li>Illustration</li>
<li>Printwork</li>
<li>Merchandise</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>';
?>
CSS
nav ul {
/* [disabled]box-shadow: 0px 0px 9px rgba(0,0,0,0.15); */
padding: 10px 30px;
/* [disabled]border-radius: 10px; */
list-style: none;
position: relative;
z-index: 2;
display: block;
background-color: #1c6130;
background-position: top;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background-color: #FFFFFF;
}
nav ul li:hover a {
color: #1c6130;
}
nav ul li a {
display: inline;
padding: 20px 40px;
color: #ffffff;
text-decoration: none;
}
nav ul ul {
background: #ffffff; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
/* border-top: 1px solid #6b727c; */
/* border-bottom: 1px solid #575f6a; */
position: relative;
}
nav ul ul li a {
padding: 0px 30px;
color: #fff;
}
nav ul ul li a:hover {
background-color: #CCCCCC;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
Apologies if this is a completely novice question.
My guess: Your "html" file is actually named something.html, which causes the webserver to not recognize it as PHP. Rename it into something.php.
To verify that this was the problem, check the source of your HTML page, you should see the literal PHP code displayed there.
Might be you misnamed any file. just follow the instruction and keep all files in the same folder
File-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">
<head>
<link rel="stylesheet" type="text/css" href="menu.css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>My index page</title>
</head>
<body>
<div id="buttonstrip">
<?php include 'menubar.php';?>
</div>
</body>
</html>
Menu file-menu.php
<?php
echo '<nav>
<ul>
<li>Computing
<ul>
<li>For Individuals
<ul>
<li>Repair</li>
<li>Maintenance</li>
<li>New Builds</li>
<li>Tuition</li>
</ul>
</li>
<li>For Business
<ul>
<li>Appraisals</li>
<li>Installation</li>
<li>Maintenance</li>
<li>Upgrades</li>
</ul>
</li>
</ul>
</li>
<li>Branding
<ul>
<li>Logos & Branding</li>
<li>Stationary</li>
<li>Guidelines</li>
</ul>
</li>
<li>Web Design
<ul>
<li>For Individuals</li>
<li>For Business</li>
</ul>
</li>
<li>Graphic Design
<ul>
<li>Illustration</li>
<li>Printwork</li>
<li>Merchandise</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>';
?>
Menu css->menu.css
nav ul {
/* [disabled]box-shadow: 0px 0px 9px rgba(0,0,0,0.15); */
padding: 10px 30px;
/* [disabled]border-radius: 10px; */
list-style: none;
position: relative;
z-index: 2;
display: block;
background-color: #1c6130;
background-position: top;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background-color: #FFFFFF;
}
nav ul li:hover a {
color: #1c6130;
}
nav ul li a {
display: inline;
padding: 20px 40px;
}
<div id="buttonstrip">
<?php include ('menubar.php');?>
</div>
This appears correct. Only thing to check is the path of your include file.
Make sure your menubar.php is indeed located on the same folder as your script that includes it.
Make sure there are no spelling errors also on file name.
Create a menu.php file and include this file in php page where you want to show menu.
To include menu file in php file use <?php include "menu.php"; ?>
Below code is for menu.php
<div class="menu">
<ul>
<li>Insert</li>
<li>Update</li>
<li>Delete</li>
<li>Display</li>
<li>GUI</li>
</ul>
</div>
Related
This question already has answers here:
When coding HTML, browser doesn't always detect changes
(6 answers)
Stylesheet not updating when I refresh my site
(16 answers)
Closed 5 years ago.
I'm not sure if this may be due to php/wordpress but I've got a nav bar that I just realised when you click the link it stays underlined until you hover it again? Seems strange to me I've never had this happen and can't quite work out why..
<nav>
<ul>
<li><img src=" " height="10%" width="10%"/>Link 1</li>
<li><img src=" " height="10%" width="10%"/><a href="#">Link 2</li>
<li><img src="" height="10%" width="10%"/><a href="#">Link 3</li>
</ul>
</nav>
scss..
nav {
margin: 0px;
background-color: $nav_bgcolor;
box-shadow: $nav_shadow;
ul {
color: #979797;
padding: 0px;
display: table;
width: 100%;
padding: 15px;
margin: 0px;
text-align: center;
}
ul li {
list-style-type: none;
display: inline-block;
width: 30%;
}
ul li a {
color: $font_color;
}
ul li a:hover {
cursor: pointer;
color: $hover;
}
a, a:visited, a:active, a:visited, a:focus, a:hover {
text-decoration: none !important;
}
}
change your " ul li a" , to this:
nav ul li a {
color: $font_color;
text-decoration: none;
}
You Need some HTML Fixes.
You have used anchor tag inside anchor tag.
HTML
<nav>
<ul>
<li>
<a href="#">
<img src="" height="10%" width="10%"/>Link 1
</a>
</li>
<li>
<a href="#">
<img src="" height="10%" width="10%"/>Link 2
</a>
</li>
<li>
<a href="#">
<img src="" height="10%" width="10%"/>Link 3
</a>
</li>
</ul>
</nav>
CSS
/*Random colors use your colors here*/
$nav_bgcolor:red;
$nav_shadow:black;
$font-color:white;
$hover:green;
/*Random colors use your colors here*/
nav {
margin: 0px;
background-color: $nav_bgcolor;
box-shadow: $nav_shadow;
ul {
color: #979797;
padding: 0px;
display: table;
width: 100%;
padding: 15px;
margin: 0px;
text-align: center;
}
ul li {
list-style-type: none;
display: inline-block;
width: 30%;
}
ul li a {
color: $font_color;
text-decoration:none;
}
ul li a:hover {
cursor: pointer;
color: $hover;
}
a, a:visited, a:active, a:visited, a:focus, a:hover {
text-decoration: none !important;
}
}
My code above was actually correct in fixing the problem I had. The problem was happening as it wasn't updating any of my code as the browser had cached the site.
Thanks everyone for your help
NOTE: Delete browser history!!
Okay, new to WordPress. I have created the wordpress recent posts widget, which has generated a some new WordPress Markup which I am trying to select to add my custom style.
After researching on the web I have found no alternative option other than to go inspect element and find the WordPress html markup selector/ids and write my css for them. (Is there a better way).
Here is my Html for widget:
<div class="recent-post-wrap">
<h3 id="recent-post-headline">RECENT POSTS:</h3>
<ul class="recent-posts">
<?php
// If the sidebar widget is active i.e. in the admin a widget is been created then show the dynamic sidebar in the markup otherwise waste of markup.
if(is_active_sidebar('recentpost')) {
dynamic_sidebar('recentpost');
}
?>
</ul>
</div>
Note: there is another wordpress generated headline 'Recent Post' that is in color white - is there a title filter?
Here is the wordpress inspect element html markup
<div class="recent-post-wrap">
<h3 id="recent-post-headline">RECENT POSTS:</h3>
<ul class="recent-posts">
<li id="recent-posts-3" class="widget widget_recent_entries"> <h2 class="widgettitle">Recent Posts</h2>
<ul>
<li>
asdfads
</li>
<li>
Title 2
</li>
<li>
TITLE 1
</li>
</ul>
</li>
</ul>
</div>
Here is me trying to select the Recent Post List id/selector to remove bullets and add style
/* RECENT POST */
.recent-post-wrap {
margin-top: 1rem;
padding: 1rem;
background-color: red;
}
/* list */
.recent-post-wrap ul {
padding: 1rem;
}
.recent-post-wrap ul li {
padding: 2%;
}
.recent-post-wrap a:hover {
background-color: black;
}
#recent-post-headline {
font-size: 1rem;
}
/* Wordpress Recent Post Plugin */
li#recent-posts-3.widget.widget_recent_entries a {
list-style: none;
color: red;
background-color: red;
}
try this
.recent-posts ul {list-style: none;}
or to remove all bullet from ul
ul {list-style: none;}
/* RECENT POST */
.recent-post-wrap {
margin-top: 1rem;
padding: 1rem;
background-color: red;
}
/* list */
.recent-post-wrap ul {
padding: 1rem;
}
.recent-post-wrap ul li {
padding: 2%;
}
.recent-post-wrap a:hover {
background-color: black;
}
#recent-post-headline {
font-size: 1rem;
}
/* Wordpress Recent Post Plugin */
/*li#recent-posts-3.widget.widget_recent_entries a {
list-style: none;
color: red;
background-color: red;
}*/
.recent-posts ul {
list-style: none;
}
.recent-posts ul li a {
color: red;
background-color: yellow;
}
<div class="recent-post-wrap">
<h3 id="recent-post-headline">RECENT POSTS:</h3>
<ul class="recent-posts">
<li id="recent-posts-3" class="widget widget_recent_entries">
<h2 class="widgettitle">Recent Posts</h2>
<ul>
<li>
asdfads
</li>
<li>
Title 2
</li>
<li>
TITLE 1
</li>
</ul>
</li>
</ul>
</div>
I dont know what but my posts are colliding with the navigation bar like this:
http://i.imgur.com/y2qhEzH.png
Thanks if you can help:)
The navigation bar HTML/php
<div>
<nav class="site-nav">
<?php
$args = array(
'theme_location' => 'primary'
)
?>
<?php wp_nav_menu( $args); ?>
</nav> </div>
Post HTML/php
<div>
<?php
if(have_posts()):
while (have_posts()) : the_post(); ?>
<h2><a a href="<?php the_permalink(); ?>">
<?php the_title(); ?></a></h2>
<?php the_content(); ?>
<?php endwhile;
else :
echo '<p>No content found</p>';
endif;
?> </div>
Css
.site-nav ul {
margin: 0;
padding: 0;
}
.site-nav ul li {
list-style: none;
float: left;
}
.site-nav ul li a:link,
.site-nav ul li a:visited {
display: block;
padding: 10px 18px;
border-top: white 3px solid;
text-decoration: none;
}
Im just starting to learn wordpress, and I litterally cant get past this. HELP:)
Try adding this to your CSS:
.site-nav {
float: left;
}
Here's a Fiddle of what your setup might look like minus the PHP, and here's one with the fix.
Full Code
.site-nav ul {
margin: 0;
padding: 0;
}
.site-nav ul li {
list-style: none;
float: left;
}
.site-nav ul li a:link,
.site-nav ul li a:visited {
display: block;
padding: 10px 18px;
border-top: white 3px solid;
text-decoration: none;
}
/* Added this to simulate your window size */
.container {
width: 360px;
}
/* Fix */
.site-nav {
float: left
}
<div class="container">
<div>
<nav class="site-nav">
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>About us</li>
<li>Contact us</li>
<li>Logos</li>
<li>Websites</li>
</ul>
</nav>
</div>
<div>
<h2>Welcome</h2>
<p>Hey!</p>
<p>Welcome to our site.</p>
</div>
</div>
Just adding
float: left
to the parent element did not help.
But adding Clearfix hack helped:)
I'm creating my first WordPress theme. It's a very simple one for a friend's website, who is a music producer. I'm creating the navigation menu. One of the items on the menu is listen. It's not an actual link. You hover over it and a submenu should appear. So I made Listen a custom link.
The problem is that the submenu doesn't appear. The Submenu has its own class. But I don't think WordPress is reading the CSS
Here is the CSS:
ul.sub-menu {
display: none;
position: absolute;
padding: 0px;
margin-left: -20px;
}
ul.sub-menu li {
display: block;
text-align: left;
background-color: grey;
}
ul.sub-menu li:hover {
background-color: #dae0e6;
}
ul.main_nav li:hover ul.sub-menu {
display: block;
}
Here is the HTML and php code in the header.php:
<nav>
<?php
$defaults = array(
'container' => false,
'theme_location' => 'primary-menu',
'menu_class' => 'main_nav'
);
wp_nav_menu( $defaults );
?>
<!--
<ul class="main_nav">
<li>
Home
</li>
<li>
Bio
</li>
<li>
<a>Listen</a>
<ul class="sub-menu">
<li>Originals</li>
<li>TV/Film</li>
</ul>
</li>
<li>Credits</li>
<li>Contact</li>
</ul>
-->
</nav>
Here is my approach:
I changed css so its shows menu sub menu with CSS.
JsFiddle Demo
nav
{
margin-top:15px
}
nav ul
{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0
}
nav ul a
{
display:block;
color:#333;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}
nav ul li
{
position:relative;
float:left;
margin:0;
padding:0
}
nav ul li:hover
{
background:#f6f6f6
}
nav ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}
nav ul ul li
{
float:none;
width:200px
}
nav ul ul a
{
line-height:120%;
padding:10px 15px
}
nav ul ul ul
{
top:0;
left:100%
}
nav ul li:hover > ul
{
display:block
}
<nav>
<ul class="main_nav">
<li>
Home
</li>
<li>
Bio
</li>
<li>
<a>Listen</a>
<ul class="sub-menu">
<li>Originals</li>
<li>TV/Film</li>
</ul>
</li>
<li>Credits</li>
<li>Contact</li>
</ul>
</nav>
In example above your menu is commented out. Also parent of ul.sub-menu should be positioned relative.
since you are new ... I think you should start by get general idea about the sub menu and style them in WordPress .
this Tut will help you
http://wproots.com/how-to-style-wordpress-menus-dropdowns/
also I will suggest other option for you .
start form other theme like wordpress deafult theme and edit it
start form starter theme like http://bootstrapwp.rachelbaker.me/
start from template
its hard to build theme from scratch if you are new ... step by step
please assign width to ul like
ul.sub-menu {
display: none;
}
and plaece
ul.main_nav li:hover ul.sub-menu {
display: block;
position: absolute;
padding: 0px;
margin-left: -20px;
top:0;
left:0;
width:800px;
}
just after it
Weirdly, I've never come across this issue before, but I've just started making a site and the top navigation isn't playing nicely.
I want a small amount of white space between each menu item, but when I have new lines between my <li> elements and my <a> elements in my IDE (Netbeans), the white space disappears, yet it looks fine if I have <li><a></a></li> all on the same line. I was always under the impression html ignored white space in the code.
I've checked for any weird characters causing problems in other text editors and can't find anything.
Here's the code...
Like this the menu looks correct but code looks ugly (I know it looks fine when it's this simple, but I'm going be adding more complexity in which makes it look awful all on one line):
<ul id="menu">
<li>About</li>
<li class="active">Track List</li>
<li>Stats</li>
<li>Stats</li>
</ul>
Produces:
Like this the menu looks wrong but code looks fine:
<ul id="menu">
<li>
About
</li>
<li class="active">
Track List
</li>
<li>
Stats
</li>
<li>
Stats
</li>
</ul>
Produces:
wrong http://img708.imageshack.us/img708/6628/screenshot20100618at000.png
I'm sure it's something simple I'm doing wrong... but can someone shed some light on this for me?
Sorry for the lengthy post (my first on stackoverflow).
Edit - Full CSS and HTML:
body {
/* font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; */
font-family: 'Trebuchet MS', Helvetica, sans-serif;
/* font-family: 'Copperplate', 'Copperplate Gothic Light', sans-serif; */
}
a {
color: #FFFFFF;
text-decoration: none;
}
#container{
margin: 0 auto;
width: 800px;
}
#content {
margin-top: 50px;
}
#header {
background-image: url("../images/absolute_radio_logo.png");
border-bottom: solid 1px #777777;
background-repeat: no-repeat;
width: 800px;
height: 86px;
padding-bottom: 15px;
}
#menu {
float: right;
}
#menu li {
display: inline;
padding: 5px;
background-color: #932996;
border-bottom: solid 1px #932996;
}
#menu li:hover {
border-bottom: solid 3px #FF0000;
}
#menu li.active {
background-color: #58065e;
}
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>Radio - Statistics</title>
<link rel="stylesheet" type="text/css" href="http://localhost/resources/css/style.css" />
</head>
<body>
<div id="container">
<div id="header">
<ul id="menu">
<li>
About
</li>
<li class="active">
Track List
</li>
<li>
Stats
</li>
<li>
Stats
</li>
</ul>
</div>
<div id="content">
<!-- content -->
Elapsed Time: 0.0033 - Memory Used: 0.4MB
</div>
</div>
</body>
</html>
It seems to be totally fine with the CSS you supplied, so I'm guessing there must be some other rule affecting your links. Could you please supply us with a live preview or the full stylesheet?
Edit:
Seems to be an issue with how "display: inline" collapses the elements contents, though I couldn't find any proof of that. Change
#menu li {
display: inline;
}
to
#menu li {
display: inline-block;
}
or add a margin to it:
#menu li {
display: inline;
margin-right: 5px;
}
To fix the alignment of the text, I'll go ahead and recommend you float the lis. Someone please correct me if this is a horrible idea. Add
#menu {
overflow: hidden;
}
#menu li {
float: left;
}
to your existing rules.
Just as a guess try setting the line-height for the li & a tags to 1em or even 0
#menu li, #menu a {
line-height: 1em;
}
Firstly, those two screenshots appear to be swapped around, the first has gaps between the links, caused by the white-space in the second code snippet.
This new white-space-collapse property may be able to help.
#menu li{white-space-collapse:discard}
via: http://safalra.com/web-design/html-and-css/white-space-property/
If that doesn't work, the next option is to set the <a> tags to block level elements and the <li> tags to inline.
#menu li{display:inline}
#menu li a{
display:inline-block
padding: 5px;
background-color: #932996;
border-bottom: solid 1px #932996;
}
#menu li a:hover{
border-bottom: solid 3px #FF0000;
}
#menu li.active a {
background-color: #58065e;
}
so it seems the targeted answer's have all been provided, so I'd just like to add that as a rule of thumb I always use normalize.css which is a css library that ensures normal
you can download it or use npm install normalize.css
You must set overflow: hidden on the parent box, then set position: relative on the <li>:
ul {
margin: 0;
display: flex;
flex-wrap: wrap;
padding: 25px;
margin: 5px 0;
overflow: hidden
}
ul li {
display: inline-block;
padding: 19px 10px;
text-align: center;
position: relative
}
ul li::before {
content: '';
position: absolute;
width: 400%;
height: 1px;
background: #f3f3f3;
bottom: 0;
right: -250px
}