WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > CSS > Adding/Positioning ImageLink - Newbie Help Pls!

Reply
  Thread Tools Display Modes
Old 8th February 13, 01:39 PM   #1
soulsister
WLC Member
 
soulsister's Avatar
 
Join Date: Feb 2013
Posts: 11
Default Adding/Positioning ImageLink - Newbie Help Pls!

Hi,

Thanks for being so good to us newbies here. Must take some patience sometimes! Hopefully someone can help with this.

I've a Weebly Template which through reading/trial and error I've managed to make a custom Welcome Page for. The last thing is adding an image link (button I made to go with site) at an exact location relative to the background image and scroll with it. The template header is filled with a blank .png as when I left it empty the page was too small, footers jumped up. I can put the image where I want inside the header using Weebly's functions, on top, - but not link it like a button.

I have a tut on this and it kinda worked... but not quite. The tut has you 'position' your linked image 'relative' to an existing element, the header.
(I'll post both the CSS entry and the html page entry below)

Problem is I'm not sure what line is correct to put the html on so it doesn't mess up something else or be controlled by something else. I can get the image to appear but either it disrupts the position of the nav bar OR adjusting the position in CSS by 10px jumps it from top to bottom of page as though its going around something. Maybe it needs something else in the CSS as well.

I've tried so many things and I really want to give my friend this 'custom button' as she loved the idea.

You can see the page here - with the image I want to link not quite positioned right (and it's in the header at present so can't link it this way anyhow -or can I?). It should be below the blue paragraph and above "I'm Listening". http://siteforlisa.weebly.com/

Here is the both the body and linked image code (pebblebutton) in the main CSS:

.pebblebutton {
position:relative;
top:500px;
left:900px;
z-index:10000;
}

/************************************************** */
html{
width:100%
}

body{
width:100%;
margin:0;
padding:0;
background:#141313 url(bodybg.jpg) top center no-repeat;
font-family:Trebuchet MS,sans-serif;
font-size:14px;
color:#4a4f4f;
height:auto;
background-attachment:fixed;
background-size:100% auto;

}

body.tall-header {
width:100%;
margin:0;
padding:0;
background:#141313 url(bodybgsplash.jpg) top center no-repeat;
font-family:Trebuchet MS,sans-serif;
font-size:14px;
color:#ffffff;
height:auto;
background-size:100% auto;

}


I'm only adding html to the page called tall-header. Here is the corresponding line I've been inserting in that page, in various places:

<a href="http://siteforlisa.weebly.com/home.html"><img class="pebblebutton" src="/files/theme/pebblebutton.png"/></a>

Where is the proper place to put the above 'a href' line in the below html?

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body class="wsite-theme-light tall-header">
<div id="design"><a href="http://divtagtemplates.com/">Weebly Templates</a></div>
<div class="social-frame">{social}</div>
<div id="wrapper" class="clearfix">
<div id="container">
<header>
<div id="header" class="clearfix">
<div id="logo">{logo}</div>
<div id="logo2">{logo2}</div>
<nav><div id="navigation">{menu}</div></nav>
<div class="sliderContainer">
<div id="slider-tall" class="wsite-header"></div>
</div>
</div>
</header>
<div role="main">
<div id="content2">{content2}</div>
<div class="shadow2"><img src="/files/theme/shadow2.png"></div>
<div id="weebly-footer">
<ul>
<li>{footer}</li>
</ul>

</div>
</div>
</div>
</div>
<div style='display:none'>{content}</div>

</body>
</html>


Hope someone can help. Perhaps this is not the right approach at all. Just want that 'pebblebutton' in the right place, linked and scroll with background. Thank you
soulsister is offline   Reply With Quote
Old 8th February 13, 10:33 PM   #2
meesa
WLC Mod
 
meesa's Avatar
 
Join Date: Jul 2009
Location: Milky Way Galaxy
Posts: 3,716
Default Re: Adding/Positioning ImageLink - Newbie Help Pls!

I got lost as to what is supposed to be the link?
__________________
Praise be to the Lord God for the ability to learn, the capability to analyze, and the time to help users on this forum.
meesa is offline   Reply With Quote
Old 9th February 13, 02:49 AM   #3
soulsister
WLC Member
 
soulsister's Avatar
 
Join Date: Feb 2013
Posts: 11
Default Re: Adding/Positioning ImageLink - Newbie Help Pls!

Sorry, I ramble sometimes...


- There is an image of a Pebble with the words 'Please COME IN' on it. I want to position the Pebble on the Splash Page and link it to the home page. The home page address is ( http://siteforlisa.weebly.com/home.html )

- The Pebble image should scroll with the page.

- The Pebble image should always be in the same place over the background image, as it appears between a break in the writing which is part of the background image, not a text element.



__________________________________________________ _________



It seems possible to keep the Pebble in the same place over the background because the navigation bar is. Thus am trying to position the Pebble relative to the Header element.


__________________________________________________ ______________



I inserted a new class in the CSS with the pixel values desired like this: (It seemed like anywhere would do, so I put the class beneath the existing buttons section of code.)

.pebblebutton {
position: relative;
top: 200px
left: 840px
z-index: 100000;
}



__________________________________________________ _____________



I put the html part in it's own <div>, directly below the <nav> tag:


<div class="pebblebutton"><a href="http://siteforlisa.weebly.com/home.html"><img src="/files/theme/pebblebutton.png"></a></div>
>



__________________________________________________ ___________



Now the Pebble is positioned correctly and linked. However it adds a bunch of black space to the width of my page on the right side.

Any way to get rid of that extra black space it adds to right side of the page?



__________________________________________________ _____________



Hope this is clearer. It doesn't help to just know what code to add, I need to know exactly where to add it... Thanks for trying to help!

Last edited by soulsister; 9th February 13 at 04:13 AM.
soulsister is offline   Reply With Quote
Old 9th February 13, 07:27 AM   #4
meesa
WLC Mod
 
meesa's Avatar
 
Join Date: Jul 2009
Location: Milky Way Galaxy
Posts: 3,716
Default Re: Adding/Positioning ImageLink - Newbie Help Pls!

Position:relative;top:200px;float:right

Use margins to adjust further.

Your HTML location seems fine.
__________________
Praise be to the Lord God for the ability to learn, the capability to analyze, and the time to help users on this forum.
meesa is offline   Reply With Quote
Old 9th February 13, 06:54 PM   #5
soulsister
WLC Member
 
soulsister's Avatar
 
Join Date: Feb 2013
Posts: 11
Default Re: Adding/Positioning ImageLink - Newbie Help Pls!

Thank-you Meesa - extra space is gone. This is great! God Bless you for your generous help. (hope you get some kind of compensation for this...)


One thing I'm curious about, is why the body background image gets 'cropped' the way it does at different resolutions. The left side just gets cut off whereas the right side doesn't show in the browser window when you land on the page, but there's a scroll bar to go over and view it.

It's not a huge issue - just looks a little odd to be given the option to scroll right to see nothing but background tile.

I've spent so much time 'crash-coursing' myself in css and html I can't afford to go attempting to change this too. (Friend returning soon and need to get content on the site.)

If you can tell me how to have the background image display centered, but only create a scroll right bar if needed to see a specified amount of the background width, that would be very nice. If not I understand you're busy and thank-you for the help you've given thus far.




This isn't for you Meesa __________________________________

For Anyone Trying to Solve a Similar Problem: Yes, the space was gone but he Pebble needed to move about 20px over to the right.

Had to try a few things, and ended up increasing the container width, ( for this page only, with a new container id) to get it to float further to the right edge. Then gave the footer a margin so it stayed center. Not sure why the Nav bar did not seem affected by new container width, it still looks centered.
soulsister is offline   Reply With Quote
Old 10th February 13, 07:30 PM   #6
soulsister
WLC Member
 
soulsister's Avatar
 
Join Date: Feb 2013
Posts: 11
Default Re: Adding/Positioning ImageLink - Newbie Help Pls!

Fixed the scroll to right problem - love it when it's quick and easy as that hasn't been happening often!

If there is content on your page that goes outside of a browser window you get scroll bars to take you right and down.

Add this property to the element's CSS to say - sure, add a scroll bar for vertical content, but not for horizontal:

overflow-x:hidden;overflow-y:auto;
soulsister is offline   Reply With Quote
Old 11th February 13, 12:05 AM   #7
meesa
WLC Mod
 
meesa's Avatar
 
Join Date: Jul 2009
Location: Milky Way Galaxy
Posts: 3,716
Default Re: Adding/Positioning ImageLink - Newbie Help Pls!

Apparently my post didn't go through. You have an image that needs to be contained that is giving you that scrollbar. Overflow fixes the issue, but it's best to put it on the right container.
__________________
Praise be to the Lord God for the ability to learn, the capability to analyze, and the time to help users on this forum.
meesa is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 04:03 AM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.