Public Forums 71,145 posts

[mitti2000 Friend mitti2000Join date: November 2010Posts: 40Downloads:2Uploads:4 Thanks: 3 Thanked: 5 times in 1 posts]

#174541

Hi guys

I have a question. I’m not sure if there’s a solution but I’m still trying

I’m working on this website: http://neu.cevi-herisau.ch/

As you can see, I implemented the logo with following css:


h1.logo {
width: 1200px;
height: 200px;
}

h1.logo a {
background: url(../images/logo4.png) no-repeat left;
display: block;
width: 1200px;
height: 500px;
}


I make the logo overlapt them Main-Menu and part of the content because I’d like to have that splash on the right side. There is a Problem with that:
The logo overlaps it’s own #ja-header and #ja-container, but not the #ja-mainnav. I tried to play around with the z-index but somehow I didn’t figure out how to get it right. I’m able to make the image overlap everything, but then, the Logo-link overlaps everything. Is there a way to solve this? e.g make the image click-through?

Or maybe there is another way to get that spash on the right there

Thanks for your help and ideas
mitti2000

[swissa Friend swissaJoin date: November 2011Posts: 1955Downloads:7Uploads:277 Thanks: 175 Thanked: 717 times in 572 posts]

#441411

Hi mitti,

Usual bit about me not being JA staff so take a copy of any file you may change.

I can give you a way to make the splash over everything and the menu to work but the logo would then not be clickable and you don’t have a home menu item.

Not sure if that would help you?

[mitti2000 Friend mitti2000Join date: November 2010Posts: 40Downloads:2Uploads:4 Thanks: 3 Thanked: 5 times in 1 posts]

#441413

I don’t know exactly what you mean by no “home” menu item but if the logo is not clickable that’s fine.

What would your solution be?
mitti2000

Offtopic: I’m swiss too btw. Living in mexico though 😀

[swissa Friend swissaJoin date: November 2011Posts: 1955Downloads:7Uploads:277 Thanks: 175 Thanked: 717 times in 572 posts]

#441417

Bit warmer than here then! 🙂 (Actually about 15 grad today, sunny, still snow on the mountains….)

Yes, sorry, you may need to make a “Home” menu item so that people can go back to the start page.

Please take a copy of the relevant files so if it all goes wrong I don’t get the blame! 😀

templates/ceviherisau/themes/ceviherisau/css/template.css @ line 286

h1.logo a {background: url(../images/logo4.png) no-repeat left;
display: block;
width: 1200px;
height: 500px;
pointer-events: none; /* stops it being clickable */
}

and plugins/system/jat3/jat3/base-themes/default/css/template.css @ line 1038 change the z-index to 6

#ja-mainnav {line-height: 1;
position: relative;
z-index: 6;
}


Hope that works for you!

1 user says Thank You to swissa for this useful post

1. mitti2000

[mitti2000 Friend mitti2000Join date: November 2010Posts: 40Downloads:2Uploads:4 Thanks: 3 Thanked: 5 times in 1 posts]

#441424

Thanks. That works.

One problem though. It only works for Firefox and Chrome as far as I could test. But it doesn’t on IE and as far as I was reading so for, it will not happen in the future.
As a lot of people still use either IE or old browsers this solution doesn’t work for me. I really like it though.

I keep searching for a solution for IE. If you have something, let me know

mitti2000

[swissa Friend swissaJoin date: November 2011Posts: 1955Downloads:7Uploads:277 Thanks: 175 Thanked: 717 times in 572 posts]

#441428

