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
}
Related
Hello guys and girls,
I've been given my first WordPress build at work, with freedom on pretty much anything. I chose to use Altitude pro as a theme with Genesis as a framework.
I love the theme but, for a service page the theme is not exactly fantastic. To spice it up a bit, I'd like to create a custom header design for every service page on the site.
This would be a coloured background over the top 1000px of the page or so, that has a solid colour with some patterns on top.
Due to my inexperience though, I'm not really sure on how to do it and my PHP knowledge is not fantastic.
Could anyone please assist?
Thanks!
You can check here for normal headers or even fixed headers. They explain well. http://www.w3schools.com/css/css_navbar.asp
Here is a code that makes a fixed header with menus. If you don't want to make it fixed you can just delete "position: fixed;".
<!DOCTYPE html>
<html>
<head>
<style>
body {margin:0;}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
<div style="padding:20px;margin-top:30px;background-color:#1abc9c;height:1500px;">
<h1>Fixed Top Navigation Bar</h1>
<h2>Scroll this page to see the effect</h2>
<h2>The navigation bar will stay at the top of the page while scrolling</h2>
</div>
</body>
</html>
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>
I would like to clear list-style-type:circle; from the generated PDF (using MPDF57). I've read the CSS3 Docs (and according to the documentation, list-style:none; is supported), but during the Output() stage of creating a PDF file, the circle can seen.
HTML OUTPUT
(source: iforce.co.nz)
Border is to only emphasize, which elements are being targeted.
PDF OUTPUT
(source: iforce.co.nz)
CSS (HTML available via PasteBin).
.schedule_logo_con img {
width: 300px;
height: auto;
}
.daily_schedule { font-family: helvetica, sans serif }
.schedule {
font-family: helvetica, sans serif;
margin: 0px !important;
padding-bottom: 10px;
}
.schedule_list { margin: 10px 0 0 0 }
ul {
margin: 0;
padding: 0;
}
.weekday {
width: 65px;
text-align: center;
border-left: solid #ddd 1px;
color: red;
}
.weekday ul li {
border: 1px solid red;
}
ul, .weekday ul, .weekday ul li {
list-style-type: none;
}
I've also tried list-style-type:none; (In addition too checking MPDF56 to see whether it is something with MPDF57), but regardless this style is not being applied.
For now, it seems to be a rendition problem, from the library itself
<UL> with no parents
But, the above CSS does work, if the UL element is being generated on its own, and not as a child of a another element.
<ul>
<li>Test A</li>
<li>Test B</li>
</ul>
PDF OUTPUT
(source: iforce.co.nz)
Solution
Therefore, the designer and I have a found a work around, using divs and replicating a list with display:block;, although if someone is able to figure out a solution for <UL>, without high server load (That would be great too).
CSS
div.weekday_time {
display:block;
}
HTML
<div class='weekday_time'>
10:30 PM
</div>
I have a question regarding CSS and how to bequeath background information within an unordered list.
I have a footer in that I would like to show different flags. there I have a footer class
<ul class="flag">
<li id="de"></li>
</ul>
.flag consists of:
.footer #legals #list2 .flag{
width: 20px;
height: 10px;
display: inline-block;
float:left;
margin-top: 16px;
margin-left: 15px;
background-image:url(../images/flags.png);
}
.footer #legals #list2 .flag #de{
background-position: -40px;
}
.footer #legals #list2 .flag #en{
background-position: -20px;
}
.footer #legals #list2 .flag #en_us{
background-position: -20px;
}
So I thought it would be easier for each flag just to change the entry background-position.
But for some reason this is not working and I dont know why? I also tried to use instead of li id div id but it is still the same.
If there is someone who could help me out I really would appreciate it.
The background-image is set on the <ul> instead of the <li>. If you change that first selector from
.footer #legals #list2 .flag
to
.footer #legals #list2 .flag li
then the <li> will actually have a background-image to position.
I'm getting back into web design after a several year break, so a lot of the tips and tricks that I used on a regular basis before just don't seem to be working. I'm designing a guild website for my World of Warcraft guild for some practice, but I'm having issues getting the div background images to show up properly on the page.
The page consists of a container DIV, a header DIV, a Menu DIV, and a three column layout, followed of course by a footer div. Above the menu I have a little artistic background I'm susing, and I managed to get that one to show up; however, I can't get the proper image to show up above the left or right bars properly. I've searched the net a ton, and am still dumbfounded as to what I'm doing wrong. Here is a screen shot of what I sort of want the layout to look like: http://s19.postimage.org/7svzmuaf7/Layout_V2.jpg
Currently, this is what I'm getting when you visit the website in any major browser: http://cirquedufreak.net78.net/
There is obviously some differences in the two, as one is just a jpg, and the other is a css/html combo, and that I'm aware of. Thank you for any help you can provide.
Source Code:
index.php:
<?php
session_start();
include("wowarmoryapi/BattlenetArmory.class.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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home - Cirque du Freak of Vashj</title>
<link rel="stylesheet" type="text/css" href="layout.css" />
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
</head>
<body>
<div id="container">
<div id="header"> </div>
<div id="menu">
<ul>
<li>Home</li>
<li>Roster</li>
<li>Forums</li>
<li>About</li>
<li>Contact</li>
<li>Books</li>
</ul>
</div>
<div id="leftbar">LEFTBAR</div>
<div id="content">
<div id="gmod">
<h1>Important Message</h1>
<p>This is where any "breaking news" or important information that you want to give to the players will be displayed.</p>
</div>
</div>
<div id="rightbar">
<p>For an invitation, contact one of the following players in game:</p>
<?php
?>
</div>
<div id="footer">©2012 Cirque du Freak Guild of Vashj; All Rights Reserved.<br />World of Warcraft and related images and materials are © Blizzard Entertainment.</div>
</div>
</body>
</html>
layout.css:
#charset "utf-8";
/* CSS Document */
/* CSS LAYOUT BEGIN */
body {
margin: 0;
padding: 0;
background-color: #000;
color: #FC3;
text-align: center;
}
div#container {
margin: 0 auto;
text-align: left;
width: 1024px;
height: auto;
}
div#header {
width: 1024px;
height: 147px;
background: url(images/v2_header.png);
}
div#menu {
width:1024px;
height: 70px;
text-align:center;
background: url(images/v2_menuBG.png);
}
div#leftbar {
float: left;
width: 170px;
height: 525px;
min-heigh: 150px;
background-image: url(images/v2_barBG.png) no-repeat;
display: inline-block;
background-position: top left;
}
div#content {
float: left;
width: 684px;
min-height: 50px;
height: 525px;
}
div#rightbar {
float: right;
width: 170px;
height: 525px;
min-height: 50px;
background-image: url(images/v2_barBG.png) no-repeat;
}
div#footer {
width: 1024px;
height: 50px;
text-align: center;
clear: both;
}
/* CSS LAYOUT END */
/* CSS MENU BEGIN */
#menu ul {
margin: 0;
padding: 0;
float: left;
list-style: none;
width: 1024px;
}
#menu ul li {
display: inline;
}
#menu ul li a {
float: left;
text-decoration: none;
padding: 10.5px 11px;
width: 140px;
color: #FF0;
font-weight: bold;
font-size: 24px;
background-color: transparent;
vertical-align: text-bottom;
}
#menu ul li a:visited {
color: #FF0;
}
#menu ul li a:hover, #menu ul li .current {
color: #F00;
text-decoration: underline;
background-color: transparent;
}
/* CSS MENU END */
/* LEFT BAR CSS BEGIN */
/* LEFT BAR CSS END */
/* CONTENT BOX CSS BEGIN */
#content div#gmod {
width: 500px;
height: 150px;
text-align: center;
border: #FFF 3px solid;
background-color: #000;
margin: 0 auto;
color: #FFF;
overflow-style: auto;
overflow: scroll;
overflow-x: hidden;
padding-left: 4px;
padding-right: 4px;
}
#content div#gmod h1 {
text-align: center;
color: #F00;
font-size: 24px;
font-weight: bold;
text-decoration: underline;
padding: 0px 5px;
/* CONTENT BOX CSS END */
/* RIGHT BAR CSS BEGIN */
/* RIGHT BAR CSS END */
/* FOOTER CSS BEGIN */
#footer {
color: #999;
text-align: center;
}
/* FOOTER CSS END */
Thank you very much for taking the time to assist me with this problem.
Don't use
background-image: url(images/v2_barBG.png) no-repeat;
but
background: url(images/v2_barBG.png) no-repeat;
background-image: url(images/v2_barBG.png) no-repeat; should be background-image: url(images/v2_barBG.png); background-repeat: no-repeat;
background-image: url(images/v2_barBG.png) no-repeat; <-- no-repeat should be declared seperatly like this: background-repeat: no-repeat;