Couple questions

Forum Moderators: open

Message Too Old, No Replies

Couple questions

s7orm

9:33 am on Mar 8, 2011 (gmt 0)

Hello

i am looking for this to be done: [i56.tinypic.com...]

i want the banner to be there, and when you scroll down the banner disappears (just like it would if you where scrolling down on a page) and when the buttons hit the top of the page, it would sit there and act like like a header until you scroll back down

is this possible?

so far i have the logo, and the bar with a div overlay,
but the div overlay is for the bar and i want to make it where when you shrink the page (or if your resolution is smaller) it wont have the scroll bar to the right because its off the page..

this is what i have so far:
[i54.tinypic.com...]

im just trying to get rid of the hyperlink red line around it, cant get it..

if someone could walk me through with any questions on setting up this simple site ill gladly pay them $15 via paypal.

let me know,
thanks.

webprutser

10:00 am on Mar 8, 2011 (gmt 0)

Hi s7orm, I'll have a look at your page. I can imagine you want to reward someone to solve your problem, feel obliged to do something myself many times when the impossible was made possible, but help is for free over here. Not many places around the globe where you get attention without having to pay for it, but it actually happens at this place.

webprutser

10:09 am on Mar 8, 2011 (gmt 0)

I need some code in order to help you. A hyperlink with an unwished red line sounds solvable to me, just have to look what you did and didn't specify in your CSS.
As for the rest of your question, I am not sure if I understand what you want, also some code would be helpful to know what we are talking about here.

koan

10:12 am on Mar 8, 2011 (gmt 0)

Couple questions

I don't think we have a relationship category on this forum.

s7orm

10:26 am on Mar 8, 2011 (gmt 0)

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>example</title>


<link href="style.css" rel="stylesheet" type="text/css" />
<body>
<center><img src="images/Website_logo.png" />
<br />

<div id="nav" style="position: relative; left:-210px; top:0px; width:449px; height:177px; overflow: hidden;"><a href="http://www.example.com/pages/exampe/111111">
<img src="images/Website_FB.png" border="0"></a>
</div>

</center>
<p>example text<br />
example text <A HREF="http://example.COM/DOWNLOADS.HTML">DOWNLOAD</a><br />

NEXT MIXTAPE IS COMING VERY SOON! THIS IS THE TEMP PAGE FOR IT.
<br />QUESTIONS? EMAIL - example@example.com</p>

</body>
</html>

css:

@charset "UTF-8";
/* CSS Document */

body
{
background-image:url(images/Website_BG.png);
background-color:#000;
}
p {color:#fff}
</style>

.background {
color: #000;
background-color: #000;

}
a {
color:#FFF;
outline:none;
text-decoration:none;
}
a:hover{
color: #575757;
text-decoration:underline;
}

i fixed the red outline by putting a border="0" on the image
what im trying to do is:
when the bar scrolls up, (like the buttons are at the top of the page)
it will stick at the top and act like a header.
i was told its javascript?

[edited by: engine at 2:54 pm (utc) on Mar 8, 2011]
[edit reason] sidescroll, and examplified [/edit]

tedster

5:40 pm on Mar 8, 2011 (gmt 0)

Welcome to the forums, s7orm

Yes, you've been told correctly. There is no HTML or CSS that will accomplish that kind of change on its own, so you will need JavaScript.

In words:

1. You want that portion of the page in its own div - one that begins with position "relative", as you have done.

2. Then JavaScript would monitor the distance of the div from the top of the window - I'm not a JS expert, but I think one approach would be to use the "offsetTop" property. There are probably other approaches, too, for example scrollTop().

3. As the page scrolls and that distance becomes zero, the JavaScript would then change the div position attribute to be "fixed" instead of "relative".

Ready-to-use JavaScript libraries such as jQuery may have this kind of functionality readily available and save you the learning curve.

We do have a JavaScript forum that can help you if you have trouble working out the details. JavaScript and AJAX Forum [webmasterworld.com]

s7orm

11:00 pm on Mar 8, 2011 (gmt 0)

Ahh thanks for the help!
im still trying to get this working now.

i have the buttons along the strip
i have them setup as div's with relative positioning.

how do i make them not stack ontop of eachother when i make the size of the page smaller?

tedster

6:54 am on Mar 9, 2011 (gmt 0)

It all depends how you position them in the first place. If you got a fixed pixel distance, then they won't stack up.

You may want to start with position:static instead of position:relative.

s7orm

7:01 am on Mar 9, 2011 (gmt 0)

whats the difference between static and relative?
and how can padding effect a div?

like why would you use padding when you could just change the top & left codes of the div?

tangor

8:35 am on Mar 9, 2011 (gmt 0)

Some (many!) here will slam this suggestion but I offer it for a reason: a growing number of users are running browsers with javascript OFF... such as myself and it will take a VERY compelling reason for me to allow js when I visit a site... and that happens VERY SELDOM... I just go somewhere else.

Might take a look at FRAMES (as in html frameset, not iframes) to lock a portion(s) of the viewable window. This has been around long before js and is still valid. Bing and Google (and all the other search engines) read FRAMES fine. There are some benefits, as well as downsides, for using FRAMES.

Just a suggestion.

tedster

10:19 am on Mar 9, 2011 (gmt 0)

"Static" is the default flow of a document. It's what you get if you don't declare any position attribute. It's the natural way for any element to be positioned.

If you try to dictate the exact position of every element, you'll start to find major problems when someone has their window sized differently than the window you designed in.

You'll also find cross-browser variations when you use text that will make you crazy trying for pixel-perfect positions. You're much better off to code with the natural, default flow.

And I basically agree with the "avoid JavaScript" school of thought too - or better stated, make sure that visitors who have JS turned off still have access to all the functionality they need. Use JS essentially as an enhancement, not as core functionality.

It sounds like you might be helped working through some HTML and CSS tutorials. The website at w3schools.com has some good basic instruction with interactive areas for you to experiment with code. Good place to learn about areas that are new to you.

s7orm

12:07 pm on Mar 9, 2011 (gmt 0)

Yeah, ive been using w3schools for pretty much everything i need,
but the real problem is finding out what im looking for, like the names of things and such

im not a complete noob to html, and css, i actually helped my uncle pass his college class with an A in web design and it consisted of all html and css (very proud of myself, i was 16 when i did that :p )
anyway,
the javascript wouldnt of been a core function, just a cool attachment to the site.

the target of people who would be using this site would probably not even know they could turn their javascript off, lol.

i still dont understand the difference between the div positions.
i googled it plenty of times but cant get a feel..
if anyone has time, could they in-depth explain what;
static, absolute, relative, and the other(s) are, and the difference between them?

alt131

2:55 pm on Mar 9, 2011 (gmt 0)

HI s7orm, and welcome to WebmasterWorld,

The best place for the in depth explanation you have asked for is the recommendations. I suggest start with the definition of position [w3.org], which explains the four values, then the visual formatting model [w3.org] which explains how they are drawn.