Jump to content
UncleStef Mentoring Update: New SEO course!

Text Wrapping

VivienneCrow

By VivienneCrow
in Beginners Web Design

 Share

Recommended Posts

VivienneCrow Newbie

VivienneCrow

Posted
Posted

Hi All,

 

I'm quite new to this and so far I've been doing pretty well. But right now I have this problem and I'm just stuck as to how to fix it. It's probably been broached before with another thread, but I thought I'd ask anyway.

 

I have a small icon (100x100) on my left hand column with a bit of profile information wrapped around it. I've just added a list style code because I wanted to added circle bullets to separate each line more aesthetically. The problem is that when I add the bullets the text seems to start to early and creeps over the icon. This only happens when I'm viewing my website in Firefox. In IE it's fine and is sitting where I want to it to be.

 

What am I doing wrong!?!?

Link to comment
Share on other sites
VivienneCrow Newbie

VivienneCrow

Posted
  • Author
Posted

Here's what I have so far. It's a template that I downloaded from Createblog and I've been changing things as I've learnt them.

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

 

<title>Neclique</title>

 

<style type="text/css">

body {

background-image: url("http://i809.photobucket.com/albums/zz17/BlackOrchidz/background%20tiles%20--%20black/necliquetile.jpg");

background-repeat:repeat;

background-attachment:fixed;

color: #000000;

font: normal normal 70% "Georgia", Serif;

line-height: 1.5;

}

body {

text-align: center;

}

#container {

margin: 35px auto;

width:695px;

text-align: left;

opacity:.85;

-ms-filter:"alpha(opacity=85)";

filter:alpha(opacity=85);

background: #918c8c;

border: 2px solid #6a6363;

}

#container {

margin: 35px auto;

width: 695px;

opacity:.85;

-ms-filter:"alpha(opacity=85)";

filter:alpha(opacity=85);

background: #918c8c;

border: 4px solid #6a6363;

}

#header {

width: auto;

background-image: url("http://i809.photobucket.com/albums/zz17/BlackOrchidz/Signatures/necliqueprofilelogo.jpg"'>http://i809.photobucket.com/albums/zz17/BlackOrchidz/Signatures/necliqueprofilelogo.jpg");

color: #ffffff;

line-height:1.2em;

letter-spacing:.2em;

font: normal normal 240% "Georgia", Serif;

text-transform:uppercase;

height: auto;

padding: 120px;

padding-left: 280px;

margin: 0px;

}

#content {

float: right;

width: 450px;

padding: 5px;

}

#sidebar {

float: left;

width: 210px;

padding: 5px;

}

#footer {

clear: both;

background-image: url("http://i809.photobucket.com/albums/zz17/BlackOrchidz/Signatures/necliqueprofilelogo.jpg");

color: #918c8c;

line-height:1.2em;

letter-spacing:.2em;

font: normal normal 85% "Georgia", Serif;

text-transform:uppercase;

height: auto;

padding: 20px;

margin: 0px;

text-align: center;

}

 

h1:first-letter{

font: normal normal 120% "Georgia", Serif;

line-height: 22px;

text-transform:uppercase;

color: #000000;

font-weight: bold;

margin-top: 8px;

}

 

h1 {

margin:5px 5px 0;

padding:15px 20px .25em;

line-height:1.2em;

text-transform:uppercase;

letter-spacing:.2em;

font: normal normal 140% "Georgia", Serif;

border-bottom:1px dashed #ffffff;

color: #ffffff;

}

 

li {

list-style-type: circle;

list-height: 80%;

}

 

a:link, a:visited {

color: #ffffff;

cursor: default;

text-decoration: none;

font-weight: bold;

}

 

a:hover, a:active {

color: #e30f00;

cursor: default;

text-decoration: none;

font-weight: bold;}

 

