positioning matter - HTML Forums

tangara · 10-21-2009, 06:32 AM

Hi, can anybody out there advise me how to do underline of a word? tks.

Excavator · 10-22-2009, 02:11 AM

Hello tangara,
An underlined word generally indicates a link. If you underline words in your text then people may stop looking for the real links. Just a minor annoyance of mine.

Anyway, try it like this:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
	font: 14px "Comic Sans MS";
	background: #FC6;
}
* {
	margin: 0;
	padding: 0;
	border: none;
}
#container {
	width: 800px;
	margin: 30px auto;
	background: #999;
	overflow: auto;
}
.underline {
	text-decoration: underline;
}
</style>
</head>
<body>
    <div id="container">
    	<p>This text is normal and <span class="underline">this text is underlined</span></p>
    <!--end container--></div>
</body>
</html>

cluster · 10-22-2009, 03:26 AM

hi tangara,
That is a good one by excavator while you underline it seems to be a link so for a link in this case to differentiate use this code
underline {
text-decoration: blink;
}

but tis one is not active in IE6

tangara · 10-23-2009, 02:58 AM

Hi Excavator,

I tried to put in the #underline{text.decoration} in my css and then I added in

<p><div id="underline"><font size="3"><strong>Bali Artist</font></strong></p></div>

Still, the underline doesn't appear.

Is there anything wrong with the way I do?

Pegasus · 10-23-2009, 03:02 AM

You can't put a div inside a p. You'll need to write it as:

<p class="underline" style="font-size: 10px;"><strong>Bali Artist</strong></p>

Watch the way you close your tags. It's in reverse order to the way they're opened. First opened is last closed and last opened is first closed.

tangara · 10-24-2009, 08:00 AM

Not sure why it's still not working.

Here's my css :-

body {
font-family: "Lucida Grande", "Lucida Sans Unicode", verdana, arial, helvetica, sans-serif;
font-size: 62.5%;

}

* {
margin: 0; padding: 0;
}

/* typography */
h1,
h2,
h3,
h4,
h5,
h6,
caption {
font-family: helvetica, arial, verdana, sans-serif;
font-weight: normal;
}

/*links*/
a {
text-decoration: none;
padding: 1px;
}

a:link {
color: #2278de;
}
a:visited {
color: #2278de;
}
a:hover {
color: #fff;
background-color: #2278de;
text-decoration: none;
}

/*-------------------------------------
GRID
------------------------------------*/

#container {
float: left;
width:100%;
margin:0;
text-align: left;
background: #fff url(.gif) repeat;
}

/* columns */
#c1 {
font color: red;
float: left;
width: 240px;
height: 500px;
padding: 0 0 0 10px;
margin: 10px 0 0 0;
}

#c2 {
font color: red;
float: left;
width: 240px;
height: 500px;
padding: 0 0 0 10px;
margin: 10px 0 0 0;
}

#c3 {
font color: red;
float: left;
width: 240px;
height: 500px;
padding: 0 0 0 10px;
margin: 10px 0 0 0;
}

#c4 {
font color: red;
float: left;
width: 240px;
height: 500px;
padding: 0 0 0 10px;
margin: 10px 0 0 0;
}

/* masthead */
#masthead {
float:left;
width:100%;
background: #000;
margin: 1em 0 0 0;
}

/* languages */
#language {
padding: 2px 0 0 0;
float: right;
list-style:none;
}

#language li {
float: left;
padding: 0 1em 0 1em;
border-right: 1px solid #fff;
}

#language li a {
color: #fff;
background: none;
}

#branding a:hover {
color: #ccc;
}

/* accessibility */
#accessibility {
float: left;
list-style:none;
padding-top: 15px;
}
#accessibility li {
float: left;
padding: 0 1em 0 1em;
}

/* services */
#services {
float: right;
list-style:none;
padding-top: 15px;
}
#services li {
float: left;
padding: 0 1em 0 1em;
}

/* branding */
#branding {
float: left;
text-align: left;
margin: 1em 0 0 1em;
padding: 0 0 1em 6em;
background: url(ibo_logo.gif) no-repeat 0 0;
}

