| View previous topic :: View next topic |
| Author |
Message |
iTz SWAT
I post too much
 Reputation: 1
Joined: 20 Dec 2007
Posts: 2227
Location: Me.Location;
|
 Posted: Sat May 16, 2009 8:02 pm Post subject: [HTML/CSS/Javascript] Static Image under Sidebar... |
 |
|
Hey guyz...
I currently have a website with a sidebar.
I would like to put 4 PNG Images under it and make them static (When scroll they follow the scroll)
I would like to have a home.png , up.png, bookjoe.png , homepage.png All right next to each other...
How can this be done?
I have access to Adobe Dreamweaver, Microsoft Frontpage 2003 and Notepad++...
The Sidebar is coded in many languages...
Here are the codes for the Sidebar...
| index.html wrote: | <div id="sidebar">
<div id="feed">
<a class="feed-button" href="http://www.youtube.com/iTzSWAT"> </a>
</div>
<ul>
<li><a href="/">Home</a></li>
<li><a href="#">Software</a></li>
<li><a href="#">Video Tutorial</a></li>
<li><a href="/eyeOS">eyeOS</a></li>
<li><a href="/forum">Forum</a></li>
</ul>
<div id="sidebar-bottom">
</div>
</div>
|
| style.css wrote: | sidebar {
float:right;
width:180px;
background:#efefef;
margin-right:10px;
}
/* Sidebar */
#sidebar ul {
list-style-type:none;
margin-top:10px;
}
#sidebar li {
}
#sidebar li a {
display:block;
height:20px;
line-height:20px;
color:#222222;
padding-left:5px;
border-bottom:1px solid #dddddd;
}
#sidebar li a:hover {
background:#edebed;
color:#6CC4D8;
}
#sidebar-bottom {
height:20px;
background:url(images/bg-sidebar-bottom.gif) no-repeat top center;
} |
_________________
Last edited by iTz SWAT on Mon May 18, 2009 1:06 am; edited 1 time in total |
|
| Back to top |
|
 |
