|
HTML - Bullet Point Margins Next To Image
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? Similar TutorialsHi, 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 all, Im having a problem with unordered lists. When I view it in Dreamweaver, the bullet points are small, but when I view in browser, they are huge. Ive tried adding classes to the CSS, but not sure what im doing wrong. Ive got one class that is: .bulletList { padding:0px; margin:12px; } I tried adding a different class for the actual lists: .bulletSize { font-size:12px; } But all this did was change the size of the font and not the size of the bullet point. Can anyone suggest what I could do to fix this? Thanks in advance 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>
I am desiging some webpages. so if we see this website www.symphonysv.com, there we can see some text in the middle row. when we point those texts with mouse, the image in the side changes. How to do this........... Thanks, Vinutha. 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. Is there a way to set the color of the bullets for unordered lists? 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 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. Hi there, i'm in the middle of setting up a shopping cart and have a little problem! I'm laying out the privacy page, and when I select numbered list for the formatting of some Terms and conditions, the numbers that run onto 2 lines are not indenting like the line above it. So the first line is indented with the number and the bottom line is aligned to the left. It looks untidy. It appears fine in dreamweaver but not when I upload to server. I'm sure there is a simple explanation for this, here is the address: http://www.thinking-forward.co.uk/privacy.cfm 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? How do you use make it so the space between BULLETS (HTML DISC) does not have such a large space between the lines when viewing between INTERNET EXPLORER and Any other browser like Firefox?? http://www.camarosource.ca/main_new_...new_layout.htm Right side "Recent Posts". You'll notice that if you view with Firefox that it shows the words close to get on top of each other. HOWEVER, View the same link in INTERNET EXPLORER and you'll soon discover it's now what's almost 1 more line inbetween the top words and the ones below them. How can I STOP THIS?? If I make it fit in Firefox, it's WAY too high in IE cause it adds another line. If I make it fit in IE, it's like 3/4 the height of the area for Firefox. Thanks! I'm taking classes over html, and as we were learning hotspot's i din't understand what the point of it was, because you could just use href and img src to link the image.. Why do all the work of finding the coords?? I am learning web design and I need to know what I need to learn. Let me see if I can explain the concept that I would like to learn: I want to have a site where a customer fills out a form and then the information on that form gets placed on its own page. Does that make sense? I remember once seeing a CGI script for a website that would self generate new pages, but I can't remember what this concept is called. Thanks so much! Marie I am creating an FBML page in Facebook and can not figure out how to do an anchor point in the page - mostly because instructions online only tell you how to do it and show snippets of code, not the entire portion, so I can't tell where to put the two different parts of the code (a name & a href with #). This is the code I have: <a name="Current Projects" id="Current Projects"> <a href="http://www.facebook.com/familysearchwiki#currentprojects"><strong>Current Projects</strong></a></a><p> I want it to link to the "Current Projects" section of the document. I do not know how to set this up. Seems like it should be easy... I know it is, right? Hello all. I am currently putting together a flash intro for a friend of mine. He operates a World of Warcraft guild website through DKPSystem.com. While DKPsystem.com does normally use a subdomain for the registered guild, you can implement your own domain through the backend. He has done this. So, here is my problem. What I want to do is create the flash intro and connect it up with a index.html file. Considering that DKPsystem.com uses a structure in which the user cannot upload files via FTP, I have no idea how to implement this flash intro. Any ideas how this would be done? Thanks in advance for all of your help. Hi everybody.A few days ago I started learning HTML.(So ,i am a noob.)When I read about destination anchors,instantly I put one in my test page.But there is a problem. Here's the code HTML Code: <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html/>
<head>
<title>Bizone Webdesign</title>
<meta http-equiv="Content-type" content="text/html" charset="windows-1250">
<meta name="keywords" content="bizonethemighty, web, design">
<meta name="description" content="Aceasta pagina ofera informatii despre studio-ul BizoneWebDesign">
</head>
<body bgcolor="white" background="bkg.jpg" text="333333" link="333333" alink="ff6600" vlink="ff6600" >
<DIV align="center">
<H1><a name="sus">webDesign studio <Q lang="en">Bizone</Q></a></H1>
<H2>Test page</H2>
</DIV>
<p>Studio <ABBR title="Desing in domeniul Web">webDesign</ABBR> are o echipa de <STRONG>profesionisti</STRONG>,gata
sa va satisfaca cerintele in domeniu.La fel cum H<sub>2</sub>O este prezenta oriunde pe planeta,iar ecuatii simple ca x<sup>2</sup>+y<sup>2</sup>=0 caracterizeaza
algebra,la fel calitatea proiectelor noastre este evidenta si le caracterizeaza.</P>
<P>Propunem o gama <EM>larga</EM> de <a href="portofoliu.html">proiecte</a>,realizate la cel mai inalt nivel</P>
<PRE align="center">
Orase in care avem oficii:
</PRE>
<DIV title="Locatia orasului pe harta">
<PRE align="center">
<a target="_blank" href="http://maps.google.com/maps?oe=UTF-8&gfns=1&q=chisinau&um=1&ie=UTF-8&hq=&hnear=Chisinau,+Moldova&ei=MsdOTLGkC5-VOP-P-OMC&sa=X&oi=geocode_result&ct=title&resnum=1&ved=0CCIQ8gEwAA">Chisinau</a> <a target="_blank" href="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=balti&sll=47.216667,29.166667&sspn=0.165801,0.308647&ie=UTF8&hq=&hnear=Balti,+Moldova&z=12">Balti</a>
<a target="_blank" href="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=edinet&sll=47.026859,28.841551&sspn=0.332785,0.617294&ie=UTF8&hq=&hnear=Edinet,+Moldova&z=12">Edinet</a> <a target="_blank" href="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=Cimi%C5%9Flia,+Moldova&sll=47.75494,27.913&sspn=0.16411,0.308647&ie=UTF8&hq=&hnear=Cimi%C5%9Flia,+Moldova&z=11">Cimislia</a>
<a target="_blank" href="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=causeni&sll=48.166667,27.316667&sspn=0.162807,0.308647&ie=UTF8&hq=&hnear=Causeni,+Moldova&z=12">Causeni</a> <a target="_blank" href="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=Straseni,+Moldova&sll=46.516667,28.783333&sspn=0.335953,0.617294&ie=UTF8&hq=&hnear=Straseni,+Moldova&z=12">Straseni</a>
<a target="_blank" href="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=Criuleni,+Moldova&sll=46.6418,29.40942&sspn=0.16759,0.308647&ie=UTF8&hq=&hnear=Criuleni,+Moldova&z=12">Criuleni</a> <a target="_blank" href="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=Soroca,+Moldova&sll=47.14204,28.61837&sspn=0.166034,0.308647&ie=UTF8&hq=&hnear=Soroca,+Moldova&z=12">Soroca</a>
</DIV>
</PRE>
Logo-ul Studio-ului nostru:<IMG src="images/blazon_small.jpg /><BR>
<a href="index.html#sus">Inceputul</a>
</body>
</html>
The problem is that the last image HTML Code: <IMG src="images/blazon_small.jpg /> won't work until I remove the destination anchor HTML Code: <a href="index.html#sus">Inceputul</a> which doesn't work too if there is the img tag too. Please,tell me,what's the problem?These things can't work together?Please help! Hello. I just joined the forums because I want to start making websites again. I used to do it about 3 years ago ( nothing hardcore), but i knew enough to make basic websites. Now, I want to learn the more indepth stuff. Such as Mysql, perl,css,java, javascript etc... i dont even know what someof those are. So heres my question. WHERE SHOULD I START? I want to start from scratch. I dont even rememeber some of the html stuff, so where do you guys think i should start? what are the fundamentals i need to know in order to move on to the more difficult stuff. One last thing, can someone tell me the difference between html/xhtml/xml.. im kinda lost... |
|||||||