PDA

View Full Version : Text Link Alignment help


kearnsy
09-28-2009, 08:09 PM
Hi All

For the past 3 hours i've been baffled by how i align text links

I'll try and explain what i mean

If you can imagine i have a web page with a video of 400px by 300 px centred

What i'm trying to do is underneath the video i'm trying to add links that say 'back' 'next' & 'home' but i want the 3 links to align to the left middle and right of the video.

Sort of like this...

Back.......................................Next... ..............................Home

so if you can imagine the video sits above the links

the only way i can do it is by putting in..............(fullstops) because dreamweaver wont let me hit the spacebar to create a blank space

I know i'm doing something wrong but i can't for the life of me figure out what it is i'm doing wrong

any help would be much appreciated

here's the code folks of what i've been doing

<!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">

<head>

<title>mobile discos liverpool, karaoke hire liverpool, mobile djs liverpool, wedding dj liverpool, merseyside, uk</title>

<meta name="description" content="If you've been searching for a mobile disco in liverpool, a mobile dj in liverpool, karaoke hire in liverpool, a wedding dj in liverpool, or any type of dj hire in liverpool or merseyside that will provide you with great music & entertainment for your next event, then congratulations, you have come to the right place" />

<meta name="keywords" content="djs in liverpool, wedding dj liverpool, djs liverpool, dj liverpool, dj hire liverpool, karaoke liverpool, mobile disco in liverpool, dj's Liverpool, liverpool karaoke, dj's in Liverpool, mobile disco liverpool, liverpool dj, dj in Liverpool, liverpool djs, dj hire in Liverpool, mobile dj's liverpool, karaoke hire in liverpool, mobile disco merseyside, karaoke hire liverpool, mobile disco's liverpool, liverpool discos, karaoke disco liverpool, merseyside discos, mobile dj in liverpool, mobile disco in merseyside, liverpool dj's, mobile dj's in liverpool, best djs liverpool, mobile disco's in merseyside, disco hire merseyside, dj hire merseyside, wedding disco's liverpool, mobile disco hire in liverpool, mobile dj liverpool, disco hire liverpool, wedding disco liverpool, karaoke hire in merseyside, wedding entertainment merseyside, mobile disco's in liverpool, wedding entertainment liverpool, mobile djs liverpool, karaoke dj liverpool, mobile dj hire in liverpool, wedding dj's liverpool, wedding djs liverpool, liverpool karaoke hire, wedding disco merseyside, wedding dj in liverpool, wedding dj merseyside, wedding djs in liverpool, mobile disco's merseyside, mobile dj's in merseyside, wedding disco in liverpool, wedding dj's in liverpool, mobile dj merseyside, best dj liverpool, karaoke hire merseyside, liverpool, merseyside, uk" />

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="city" content="liverpool" />
<meta name="country" content="United Kingdom" />
<meta name="state" content="Liverpool (City of)" />
<meta name="zipcode" content="Liverpool, Merseyside, UK" />
<meta name="geo.position" content="0.00000;0.00000" />
<meta name="geo.placename" content="liverpool, Liverpool (City of)" />
<meta name="geo.region" content="GB-LIV" />
<meta name="icbm" content="0.00000;0.00000" />

<script src="../../../Scripts/AC_ActiveX.js" type="text/javascript"></script>
<script src="../../../Scripts/AC_RunActiveContent.js" type="text/javascript"></script>