#branding h1 {
font-size: 1.4em;
}

#branding h2 {
font-size: 1.8em;
font-weight: bold;
}

#branding a {
color: #fff;
background: none;
}

#branding a:hover {
color: #ccc;
}

.img-wrapper img {
margin:00;
padding:8px;
border:1px solid #C5BDBD;
background:#FFF;
position:relative;
top:-5px;
left:-5px;
}

#footer{
float:left;
width:100%;
margin: 3em 0 0 0;
padding: 20px;
background: #eee;
}

#underline{text-decoration: underline;}

Excavator · 10-24-2009, 10:35 AM

Your CSS seems fine, apart from there being no font color (should be just color).

Instead of

HTML Code:

 font color: red;

use

HTML Code:

color: #f00;

Did you change your code to match what Pegasus showed you? Let's see your markup along with the CSS. A link to the test page might be even better.

If you wrap your code in [code] [/code] tags it will make a scroll box. That really helps the readability of your posts!

tangara · 10-24-2009, 11:40 AM

actually that red is for the grid line in the container ...and since I have removed the grid line so the color doesn't matter.

The structure of the code is :
standard stuff
<body>
<mast head>
<c1> i have put the <p class="underline" style="font-size: 10px;"><strong>Bali Artist</strong></p>
here, since i put the writing in this container.
<c2>
<c3>
<c4>
<footer>
</body>
</html>

Sorry I didn't publish this website because I'm still in learning stage. I don't even own any website yet.

Excavator · 10-24-2009, 12:13 PM

Hmm, that looks like very early html code. Your <c1> should be a class or an ID... and it needs to be closed also.
Do you have a doctype?

Try this, just for an example. (note how I enclose this quoted code in the scroll box)

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
	font: 14px "Comic Sans MS";
	background: #FC6;
}
* {
	margin: 0;
	padding: 0;
	border: none;
}
#container {
	width: 800px;
	margin: 30px auto;
	background: #999;
	overflow: auto;
}
#c1, #c2, #c3, #c4 {
	width: 390px;
	height: 70px;
	float: left;
	margin: 10px 5px;
	background: #CC6;
}
.underline {
	font: bold 20px Arial;
	color: #F00;
}
#footer {
	height: 50px;
	clear: both;
	background: #3F0;
}
</style>
</head>
<body>
    <div id="container">
        <div id="c1"> 
            <p>
                I have put the <span class="underline">Bali Artist</span>
                here, since i put the writing in this container.
            </p>
        <!--end c1--></div>
            <div id="c2"> 
            <!--end c2--></div>
                <div id="c3"> 
                <!--end c3--></div>
                    <div id="c4"> 
                    <!--end c4--></div>
        <div id="footer">
        <!--end footer--></div>
    <!--end container--></div>
</body>
</html>

tangara · 10-25-2009, 12:41 AM

I tried the above code but it's distorting.

Here's my code:-

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">


<head>
  <title>Art Gallery</title>

<!-- CSS -->
<link rel="stylesheet" type="text/css" media="screen, projection" href="css_Good1.css" title="default"/>

</head>
<body>
<!-- BEGIN #container -->
<div id="container">

<!-- BEGIN #utilities -->
<div id="utilities">
<ul id="accessibility">
<li><a href="#">logo</a></li>
</ul>
<ul id="services">
<li><a href="#">View</a></li>
<li><a href="#">Buy</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<!-- END #utilities -->
</div>

<!-- BEGIN #masthead -->
<div id="masthead">

<!-- branding -->
<div id="branding">
<h1><a href="#">International Art Deluxe</a></h1>
<h2><a href="#" title="The IAO's Homepage" accesskey="1">Finest Art Collection</a></h2>
</div>

<ul id="language">
<li><a href="#">English</a></li>
<li><a href="#">Francais</a></li>
<li><a href="#">Espanol</a></li>
<li><a href="#">Chinese</a></li>
</ul>
<!-- END # masthead -->
</div>


<!-- BEGIN #c1 -->
<div id="c1">

