I am writing an un-ordered list in a html page. I have used css class for getting bullets for "li" tag. But bullets are not displaying, Instead horizontal lines are coming. I am writing html page in ColdFusion (.cfm) pages.
My html Page:
<!DOCTYPE HTML>
<html>
<head>
<title>Resource Optimization</title>
<META NAME="resource-type" CONTENT="document">
<META NAME="Description" CONTENT="DEPT: RESOURCE Optimization: Index">
<META NAME="KeyWords" CONTENT="Departments, Index, DEPT, Resource, Management, North, Generation, Report, Reports, OATI, On, Line, Tagging, Daily, Gas, Totals, Energy, Marketing, Purchase, Sales, Schedule, Schedules, Pricing, Pathing, Optimization">
<META NAME="Author" CONTENT="Intranet Contruction Crew for Sierra Pacific Resources">
<META NAME="Reply-to" CONTENT="dtheiss#nevp.com">
<META NAME="Generator" CONTENT="ColdFusion Studio 4.0">
<META NAME="Copyright" CONTENT="2000 Sierra Pacific Resources">
<META HTTP-EQUIV="content-style-type" CONTENT="text/css">
<META HTTP-EQUIV="content-language" CONTENT="en-US">
<style type="text/css">
ul.list{
list-style-type:circle;
}
</style>
</head>
<cfinclude template="/matrix_nav_top_full_min.cfm"><br>
<!--- <body> --->
<div id="page">
<div class="container">
<div class="container-inner">
<div class="page-container" >
<!--- <cfinclude template="/matrix_nav_top_full.cfm"> --->
<!-------Resource Management DEPARTMENT INDEX PAGE---------->
<font style="font-family: Verdana, Arial, Helvetica; font-size: 10pt;">
<div align="right" style="background-color:FFFFFF; "><strong>Keyword: RM</strong></div>
<div align="left" style="background-color:FFFFFF; ">
<!---LOKI 17129 <img src="/dept/Graphics/title_resourceMgmt.jpg" width="480" height="40" border="0" alt="Resource Management Department">--->
<!--- LOKI 19816 <img src="/dept/Graphics/title_resourceProcurementOpt.jpg" width="99%" border="0" alt="Resource Procurement and Optimization">--->
<img src="/dept/Graphics/title_resourceOptimization.jpg" width="98%" border="0" alt="Resource Optimization">
<hr size="3">
<br>
<strong>Departmental Areas:</strong>
<ul class="list">
<li>Gas Optimization
<li>Market Prices
<li>Reports
<li>Short-Term Analysis
<li>Short-Term Optimization
<li>Transaction and Market Analysis
</ul>
<br><br>
<!--- <cfinclude template="/new_footer.cfm"> --->
</div>
</div>
<cfinclude template="/new_footer_rd_min.cfm">
<!--- </body>
</html> --->
I am getting a page like below.
How can I get Bullets in li.
<li> elements naturally have a bullet beside them, however, you may have some other property overriding this making dashes showing up.
Add the proper list-style-type to force them back to bullets:
li{
list-style-type: disc;
}
This is not shown in your fiddle because no CSS is provided in your fiddle, so the fiddle will appear to be exactly the same. Note that the elements do have bullets beside them in your fiddle. If I apply the list-style-type to my fiddle, it still looks the same.
Related
enter image description hereI created a website with a video as my background for my front page. My problem is that when I enter new set of codes supposedly for another tab in the same page but below it, it does not work. i tried using div class container but it does not work. How to fix it?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Lakad Dalampasigan</title>
</head>
<body>
<section class="showcase">
<header>
<h2 class="logo">LAKAD DALAMPASIGAN</h2>
<div class="toggle"><img src="log1.png" width="90" height="90"></div>
</header>
<video src="ocean.mp4" muted loop autoplay></video>
<div class="overlay"></div>
<div class="text">
<h2>Lakad Dalampasigan </h2>
<h3></h3>
<p>Climate has always changed and is always changing.
Climate change was reframed from an environmental concern to a public health issue prior to and during this ongoing crisis, and it may soon be deemed a public health emergency. </p>
<a href="sec.html
" target="_blank">Learn more</a>
</div>
</section>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>🔥Mayur's Personal Site</title>
<style>
body{
background-color: #eaf6f6;
}
hr{
background-color: white;
border-style: none;
}
</style>
</head>
<body>
<img src="mayurrr.png" alt="mayuresh profile picture">
<h1>Mayuresh Bhosale</h1>
<p><i><strong> Student of Sanjivani College of Engineering, Kopargaon. </strong></i></p>
<p>Hi I am Mayuresh from Aurangabad. I am pursuing my B.tech from Sanjivani College of Engineering, Kopargaon.
<br>I am learning Web Development from udemy.</p>
<hr>
<h3>Education</h3>
<table border="1">
<thead>
<th>Year</th>
<th>School/College</th>
</thead>
<tr>
<td>2007-2017</td>
<td>Maharashtra Public School, Aurangabad</td>
</tr>
<tr>
<td>2017-2019</td>
<td>Sarosh Junior College, Aurangabad</td>
</tr>
<tr>
<td>2019</td>
<td>Sanjivani College of Engineering, Kopargaon</td>
</tr>
</table>
<hr>
<h3>Hobbies</h3>
<ol type="I">
<li>Photography </li>
<li>Playing Games </li>
<li>Listening to Music </li>
</ol>
<p>Contact Me</p>
</body>
</body>
</html>
this is the code!
If I try to add table and in that one row then website gets blank.This same happened when I tried to add background colour to horizontal rule in style tag. Did anyone faced same problem when learning HTML and css?
Now I have added exact same code which is not executing properly.
Your table is inside a ul element, and it's the only child element of that ul. That's invalid HTML. A ul has to contain li elements.
Just erase the ul opening and closing tag.
There are many possible reasons for a code to run blank on a computer. In some cases it might be because you haven't closed <body> or </head> tags properly (or maybe you have duplicates). In other cases however, it might have to do with your computers storage capacity. Check if your storage capacity says something like "0 bytes available" or a very low number. If this is the case you can clean up system files and you should be good.
I am using IntelliJ and Spring Boot and Thymeleaf for a database visualisation project. The following HTML-Template is for the view of one gene:
gene.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://thymeleaf.org">
<head>
<title>Gene</title>
<meta http-equiv="Content-Type" content="content/html; charset=UTF-8">
<link rel="stylesheet" href="main.css" />
</head>
<body>
<!--import header-->
<header th:include="header"></header>
<div id="main">
<!--GeneID as page heading -->
<h2 th:text="'Gene: '+${identifier}" style="text-align: center"></h2>
<!--Gene description -->
<p th:text="${description}" style="text-align: center"></p>
<br/>
<!-- Sequence -->
<h3 th:text="'Sequence:'"></h3>
<!-- For each char in sequence-->
<th:block th:each="char:${sequence}">
<!-- Print the char. Color encoding done by main.css -->
<div th:class="${'gene ' + char}" th:text="${char}"></div>
</th:block>
<!--Protein encoded by gene -->
<h3 th:text="'Protein:'"></h3>
<a th:href="${'protein?id='+protein}" th:text="${protein}"></a>
</div>
</body>
</html>
In my later view, I have a problem.
I want the "Protein: Q6GZX4" to be in one line below the sequence. Yet I could not achieve it with <br/>or anything else.
What am I missing?
Thanks for your time and effort :)
Based on #manfromnowhere:
Change gene.html to:
[...]
<!--Protein encoded by gene -->
<div class="breaker">
<br/>
<h3 style="display:inline-block;" th:text="'Protein:'"></h3>
<a th:href="${'protein?id='+protein}" th:text="${protein}"></a>
</div>
breaker-class in main.css:
div.breaker{
clear:both;
}
Output:
I am trying to use an inline style
The template is simple and is responsive in the browser but is not when I send it to my phone. The image runs off the page and does not scale to the viewport.
Here is the code:
In the img tag I put an inline style.
style="display:block; width:auto; height:100%:"
Where am I going wrong?
I am sending it to an android phone using gmail. Here is the ENTIRE page:
!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta charset="utf-8" /> <title>Best Holiday Wishes</title> </head> <body> <!-- Begin Content --> <div style="width:100%; height:auto; margin:0 auto;"> <img src="literacy2pointzero.com/images/03.jpg"; style="display:block; width:auto; height:100%:" alt="Holiday Wishes" /> </div> <!-- End Content --> </body> </html>
Try giving these properties.
Style="Max-width:100%;width:100%\9;height: auto;"
It will make the image shrink and resize to its max size.
try this with your image
<img src="http://www.literacy2pointzero.com/images/03.jpg" style="max-width:100%; height: auto;" width="100%" height="auto" alt="Holiday Wishes" />
but the problem might be your viewport tag. Try this one:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
Without more info, below is best I can do. It is based off a similar issue in Outlook. It may not work though depending on how your sending email client renders the width property of an image (e.g. Outlook removes percentages and creates a defined value regardless of what you have in the HTML).
First - use a table, it is more stable in email clients. Second by having 3 columns with a defined middle one, you are able to fake the CSS max-width style allowing it to shrink to screen size, but never go past what was defined in the TD tag. ALSO make sure to add the full URL when referencing src or href in emails.
See below:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta charset="utf-8" />
<title>Best Holiday Wishes</title>
</head>
<body> <!-- Begin Content --> <table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td></td>
<td width="600" align="center"><img width="100%" src="http://www.literacy2pointzero.com/images/03.jpg"; style="display:block;" alt="Holiday Wishes" /></td>
<td></td>
</tr>
</table> <!-- End Content --> </body> </html>
There is an example in jQuery Mobile: Up and Running which shows an interactive list containing title, description, and a link
http://my.safaribooksonline.com/book/-/9781449331085/4dot-lists/id2712982
I can't find the code for this, and the only way I have so far been able to reproduce the same effect is to nest an <hX> element inside the <a>, which I understand is bad practice.
Can anyone suggest the correct way to achieve this? The example below works, but only by nesting the inside the .
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>List Example</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div data-role="page" id="example">
<div data-role="header" data-theme="c">
<h2>List Example</h2>
</div>
<div data-role="content">
<ul data-role="listview" >
<li>
<a href="#">
<h3>Title1</h3>
<p>Description1</p>
</a>
</li>
<li>
<a href="#">
<h3>Title2</h3>
<p>Description2</p>
</a>
</li>
</ul>
</div>
</body>
</html>
From the JQM docs (under "Text formatting & counts")
To add text hierarchy, use headings to increase font emphasis and use
paragraphs to reduce emphasis.
So that seems to be the correct way to do it. That said you can nest whatever you want in the li and style it using `CSS'.