shhac
Expert Cheater
![]() Reputation: 0
Joined: 30 Oct 2007
Posts: 108
|
| Posted: Sun May 17, 2009 6:36 am Post subject: |
|
|
you mean like this?
| Code: | <div id="sidebar">
<div id="feed">
<a class="feed-button" href="http://www.youtube.com/iTzSWAT"> </a>
</div>
<ul>
<li class="side_home"><a href="/">Home</a></li>
<li class="side_soft"><a href="#">Software</a></li>
<li class="side_video"><a href="#">Video Tutorial</a></li>
<li class="side_eye"><a href="/eyeOS">eyeOS</a></li>
<li class="side_forum"><a href="/forum">Forum</a></li>
</ul>
<div id="sidebar-bottom">
</div>
</div> |
| Code: | sidebar {
float:right;
width:180px;
background:#efefef;
margin-right:10px;
}
/* Sidebar */
#sidebar ul {
list-style-type:none;
margin-top:10px;
}
#sidebar li {
}
#sidebar li a {
display:block;
height:20px;
line-height:20px;
color:#222222;
padding-left:5px;
border-bottom:1px solid #dddddd;
}
#sidebar li a:hover {
background:#edebed;
color:#6CC4D8;
}
#sidebar .side_home {background:url('image/img1.png');}
#sidebar .side_soft {background:url('image/img2.png');}
#sidebar .side_video {background:url('image/img3.png');}
#sidebar .side_eye {background:url('image/img4.png');}
#sidebar .side_forum {background:url('image/img5.png');}
#sidebar-bottom {
height:20px;
background:url(images/bg-sidebar-bottom.gif) no-repeat top center;
} |
It is very difficult to understand what you want from what you've said, though.
|
|
| Back to top |
|
|
iTz SWAT
I post too much
Reputation: 1
Joined: 20 Dec 2007
Posts: 2227
Location: Me.Location;
|
| Posted: Mon May 18, 2009 3:12 am Post subject: |
|
|
| shhac wrote: | you mean like this?
| Code: | <div id="sidebar">
<div id="feed">
<a class="feed-button" href="http://www.youtube.com/iTzSWAT"> </a>
</div>
<ul>
<li class="side_home"><a href="/">Home</a></li>
<li class="side_soft"><a href="#">Software</a></li>
<li class="side_video"><a href="#">Video Tutorial</a></li>
<li class="side_eye"><a href="/eyeOS">eyeOS</a></li>
<li class="side_forum"><a href="/forum">Forum</a></li>
</ul>
<div id="sidebar-bottom">
</div>
</div> |
| Code: | sidebar {
float:right;
width:180px;
background:#efefef;
margin-right:10px;
}
/* Sidebar */
#sidebar ul {
list-style-type:none;
margin-top:10px;
}
#sidebar li {
}
#sidebar li a {
display:block;
height:20px;
line-height:20px;
color:#222222;
padding-left:5px;
border-bottom:1px solid #dddddd;
}
#sidebar li a:hover {
background:#edebed;
color:#6CC4D8;
}
#sidebar .side_home {background:url('image/img1.png');}
#sidebar .side_soft {background:url('image/img2.png');}
#sidebar .side_video {background:url('image/img3.png');}
#sidebar .side_eye {background:url('image/img4.png');}
#sidebar .side_forum {background:url('image/img5.png');}
#sidebar-bottom {
height:20px;
background:url(images/bg-sidebar-bottom.gif) no-repeat top center;
} |
It is very difficult to understand what you want from what you've said, though. |
No, all that did was add an Image under each link.
What I wanted was to Add 4 Images UNDER the sidebar...
Like this...
The Image will stay in the same position when the page is scrolled down (Static Image). I'd also like the Image to be a link...
This is how I would like the static Images to be...
P.S Don't worry About the Image that appears and disappears...
_________________
|
|
| Back to top |
|
|
shhac
Expert Cheater
![]() Reputation: 0
Joined: 30 Oct 2007
Posts: 108
|
| Posted: Mon May 18, 2009 8:10 am Post subject: |
|
|
In IE6 png doesn't have alpha. IE7/8 you'll lose alpha upon changing opacity.
container:
| Code: | | <div class="side_fixed"><a id="side_fixed_a" href="page2.html"><img id="side_fixed_img" src="image/img1.png" alt="clickme"/></a></div> |
css to position it /remove default link styling:
| Code: | .side_fixed {position:fixed;bottom:0px;right:0px;}
.side_fixed a img {border:none;} |
If you wan't all 4 images to use the same place but only one show at a time, you can either use 4 seperate img tags and css like display:none; and display:block;, but it would most likely be easier to use JavaScript (you'd need JS for that opacity thing anyway).
JS to change the image/link:
| Code: | function changeImg(newUrl){
document.getElementById('side_fixed_img').src = newUrl;
}
function changeA(newUrl){
document.getElementById('side_fixed_a').href = newUrl;
} |
If you don't want that, but want all 4 images next to eachother then you can ignore that JavaScript.
Last edited by shhac on Mon May 18, 2009 12:54 pm; edited 1 time in total |
|
| Back to top |
|
|
MiguelKN2
Master Cheater
 Reputation: 0
