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.
You should post your html code and CSS code so we can look at it. Makes it easier to help.
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> SAG<br>
<TD>
</TD>
<TD>
</TD>
<TD> </TD>
<TD> </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&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=&fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=13383151&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=&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>
<a href = "music.html">MUSIC</a>
<p>
</body>
</html>
no luck?
So if I am understanding you right, you are wanting the "resume" and "music" links to be placed at certain positions on the page?
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 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.
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>
</headYou'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!
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
YES! I'll look into this. Exactly what I needed. You were a great help teedoff, thank you.
Thank you too almostbob!
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
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?
so how did you style the two divs? Post your new styles.
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> SAG<br>justin@justincuomo.com
<TD>
</TD>
<TD>
</TD>
<TD> </TD>
<TD> </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&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=&fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=13383151&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=&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>
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>shoot. i don't know why but they're still not on the same line.
Works great! Thank you!
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.