|
HTML - How Do I Indent Bullet Points And Paragraphs?
This is not my expertise and you guys are a great help! I've got all of the copy on the page, but everything is along the left margin. I want to indent a few bullet points and paragraphs. What html do I use? Thx.
Similar TutorialsI have another dumb question, what is the HTML code for indenting a paragraph. I need the code for html not css. I know that sounds crazy but I can't seem to find reference to it in my book and need help! Thanks, Joe Hi I've been having a lot of problems with images and bullet points overlapping, what I mean by that is I'll align an image to left allignment, it goes to the left of the text but the bullet points are superimposed over the top also the picture is being included in the list instead of to the left of the list as i want. here's a screenshot and the code of the page in question and the stylesheet, Thanks very much, I'm going mad trying to work it out: screenshot: page code: Code: <!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"><!-- InstanceBegin template="/Templates/index.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>.:Max Barr Antique Furniture Restoration:.</title>
<style type="text/css" media="all">
<!--
@import url("styles.css");
#header #logo a {
font-family: Times New Roman, Times, serif;
}
#index #outerWrapper #gradient #contentWrapper br {
color: #FFF;
}
#index #outerWrapper #gradient div {
color: #FFF;
}
-->
</style>
<!-- InstanceBeginEditable name="gallery info" -->
<!-- <LINK HREF="styles/default.css" rel=stylesheet> -->
<LINK HREF="../res/styles.css" rel=stylesheet>
<style type="text/css">
<!--
.highslide {
cursor: url(../res/graphics/zoomin.cur), pointer;
outline: none;
}
.highslide img {
border: 2px solid #999999;
}
.highslide:hover img {
border: 2px solid #ffffff;
}
.highslide-overlay {
display: none;
}
.highslide-image {
border: solid #ffffff;
}
.highslide-caption {
display: none;
color: #000000;
border: 0px solid #ffffff;
border-top: none;
font-family: Verdana, Helvetica;
font-size: 10pt;
padding: 5px;
background-color: #ffffff;
}
.highslide-caption a {color: #2E8B57;}
.highslide-loading, a.highslide-loading:link {
display: block;
color: #ffffff;
background-color: #000000;
font-size: 9pt;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
padding: 3px;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
padding-left: 22px;
background-image: url(../res/graphics/loader.gif);
background-repeat: no-repeat;
background-position: 3px 1px;
}
a.highslide-credits, a.highslide-credits i {
padding: 2px;
color: silver;
text-decoration: none;
font-size: 10px;
}
a.highslide-credits:hover,
a.highslide-credits:hover i {
color: white;
background-color: gray;
}
.highslide-move {
cursor: move;
}
/* Controlbar */
.controlbar {
background: url(../res/graphics/controlbar4.gif);
width: 167px;
height: 34px;
}
.controlbar a {
display: block;
float: left;
/*margin: 0px 0 0 4px;*/
height: 27px;
}
.controlbar a:hover {
background-image: url(../res/graphics/controlbar4-hover.gif);
}
.controlbar .previous {
width: 50px;
}
.controlbar .next {
width: 40px;
background-position: -50px 0;
}
.controlbar .highslide-move {
width: 40px;
background-position: -90px 0;
}
.controlbar .close {
width: 36px;
background-position: -130px 0;
}
.highslide-dimming {
background: #000000;
position: absolute;
visibility: hidden;
}
a.highslide-full-expand {
background: url(../res/graphics/fullexpand.gif) no-repeat;
display: block;
margin: 10px 10px 10px 10px;
width: 34px;
height: 34px;
}
.highslide-active-anchor img {
visibility: hidden
}
.highslide-html {
background-color: white;
}
.highslide-html-blur {
}
.highslide-html-content {
position: absolute;
display: none;
}
/* Necessary for functionality */
.highslide-display-block {
display: block;
}
.highslide-display-none {
display: none;
}
-->
</style>
<link rel="alternate" href="album.rss" type="application/rss+xml">
<style type="text/css">
<!--
.highslide { cursor: url(../res/graphics/zoomin.cur), pointer;
outline: none;
}
.highslide-caption { display: none;
color: #000000;
border: 0px solid #ffffff;
border-top: none;
font-family: Verdana, Helvetica;
font-size: 10pt;
padding: 5px;
background-color: #ffffff;
}
#index #outerWrapper #gradient #contentWrapper #content p {
font-size: 10px;
}
#index #outerWrapper #gradient #contentWrapper #content p {
font-size: 12px;
}
#index #outerWrapper #gradient #contentWrapper #content {
font-size: small;
}
-->
</style>
<!-- InstanceEndEditable -->
<!--[if IE 5]>
<style type="text/css">
#outerWrapper #contentWrapper #leftColumn1 {
width: 200px;
}
</style>
<![endif]-->
<!--[if IE]>
<style type="text/css">
#outerWrapper #contentWrapper #content {
zoom: 1;
}
</style>
<![endif]-->
</head>
<body id="index">
<div id="header">
<div id="logo">
<a href="index.html" onmouseover=""> Max Barr Antique Restoration</a></div>
</div>
<div id="outerWrapper">
<div id="gradient">
<div id="nav" style="margin-bottom: 10px;">
<div align="center">
<ul>
<li><a href="http://www.maxbarr.com/index.html">Home</a></li>
<li><a href="http://www.maxbarr.com/profile.html">Profile</a></li>
<li><a href="http://www.maxbarr.com/restoration.html">Restoration</a></li>
<li><a href="http://www.maxbarr.com//gallery/index.html">Gallery</a></li>
<li><a href="http://www.maxbarr.com/contact.html">Contact</a></li>
</ul>
</div>
</div>
<div id="contentWrapper">
<div align="center"></div>
<div id="content"> <!-- InstanceBeginEditable name="Content" -->
<p align="center"><img src="P6030553.gif" width="75" height="54" /><img src="img064.gif" width="82" height="54" /><img src="P5300085.gif" width="71" height="54" /><img src="PB040728.gif" width="83" height="53" /><img src="images/P9150206.gif" width="65" height="54" /><img src="images/PB110751.gif" width="79" height="55" /><img src="images/img069.gif" width="84" height="56" /><img src="images/P8310186.gif" width="78" height="56" /></p>
<p>Welcome to my website. I have been making furniture and restoring antiques here in Gloucestershire for 18 years. I have a large, well equipped workshop and carry out work for both private clients and the quality antiques trade. Examples of my restoration work have been shown at many national and international antiques fairs including London Olympia, Maastricht Tefaf and Chicago Artropolis. <img src="images/WmIVthreePillar55__x135__4.gif" width="348" height="181" align="middle" /><br />
<br />
High standards of work and customer satisfaction are my top priorities. If you would like to discuss any project, large or small, please give me a call for friendly expert advice.</p>
<p>Services include:</p>
<ul>
<li><img src="images/img071.gif" width="113" height="169" align="left" />High quality restoration and repair to all kinds of furniture.
</li>
Replacement or repair of damaged or missing woodwork from chips of veneer to entire legs or table leaves using appropriate materials and techniques. <img src="images/P9010139.gif" width="157" height="118" align="right" /></li>
<li>Restoration of existing finishes, reviving, colour matching, disguising of repairs</li>
<li>Traditional French polishing, wax polishing and oil finishes</li>
<li>Repairs to locks, castors, handles and other metalwork
</li>
Supply and fitting of leather or baize desk-top liners.</li>
<li>Upholstery, cane and rush-work seating.
</ul>
</p>
</li>
</ul>
<p> </p>
<h1 align="justify"><img src="images/P3080182.gif" width="147" height="110" align="bottom" /></h1>
<p> </p>
<div id="controlbar" class="highslide-overlay controlbar">
<a href="#" class="previous" onClick="return hs.previous(this)" title="Previous (left arrow key)"></a>
<a href="#" class="next" onClick="return hs.next(this)" title="Next (right arrow key)"></a>
<a href="#" class="highslide-move" onClick="return false" title="Click and drag to move"></a>
<a href="#" class="close" onClick="return hs.close(this)" title="Close"></a>
</div>
<!-- Bottom navigation -->
<div id="jalbumwidgetcontainer"></div>
<script type="text/javascript" charset="utf-8"><!--//--><![CDATA[//><!--
_jaSkin = "Boxer";
_jaStyle = "2 Purple Pavement.css";
_jaVersion = "8.1.6";
_jaLanguage = "en";
_jaPageType = "index";
_jaRootPath = "..";
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://jalbum.net/widgetapi/load.js";
document.getElementById("jalbumwidgetcontainer").appendChild(script);
//--><!]]></script>
<!-- InstanceEndEditable --></div>
</div>
<div id="credit" align="center">Copyright © 2009 Max Barr
<br />
</div>
</div>
</div>
</body>
<!-- InstanceEnd --></html>
....you super experts probably have a good laugh about my beginners question, but I really struggle with controlling the spac between two paragraphs <p>. How can I change it? Chris The paragraph tag only goes up to six or so, correct? Well, what if I want an additional paragraph? Whatever do I do? Hi, I've got a page with links to anchor points but clicking on it makes the popup open in a new window which I don't want to do, I just want it to snap to the anchor on the page. I've tried a few types... <li><a href="#faq_101605">What sort of feedback do you get from other advertisers?</a> </li> <p><a name="faq_101605" title="faq_101605"></a></p> ...and... <li><a href="http://dev.mysite.com.au/advertise/advertisers-faq.htm#faq_101498">How long will my advert stay on your web site?</a> </li> <p><a name="faq_101498" title="faq_101498"></a> Any help would be great. Thanks Hey guys. Can someone explain what I need to do to get 2 sentences or paragraphs to line up next to each other without one of them being pushed down?, and leaving a big gap on my page. Same with putting text next to an image. I basically have my main page done, it's all centered. Now I just want to put a small sentence in the top left corner of my page and when I do, everything in the middle gets pushed down I attached a little example below of what i'm trying to achieve. As you can see, there's a paragraph centered and then a few sentences beside it aligned to the right explaining about a t-shirt and gigs and stuff. Thanks a lot. Tunes I have a simple table and I want to indent it. Nothing fancy - I'd just like it to be an inch or so from the left side. This is going into an e-mail (Outlook) but I cannot for the life of me figure out how to code it so it will indent the table. Any suggestions? I have a page with numerous .gif's on it. I dont want them all to be lined up one below the other. For example....how can I back one off from the right side of the page any given distance such as one inch? Harold How do I double indent? I use <dd> for a single indent, but I need a double indent, so something like this I currently have this: Single indent I need this: Double indent Hey again all, So on my links on the left hand navigation....the first part of the link is indenting 5px from the left...but if the link is long and drops down to the next line that part is not indenting. This is only happening in firefox. In IE it is indenting properly both lines. Any suggestions? Thanks, Amanda Hello All! Is there a way to specify "no-indent" on the <optgroup> tag. When using this tag, all the options get indented and it wastes a lot of space on the screen. Any ideas would be great. Example: <select name="blah"> <optgroup label="hello"> <option style="color: #ff0000" value="test">test</option </optgroup> </select> as you can see, the style tag works for color, but I can't find any css that will put the indent to zero. thanks. Hi- So i have this problem that i cant find a solution for. i am making a web page and on the web page is an accordian nav menu. i am editing it in dreamweaver. Now, when i look at the page in livewiew it looks fine. BUT when i post the page on the internet there is this bullet next to my nav menu!! I cant find the code for it! all the <ul></ul> start and end when they are supossed to! and <li></li> ends when its supposed to too! im pulling my hair out with this bullet. what do i do? thanks Ok I'm trying to create an unordered list but I need two other seperate lines of text under each of the bullet lines of text' I'll see if I can give and example of what I need: (bullet) Day Spa www.dayspa.com A day spa treatment (bullet) Nelson Spa www.nelsonspa.com Full line spa (bullet) Whispering Spring Spa www.whisperingspring.com Full spa and resort when I do a simple UL and try to use <br> tags to create the different lines under each list, it wont validate and says I cant have a <br> inside a list. Also the bullets need to be black small squares, which, maybe I have over looked, cant seem to find the ascii codes for a small black square. I also get validation errors saying I cant have an "a" reference inside a list. So I tried to work around this by setting this up as a paragraph with <br> tags after each line and just find the ascii code and insert a square before the first line of each spa. Anyone know a way to accomplish this and still get the validation? Any help would be greatly appreciated! btw i made up the links but they seem to work! sorry but I wasnt trying to use real web links. Hi how can i change the bullet to a number in an unordered list? this is what i want 1 etc 2 etc 3 etc can someone help Is there a way to set the color of the bullets for unordered lists? Hi, I have the html coding below that shows the bullet point with a caption below it. How would i format the actual bullet point to be a different size and colour to the caption below it? Thanks Code: <ol> <li>abc</li></br> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa <li>abcd</li></br> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa <li>abcde</li></br> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </o> Hi, I have just joined the forum, so hello!! Although the standard margins for bullets are fine for what I want, I find when they are to the right of an image they have a different indent. I have managed to correct this in FF by using <li style="margin-left:40px"> but the bullets are invisible with IE. Any ideas? Can anyone tell me if the following is possible, and if so, how do I do it? I want a list of bullet points, but if one of the bullet points has no text then I don't want the actual bullet graphic to be shown. Not the best explanation so I'll elaborate. I'm pulling the bullet data from a program using a keyword/macro so my code looks like this. HTML Code:
<ul>
<li>{{BulletPoint1}}</li>
<li>{{BulletPoint2}}</li>
<li>{{BulletPoint3}}</li>
<li>{{BulletPoint4}}</li>
<li>{{BulletPoint5}}</li>
</ul>
Works perfectly when all five bullet points are populated, but if for example, there are only 3 bullet points with text, I get the bottom two bullet graphics just hanging there with no text next to them so and the final code looks like this HTML Code: <ul> <li>This is bullet point 1</li> <li>Here's another bullet point</li> <li>Only 3 bullet points for this particular product</li> <li></li> <li></li> </ul> Can anyone help? Does anyone even know what I'm talking about? |
|||||||