I have such a menu page, on which php generates a list that I get from the database. Here is what it looks like this
I just can’t find a simple list style that would fit here, and I also can’t figure out how to make me show only the title, but when I click on it, then the rest of the information will appear. Tell me, please, how this can be done to look good. Thank you in advance!
I tried this, but it's not what I want to get:
body {
font-family: Helvetica;
}
ol {
counter-reset: myCounter;
margin-left: 0;
padding-left: 5px;
color: rgb(100, 100, 100);
display: inline-block;
}
li {
position: relative;
padding-left: 3em;
margin: 0.45em 0;
list-style: none;
line-height: 1.8em;
cursor: pointer;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
li:hover {
color: rgb(0, 0, 0);
}
li:before {
content: counter(myCounter);
counter-increment: myCounter;
position: absolute;
top: 0;
left: 0;
width: 1.8em;
height: 1.8em;
line-height: 1.8em;
padding: 0px;
color: #fff;
background: #2980b9;
font-weight: bold;
text-align: center;
border-radius: .9em;
box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.3);
z-index: 1;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
li:hover:before {
background-color: #2ecc71;
}
li li:before {
background-color: #3498db;
}
li:after {
position: absolute;
top: 2.1em;
left: 0.9em;
width: 2px;
height: calc(100% - 2em);
content: '';
background-color: rgb(203, 203, 203);
z-index: 0;
}
li:hover:after {
background-color: #2ecc71;
}
li li {
font-size: 0.8em;
}
1\2:
<!DOCTYPE html>
<html>
<head>
<title>Films</title>
<link href="css/button.css" rel="stylesheet">
<?php require 'menu.php'; ?>
</head>
<body>
<button type="button">Sort by ASC</button>
<?php require 'allFilms.php'; ?>
</body>
</html>
2\2:
<link href="css/index.css" rel="stylesheet">
<ul style="margin-top: 100px">
<?php
require 'queries.php';
$query = new Queries();
$films = $query->getAllFilms();
foreach ($films as $film) {
echo "<li style='margin-left: 50px;>Title: {$film['name']}</>";
echo " <ul>
<li>Year: {$film['year']}</li>
<li>Format: {$film['format']}</li>
<li>Actors: {$film['actors']}</li>
</ul>
</li>";
}
?>
</ul>
I want to do something like this:IMAGE
Generated HTML:
<!DOCTYPE html>
<html>
<head>
<title>Films</title>
<link href="css/button.css" rel="stylesheet">
<link href="css/menu.css" rel="stylesheet">
<nav role='navigation' class="menu">
<ul>
<li>All Films</li>
<li>Tools
<ul>
<li>Add Film</li>
<li>Delete Film</li>
</ul>
</li>
<li>Search</li>
<li>Import Films</li>
</ul>
</nav></head>
<body>
<button type="button">Sort by ASC</button>
<link href="css/index.css" rel="stylesheet">
<ul style="margin-top: 100px">
<li style='margin-left: 50px;>Title: First2</> <ul>
<li>Year: 2223</li>
<li>Format: VHS</li>
<li>Actors: I and other</li>
</ul>
</li><li style='margin-left: 50px;>Title: First2</> <ul>
<li>Year: 2223</li>
<li>Format: VHS</li>
<li>Actors: I and other</li>
</ul>
</li><li style='margin-left: 50px;>Title: Second</> <ul>
<li>Year: 2019</li>
<li>Format: DVD</li>
<li>Actors: I</li>
</ul>
</li><li style='margin-left: 50px;>Title: Second.0</> <ul>
<li>Year: 2019</li>
<li>Format: DVD</li>
<li>Actors: I.0</li>
</ul>
</li><li style='margin-left: 50px;>Title: Second.1</> <ul>
<li>Year: 2019</li>
<li>Format: DVD</li>
<li>Actors: I.1</li>
</ul>
</li><li style='margin-left: 50px;>Title: Second.2</> <ul>
<li>Year: 2019</li>
<li>Format: DVD</li>
<li>Actors: I.2</li>
</ul>
you have multiple error, it better first to learn validating your HTML on https://validator.w3.org/nu/
and here example for clickable pure CSS collapsible tree menu, you need to create <label for="cXX"> and <input type="checkbox" id="cXX"> and set cXX with same value for each item.
ul,li{padding:0}
#menutree li{list-style:none}
#menutree > li{margin-left:5px;color:#8a2be2;font-weight:700;position:relative}
#menutree>li:before{content:"+";padding-right:5px}
#menutree>li>ul>li{margin-left:20px;color:green;font-weight:400}
#menutree>li>ul>li:before{content:"-";padding-right:5px}
li .menu_label + input[type="checkbox"]{position:absolute;left:0;opacity:0;cursor:pointer;top:0}
li .menu_label{cursor:pointer}
li .menu_label+input[type=checkbox]+ul>li{display:none}
li .menu_label+input[type=checkbox]:checked+ul>li{display:block}
<ul id="menutree">
<li>
<label class="menu_label" for="c1">Title: First2</label>
<input type="checkbox" id="c1" />
<ul>
<li>Year: 2223</li>
<li>Format: VHS</li>
<li>Actors: I and other</li>
</ul>
</li>
<li>
<label class="menu_label" for="c2">Title: Second</label>
<input type="checkbox" id="c2" />
<ul>
<li>Year: 2019</li>
<li>Format: DVD</li>
<li>Actors: I</li>
</ul>
</li>
<li>
<label class="menu_label" for="c3">Title: Second.0</label>
<input type="checkbox" id="c3" />
<ul>
<li>Year: 2019</li>
<li>Format: DVD</li>
<li>Actors: I.0</li>
</ul>
</li>
</ul>
You cannot have show and hide functions without Javascript.
Javascript tells your browser what to do. CSS is for styling only.
To achieve what you want, you will need to combine the two.
Here is an example: https://stackoverflow.com/a/35409945/2286743
You can do this using a href link that contains # followed by the id of the element you want to expand
<li class="movie" id="movie6">Title: Second.2
<ul>
<li>Year: 2019</li>
<li>Format: DVD</li>
<li>Actors: I.2</li>
</ul>
</li>
in conjunction with the :target CSS pseudo-class
.movie:target {
height: 6em;
}
.movie-list {
list-style: none;
padding: 0;
}
.movie {
height: 1em;
overflow: hidden;
margin-bottom: 8px;
transition: height 0.5s;
}
.title {
font-weight: bold;
cursor: pointer;
color: black;
text-decoration: none;
}
li {
line-height: 1.5em;
}
.movie:target {
height: 6em;
}
li ul {
padding: 8px;
}
<ul class="movie-list">
<li class="movie" id="movie1">Title: First2
<ul>
<li>Year: 2223</li>
<li>Format: VHS</li>
<li>Actors: I and other</li>
</ul>
</li>
<li class="movie" id="movie2">Title: First2
<ul>
<li>Year: 2223</li>
<li>Format: VHS</li>
<li>Actors: I and other</li>
</ul>
</li>
<li class="movie" id="movie3">Title: Second
<ul>
<li>Year: 2019</li>
<li>Format: DVD</li>
<li>Actors: I</li>
</ul>
</li>
<li class="movie" id="movie4">Title: Second.0
<ul>
<li>Year: 2019</li>
<li>Format: DVD</li>
<li>Actors: I.0</li>
</ul>
</li>
<li class="movie" id="movie5">Title: Second.1
<ul>
<li>Year: 2019</li>
<li>Format: DVD</li>
<li>Actors: I.1</li>
</ul>
</li>
<li class="movie" id="movie6">Title: Second.2
<ul>
<li>Year: 2019</li>
<li>Format: DVD</li>
<li>Actors: I.2</li>
</ul>
</li>
</ul>
However, the generated HTML code you posted is not valid. There is the style property that does not have the closing quote and there is a closing tag with no name and that does not close any tags.
Related
How to place toggle (show/hide) button near parent element?
When I press button to show child elements, this button jumps to the bottom of list, but I need it to stay in place - near parent element.
An example of current situation is under the question.
$(".has_children").append("<button class='buttons-filter'><i class='fa fa-plus' aria-hidden='true'></i></button>");
$("button").click(function() {
$(this).prev().toggle();
$(this).find('i').toggleClass('fa-plus fa-minus') /*changes fa-plus to fa-minus*/
});
.oil-cats {
z-index: 9;
padding-left: 0px;
}
.oil-cats ul {
margin-left: 5px;
list-style: none;
line-height: normal;
}
.oil-cats ul li {
padding-bottom: 5px;
}
.oil-cats ul li a {
font-size: 11px;
font-weight: 400;
padding: 0 0 5px 5px;
text-transform: uppercase;
}
.oil-cats ul li:before {
font-family: FontAwesome;
content: "\f096";
display: inline-block;
margin-right: 0;
margin-left: -5px;
padding-top: 2px;
float: left;
line-height: normal;
}
.oil-cats ul li.chosen:before,
.oil-cats ul li:hover:before {
content: "\f0c8";
}
.oil-subcat {
display: none;
}
.buttons-filter {
padding: 0;
margin: 0;
background-color: transparent;
line-height: normal;
height: 10px;
}
.buttons-filter:hover {
background-color: transparent;
}
.buttons-filter:focus {
background-color: transparent;
}
.fa-plus:before {
color: rgba(0, 0, 0, 0.87);
}
.fa-minus:before {
color: rgba(0, 0, 0, 0.87);
}
.children {
display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<!-- Optional theme -->
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="oil-cats">
<h3 id="product-page-cat">Categories</h3>
<ul id="prod-cat-id" data-highlight_curr_cat="on" data-show_collapse="on">
<li class="cat-item cat-item-26 has_children">Parent product category1
<ul class="children" style="display: none;">
<li class="cat-item cat-item-36">Sub-category1
</li>
</ul>
<button class="buttons-filter"><i class="fa fa-plus" aria-hidden="true"></i></button>
</li>
<li class="cat-item cat-item-32">Parent product category2
<ul class="children" style="display: none;">
<li class="cat-item cat-item-36">Sub-category2
</li>
</ul>
<button class="buttons-filter"><i class="fa fa-plus" aria-hidden="true"></i></button>
</li>
<li class="cat-item cat-item-28">Simple category1
</li>
<li class="cat-item cat-item-30">Simple category2
</li>
<li class="cat-item cat-item-31">Simple category3
</li>
<li class="cat-item cat-item-27">Parent product category3
<ul class="children" style="display: none;">
<li class="cat-item cat-item-36">Sub-category3
</li>
</ul>
<button class="buttons-filter"><i class="fa fa-plus" aria-hidden="true"></i></button>
</li>
<li class="cat-item cat-item-29">Simple category
</li>
</ul>
</div>
Add the button before the child element.And in jquery toggle the element next to the button
$(".has_children").find('ul.children').each(function(){
var html = $("<button class='buttons-filter'><i class='fa fa-plus' aria-hidden='true'></i></button>");
html.insertBefore($(this));
})
$("button").click(function() {
$(this).next().toggle();
$(this).find('i').toggleClass('fa-plus fa-minus') /*changes fa-plus to fa-minus*/
});
.oil-cats {
z-index: 9;
padding-left: 0px;
}
.oil-cats ul {
margin-left: 5px;
list-style: none;
line-height: normal;
}
.oil-cats ul li {
padding-bottom: 5px;
}
.oil-cats ul li a {
font-size: 11px;
font-weight: 400;
padding: 0 0 5px 5px;
text-transform: uppercase;
}
.oil-cats ul li:before {
font-family: FontAwesome;
content: "\f096";
display: inline-block;
margin-right: 0;
margin-left: -5px;
padding-top: 2px;
float: left;
line-height: normal;
}
.oil-cats ul li.chosen:before,
.oil-cats ul li:hover:before {
content: "\f0c8";
}
.oil-subcat {
display: none;
}
.buttons-filter {
padding: 0;
margin: 0;
background-color: transparent;
line-height: normal;
height: 10px;
}
.buttons-filter:hover {
background-color: transparent;
}
.buttons-filter:focus {
background-color: transparent;
}
.fa-plus:before {
color: rgba(0, 0, 0, 0.87);
}
.fa-minus:before {
color: rgba(0, 0, 0, 0.87);
}
.children {
display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<!-- Optional theme -->
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="oil-cats">
<h3 id="product-page-cat">Categories</h3>
<ul id="prod-cat-id" data-highlight_curr_cat="on" data-show_collapse="on">
<li class="cat-item cat-item-26 has_children">Parent product category1
<!--<button class="buttons-filter"><i class="fa fa-plus" aria-hidden="true"></i></button>-->
<ul class="children" style="display: none;">
<li class="cat-item cat-item-36">Sub-category1
</li>
</ul>
</li>
<li class="cat-item cat-item-32 has_children">Parent product category2
<!-- <button class="buttons-filter"><i class="fa fa-plus" aria-hidden="true"></i></button>-->
<ul class="children" style="display: none;">
<li class="cat-item cat-item-36">Sub-category2
</li>
</ul>
</li>
<li class="cat-item cat-item-28">Simple category1
</li>
<li class="cat-item cat-item-30">Simple category2
</li>
<li class="cat-item cat-item-31">Simple category3
</li>
<li class="cat-item cat-item-27 has_children">Parent product category3
<!-- <button class="buttons-filter"><i class="fa fa-plus" aria-hidden="true"></i></button>-->
<ul class="children" style="display: none;">
<li class="cat-item cat-item-36">Sub-category3
</li>
</ul>
</li>
<li class="cat-item cat-item-29">Simple category
</li>
</ul>
</div>
This works:
$(".has_children>a").after("<button class='buttons-filter'><i class='fa fa-plus' aria-hidden='true'></i></button>");
$("button").click(function() {
$(this).next().toggle();
$(this).find('i').toggleClass('fa-plus fa-minus') /*changes fa-plus to fa-minus*/
});
.oil-cats {
z-index: 9;
padding-left: 0px;
}
.oil-cats ul {
margin-left: 5px;
list-style: none;
line-height: normal;
}
.oil-cats ul li {
padding-bottom: 5px;
}
.oil-cats ul li a {
font-size: 11px;
font-weight: 400;
padding: 0 0 5px 5px;
text-transform: uppercase;
}
.oil-cats ul li:before {
font-family: FontAwesome;
content: "\f096";
display: inline-block;
margin-right: 0;
margin-left: -5px;
padding-top: 2px;
float: left;
line-height: normal;
}
.oil-cats ul li.chosen:before,
.oil-cats ul li:hover:before {
content: "\f0c8";
}
.oil-subcat {
display: none;
}
.buttons-filter {
padding: 0;
margin: 0;
background-color: transparent;
line-height: normal;
height: 10px;
}
.buttons-filter:hover {
background-color: transparent;
}
.buttons-filter:focus {
background-color: transparent;
}
.fa-plus:before {
color: rgba(0, 0, 0, 0.87);
}
.fa-minus:before {
color: rgba(0, 0, 0, 0.87);
}
.children {
display: none;
}
<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<!-- Optional theme -->
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="oil-cats">
<h3 id="product-page-cat">Categories</h3>
<ul id="prod-cat-id" data-highlight_curr_cat="on" data-show_collapse="on">
<li class="cat-item cat-item-26 has_children">Parent product category1
<ul class="children" style="display: none;">
<li class="cat-item cat-item-36">Sub-category1
</li>
</ul>
<button class="buttons-filter"><i class="fa fa-plus" aria-hidden="true"></i></button>
</li>
<li class="cat-item cat-item-32">Parent product category2
<ul class="children" style="display: none;">
<li class="cat-item cat-item-36">Sub-category2
</li>
</ul>
<button class="buttons-filter"><i class="fa fa-plus" aria-hidden="true"></i></button>
</li>
<li class="cat-item cat-item-28">Simple category1
</li>
<li class="cat-item cat-item-30">Simple category2
</li>
<li class="cat-item cat-item-31">Simple category3
</li>
<li class="cat-item cat-item-27">Parent product category3
<ul class="children" style="display: none;">
<li class="cat-item cat-item-36">Sub-category3
</li>
</ul>
<button class="buttons-filter"><i class="fa fa-plus" aria-hidden="true"></i></button>
</li>
<li class="cat-item cat-item-29">Simple category
</li>
</ul>
</div>
What I'm trying to accomplish is this:
Display a marquee composed of several (dozen or more) company logos, across the page from right to left in a single row.
I have the following code which works as desired in Firefox, but doesn't work in other (Chrome, IE, Edge) browsers.
Specifically, if the width of the combined images is greater than the width of the div, the overflow images are displayed on another "line" below, starting at the far left. It seems the duration of the display is as if the images are properly in line (as there is a great deal of blank space / time after the last image clears the div edge.
I have tried to use suggested CSS3, and the swimming fish js examples, but they only work with a single image. I'm using php to get multiple images from mysql, they don't fit my needs.
<?php
session_start();
require('db.php');
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Template</title>
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<div id="wrap">
<div id="header" align="left">
<br>
<font color="gray">
<p align="right">Over <font color="maroon"><b>500,000 </b></font>flags placed since 2012</p>
</font>
<p><img src="dialmiller.jpg" width="200" height="200" style="vertical-align: middle"/>
<span style="display:inline-block" align="right">
<font size="7">Flags for Fallen Vets </font><font size="5">.com </font>
</span>
<figcaption><font color="gray">Never Forgotten</font></figcaption>
</p>
<p class ="social" align="middle">
<font color="black" size="5"><b>Donate</b></font>
<a target="_blank" href="https://www.facebook.com/flagsforfallenvets/"><img src="fb.png" width="20" height="20" align="right"/></a>
<a target="_blank" href="https://www.twitter.com"><img src="twr.jpg" width="20" height="20" align="right"/></a>
</p>
</div>
<ul id="menu">
<ul class="main-navigation">
<li>Home</li>
<li>Our Mission</li>
<li>National Cemeteries
<ul>
<li>Dallas-Fort Worth
<ul>
<li>Sponsors</li>
<li>Board</li>
<li>Map</li>
</ul>
</li>
<li>Houston
<ul>
<li>Sponsors</li>
<li>Board</li>
<li>Map</li>
</ul>
</li>
<li>Florida
<ul>
<li>Sponsors</li>
<li>Board</li>
<li>Map</li>
</ul>
</li>
<li>Sarasota
<ul>
<li>Sponsors</li>
<li>Board</li>
<li>Map</li>
</ul>
</li>
<li>South Florida
<ul>
<li>Sponsors</li>
<li>Board</li>
<li>Map</li>
</ul>
</li>
<li>Black Hills
<ul>
<li>Sponsors</li>
<li>Board</li>
<li>Map</li>
</ul>
</li>
<li>Fort Meade
<ul>
<li>Sponsors</li>
<li>Board</li>
<li>Map</li>
</ul>
</li>
</ul>
<li><a target="_blank" href="newvolunteer.php">Volunteer Form</a></li>
<li>Sponsor Levels</li>
<li>2017 Shirts</li>
<li>Board of Directors</li>
<li>Contact Us</li>
</ul>
</ul>
<div class="main">
<h4 align="center"> Sponsors </h4>
<?php
$fetch=mysql_query("select * from banners ORDER by level");
if(mysql_num_rows($fetch))
{
?>
<marquee behavior="scroll" scrollamount="5" direction="left" onmouseover="this.stop();" onmouseout="this.start();">
<ul class="ulclass" >
<?php
while($row=mysql_fetch_array($fetch))
{
$id=$row['id'];
$feed= $row['image'];
?>
<li class="liclassleft">
<?php echo '<img src="img/banners/'.$feed.'"'.' width="125" height="125";'; ?>
<?php } ?>
</li>
<?php } ?>
</ul>
</marquee>
</div>
<div id="sidebar">
<!-- CONTENT -->
<p>
oeprjjiowerf wergui c uiweriu2mu[i3r 2wemu [po23ior 34iopgti34tg 345ti,345t-0,i [po23ior 34iopgti34tg 345ti,345t-0,i
qerogpwejpiwepmkvpqervm oeprjjiowerf wergui c uiweriu2mu[i3r 2wemu [po23ior 34iopgti34tg 345ti,345t-0,i [po23ior 34iopgti34tg 345ti,345t-0,i
qerogpwejpiwepmkvpqervm oeprjjiowerf wergui c uiweriu2mu[i3r 2wemu [po23ior 34iopgti34tg 345ti,345t-0,i [po23ior 34iopgti34tg 345ti,345t-0,i
qerogpwejpiwepmkvpqervm oeprjjiowerf wergui c uiweriu2mu[i3r 2wemu [po23ior 34iopgti34tg 345ti,345t-0,i [po23ior 34iopgti34tg 345ti,345t-0,i
</p>
</div>
</body>
</html>
Important CSS lines used:
.main { border-bottom:1px #051B42 solid; max-width:99%;max-height:195px; padding:5px; float:left; margin-bottom:1px; }
.ulclass { list-style-type:none;}
.liclassleft { margin:0 auto; border-bottom:1px #808080; font-size:20px; font-family:Tahoma, Geneva, sans-serif; padding:5px;float: left;}
I understand the <marquee> tag isn't what I should be using, but except for the wrapping of images it works.
I'm open to using any form of replacement.
Here's a possible solution.....
It should work with any number of images, but the animation end percentage may need some minor adjustment as desired.
.marqHold {
padding: 5px 10px;
background: #aaa;
color: #fff;
position: relative;
display: block;
margin: 20px 0;
text-align: left;
overflow: hidden;
height: 135px; /* image height+padding */
}
.marqHold ul {
list-style: none;
padding:0;
margin:0;
position: absolute;
white-space: nowrap;
left: 110%; /* positions ul off screen to start */
animation: marq 8s linear infinite; /* 8s = 8 seconds, adjust as desired */
}
.marqHold ul li {
display: inline-block;
width: 125px;
height: 125px;
padding: 5px;
}
#keyframes marq {
from { left: 110%; }
to { left: -200%; } /* increase/decrease to set point where animation restarts */
}
<div class="marqHold">
<ul>
<li>
<img src="https://placeholdit.imgix.net/~text?txtsize=12&bg=112255&txt=125%C3%97125&w=125&h=125" width="125" height="125" /></li>
<li>
<img src="https://placeholdit.imgix.net/~text?txtsize=12&bg=112255&txt=125%C3%97125&w=125&h=125" width="125" height="125" /></li>
<li>
<img src="https://placeholdit.imgix.net/~text?txtsize=12&bg=112255&txt=125%C3%97125&w=125&h=125" width="125" height="125" /></li>
<li>
<img src="https://placeholdit.imgix.net/~text?txtsize=12&bg=112255&txt=125%C3%97125&w=125&h=125" width="125" height="125" /></li>
<li>
<img src="https://placeholdit.imgix.net/~text?txtsize=12&bg=112255&txt=125%C3%97125&w=125&h=125" width="125" height="125" /></li>
<li>
<img src="https://placeholdit.imgix.net/~text?txtsize=12&bg=112255&txt=125%C3%97125&w=125&h=125" width="125" height="125" /></li>
</ul>
</div>
Move to right:
.marqHold {
padding: 5px 10px;
background: #aaa;
color: #fff;
position: relative;
display: block;
margin: 20px 0;
text-align: left;
overflow: hidden;
height: 135px; /* image height+padding */
}
.marqHold ul {
list-style: none;
padding:0;
margin:0;
position: absolute;
white-space: nowrap;
left: -200%; /* positions ul off screen to start */
animation: marq 8s linear infinite;
}
.marqHold ul li {
display: inline-block;
width: 125px;
height: 125px;
padding: 5px;
}
#keyframes marq {
from { left: -200%;
}
to { left: 110%; }
}
<div class="marqHold">
<ul>
<li>
<img src="https://placeholdit.imgix.net/~text?txtsize=12&bg=112255&txt=125%C3%97125&w=125&h=125" width="125" height="125" /></li>
<li>
<img src="https://placeholdit.imgix.net/~text?txtsize=12&bg=112255&txt=125%C3%97125&w=125&h=125" width="125" height="125" /></li>
<li>
<img src="https://placeholdit.imgix.net/~text?txtsize=12&bg=112255&txt=125%C3%97125&w=125&h=125" width="125" height="125" /></li>
<li>
<img src="https://placeholdit.imgix.net/~text?txtsize=12&bg=112255&txt=125%C3%97125&w=125&h=125" width="125" height="125" /></li>
<li>
<img src="https://placeholdit.imgix.net/~text?txtsize=12&bg=112255&txt=125%C3%97125&w=125&h=125" width="125" height="125" /></li>
<li>
<img src="https://placeholdit.imgix.net/~text?txtsize=12&bg=112255&txt=125%C3%97125&w=125&h=125" width="125" height="125" /></li>
</ul>
</div>
Bounce back and forth.....
.marqHold {
padding: 5px 10px;
background: #aaa;
color: #fff;
position: relative;
display: block;
margin: 20px 0;
text-align: left;
overflow: hidden;
height: 135px; /* image height+padding */
}
.marqHold ul {
list-style: none;
padding:0;
margin:0;
position: absolute;
white-space: nowrap;
left: -200%; /* positions ul off screen to start */
animation: marq 10s linear infinite;
}
.marqHold ul li {
display: inline-block;
width: 125px;
height: 125px;
padding: 5px;
}
#keyframes marq {
0% { left: -200%;
}
50% { left: 110%; }
100% { left: -200%; }
}
<div class="marqHold">
<ul>
<li>
<img src="https://placeholdit.imgix.net/~text?txtsize=12&bg=112255&txt=125%C3%97125&w=125&h=125" width="125" height="125" /></li>
<li>
<img src="https://placeholdit.imgix.net/~text?txtsize=12&bg=112255&txt=125%C3%97125&w=125&h=125" width="125" height="125" /></li>
<li>
<img src="https://placeholdit.imgix.net/~text?txtsize=12&bg=112255&txt=125%C3%97125&w=125&h=125" width="125" height="125" /></li>
<li>
<img src="https://placeholdit.imgix.net/~text?txtsize=12&bg=112255&txt=125%C3%97125&w=125&h=125" width="125" height="125" /></li>
<li>
<img src="https://placeholdit.imgix.net/~text?txtsize=12&bg=112255&txt=125%C3%97125&w=125&h=125" width="125" height="125" /></li>
<li>
<img src="https://placeholdit.imgix.net/~text?txtsize=12&bg=112255&txt=125%C3%97125&w=125&h=125" width="125" height="125" /></li>
</ul>
</div>
I have added sub menu items to my main menu navigation, but they are not showing at all?
I have checked the css, and do not see any code that would hide the sub menu.
ul.art-hmenu {
display: inline-block;
vertical-align: middle;
padding-left: 13px;
padding-right: 13px;
}
ul.art-hmenu, ul.art-hmenu ul {
min-height: 0;
}
ul.art-hmenu, ul.art-hmenu ul {
display: block;
margin: 0;
padding: 0;
border: 0;
list-style-type: none;
}
table, ul.art-hmenu {
font-size: 12px;
font-family: Verdana, Geneva, Arial, Helvetica, Sans-Serif;
font-weight: normal;
font-style: normal;
}
.art-hmenu {
float: right;
}
<ul class="art-hmenu menu-2">
<li class="menu-item-12 active"><a title="Home" href="http://agl.run-time.co.za/" class="active">Home</a> </li>
<li class="menu-item-14"><a title="Find Us" href="http://agl.run-time.co.za/find-us/">Find Us</a> </li>
<li class="menu-item-105"><a title="Facilities" href="http://agl.run-time.co.za/facilities/">Facilities</a> </li>
<li class="menu-item-207"><a title="Tours" href="http://agl.run-time.co.za/tours/">Tours</a> </li>
<li class="menu-item-229"><a title="Conferences" href="http://agl.run-time.co.za/conferences/">Conferences</a> </li>
<li class="menu-item-67"><a title="Contact" href="http://agl.run-time.co.za/contact/">Contact</a> </li>
<li class="menu-item-234"><a title="About Us" href="http://agl.run-time.co.za/about-us/">About Us</a> </li>
</ul>
What am I overlooking or doing wrong that is hiding my sub menu?
<ul class="art-hmenu menu-2">
<li class="menu-item-12 active"><a title="Home" href="http://agl.run-time.co.za/" class="active">Home</a>
</li>
<li class="menu-item-14"><a title="Find Us" href="http://agl.run-time.co.za/find-us/">Find Us</a>
<ul class="with-your-submenu-css-class">
<li>Submenu 1</li>
<li>Submenu 2</li>
<li>Submenu 3</li>
</ul>
</li>
<li class="menu-item-105"><a title="Facilities" href="http://agl.run-time.co.za/facilities/">Facilities</a>
</li>
<li class="menu-item-207"><a title="Tours" href="http://agl.run-time.co.za/tours/">Tours</a>
</li>
<li class="menu-item-229"><a title="Conferences" href="http://agl.run-time.co.za/conferences/">Conferences</a>
<ul class="with-your-submenu-css-class">
<li>Submenu 1</li>
<li>Submenu 2</li>
<li>Submenu 3</li>
</ul>
</li>
<li class="menu-item-67"><a title="Contact" href="http://agl.run-time.co.za/contact/">Contact</a>
</li>
<li class="menu-item-234"><a title="About Us" href="http://agl.run-time.co.za/about-us/">About Us</a>
</li>
</ul>
ul.art-hmenu {
display: inline-block;
vertical-align: middle;
padding-left: 13px;
padding-right: 13px;
}
ul.art-hmenu, ul.art-hmenu ul {
min-height: 0;
}
ul.art-hmenu, ul.art-hmenu ul {
display: block;
margin: 0;
padding: 0;
border: 0;
list-style-type: none;
}
table, ul.art-hmenu {
font-size: 12px;
font-family: Verdana, Geneva, Arial, Helvetica, Sans-Serif;
font-weight: normal;
font-style: normal;
}
.art-hmenu {
float: right;
}
i've got a problem with the responsive bootstrap theme, in the admin panel i've got a top and a left navbar, everything ok there but when i go to reduced view such as mobile, the left bar comes up as a second top bar(that is what i want it to do) but the problem is that it overlaps part of the content, because i have a padding-top thinking on only one bar, so i don't want to double that padding because in a normal view i'll have a blank space wich i don't want.
So how can i make a different padding-top for normal view and reduced view.
Here is the code:
<body>
<div id="wrapper">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="{!!URL::to('/')!!}">SCM</a>
</div>
<!-- /.navbar-header -->
<ul class="nav navbar-top-links navbar-right">
<li><i class="fa fa-home fa-fw"></i>
<!-- /.dropdown -->
<li class="dropdown">
<i class="fa fa-user fa-fw"></i><span class="caret"></span>
<ul class="dropdown-menu">
<li>Perfil</li>
#if(Auth::user()->type_id == 1)
<li>Administrar</li>
#endif
<li role="separator" class="divider"></li>
<li><i class="fa fa-sign-out fa-fw"></i>Logout</li>
</ul>
</li>
<!-- /.dropdown -->
</ul>
<!-- /.navbar-top-links -->
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li <?php if(isset($section)){echo (($section=="user")?"class=\"active\"":"");}?> >
<i class="fa fa-users fa-fw"></i> Usuario<span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
<a <?php echo ((isset($subsection)&&$subsection=="create")?"class=\"active\"":"");?> href="{!!URL::to('/user/create')!!}"><i class='fa fa-plus fa-fw'></i> Agregar</a>
</li>
<li>
<a <?php echo ((isset($subsection)&&$subsection=="list")?"class=\"active\"":"");?> href="{!!URL::to('/user')!!}"><i class='fa fa-list-ol fa-fw'></i> Mostrar todos los usuarios</a>
</li>
<li>
<a <?php echo ((isset($subsection)&&$subsection=="search")?"class=\"active\"":"");?> data-toggle="modal" data-target="#searchModal_admin" href="#"><i class='glyphicon glyphicon-search fa-fw'></i> Busqueda avanzada</a>
</li>
</ul>
</li>
<li <?php if(isset($section)){echo (($section=="exercise")?"class=\"active\"":"");}?>>
<i class="fa fa-tags fa-fw"></i> Ejercicios<span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
<a <?php echo ((isset($subsection)&&$subsection=="create")?"class=\"active\"":"");?> href="{!!URL::to('/exercise/create')!!}"><i class='fa fa-plus fa-fw'></i> Agregar</a>
</li>
<li>
<a <?php echo ((isset($subsection)&&$subsection=="list")?"class=\"active\"":"");?> href="{!!URL::to('/exercise')!!}"><i class='fa fa-list-ol fa-fw'></i>Listar</a>
</li>
<li><i class="fa fa-certificate"></i> Categoria<span class="fa arrow"></span>
<ul class="nav nav-third-level">
<li>
<a <?php echo ((isset($subsection)&&$subsection=="create_activity")?"class=\"active\"":"");?>
href="{!!URL::to('/exercise/activity/create')!!}"><i class='fa fa-plus fa-fw'></i> Agregar
</a>
</li>
<li>
<a <?php echo ((isset($subsection)&&$subsection=="list_activity")?"class=\"active\"":"");?>
href="{!!URL::to('/exercise/activity')!!}"><i class='fa fa-list-ol fa-fw'></i> Listar
</a>
</li>
</ul>
</li>
</ul>
</li>
<li <?php if(isset($section)){echo (($section=="config")?"class=\"active\"":"");}?> >
<i class="fa fa-cogs fa-fw"></i> Configuración<span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
<a <?php echo ((isset($subsection)&&$subsection=="personal")?"class=\"active\"":"");?>
href="{!!URL::to('/config/personal')!!}"><i class='glyphicon glyphicon-user'></i> Información personal
</a>
</li>
</ul>
</li>
<li <?php if(isset($section)){echo (($section=="mail")?"class=\"active\"":"");}?> >
<i class="glyphicon glyphicon-envelope"></i> Enviar Comunicado
</li>
</ul>
</div>
<!-- /.sidebar-collapse -->
</div>
<!-- /.navbar-static-side -->
</nav>
<div id="page-wrapper">
#yield('content')
</div>
</div>
<!-- /#wrapper -->
</body>
The css for this:
body {
background-color: #f8f8f8;
}
#wrapper {
width: 100%;
}
#page-wrapper {
padding: 0 15px;
min-height: 568px;
background-color: #fff;
}
#media(min-width:768px) {
#page-wrapper {
position: inherit;
margin: 0 0 0 250px;
padding: 0 30px;
border-left: 1px solid #e7e7e7;
}
}
.navbar-top-links {
margin-right: 0;
}
.navbar-top-links li {
display: inline-block;
}
.navbar-top-links li:last-child {
margin-right: 15px;
}
.navbar-top-links li a {
padding: 15px;
min-height: 50px;
}
.navbar-top-links .dropdown-menu li {
display: block;
}
.navbar-top-links .dropdown-menu li:last-child {
margin-right: 0;
}
.navbar-top-links .dropdown-menu li a {
padding: 3px 20px;
min-height: 0;
}
.navbar-top-links .dropdown-menu li a div {
white-space: normal;
}
.navbar-top-links .dropdown-messages,
.navbar-top-links .dropdown-tasks,
.navbar-top-links .dropdown-alerts {
width: 310px;
min-width: 0;
}
.navbar-top-links .dropdown-messages {
margin-left: 5px;
}
.navbar-top-links .dropdown-tasks {
margin-left: -59px;
}
.navbar-top-links .dropdown-alerts {
margin-left: -123px;
}
.navbar-top-links .dropdown-user {
right: 0;
left: auto;
}
.sidebar .sidebar-nav.navbar-collapse {
padding-right: 0;
padding-left: 0;
}
.sidebar .sidebar-search {
padding: 15px;
}
.sidebar ul li {
border-bottom: 1px solid #e7e7e7;
}
.sidebar ul li a.active {
background-color: #eee;
}
.sidebar .arrow {
float: right;
}
.sidebar .fa.arrow:before {
content: "\f104";
}
.sidebar .active>a>.fa.arrow:before {
content: "\f107";
}
.sidebar .nav-second-level li,
.sidebar .nav-third-level li {
border-bottom: 0!important;
}
.sidebar .nav-second-level li a {
padding-left: 37px;
}
.sidebar .nav-third-level li a {
padding-left: 52px;
}
#media(min-width:768px) {
.sidebar {
z-index: 1;
position: absolute;
width: 250px;
margin-top: 51px;
}
.navbar-top-links .dropdown-messages,
.navbar-top-links .dropdown-tasks,
.navbar-top-links .dropdown-alerts {
margin-left: auto;
}
}
Thanks.
you have to adjust the padding for the minimum screen size:
for example,
.nav-bar{
padding-top : xxpx;
}
putting the above on the css, obviously will apply to any screen size.
#media(min-width:416px) {
.nav-bar{
padding-top : /*your value*/px;
}
}
The above will make sure that the necessary padding level will be set only after the screen size reaches the 416px amount.
This was just an example amount I got to an iPhone 6 screen with assumed css classes, make sure you play around with the values for your relevant css classes to get whats most ideal for you.
I am getting the following result in my web browser:
The checkmarks appear slightly raised with respect to the text, but I would like the text to be all lined up. What should I do?
I have the following HTML:
<ul class="train">
<li>
<p><?php echo $pageContents->getContents("comptrainLI1"); ?></p>
<ul class="traininner">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>PHP</li>
<li>SQL</li>
<li>WordPress CMS</li>
<li>Magento CMS</li>
</ul>
</li>
<li>
<p><?php echo $pageContents->getContents("comptrainLI2"); ?></p>
<ul class="traininner">
<li>C</li>
<li>C++</li>
<li>C#</li>
<li>Java</li>
</ul>
</li>
</ul>
and CSS:
div#mainContent ul.train {
list-style-position: inside;
list-style-image: url("../images/checkmark-round-whiteOnGreen.jpg");
font-size: 18pt;
}
div#mainContent ul.train ul.traininner {
padding-left: 20px;
list-style-image: url("../images/checkmark-round-whiteOnGreen.jpg");
}
I don't think it's possible to know the reason for the misalignment based on the limited code you posted in your question. It could be something in your PHP. So I've posted a general solution.
li {
list-style-type: none;
margin-bottom: 5px;
}
ul.traininner li::before {
content: '';
display: inline-block;
vertical-align: bottom;
padding: 10px 20px 0 0;
height: 10px;
width: 10px;
background-image: url("http://i.imgur.com/F05JSPD.png");
background-repeat: no-repeat;
}
<ul class="train">
<li>
<ul class="traininner">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>PHP</li>
<li>SQL</li>
<li>WordPress CMS</li>
<li>Magento CMS</li>
</ul>
</li>
<li>
<ul class="traininner">
<li>C</li>
<li>C++</li>
<li>C#</li>
<li>Java</li>
</ul>
</li>
</ul>
jsFiddle