Joined: 05 May 2009
Posts: 282
Location: Venezuela
|
| Posted: Mon May 18, 2009 8:21 am Post subject: |
|
|
lol nice job u are better diseņator than the same youtube lol
_________________
But hey that's just my opinion |
|
| Back to top |
|
|
~Pineapple!
Grandmaster Cheater Supreme
![]() Reputation: 2
Joined: 27 Dec 2008
Posts: 1810
Location: The Local Library :3
|
| Posted: Mon May 18, 2009 9:59 am Post subject: |
|
|
| MiguelKN2 wrote: | | lol nice job u are better diseņator than the same youtube lol |
Are you just posting for post count. You even know what any of that code does?
_________________
|
|
| Back to top |
|
|
NINTENDO
Grandmaster Cheater Supreme
![]() Reputation: 0
Joined: 02 Nov 2007
Posts: 1371
|
| Posted: Mon May 18, 2009 12:48 pm Post subject: |
|
|
| Expert Shadow wrote: | | MiguelKN2 wrote: | | lol nice job u are better diseņator than the same youtube lol |
Are you just posting for post count. You even know what any of that code does? |
Are you just posting for post count. You even know what any of that code does?
_________________
Intel over amd yes. |
|
| Back to top |
|
|
iTz SWAT
I post too much
Reputation: 1
Joined: 20 Dec 2007
Posts: 2227
Location: Me.Location;
|
| Posted: Tue May 19, 2009 1:08 am Post subject: |
|
|
| shhac wrote: | In IE6 png doesn't have alpha. IE7/8 you'll lose alpha upon changing opacity.
container:
| Code: | | <div class="side_fixed"><a id="side_fixed_a" href="page2.html"><img id="side_fixed_img" src="image/img1.png" alt="clickme"/></a></div> |
css to position it /remove default link styling:
| Code: | .side_fixed {position:fixed;bottom:0px;right:0px;}
.side_fixed a img {border:none;} |
If you wan't all 4 images to use the same place but only one show at a time, you can either use 4 seperate img tags and css like display:none; and display:block;, but it would most likely be easier to use JavaScript (you'd need JS for that opacity thing anyway).
JS to change the image/link:
| Code: | function changeImg(newUrl){
document.getElementById('side_fixed_img').src = newUrl;
}
function changeA(newUrl){
document.getElementById('side_fixed_a').href = newUrl;
} |
If you don't want that, but want all 4 images next to eachother then you can ignore that JavaScript. |
When I added | Code: | | <div class="side_fixed"><a id="side_fixed_a" href="page2.html"><img id="side_fixed_img" src="image/img1.png" alt="clickme"/></a></div> |
to index.html
And addded
| Code: | .side_fixed {position:fixed;bottom:0px;right:0px;}
.side_fixed a img {border:none;} |
to style.css
The 4 Images appear at bottom right of window, that is a problem because people may have small resolutions and the icons will cover all the text...
Also the 4 Images appear on top of each other when i add
4 | Code: | | <div class="side_fixed"><a id="side_fixed_a" href="page2.html"><img id="side_fixed_img" src="image/img1.png" alt="clickme"/></a></div> |
These are my q's...
1. How do I make them static under sidebar and ot static at bttom right corner screen?
2. How do I change the maximum Image size, E.G 64x64 as example.
3. How do I make the above code not ontop of each other?
_________________
|
|
| Back to top |
|
|
shhac
Expert Cheater
![]() Reputation: 0
Joined: 30 Oct 2007
Posts: 108
|
| Posted: Tue May 19, 2009 4:47 am Post subject: |
|
|
1. I apologize, the GIF made me assume it was the bottom right.
If it is the bottom left or a fixed distance from any of the sides of the screen then you would make ammendments to | Code: | | .side_fixed {position:fixed;bottom:0px;right:0px;} |
(see bottom:0px;right:0px;, the other properties of this type are top:; and left:;.
If is is not the case then you may be required to position the images with JavaScript too.
2. Ammend | Code: | | .side_fixed a img {border:none;} |
to also have the properties max-height:64px;max-width:64px;. I'm not 100% on the backwards compatibility of those so you may want to use just height:;width:; instead.
3. Adding more images is done simply by adding more anchor and image tags. You should also change the id attributes to a class because an id attribute is supposed to be unique. | Code: | <div class="side_fixed">
<a class="side_fixed_a" href="page1.html"><img class="side_fixed_img" src="image/img1.png" alt="clickme"/></a>
<a class="side_fixed_a" href="page2.html"><img class="side_fixed_img" src="image/img2.png" alt="clickme"/></a>
<a class="side_fixed_a" href="page3.html"><img class="side_fixed_img" src="image/img3.png" alt="clickme"/></a>
<a class="side_fixed_a" href="page4.html"><img class="side_fixed_img" src="image/img4.png" alt="clickme"/></a>
</div> |
..If this isn't what you were asking, but were asking about making the images under the rest of the code, then you'd need to use the z-index CSS property.
From my experience, z-index only works well if you first assign every element a z-index, e.g. * {z-index:5;} then modify the exceptions accordingly. (Higher number is on-top, lower number is below)
|
|
| Back to top |
|
|
NINTENDO
Grandmaster Cheater Supreme
![]() Reputation: 0
Joined: 02 Nov 2007
Posts: 1371
|
| Posted: Tue May 19, 2009 6:46 am Post subject: |
|
|
Isn't this done much easier in JS? And seconly why do you want to move the whole menu? Isn't it just the submenu you wanna move?
_________________
Intel over amd yes. |
|
| Back to top |
|
|
iTz SWAT
I post too much
Reputation: 1
Joined: 20 Dec 2007
Posts: 2227
Location: Me.Location;
|
| Posted: Wed May 20, 2009 12:21 am Post subject: |
|
|
I don't want to move any menu...
I just want 4 Icons under the sidebar...
The above code is good for anchoring icons to bottom right of the window.
I still don't know how to anchor it under sidebar and not bottom right...
_________________
|
|
| Back to top |
|
|
NINTENDO
Grandmaster Cheater Supreme
![]() Reputation: 0
Joined: 02 Nov 2007
Posts: 1371
|
| Posted: Wed May 20, 2009 4:05 am Post subject: |
|
|
This might or might not be right.
| Code: | <script type="text/javascript">
this.onload = function()
{
var Menu = document.getElementById('feed');
var SubMenu = document.getElementById('side_fixed');
SubMenu.style.top = Menu.style.top + Menu.style.height;
SubMenu.style.left = Menu.style.left;
}
</script> |
_________________
Intel over amd yes. |
|
| Back to top |
|
|
shhac
Expert Cheater
![]() Reputation: 0
Joined: 30 Oct 2007
Posts: 108
|
| Posted: Wed May 20, 2009 6:30 am Post subject: |
|
|
That is wrong. If menu hasn't had the style property top set it wouldn't work. do it this way
| Code: | var Menu, SubMenu;
function init(){
Menu = document.getElementById('feed');
SubMenu = document.getElementById('side_fixed');
if(window.addEventListener){ //FF
document.addEventListener('DOMMouseScroll', reposition, false);
document.addEventListener("scroll", reposition, false);
}else{ //IE, etc.
document.onmousewheel = reposition;
window.onscroll = reposition;
}
reposition();
}
function reposition(){
var y = Menu.offsetTop + Menu.offsetHeight,
h = 0,
top = 0;
if(document.innerHeight){
h = document.innerHeight;
}else if(document.documentElement.clientHeight){
h = document.documentElement.clientHeight;
}else if(document.body.clientHeight){
h = document.body.clientHeight;
}
top = window.pageYOffset;
if(h + top < y){ // Choose either the bottom of the sidebar or the bottom of the screen
y = h + top;
}
SubMenu.style.top = y - SubMenu.offsetHeight;
SubMenu.style.left = Menu.offsetRight - SubMenu.offsetWidth;
}
|
then on the body tag | Code: | | <body onload="init()"> |
|
|
| Back to top |
|
|
red7711
How do I cheat?
![]() Reputation: 0
Joined: 08 Apr 2009
Posts: 1
|
| Posted: Fri May 22, 2009 1:34 pm Post subject: |
|
|
Working in every browser, IE7\IE8\FF.
| Code: | .side {
text-align:left\right;
position:fixed;_position:absolute;left:8%;overflow:visible;
height:1337px;
width: 1337px;
z-index:999;
} |
| Code: | <div class="side" align="left\right\center" style="width: 1337px;">
TEXT
</div>
|
|
|
| Back to top |
|
|
NINTENDO
Grandmaster Cheater Supreme
![]() Reputation: 0
Joined: 02 Nov 2007
Posts: 1371
|
| Posted: Sun May 24, 2009 12:53 pm Post subject: |
|
|
| red7711 wrote: | Working in every browser, IE7\IE8\FF.
| Code: | .side {
text-align:left\right;
position:fixed;_position:absolute;left:8%;overflow:visible;
height:1337px;
width: 1337px;
z-index:999;
} |
| Code: | <div class="side" align="left\right\center" style="width: 1337px;">
TEXT
</div>
|
|
What does underscore do? Also left\right seems odd.
_________________
Intel over amd yes. |
|
| Back to top |
|
|
|
FAQ
Search
Memberlist
Usergroups
Register
Profile
Log in to check your private messages
Log in