<script type="text/javascript">
function MM_CheckFlashVersion(reqVerStr,msg){
with(navigator){
var isIE = (appVersion.indexOf("MSIE") != -1 && userAgent.indexOf("Opera") == -1);
var isWin = (appVersion.toLowerCase().indexOf("win") != -1);
if (!isIE || !isWin){
var flashVer = -1;
if (plugins && plugins.length > 0){
var desc = plugins["Shockwave Flash"] ? plugins["Shockwave Flash"].description : "";
desc = plugins["Shockwave Flash 2.0"] ? plugins["Shockwave Flash 2.0"].description : desc;
if (desc == "") flashVer = -1;
else{
var descArr = desc.split(" ");
var tempArrMajor = descArr[2].split(".");
var verMajor = tempArrMajor[0];
var tempArrMinor = (descArr[3] != "") ? descArr[3].split("r") : descArr[4].split("r");
var verMinor = (tempArrMinor[1] > 0) ? tempArrMinor[1] : 0;
flashVer = parseFloat(verMajor + "." + verMinor);
}
}
// WebTV has Flash Player 4 or lower -- too low for video
else if (userAgent.toLowerCase().indexOf("webtv") != -1) flashVer = 4.0;

var verArr = reqVerStr.split(",");
var reqVer = parseFloat(verArr[0] + "." + verArr[2]);

if (flashVer < reqVer){
if (confirm(msg))
window.location = "http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash";
}
}
}
}
</script>
<link href="../../../Stylesheets/videopagesstyle.css" rel="stylesheet" type="text/css" />
</head>

<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-3074903-3";
urchinTracker();
</script>

<body onload="MM_CheckFlashVersion('7,0,0,0','Content on this page requires a newer version of Adobe Flash Player. Do you want to download it now?');">
<div id="container">

<div id="logo">
<h1>Merseyside Mobile Entertainment</h1>
</div>

<div id="nav_left">
<ul>
<li><a href="../../../index.html" title="Merseyside Mobile Entertainment">Home</a></li>
<li><a href="../../../about.html" title="About Merseyside Mobile Entertainment">About Us</a></li>
<li><a href="../../../Themusicwespecialisein.html" title="Music We Specialise In">Music We Specialise In</a></li>
<li><a href="../../../mobile_discos.html" title="Mobile Discos">Mobile Discos</a></li>
<li><a href="../../../quiz_nights.html" title="Quiz Nights">Quiz Nights</a></li>
<li><a href="../../../karaoke_hire.html" title="Karaoke Hire">Karaoke Hire</a></li>
<li><a href="../../../music.html" title="Our Music Collection">Music Collection</a></li>
<li><a href="../../../weddings.html" title="Weddings">Weddings</a></li>
<li><a href="../../../MarqueeHire.html" title="Marquee Hire">Marquee Hire</a></li>
<li><a href="../../../OtherServicesAvailable.html" title="Other Services Available">Other Services Available</a></li>
<li><a href="../../../pub.html" title="Public House Residencies">Pub Residencies</a></li>
<li><a href="../../../equipment.html" title="Our Equipment">Our Equipment</a></li>
<li><a href="../../../gallery.html" title="Photo Gallery">Photo Gallery</a></li>
<li><a href="../../../testimonials.html" title="What Our Customers Say">Testimonials</a></li>
<li><a href="../../../links.html" title="Website Links">Links</a></li>
<li><a href="../../../mobilediscopricing.html" title="Mobile Disco Pricing">Mobile Disco Pricing</a></li>
<li><a href="../../../karaokepricing.html" title="Karaoke Pricing">Karaoke Pricing</a></li>
<li><a href="../../../extrahoursandovertime.html" title="Extra Hours & Overtime">Extra Hours & Overtime</a></li>
<li><a href="../../../specialoffers.html" title="Special Offers">Special Offers</a></li>
<li><a href="../../../booking.html" title="Booking">Booking</a></li>
<li><a href="../../../contact.html" title="Contact Us">Contact Us</a></li>
<li><a href="../../../games.html" title="Games">Games</a></li>
</ul>
</div>


<div id="content">



<h2 align="center">Tutti Frutti</h2>
<p align="center">