<p><font size="3"><strong>Bali Artist</font></strong></p>
<hr></hr>
</br>
<align="left"><div class="img-wrapper"><img src="..\Project\tn_DSC00927.JPG" alt="Harvesting" usemap ="#harvestingmap" />
<map name="harvestingmap">
<area shape="rect" coords="0,0,149,108," href="Harvesting1.html" alt="CA shape"/>
</div>
<p>Farmers harvesting fruits of their labour</p>
</br>
<align="left"><div class="img-wrapper"><img src="..\Project\tn_DSC00852.JPG" alt="Beautiful Farms"alt="Beautifulfarm" usemap ="#beautifulfarmmap"/>
<map name="beautifulfarmmap">
<area shape="rect" coords="0,0,149,108," href="Beautifulfarm.html" alt="CA shape"/>
</div>
<p>Farmers working in rice field in Bali</p>

</br>
<align="left"><div class="img-wrapper"><img src="..\Project\tn_DSC00919.JPG" alt="Relaxing"/></div>
<p>Relaxing after work</p>
<!-- END #c1 -->
</div>

<!-- BEGIN #c2 -->
<div id="c2">
<p><font size="3"><strong>Cartoons</font></strong></p>
<hr></hr>
</br>
<align="left"><div class="img-wrapper"><img src="..\Project\tn_DSC00877.JPG" alt="CHANG ER" /></div>
<p>Chang Er and rabbit in Moon</p>
</br>
<align="left"><div class="img-wrapper"><img src="..\Project\tn_DSC00827.JPG" alt="3 Little Pigs"/></div>
<p>3 Little Pigs - A modern Twist</p>
</br>
<align="left"><div class="img-wrapper"><img src="..\Project\tn_DSC00803.JPG" alt="Beautiful Farms"/></div>
</br>
<p>Carrot Farms</p>
<!-- END #c2 -->
</div>

<!-- BEGIN #c3 -->
<div id="c3">
<p><font size="3"><strong>Colors</font></strong></p>
<hr></hr>
</br>
<align="left"><div class="img-wrapper"><img src="..\Project\tn_DSC00895.JPG" alt="Fish"/></div>
<p>Fish & Water Lilies</p>
</br>
<align="left"><div class="img-wrapper"><img src="..\Project\tn_DSC00842.JPG" alt="RED Fish"/></div>
<p>Red Fish Swimming together</p>
</br>
<align="left"><div class="img-wrapper"><img src="..\Project\tn_DSC00894.JPG" alt="Coloful"/></div>
<p>Colorful Wall piece</p>
<<!-- END #c3 -->
</div>
<!-- BEGIN #c4 -->
<div id="c3">
<p><font size="3"><strong>Contemporary Arts</font></strong></p>
<hr></hr>
</br>
<align="left"><div class="img-wrapper"><img src="..\Project\tn_DSC007881.JPG" alt="White Horse"/></div>
<p>Handsome White Horse</p>
</br>
<align="left"><div class="img-wrapper"><img src="..\Project\tn_DSC00838.JPG" alt="Sculpture"/></div>
<p>Sculpture with backlight</p>
</br>
<align="left"><div class="img-wrapper"><img src="..\Project\tn_DSC00909.JPG" alt="RELAXING BY THE SEA"/></div>
<p>Relaxing by the sea</p>
<!-- END #c4 -->
</div>
<!-- END #container -->
<div id="footer">
<script type="text/javascript">
<!--Hide from old browsers
	document.write()	
//-->
</script>	
</div>
</body>
</html>

Besides that underline problem....I would also like to know how to make all the containers align in the center of the page .

tangara · 10-27-2009, 12:17 AM

Hi Excavator, I just want to say thank you. The underline works now.

Is it possible to stretch the underline go abit more so that it is aligned with the border of the first picture?

tangara · 10-28-2009, 04:43 AM

Also, thanks Pegasus....in my excitement...nearly forgot about you. Thanks.

Pegasus · 10-28-2009, 10:41 AM

You're quite welcome. Glad I could help