How do I make a left-aligned unordered list to the right of a left-aligned picture?
Tags: html,css,list
Problem :
I have an un-ordered list with bullet points. I use two of these lists, first the left of a right-aligned image, and then to the right of a left-aligned image (without the list being right-aligned). The first list shows up fine, but the second list has the text appear to the right of the image, but the bullet points do not.
Is there a way that I can align the list to the right of the image?
Here is a screenshot of the page: http://i.stack.imgur.com/qXz8n.png
And here is the stylesheet and html:
ul.nobullet {
list-style-type: none;
padding: 0;
margin-left: 2em;
}
li.globe {
background: url(images/earthbullet.jpg) no-repeat left top;
height: 20px;
padding-left: 25px;
padding-top: 4px;
margin-left: 3em;
}
p.bottom {
margin-left: auto;
margin-right: auto;
text-align: center;
max-width: 500px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title> Going Green </title>
<meta name="author" content="" />
<meta name="description" content="Home page for Green Home" />
<meta name="keywords" content="Assignment 1" />
<link rel="stylesheet" type="text/css" href="greenstyle.css">
</head>
<body>
<h1><font color="green">GREEN HOME ENVIRONMENT</font></h1>
<p>
Getting Greener conducted a green audit for a family of five that lives east of Seattle.<br>
Getting Greener found that the homeowner used more electricity than the average household.<br>
Any additional energy produced by the panels could be sold back to the public utility company.<br>
The homeowners also invested in an electric car that runs on the solar electric energy provided by the panels.<br>
</p>
<h3>This homeowner:</h3>
<p>
<img src="images/solar.jpg" alt="Home installation solar panels" align="right">
As you can see in the picture on the right, photovoltaic solar panels are installed on the
roof of the home. 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 lightbulbs throughout the house. Additionally, the entire family is energy
aware and responsible.
<ul class="nobullet">
<li class="globe">Approximate annual savings is <b>$5,087</b></li>
<li class="globe">Installation can be completed within one week</li>
<li class="globe">Government and tax incentives are available</li>
<li class="globe">Public utility company hook-up quick and easy</li>
<li class="globe">Savings begin immediately</li>
</ul>
</p>
<div style="clear: both;"></div>
<p>
<img src="images/car.jpg" alt="An electric car" align = "left">
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 comes 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 best suit your needs.
<ul class="nobullet">
<li class="globe">Approximate annual savings is $6,087 over a gas-fueled vehicle</li>
<li class="globe">Car gets 244 miles per charge</li>
<li class="globe">Homeowner can travel to Seattle daily for weeks on one charge</li>
<li class="globe">Car is stylish</li>
<li class="globe">Savings begin immediately</li>
</ul>
</p>
<p class="bottom">
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
<b>(999) 555-GREEN</b> or e-mail us at <b>gettinggreener@isp.com</b>. <br>
If you use e-mail, please include the following information: <br>
(1) your address and phone number, (2) the approximate energy usage of your household (if known), and (3) a few days and times that are
convenient
for for us to contact you. We will send an e-mail response back to you to let you know that
we did receive your request.
</p>
</body>
</html>
Solution :
I found out how to do it: add the overflow: hidden; to the ul CSS like so:
ul.nobullet {
list-style-type: none;
padding: 0;
margin-left: 2em;
overflow: hidden;
}
Mali303 has a good explanation for this here:
http://stackoverflow.com/a/13037482/4530832
CSS Howto..
Its easier other way around. Make <a> tag behave as <div>. Just use <a style="display: block;">. If you can't do that, you can also use javascript: <div onclick="location.href = 'www.yoursite.com';">...
I would give them all the same class, say topitem, and use a rule like this: .topitem:hover p { color:rgba(255,255,255,1); cursor:pointer; } Although really, I would get rid of the...
Not sure what kind of plugin you have, but if it is a simple <div> in your HTML, just right click on it and select "Inspect Element" (in Chrome with...
As Dustin said, there's no "texture" CSS feature. however, if you're using CSS3, you can do some pretty cool tricks like gradients or shadowing to make some neat backgrounds.
I was unable to add html in language file because in model the method used to send mail was using $mail ->setText(html_entity_decode($message, ENT_QUOTES, 'UTF-8')); I have changed this to :...
Two things: You've given your header and footer each a height: 10%. So when defining the height of the main content, use height: 80%. This prevents the overflow. Use flex:...
Line-height equal to height of the div/li also works - FIDDLE This works fine for short lines, for long lines, you'll have to use another technique as mentioned. The top...
Sometimes it's more of a matter of download time. Since browsers can use multiple connections to download files, a huge image can take longer to download than a few smaller...
i have figured it out with help from the link that @markb sent in the comments above (sql-Simple PHP Pagination Script). I ended up using the link in that answer:...
You can use document.stylesheets to add css rules dynamically directly to your stylesheets. styleSheet = document.styleSheets[0]; // check for undefined could make sense here styleSheet.addRule(selector, style); insertRule Doc addRule Doc...
Fiddle: http://jsfiddle.net/ZssZw/ <div style="margin:0 auto;width:91%;"> <table> <tr> <td><img height="35" width="32" src="http://alimos.topgreekgyms.gr/wp-content/uploads/2013/12/clock.png"/></td> <td><img height="35" width="32"...
Edited You can attach single listener of animationend event to remove animation classes when animation ends $(document).on('click', '#btn_color', function (e) { $('h1').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function (e) { $('h1').removeClass('animated...
For 1200px device, you can create 3 columns of li or div and put the images namely A,G and H in first column; B & C in Middle column; E,F,D,I...
Clutter does not know anything about GTK+ or CSS, so you cannot use the GTK+ CSS machinery with Clutter. if you want to use a GtkStyleContext and the GTK+ API...
You might be able to try setting your anchor tags to inline block and giving them the width of your icon and then setting overflow to hidden: .edit-icon a, .email-icon...
you could use onload and onerror events... <link rel="stylesheet" type="text/css" href="cdnurl/styles.css" onload="alert('loaded')" onerror="javascript:loadCSSBackup()" /> javascript: function loadCSSBackup(){ var css = document.createElement("link") css.setAttribute("rel", "stylesheet"); css.setAttribute("type",...
While searching the solution I found a few approaches that could be a way. The closest to me was described here: Apply CSS to jQuery Dialog Buttons. But the reason...
Glyphs (the visual representations of a character) are centered vertically within an inline box. If the line height is larger than the content height, half the difference is added...
Looking through the source code for the first link, it appears to be using one main JQuery plugin to handle the scroll event - Parallax. http://stephband.info/jparallax/. This allows the developer...
DEMO: http://jsfiddle.net/KADqt/2/ An absolute positioned element won't affect other elements, as it's removed from the document flow. Also, just use top, and left, instead of margin-top, margin-left. An absolute positioned...
Try like this: Demo CSS: p { font-weight:bold; } p span { font-weight:100; font-size:11px; } HTML: <p>Test test Test test Test test <span> °</span> Test test Test test Test test...
Modify your CSS to the following: @media only screen and (min-width : 320px) and (max-width: 640px) { .article-body div img:not(.logoOP){ width: 320px !important; height: auto; } } This will allow...
Instead of a hard-coded HTML file, use a PHP script, and have it define a function. header.php: function show_header($this_page) { $navs = array('index' => 'Home', 'about' => 'About Us', 'contact'...
Instead of the .fullscreen-container, can you try to apply the style to .forcefullwidth_wrapper_tp_banner class?
simple solution - on mouseover add another class where you could define new color, and on mouseout remove it
datad.nodeProperty().addListener(new ChangeListener<Node>() { @Override public void changed(ObservableValue<? extends Node> ov, Node oldNode, Node newNode) { newNode.setStyle("-fx-bar-fill: red;"); } }); ...
You can use the jQuery is method to determine whether the element meets the appropriate selector (in this instance a class selector): if (element.is('.class'))... ...
try: .tabPage .tabs ul.TabWidthSmall { width:50px !important; /* put new width here */ } ...
Fiddle Link : http://jsfiddle.net/zEVbe/1/ Yes, that bubble can be drawn by CSS in various way. One of the way is written below. HTML : <div class="like">Like</div> <div class="counter">3.5k</div> CSS :...
According to the comments/request, here is the edited version of the original CSS code to reflect the desired result: /* apply to both */ .menu ul { padding-left: 0px; }...