0

Hello, I'm working on my personal website and have been having a real hard time placing text and links where I want them to be on the screen.
Is there a way to keep everything on the page on either sides of the page? No matter what the screen's resolution?


Any help would be greatly appreciated.
Thank you,
Justin.

Edited by sonny_burnett: n/a

3
Contributors
16
Replies
17
Views
7 Years
Discussion Span
Last Post by sonny_burnett
0

You should post your html code and CSS code so we can look at it. Makes it easier to help.

0

Thank you very much for your help.. Below is the code. As you can see I've fumbled around with the  's a lot... it's the only way I knew how.


<html>
<head>


<title>JustinCuomo.com</title>

<meta name="keywords" content="Hollywood networking, casting, independent film, film, headshots, justin cuomo, actors personal page, actors, actor">


<link rel="shortcut icon" href="http://www.justincuomo.com/brando.ico" type="image/x-icon">


</head>

<body BGCOLOR=#000000 text="#FFFFFF" link="#FFFFFF" vlink="#FFFFFF" alink="#FFFFFF">

<center>
<FONT COLOR="#000000">


<br>

<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0>
<TR>
<TD ALIGN=left VALIGN=TOP><font size=7>Justin Cuomo</font> &nbsp;SAG<br>
<TD>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp;</TD>
<TD>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp;</TD>
<TD>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </TD>
<TD>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </TD>
<TD ALIGN=RIGHT valign=bottom><font size=5>Crompton Talent</font> <br> Deborah Crompton 978.771.0407
</TR>
</TABLE> <p>


<FONT COLOR="#000000">

<br>

<TABLE BORDER=3 CELLSPACING=3 CELLPADDING=6>
<TR>
<TD><img src="j22big.jpg"></TD>
<TD ROWSPAN=3 BGCOLOR="#000000"><object width="550" height="469"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=13383151&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=13383151&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="550" height="469"></embed></object></TD><TD><img src="website2.jpg"></TD><TR>

</TR>

</TABLE>

<p><A HREF = "resume.html">RESUME</A>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp;
<a href = "music.html">MUSIC</a>
<p>


</body>
</html>

Edited by sonny_burnett: n/a

0

So if I am understanding you right, you are wanting the "resume" and "music" links to be placed at certain positions on the page?

0

Yes. With different browsers and screen resolutions. As well as the contact information at the top of the screen. I know there's a right way to do it without using those &nbsp; commands... I just can't figure it out. I've searched so many tutorials...

Any help you can give would be amazing.
Thanks for your response.

Edited by sonny_burnett: n/a

0

Instead of just using the <p> tag, wrap the links in a <div> with id of say "resume" and "music", then style both of those using either an external style sheet or internal.

<div id="resume">
<a href="resume.html">Resume</a>
</div>

<div id="music">
<a href="music.html>Music</a>
</div>

Then play around with some styles:

<head>
<style>
#resume {margin-left:20%

}

#music{margin-right: 20%;

}

</style>
</head

You'll have to play around with margins and or positionings to get it tweaked. You should really read some tutorials on CSS. www.w3schools.com is an excellant site for learning html and css, as well as most anything for web desing. Hope this gives you a start. Good luck!

Edited by teedoff: n/a

0

tables are not a layout tool, positioning is much harder with a table than it need be, when css was buggy/useless/not_implemeneted tables were the only option, tables are for displaying tabular data
margin does not place the div so much, as create whitespace around the element
top bottom left right place the element
something like

#resume { top:auto;bottom:auto;left:2%;right:auto;}

locate the resume at its current vertical position 2% of window width from the left border

#resume { top:0;bottom:auto;left:2%;right:auto;position:fixed;}

locate the resume at screen top 2% of window width from the left border and keep it there as other elements scroll around it

#resume { top:auto;bottom:0;left:2%;right:auto;}

locate the resume at window bottom 2% of window width from the left border and have it move with scrolling page
w3schools are not affiliated with W3C, they get some of the more esoteric(1) code details wrong, but are Vgood as a basic tutorial

(1)esoteric=stuff nobody uses anyway

Edited by almostbob: n/a

0

YES! I'll look into this. Exactly what I needed. You were a great help teedoff, thank you.

0

Yes w3schools does get some things wrong and contain quite a bit of outdated ideas, but for just starting out and learning the basics, they do a great job. Learn the basics, html and css and then practice the basics. Then move on to more updated sites and tutorials and you've got it! Good luck sonny

Edited by teedoff: n/a

0

Yes w3schools does get some things wrong and contain quite a bit of outdated ideas, but for just starting out and learning the basics, they do a great job. Learn the basics, html and css and then practice the basics. Then move on to more updated sites and tutorials and you've got it! Good luck sonny

OK great. Thank you for your help so far! I've learned about styles at w3 and have the code you wrote for me in the correct places in the index. However when I open it up on a browser only Resume shows up... do you know why the link to the music page isn't there next to it?

0

so how did you style the two divs? Post your new styles.

OK:

<html>
<head>


<title>JustinCuomo.com</title>

<meta name="keywords" content="Hollywood networking, casting, independent film, film, headshots, justin cuomo, actors personal page, actors, actor">


<link rel="shortcut icon" href="http://www.justincuomo.com/brando.ico" type="image/x-icon">

<head>
<style>
#resume {margin-left:20%

}

#music{margin-right: 20%;

}

</style>
</head

</head>

<body BGCOLOR=#000000 text="#FFFFFF" link="#FFFFFF" vlink="#FFFFFF" alink="#FFFFFF">

<center>
<FONT COLOR="#000000">


<br>

<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0>
<TR>
<TD ALIGN=left VALIGN=TOP><font size=7>Justin Cuomo</font> &nbsp;SAG<br>justin@justincuomo.com
<TD>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp;</TD>
<TD>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp;</TD>
<TD>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </TD>
<TD>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </TD>
<TD ALIGN=RIGHT valign=bottom><font size=5>Crompton Talent</font> <br> Deborah Crompton 978.771.0407
</TR>
</TABLE> <p>


<FONT COLOR="#000000">

<br>

<TABLE BORDER=3 CELLSPACING=3 CELLPADDING=6>
<TR>
<TD><img src="j22big.jpg"></TD>
<TD ROWSPAN=3 BGCOLOR="#000000"><object width="550" height="469"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=13383151&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=13383151&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="550" height="469"></embed></object></TD><TD><img src="website2.jpg"></TD><TR>

</TR>

</TABLE>

<div id="resume">
<a href="resume.html">Resume</a>
</div>

<div id="music">
<a href="music.html>Music</a>
</div>

</body>
</html>

0

Try this for the two links. This works no matter whjat resolution someone views on. Then you need to apply the same mindset for your tables. Especially your header. Hope that helps! Good luck.

<div id="resume"><A HREF = "resume.html">RESUME</A></div>
<div id="music"><a href = "music.html">MUSIC</a></div>
<style>
#resume {
	float: left;
	margin-left: 35%;
	padding-top: 10px;
}
#music {
	float: right;
	margin-right: 35%;
	padding-top: 10px;
}
</style>
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.