adding multiple divs in header below access

ThemeShaper Forums » Thematic

[closed]

adding multiple divs in header below access

(11 posts)

Started 9 years ago by him
Latest reply from Jamie Mitchell
This topic is not resolved

Tags:

header
div

him
Member

I am trying to play around with design. I am adding 4 DIVS below access and under header in my header.php file. Each of these DIVS contain a graphic which onclick points to different sections of site. THese images have to displayed throughout the site.

While my first div shows up nicely and i can see it in firebug, the second and more divs are just not there. Here is the code i put in header.php -

<div id="hd1" style="cursor: pointer;" onclick="location.href='http://www.mysitename.com/';">
</div>

<div id="hd2" style="cursor: pointer;" onclick="location.href='http://www.mysitename.com/story/';">
</div>

And i styled these divs in style.css. But im confused why the rest of the divs dont show up???

Posted 9 years ago #
Jamie Mitchell
Member

have you given each div a width (width of your container holding those divs divided by 4 minus the margin in between)

and then float them to the left.

if there not floated, they won't line up.

j

Posted 9 years ago #
him
Member

Yes, Jamie, I did that. Infact here is the code in my style.css :-

#hd1 {
background:url(images/awmast_a.jpg) no-repeat scroll 0 0;
float: left;
width: 345px;
height: 350px;
position: absolute;
left: 0px;
top: 59px;
}
#hd2 {
background:url(images/awmast_b.jpg) no-repeat scroll 0 0;
float: left;
width: 209px;
height:350px;
border-left: 1px solid white;
overflow: hidden;
position: absolute;
left: 345px;
top:59px;
}
#hd3 {
background:url(images/awmast_c.jpg) no-repeat scroll 0 0;
float: left;
width: 183px;
height:350px;
border-left: 1px solid white;
overflow: hidden;
position: absolute;
left: 555px;
top:59px;
}
#hd4 {
background:url(images/awmast_d.jpg) no-repeat scroll 0 0;
float: left;
width: 260px;
height:350px;
border-left: 1px solid white;
overflow: hidden;
position: absolute;
left:739px;
top:59px;
}

And a dummy sample you can see here - http://netmediums.net/dummy/. The float-left wasnt working properly so i positioned them absolutely. And now in IE - the 2 left images just dont show up! God knows what's cranking them up!

Infact, there is another problem. in my local install FIREFOX it almost occupies the whole page width (1000px). But in the online version it gets shortened and leaves wide space to left and right. If you check via IE tab, it's visible.

Please take a look and suggest...

Posted 9 years ago #
Jamie Mitchell
Member

Give me a bit and i'll be back with all the code for you.

:)

Posted 9 years ago #

Jamie Mitchell
Member

alrighty then

i created a new section for the big menu, put this in your childtheme functions

function childtheme_big_nav() { ?>

    <div id="big-nav">
     <div id="big-nav-container">

      <div class="block block-1" onclick="location.href='http://www.audiowagon.com/';"></div>

      <div class="block block-2" onclick="location.href='http://www.audiowagon.com/story/';"></div>

      <div class="block block-3" onclick="location.href='http://www.audiowagon.com/jingle/';"></div>

      <div class="block block-4" onclick="location.href='http://www.audiowagon.com/wedding/';"></div>

     </div>
    </div>

<?php
}
add_action('thematic_belowheader','childtheme_big_nav');

and here is your css

#big-nav{
  height:350px;
  width:100%;
}
#big-nav-container{
  margin:0 auto;
  overflow:hidden;
  position:relative;
  width:1000px;
  height:350px
}
.block{
  cursor:pointer;
  display:inline;
  float:left;
  height:350px;
}
.block-1{
  background: #FFFFFF url(http://netmediums.net/dummy/wp-content/themes/audiowagon/images/awmast_a.jpg) no-repeat 0 0;
  width:345px

}
.block-2{
  background: #FFFFFF url(http://netmediums.net/dummy/wp-content/themes/audiowagon/images/awmast_b.jpg) no-repeat 0 0;
  border-left:1px solid #FFFFFF;
  width:209px
}
.block-3{
  background: #FFFFFF url(http://netmediums.net/dummy/wp-content/themes/audiowagon/images/awmast_c.jpg) no-repeat 0 0;
  border-left:1px solid #FFFFFF;
  width:183px
}
.block-4{
  background: #FFFFFF url(http://netmediums.net/dummy/wp-content/themes/audiowagon/images/awmast_d.jpg) no-repeat 0 0;
  border-left:1px solid #FFFFFF;
  width:260px
}

Posted 9 years ago #

Jamie Mitchell
Member

oh, sorry just noticed too that you got everything contained with the wrapper on the dummy site, so you won't need the margin: 0 auto i have in there, and probably the outer div too.

J

Posted 9 years ago #
him
Member

Wow, Thanx Jamie, thanks ever so much!!! I owe you one.

Now testing on my local install, everything works fine. But in the dummy site - Firefox misses out the 4th image(block-4), though IE6 shows it fine. Can't figure out why these images can't ever get into a line, hehe! Please take a look. Im trying out what I can think of, in the meanwhile.

Themeshaper has the greatest support ever!

Posted 9 years ago #
him
Member

Here you can check the images on my local install and dummy.

http://netmediums.net/dummy/local.jpg

http://netmediums.net/dummy/dummy.jpg

Posted 9 years ago #
him
Member

hmmm.. tried to add a 1px white space on the awmast_d instead of 1px border. But result is the same.

Posted 9 years ago #
Jamie Mitchell
Member

those local installs give me the willy's :(

do it on the live test site you used before. then i can fix any problems.

but i did test the above mark-up i posted live with thematic on firefox and ie and all is fine.

Posted 9 years ago #
Jamie Mitchell
Member

opps, i see you did put it live !

alrighty, well i'm not seeing any issues there, both in firefox and ie...?

try removing the borders and see if the last image pops back in, and let me know.

Posted 9 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.