Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Apr 2014
    Thanked 0 Times in 0 Posts

    Problem with bullet points

    Hi all,

    I am currently following a book on how to do HTML, but I have come into a problem that the book does not have an answer to, I have left and right aligned two pictures in my code, the right aligned is fine but the left aligned has removed the bullet points from my <ul> list I had.

    <!DOCTYPE html 
    	PUBLIC "-//W3c//DTD XHTML 1.0 Transitional //EN"
    	<html xmlns= "http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8 " />
    	<title> Green Home </title>
    	<style type = "text/css">
    	body {font : Ariel,Verdana; font-size: 11pt}
    	h1,h2 { color : #00934a}
    	a {color: black}
    	a:hover {background : #00934a; color : white}
    	img.align-left {float : left; margin-left : 5px ; margin-right : 5px }
    	img.align-right {float : right; margin-left : 5px; margin-right : 5px }
    	 <a href = "C:Documents\GettingGreener.html" >
    	 <img src = "C:Downloads\getting greener.jpg" height = "80" width = "150" alt = "logo" /> </a>
    	 <h1> Green Home Environment </h1>
    	 <p> <span style= "color : #00934a; font-weight: bold"> Getting Greener</span> conducted a green audit for a family of five that live east of Seattle.Getting Greener found that the homeowner used more electricity than the average household. We recommended that they install solar panels to provide all of their electrical energy. Any additional energy produced by the panels could be sold back to the public utility company. The homeowners also invested in an electric cat that runs on the solar electric energy panels provided by the panels. </p>
    	 <h2> This homeowner: </h2>
    	 <ul style = "list-style-image: url(http://www.ltcstudentweb.com/mcqua/Chapter03/ChapterFiles/earthbullet.jpg)">
    	 <a href= "#Solar"><li>  Installed solar panels </li> </a>
    	 <a href= "#car"><li> Bought an electric car </li> </a>
    	 <a name = "Solar"></a>
    	 <h3> Solar Panels </h3>
    	 <img class = "align-left" src="C:\Downloads\solar panels.jpg" alt= "Solar Panels on House"/>
    	 <p> As you can see in the picture on the left, photovoltac solar panels are installed on the roof of the house. The panels face south to get the most sunshine possible throughout the day.The green audit showed us how many panels the home needed, based on the family's average electricity consumption.This family's consumption includes an energy-efficient furnace and air conditioner, energy-efficient appliances,energy-efficient windows and doors,and energy-efficient light-bulbs throughout the house.Additionally, the entire family is energy aware and responsible. </p>
    		<li>Approximate annual savings is $5,087</li>
    		<li>Installation can be completed within one week </li>
    		<li>Government and tax incentives are available </li>
    		<li>Public utility company holds up quick and easy </li>
    		<li>Savings begin immediately</li>
    	 <br style = "clear : left" />
    	<a name = "Car" ></a>
    	<h3 name = "headerCar"> Electric Car </h3>
    	<img class = "align-right" src= "C:\Users\Thomas\Downloads\electric cars.jpg" alt= "Electric Car" />
    	<p> The homeowners also invested in an electric car to make their lives more green. The car is plugged into an outlet in the garage, so the power needed to run the car come completely from the solar panels mentioned above. There are many energy efficient cars on the market today. Some states have tax incentives for people who buy these cars. Review reports online to see which car might suit your needs. </p>
    	<ul style = "list-style-type: circle">
    		<li> Approximate annual savings is $6,087 over a gas-fueled vehicle </li>
    		<li> Car gets 244 per charge </li>
    		<li> Homeowner can travel to Seattle for weeks on one charge </li>
    		<li> Car is stylish </li>
    		<li> Savings begin immediately </li>
    	<br style= "clear : right" />
    	<p> The pictures above show two things that you can do as a homeowner to make your home more environmentally responsible. To have your own green audit, please call us at (999) 555-GREEN or e-mail us at getttinggreen@isp.come. if you use e-mail, please include the following information: (1) your address and phone number, (2) the approximate energy usage of your household (if known), and (3) a few days and time that are convenient for use to contact you. We will send an e-mail back to let you know that we did receive your request.</p>
    	<p> <a href= "C:\Documents\GettingGreener.html" > Back to home page </a></p>
    my problem is on the <ul> list under the solar panels paragraph any help you can give would be great. Also I have already tried to insert the bullets manually using style but it did not work.

  2. #2
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Thanked 1,012 Times in 1,009 Posts
    If your talking about this list
    <li>Approximate annual savings is $5,087</li>
    <li>Installation can be completed within one week </li>
    <li>Government and tax incentives are available </li>
    <li>Public utility company holds up quick and easy </li>
    <li>Savings begin immediately</li>
    They have bullets. The normal black dot. You have nothing in your style section that does anything to bullets and I see you have changed them in other lists like
    <ul style = "list-style-type: circle">
    Don't know what to say. Maybe clean your cache and refresh your browser. If still gone tell us what browser and ver you are using.
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

  3. #3
    Administrator VIPStephan's Avatar
    Join Date
    Jan 2006
    Halle (Saale), Germany
    Thanked 1,314 Times in 1,284 Posts
    No, I suppose the bullets are hidden behind the floated image. If you add a border around the list items you see how they go all across behind the image. You need to create an own block formatting context. Simply spoken, add overflow: hidden to the list.

    Edit: Oh and by the way: The font is called “Arial”, not “Ariel”.
    Last edited by VIPStephan; 04-30-2014 at 07:28 PM.


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts