|
#1
Nov 22, 2013, 08:59 AM
|
|
So I've used some of the tips mentioned here on how to add contact info on the right side of the header, all helpful so far, thanks. However I was wondering if there was another solution besides using the absolute positioning method.
Here is what I used in the ATO>Header:
<div class="contact1"> Skype:AdventuretoAfrica </div>
Then this is my CSS:
.contact1 {height: 15px;
position: absolute;
margin-top: 5px;
margin-left: 830px;
font-size: 12px;
background: #BDBDBD;
padding-right:2px;
font-family:Verdana, Times, serif;
}
The issue is that when you reduce the width of the browser, the text floats outside of the header width, which I guess makes sense given the absolute definer. My main concern is that the text floats outside of the header when you view the website on an iPhone. Is this avoidable? Do I need to reduce the width of my header? Or is there another way to position the text on the right side of the page; I've tried margin-right: 0px, but that doesnt work for some reason. Thanks.
My website is tommikula.net.
|
#2
Nov 22, 2013, 03:25 PM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
did you put the
HTML Code:
<div class="contact1"> Skype:AdventuretoAfrica </div>
as the first thing in the 'Configure Header Area' option?
if not, try it there and change the positioning to 'relative'
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
|
#3
Nov 22, 2013, 03:49 PM
|
|
Yes that was listed first in the 'Configure Header Area'.
When I switch it to relative, the text jumps up to another line above where I have the logo on the left placed. Take a look:
http://www.tommikula.net/
The CSS code now reads:
.contact1 {height: 15px;
position: relative;
margin-left: 800px;
margin-top: 0px;
font-size: 12px;
background: #BDBDBD;
padding-right:2px;
font-family:Verdana, Times, serif;
}
Thanks for any help you can provide.
|
#4
Nov 22, 2013, 06:25 PM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
try this, Instead of using the logo as a logo, use it as a header image, then you can use the 'Overlay header Image' options to put your text in and position it
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
|
#5
Nov 25, 2013, 09:40 AM
|
|
Hmmm, still same problem; text runs outside the header when I decrease the width of the browser. Also runs over the header width on an iphone.
|
#6
Nov 25, 2013, 09:50 AM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
did you change the positioning to relative since anything in the 'Overlay Header Image' will be wrapped in the header image div?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
|
#7
Nov 25, 2013, 10:20 AM
|
|
Ok, I spent some more time with this and got it to work, thank you. It actually works when I use absolute position right 5px.
Now I can't seem to change the background color of the header?
|
#8
Nov 25, 2013, 11:36 AM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
because the area is 'clickable' use 'div.clickable {background-color: whatever:}' and set a z-index of at least 100 on contact1 and contact2
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
|
#9
Nov 25, 2013, 02:46 PM
|
|
Ok, thank you. I wrapped a div around the contacts; but now the logo isnt showing up:
<div.clickable> <div class="contact1"> Skype:AdventuretoAfrica </div>
<div class="contact2"><a href="info@adventuretoafrica.com">Email:info@adven turetoAfrica.com</a> </div> </div.clickable>
Thanks for your help on this, I'm trying to learn as I go (obviously, haha)
|
#10
Nov 25, 2013, 04:48 PM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
Sorry, I wasn't clear. If you put your code into the 'overlay header image' option and you have set the option to make the header image clickable, it will be wrapped in a div with a class of 'clickable'
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
|
#11
Nov 26, 2013, 05:25 PM
|
|
I think I'm missing something then; here is what I have in the CSS:
.clickable {
background-color: #D8D8D8;
}
And here is what I have in overlay header image (I removed the "clickable" class since its already there):
<div class="contact1"> Skype:AdventuretoAfrica </div>
<div class="contact2"><a href="info@adventuretoafrica.com">Email:info@adven turetoAfrica.com</a> </div>
|
#12
Nov 26, 2013, 06:44 PM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
OK, assuming ou are using Atahualpa 3.7.12
1) install the plugin 'wp-filemanager' then create a folder in the 'wp-content' folder called 'ata-images' then create a folder inside it called 'header'.
2) move your logo image to the 'wp-content/ata-images/header' folder
3) go to ato->New Image Locations and set
- Relative location of images?: to 'wp-content' and set
- Images Directory: to 'ata-images' then
- press SAVE
Your now ysing your logo as a header image and it should show up.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
|
|