<param name="movie" value="../../FLVPlayer_Progressive.swf" />
<param name="salign" value="lt" />
<param name="quality" value="high" />
<param name="scale" value="noscale" />
<param name="FlashVars" value="&MM_ComponentVersion=1&skinName=../../Halo_Skin_3&streamName=../videos/Tutti_Frutti&autoPlay=false&autoRewind=false" />
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0','width','400','height ','335','id','FLVPlayer','src','FLVPlayer_Progress ive','flashvars','&MM_ComponentVersion=1&skinName=Halo_Skin_3&streamName=../videos/Tutti_Frutti&autoPlay=true&autoRewind=false','quality','high','scale','noscal e','name','FLVPlayer','salign','lt','pluginspage', 'http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movi e','FLVPlayer_Progressive' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="400" height="335" id="FLVPlayer">
<param name="movie" value="FLVPlayer_Progressive.swf" />
<param name="salign" value="lt" />
<param name="quality" value="high" />
<param name="scale" value="noscale" />
<param name="FlashVars" value="&MM_ComponentVersion=1&skinName=Halo_Skin_3&streamName=../videos/Tutti_Frutti&autoPlay=true&autoRewind=false" />
<embed src="FLVPlayer_Progressive.swf" flashvars="&MM_ComponentVersion=1&skinName=Halo_Skin_3&streamName=../videos/Tutti_Frutti&autoPlay=true&autoRewind=false" quality="high" scale="noscale" width="400" height="335" name="FLVPlayer" salign="LT" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" />
</object></noscript>
</p>
<p align="center">Tutti frutti is a song by Little Richard, which became his first hit record in 1955.</p>
<p align="center"> With its opening cry of &quot;Womp-bomp-a-loom-op-a-womp-bam-boom!&quot; (supposedly intended to be a verbal parody of a drum intro) and its hard-driving sound and wild lyrics, it became not only a model for many future Little Richard songs, but also one of the models for Rock and Roll itself.</p>
<p align="center"><a href="../../../quiz_nights.html">Try Our Music Quizzes</a></p>
</div>

<div id="footer">
<p> 2000-2009 Merseyside Mobile Entertainment.<br/>
<a href="../../../terms.html" title="Terms &amp; Conditions">Terms &amp; Conditions</a> | <a href="../../../guarantee.html" title="Our Guarantee">Our Guarantee</a> | <a href="../../../faq.html" title="Frequently Asked Questions">FAQs</a> | <a href="../../../sitemap.html" title="Site Map">Site Map</a></p>
</div>
<script type="text/javascript" language="javascript">
var wc_project=62238;
var wc_version=1;
var wc_graphic=0;
</script>
<script type="text/javascript" language="javascript" src="http://www.ewebcounter.com/include/track.js"></script>

</div>
</body>
</html>

thanks in advance for any help offered

coloeagle
09-28-2009, 11:47 PM
Write the three links as such placing the center link inside a span tag.

<a href-"????.html">Back</a><span><a href="????.html">Next</a></span><a href="????.html">Home</a>
You would then add some styling to the span giving it the needed left and right margins to get the desired placement.

edbr
09-29-2009, 12:38 AM
just as a mention although the above is the correct way to do it,
pressing shift-control-space adds a non breaking space (on windows)

d a v e
09-29-2009, 03:11 AM
just as a mention although the above is the correct way to do it,
pressing shift-control-space adds a non breaking space (on windows)

eugh! why even mention that?! :)

edbr
09-29-2009, 03:37 AM
just to see how many comments i got :)

dreamweaver beginner
09-29-2009, 06:14 AM
not being able to hit the spacebar twice was a roadblock for me as well. until i learned...... the secret:

hold down shift-control and then hit the space bar.

there is also some sort of code in html for more than one space. it looks something like nbsr&.

edbr
09-29-2009, 06:23 AM
&nbsp; = non breaking space. but seriously coloeagles is the best way for a use like you have given

kearnsy
09-29-2009, 02:32 PM
Thanks a lot folks for the help and advice, it's much appreciated

I thought i was getting the hang of dreamweaver until i hit on this problem

brought me back down to earth with a bang '0)

i think the problem with me is, when i was first learning, i concentrated on learning the stuff i wanted to know and skipping all the stuff i thought i didn't need to know, now in hindsight, i should of forced myself to learn the 'boring' stuff

Just out of interest guys, do you think you can design & build websites in dreamweaver without knowing everything?

By that i mean, i know it can be done because i've done it knowing very little, say maybe 10%, but do you think you really need to know 'everything' about dreamweaver or are there less important features you can get by without knowing?