.standard b, p b, B, strong {color: #000000;}

u {color: #000000; border-bottom: 1px dashed #000000;}

i {color: #000000;}

 

a.nav:link, a.nav:visited, a.nav:active {

background-color: #e0e0e0;

border-left: 5px solid #000000;

color: #6a6363;

display: block;

width: 170px;

padding-left: 10px;

margin: 1px;

padding: 5px;

list-style-type: none;

text-decoration: none;

line-height:1.2em;

text-transform:uppercase;

letter-spacing:.2em;

font: normal normal 100% "Georgia", Serif;}

 

a.nav:hover {

background-color: #000000;

border-left: 5px solid #e30f00;

color: #ffffff;

display: block;

width: 170px;

padding-left: 10px;

margin: 1px;

padding: 5px;

list-style-type: none;

text-decoration: none;

line-height:1.2em;

text-transform:uppercase;

letter-spacing:.2em;

font: normal normal 100% "Georgia", Serif;}

 

a img {

border: 0 none;

}

 

img {

border: 0 none;

}

 

blockquote {

border: 1px solid #BC5848;

width: 280px;

float: center;

margin: 0px;

padding: 10px;

background-color: #EFD9D1;

color: #660000;}

quotes: "201C" "201D";

}

blockquote:before { content: open-quote; font-weight: bold;}

blockquote:after { content: close-quote; font-weight: bold;}

</style>

 

</head>

 

<body>

<div id="container">

 

<div id="header">

Neclique

</div>

 

<div id="content">

 

<h1>death is only the beginning</h1>

<br /><br />

<dv align="right"><b>dhampir</b>

<br />

<div align="right"><p>A Dhampir (also dhampire, dhamphir or dhampyr) in Balkan folklore and in vampire fiction is the child of a vampire father and a human mother, with vampire powers but none of the weaknesses. (in fiction, the reverse occurs as well). A dhampir is believed to have the unique ability to see vampires, even when they are invisible, and is unusually adept at killing them. </p></div>

</div>

 

<div id="sidebar">

 

<h1>Profile</h1>

 

<p><img src="http://i809.photobucket.com/albums/zz17/BlackOrchidz/Icons/neclique3.jpg" width="100" height="100" class="border" title="Icon 1" align="left" alt="icon1">

<li><b>Name:</b> Neclique del Brunte`<br /></li>

<li><b>Human Age:</b> 22<br /></li>

<li><b>dhampir age:</b> 256<br /></li>

<li><b>Race:</b> dhampir<br /></li>

<li><b>Sex:</b> Female<br /></li>

<li><b>Mother:</b> Human (deceased).<br /></li>

<li><b>Father:</b> Vampire Demon (MIA).<br /></li>

<li><b>Siblings:</b> Unknown<br /></li>

<li><b>Mate:</b> None<br /></li>

<li><b>Offspring:</b> None</li>

 

<p>

 

 

<h1>Navigate</h1>

<p>

<a href="HOME" class="nav">Full Profile</a>

<a href="ABOUT" class="nav">History</a>

<a href="VISITOR" class="nav">Family Biography</a>

<a href="SITE" class="nav">Journal</a>

<p>

 

<h1>Links</h1>

<p>

<br><a href="http://rkapocolypse.webs.com/" target="_blank">Roadkill . </a>

Chat .

<br><a href="http://frekiashika.proboards.com/index.cgi" target="_blank">Forum .</a>

<a href="http://www.wix.com/FrekiAshika/FrekiAshika" target="_blank">Freki Profile .</a>

<br>

<p>

 

 

<h1>Quotes</h1>

 

<p>"Run, run as fast as you can, you can't catch me I'm the gingerbread man." Neclique taunting Thoris, while running through Black Flame Territory.

 

<h1>Credits</h1>

<p>

<br><b>Design by:</b> <a href="http://sweetalacrity.createblog.com/" TARGET="_blank">SweetAlacrity</a>.

<br><b>Resources:</b> <a href="http://oh-vintage.co.uk/" TARGET="_blank">&</a>, <a href="http://www.sxc.hu/photo/1242378"

TARGET="_blank">&</a>, <a href="http://feel.zeroexposure.net/" TARGET="_blank">&</a>, <a href="http://sanami276.deviantart.com/"

TARGET="_blank">&</a>, <a href="http://hybrid-genesis.com/" TARGET="_blank">&</a>, <a href="http://masterjinn.deviantart.com/"

TARGET="_blank">&</a>.

<p>

 

</div>

 

<div id="footer">

 

Design by SweetAlacrity 2009 All right's reserved.

</div>

 

</div>

 

</body>

 

</html>

Link to comment
Share on other sites
falkencreative Newbie

falkencreative

Posted
Posted

To get you started...

 

You need to add <ul> tags surrounding your list items, and make sure the list is outside of the <p> tag.

 

<h1>Profile</h1>

<p><img src="http://i809.photobucket.com/albums/zz17/BlackOrchidz/Icons/neclique3.jpg" width="100" height="100" class="border" title="Icon 1" align="left" alt="icon1"></p>
<ul>
<li><b>Name:</b> Neclique del Brunte`<br /></li>
<li><b>Human Age:</b> 22<br /></li>
<li><b>dhampir age:</b> 256<br /></li>
<li><b>Race:</b> dhampir<br /></li>
<li><b>Sex:</b> Female<br /></li>
<li><b>Mother:</b> Human (deceased).<br /></li>
<li><b>Father:</b> Vampire Demon (MIA).<br /></li>
<li><b>Siblings:</b> Unknown<br /></li>
<li><b>Mate:</b> None<br /></li>
<li><b>Offspring:</b> None</li>
</ul>

Link to comment
Share on other sites
Guest peak web guide

Guest peak web guide

Posted
Posted

Hi All,

 

I'm quite new to this and so far I've been doing pretty well. But right now I have this problem and I'm just stuck as to how to fix it. It's probably been broached before with another thread, but I thought I'd ask anyway.

 

I have a small icon (100x100) on my left hand column with a bit of profile information wrapped around it. I've just added a list style code because I wanted to added circle bullets to separate each line more aesthetically. The problem is that when I add the bullets the text seems to start to early and creeps over the icon. This only happens when I'm viewing my website in Firefox. In IE it's fine and is sitting where I want to it to be.

 

What am I doing wrong!?!?

 

 

you can just make css for ol and make same look in Mozilla and IE

Link to comment
Share on other sites
Andrea Newbie

Andrea

Posted
Posted

Never mind - I just realized that not everything in your <li> tag is bolded. I was suggesting <ul class="bold"> for the HTML and then .bold {font-weight: bold;} for the CSS, but that would affect everything inside the <li> tags. For your purpose, stick with the <b> -- however, don't use <br /> that's the tag for a line break and it's not meant to create space. Just add a margin or padding to your <li> tags instead (via CSS).

 

Peek was talking about an ordered list which does not apply to your situation - however <ul>s and <ol>s are styled the same.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
 Share
Go to topic listing
×
×
  • Create New...