Placing everything at opposites ends of the screen

Question

sonny_burnett 0 Newbie Poster

13 Years Ago

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.

web-design

Edited 13 Years Ago by sonny_burnett because: n/a

3 Contributors
16 Replies
133 Views
5 Days Discussion Span
Latest Post 13 Years Ago Latest Post by sonny_burnett

All 16 Replies

teedoff 3 Posting Pro

13 Years Ago

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

teedoff 3 Posting Pro

13 Years Ago

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

teedoff 3 Posting Pro

13 Years Ago

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 13 Years Ago by teedoff because: n/a

almostbob 866 Retired: passive income ROCKS

13 Years Ago

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 13 Years Ago by almostbob because: n/a

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

sonny_burnett 0 Newbie Poster · Answer 1 · 2010-08-19T02:47:12+00:00

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.

<title>JustinCuomo.com</title>

</head>

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

<br>

</TR>

</TABLE>

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

</body>
</html>

sonny_burnett 0 Newbie Poster · Answer 2 · 2010-08-21T04:02:55+00:00

sonny_burnett 0 Newbie Poster

13 Years Ago

no luck?

sonny_burnett 0 Newbie Poster · Answer 3 · 2010-08-21T15:05:50+00:00

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.

sonny_burnett 0 Newbie Poster · Answer 4 · 2010-08-21T23:00:11+00:00

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

sonny_burnett 0 Newbie Poster · Answer 5 · 2010-08-21T23:02:31+00:00

sonny_burnett 0 Newbie Poster

13 Years Ago

Thank you too almostbob!

teedoff 3 Posting Pro · Answer 6 · 2010-08-22T01:41:07+00:00

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

sonny_burnett 0 Newbie Poster · Answer 7 · 2010-08-22T14:24:23+00:00

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?

teedoff 3 Posting Pro · Answer 8 · 2010-08-22T19:14:27+00:00

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

sonny_burnett 0 Newbie Poster · Answer 9 · 2010-08-23T03:11:20+00:00

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

OK:

<title>JustinCuomo.com</title>

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

}

#music{margin-right: 20%;

}

</style>
</head

</head>

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

<br>

</TR>

</TABLE>

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

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

</body>
</html>

teedoff 3 Posting Pro · Answer 10 · 2010-08-23T04:56:15+00:00

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>

sonny_burnett 0 Newbie Poster · Answer 11 · 2010-08-23T09:43:20+00:00

shoot. i don't know why but they're still not on the same line.

sonny_burnett 0 Newbie Poster · Answer 12 · 2010-08-23T14:34:45+00:00

sonny_burnett 0 Newbie Poster

13 Years Ago

Works great! Thank you!

Placing everything at opposites ends of the screen

Recommended Answers Collapse Answers

All 16 Replies

Recommended Answers