kearnsy
09-29-2009, 03:03 PM
Back Again Folks

Coloeagle i'm doing what you said but i'm not sure if i understand what you mean, here's what i've done

<a href="../1955.html">Back To 1955</a>&nbsp;<span><a href="../../../Themusicwespecialisein.html">Choose A Different Year</a>&nbsp;</span><a href="Tuttifrutti.html">Next Video</a>

I've put in a space just to seperate the 3 links

I'm assuming you mean i have to create a style for each link then position them accordingly?

How do i create a style for each link then position it where i want it?

sorry for being dumb?

Corrosive
09-29-2009, 03:54 PM
I think that the concept Colo was pushing was creating a class to use with the span tag.

<a href="../1955.html">Back To 1955</a>&nbsp;<span class="spacer"><a href="../../../Themusicwespecialisein.html">Choose A Different Year</a></span><a href="Tuttifrutti.html">Next Video</a>

Then the css...

.spacer {margin: 0 10px 0 10px}

or something like that.

Corrosive
09-29-2009, 03:57 PM
Just out of interest guys, do you think you can design & build websites in dreamweaver without knowing everything?

By that i mean, i know it can be done because i've done it knowing very little, say maybe 10%, but do you think you really need to know 'everything' about dreamweaver or are there less important features you can get by without knowing?

It is more important that you understand sound coding practices and semantic mark-up than to understand DW as a piece of software IMO. DW is a means to an end...a bloody good one...but still you must understand the concepts of web design as well as the software.

domedia
09-29-2009, 07:32 PM
I agree. It's like having a toolbox with all the needed tols, but without the knowledge of how anything is built.

coloeagle
09-29-2009, 07:42 PM
Back Again Folks

Coloeagle i'm doing what you said but i'm not sure if i understand what you mean, here's what i've done

<a href="../1955.html">Back To 1955</a>&nbsp;<span><a href="../../../Themusicwespecialisein.html">Choose A Different Year</a>&nbsp;</span><a href="Tuttifrutti.html">Next Video</a>I've put in a space just to seperate the 3 links

I'm assuming you mean i have to create a style for each link then position them accordingly?

How do i create a style for each link then position it where i want it?

sorry for being dumb?

I think that the concept Colo was pushing was creating a class to use with the span tag.


<a href="../1955.html">Back To 1955</a>&nbsp;<span class="spacer"><a href="../../../Themusicwespecialisein.html">Choose A Different Year</a></span><a href="Tuttifrutti.html">Next Video</a>
Then the css...


.spacer {margin: 0 10px 0 10px}
or something like that.

Yup, what Corrosive said :mrgreen:

You just need the left and right margins. This will spread the text between the links.

edbr
09-30-2009, 01:02 AM
just out of interest guys, do you think you can design & build websites in dreamweaver without knowing everything?
i think its their marketing policy and to some extent it is true it can and has, though not ,perhaps the best or wisest results come out of it then.
it is a great tool that attempts to be something for everybody but imo there is often a price to pay for that.
what i believe is great about it it attracts people like your self and me, that had a mind to create a site , but then inquire to get more knowledge and hopefully improve. it can all be done in notepad or the like but how daunting is that, without any help, to a beginner.

kearnsy
09-30-2009, 03:16 PM
@ edbr. i agree completely,

I had to learn how to maintain a website as the site counts for about 90% of my business, once i was used to uploading files to the server, editing text, etc. i started to get interested in how everything works and how everything pieces together, a friend advised me to learn dreamweaver, and the rest as they say is history. the more i see what other people can do, the more i want to learn.

Anyway, just popped back to say thanks to everyone for all your help, i finaly got there in the end, took me a while to work out i had to make a .spacer tag then add a left & right margin in the box model

I did try and put a bit of space to the top & bottom as well as the left & right but it didn't seem to add space to the top & bottom for some reason

It's not important for now as it looks ok, but if i wanted to in the future would i have to create a seperate . spacer and call it .spacer2 or something to add space to the top & bottom?