I never go near Windows so didn’t know. Tut mir leid! :((

Maybe one of the gurus here will suggest a better solution.

Trotzdem bestens

[mitti2000 Friend mitti2000Join date: November 2010Posts: 40Downloads:2Uploads:4 Thanks: 3 Thanked: 5 times in 1 posts]

#441430

BTW:

Another possibility would be, to place the logo behind everything. I wasn’t able to do that either with z-index cause for some reason I only get the effect on the main-div and not the sub-divs.

i.e. I get an effect on #ja-header but not #ja-header .main

[swissa Friend swissaJoin date: November 2011Posts: 1955Downloads:7Uploads:277 Thanks: 175 Thanked: 717 times in 572 posts]

#441431

Ok, Let me have a play and see if I can help you …….

Will not be in the next 5 mins though……..

[mitti2000 Friend mitti2000Join date: November 2010Posts: 40Downloads:2Uploads:4 Thanks: 3 Thanked: 5 times in 1 posts]

#441432

@swissa

Well, sadly Internet Explorer is still the most used browser in the world. And when I’m creating a website for a custumer I have to make shure the website at least “works” on IE. In this case, I can’t access the menu in IE which REALLY sadly make your solution useless. If IE doesn’t support some minor design CSS I really dont’ care but in this case…

Thanks for searching 😀

[mitti2000 Friend mitti2000Join date: November 2010Posts: 40Downloads:2Uploads:4 Thanks: 3 Thanked: 5 times in 1 posts]

#441437

found <!–> with which I could make an exeption for IE in another CSS file. I just don’t know where to place it…

[Manos Moderator ManosJoin date: February 2014Posts: 2806Downloads:46Uploads:56 Thanks: 200 Thanked: 633 times in 576 posts]

#441440

The proper place to place this switch is the head.php file where you make a call to all the css files.

[swissa Friend swissaJoin date: November 2011Posts: 1955Downloads:7Uploads:277 Thanks: 175 Thanked: 717 times in 572 posts]

#441441

No worries and getting out of my scope of knowledge – you need a guru like pixelzombie I think. 🙂

[mitti2000 Friend mitti2000Join date: November 2010Posts: 40Downloads:2Uploads:4 Thanks: 3 Thanked: 5 times in 1 posts]

#441453

@pascm

I tried it with a css called ie.css placed in mytemplate/themes/mytheme/css.
Then I copied the head.php out of the JAT3 plugin/default theme folder and copied it to mytemplate/blocks

But that still doesn’t work

Here the codes to test it, I just try to change the logo:

ie.css

h1.logo a {
background: url(../images/logo2.png) no-repeat left;
display: block;
width: 1200px;
height: 500px;
}

head.php

defined('_JEXEC') or die;
?>
<script type="text/javascript">
var siteurl='<?php echo JURI::base(true) ?>/';
var tmplurl='<?php echo JURI::base(true)."/templates/".T3_ACTIVE_TEMPLATE ?>/';
var isRTL = <?php echo $this->isRTL()?'true':'false' ?>;
</script>

<jdoc:include type="head" />

/* ******** Here is my codepart ********** */
<!-->
<style type="text/css">@import url(../themes/ceviherisau/css/ie.css);</style>
<!-->
/* ******************************************* */
<?php if (T3Common::mobile_device_detect()=='iphone'):?>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1; user-scalable=1;" />
<meta name="apple-touch-fullscreen" content="YES" />
<?php endif;?>

<?php if (T3Common::mobile_device_detect()):?>
<meta name="HandheldFriendly" content="true" />
<?php endif;?>

<link href="<?php echo T3Path::getUrl('images/favicon.ico') ?>" rel="shortcut icon" type="image/x-icon" />

<?php JHTML::stylesheet ('', 'templates/system/css/system.css') ?>
<?php JHTML::stylesheet ('', 'templates/system/css/general.css') ?>

Can you help me a little more on that? Or maybe one of the so-called “gurus” 😉

Thanks
mitti2000

[swissa Friend swissaJoin date: November 2011Posts: 1955Downloads:7Uploads:277 Thanks: 175 Thanked: 717 times in 572 posts]

#441464

Hoi mitti2000,

Was sitting having a bier and had a thought that possibly may/could help you. It may be stupid, or wrong or not work. Please let me know which!! :p

How about that you change the image from being a logo into the background with no repeat and colour? It will sit under everything then?

Then you could maybe have a clear block png sit in logo so that it is clickable.

You would obviously have to have transparency on some of the elements but with dark background and white text anyway would this matter?

As I said, I am no fachmann, so I have to find easy solutions. :-[

Just an idea.

Grüsse

[mitti2000 Friend mitti2000Join date: November 2010Posts: 40Downloads:2Uploads:4 Thanks: 3 Thanked: 5 times in 1 posts]

#441465

I guess it’s possible and it could even be my final solution.
But positioning it so it fits exactly into the frame will be a pain and as soon as I change somthing (lets say the witdth of the site) I’m screwed. I’m still looking for a better solution which works with the logo above the menu.

We’ll see

Thanks anyway

[Author]

Posts