Pages: [1]   Go Down
« previous next »
Send this topic | Print
Author Topic: Purely HTML  (Read 511 times)
soundofmusicsite
Member
*
Offline Offline

Posts: 38


WWW
« on: September 29, 2008, 10:05:23 AM »
I have some questions about HTML that I can't seem to find the answers for in any of the online guides or tutorials. First is site-related, I think. On a couple of my pages I have an image floated left with some text next to it right under my navbar. If I don't use the <p> it slaps it up against the bottom of the navbar, but if I do it adds too much space, more like two or three spaces. This happens whether I code it directly or use the WYSIWYG. Any suggestions? Here's the link to one of the pages so you can see. I left the extra space in for now since it looked better than being against the navbar: www.soundofmusicsite.110mb.com/contribute.htm

Second one is simpler. Is there any way to place three images side by side across a page? I can manage two with the float option or a table, but can't find a code for three.
Logged
Myles Grey
Full-Time Programmer
Super Authority member
******
Offline Offline

Posts: 1863


Programmer's Delight Release - 90%


WWW
« Reply #1 on: September 29, 2008, 10:17:07 AM »
Okay, for the spacing you need CSS. CSS is an extension on HTML which enables you to make more advanced styling. To change the spacing you can use this:

Code:
<p style="spacing-top: 5px">This is an example.</p>

px stands for pixels you can also use centimetres (cm), millimetres (mm) or inchs (in). You can learn more CSS at Tizag.

For the images, I don't quite understand what you want. Why can't you just put three <img> tags in a row?
« Last Edit: September 29, 2008, 12:11:52 PM by Myles Grey » Logged
IE has the best Quirks
Almost every site you see runs on Quirks, not standards




Remember to mark your topic as [resolved]
soundofmusicsite
Member
*
Offline Offline

Posts: 38


WWW
« Reply #2 on: September 29, 2008, 11:19:42 AM »
Can you use CSS in an otherwise all-HTML document?

As to the images, I'm rethinking that since the ones I want to use are too big to put side by side.
Logged
dwbgraphics
Critical Thinker
Hyper-Active Member
***
Offline Offline

Posts: 294



WWW
« Reply #3 on: September 29, 2008, 11:40:08 AM »
yea you can use css in the html  you can put the entire css in if you like

<style type="stylesheet">
<!--

-->
</style>

code goes between the <!-- -->

the entire thing goes between the head tags
<head>
<title</title>
<style type="stylesheet">
<!--

-->
</style>
</head>
Logged
War, a $488 billion dollar a year industry. Countless dead innocent people, the cost of doing business.
soundofmusicsite
Member
*
Offline Offline

Posts: 38


WWW
« Reply #4 on: September 29, 2008, 12:10:19 PM »
I tried that spacing code and the same thing happened - it was all right in preview, but after I'd hit "save" and then went and opened the page the extra space was back. Site glitch, possibly? Will I end up having to just live with double spacing at the top of certain pages? It seems to be the image float that does it, since I've done an ordinary insert image with the WYSIWYG and it worked fine.

I might end up putting some images side by side - I've been experimenting and some of them fit. Now I have another problem. I've been looking into vertical alignment and have found all the codes I'd ever need for aligning an image in relation to text. But can you align it in relation to another image? I have two images that I want to put next to each other, but one is smaller than the other and I wish I could vertically align it to the middle of the larger image.
Logged
keyjey
Active Member
**
Offline Offline

Posts: 62


WWW
« Reply #5 on: September 30, 2008, 12:00:10 PM »
you can use vertical-align: middle; in your CSS

like for example if you have a bunch of images in a particular div like:

#examplediv img {
     vertical-align: middle;
}

this should vertically align the smaller images in the middle the larger image
Logged
DaMavster
Member
*
Offline Offline

Posts: 14
« Reply #6 on: September 30, 2008, 12:18:41 PM »
It might also have to do with margins / padding of html elements.

I suggest that you check out http://www.w3schools.com/css/css_intro.asp

CSS and HTML go hand in hand. HTML tells a browser how information is arranged and displayed. CSS tells a browser how information is styled. Together you can get really nifty results. For some examples, head to http://www.csszengarden.com/ and click their different designs. All of the HTML stays the same, but the CSS changes.
Logged
shawn-stark
Hyper-Active Member
***
Offline Offline

Posts: 124


WWW
« Reply #7 on: September 30, 2008, 01:12:51 PM »
When you place a <div> it automatically makes a new line space..
I would place a <div> around both the picture and the text..
This is a parent div as a container for the children inside of it similar to <table> and <td>
you can align these elements/nodes within there parent element/node

if you need a little more space you can specify style="padding-top: 1px;"

or however many pixel you need but first wrap that div around your content.

code in question\/

Code:
<div id="navbar"><font size="5"><a href="index.htm">Home</a> <a href="about.htm">About</a>
<a href="photos.htm">Photos</a> <a href="contribute.htm">Contribute</a> </font></div>
       
<p>&nbsp;</p>[color=red]<!--where there is a div a space is created like your paragraph tags-->[/color]
        <div style="float: left"><img alt="" src="http://i161.photobucket.com/albums/t201/graciethebookworm/The%20Sound%20of%20Music/London/conniekids460-1.jpg " /></div>
        <p>&nbsp;<strong><em><font size="5">Let's start at the very beginning...</font></em></strong></p>

go ahead and wrap that div around your content and your good to go

Now you will come to the question in firefox why dosn't my div resize my boarders appear in the middle
of my content..    right before the ending parent tag add <div style="clear: both !important;"/>
« Last Edit: September 30, 2008, 01:25:02 PM by shawn-stark » Logged
Pages: [1]   Go Up
Send this topic | Print
« previous next »
Jump to: