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:
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,
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.
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.
I don't think we have a relationship category on this forum.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
<center><img src="images/Website_logo.png" />
<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>
<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 - firstname.lastname@example.org</p>
/* CSS Document */
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.
[edited by: engine at 2:54 pm (utc) on Mar 8, 2011]
[edit reason] sidescroll, and examplified [/edit]
Welcome to the forums, s7orm
1. You want that portion of the page in its own div - one that begins with position "relative", as you have done.
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?
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.
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?
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.
"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.
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.
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 )
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?
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.