Joomla Templates Club 406,261 posts

[djmarkus Friend djmarkusJoin date: March 2011Posts: 110Downloads:0Uploads:1 Thanks: 14 Thanked: 2 times in 1 posts]

#172204

I am trying to get the picture that is all the way at the top that is placed between my logo and the social icons to be flush to the top of the page as well as being flush to the bottom of where it is currently just above the menu.

Here is the code that has achieved that so far

the template.css was modified like this to achieve the placement as it looks right now at http://www.aspanishproperty.com

#slideshow{
float:left;
width: 650px;
}
#ja-slideshow {
left: -40px;
position: relative;
}
#ja-slideshow {
bottom: -50px;
position: relative;
}

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#431391

Well, first of all …. at line 11 within your template.css file, you have the following:

#ja-slideshow {
bottom: -50px;
position: relative;

}

This is positioning your image down – for the appearance of being “on top” of your main navigation. Also, if you are wanting the image to be the height of the header (if I am understanding you correctly), then you are going to need to increase the size of the image and slideshow container – else reduce the size of your logo and, then, header height.

Perhaps you can provide a mock-up of exactly what it is you are wanting to accomplish – so I can get a much clearer understanding of the final result you are wanting?

1 user says Thank You to TomC for this useful post

1. djmarkus

[djmarkus Friend djmarkusJoin date: March 2011Posts: 110Downloads:0Uploads:1 Thanks: 14 Thanked: 2 times in 1 posts]

#431458

http://www.aspanishproperty.com/properties/detail/42210-apartment-in-denia take a look here there is the red space at the right of the logo and the social icons i want the JA Slideshow to fit exactly in the space from top to bottom whithout effecting the logo. please the JA Slideshow was placed in that position but if i place AT THE top or the bottom position when resided it leave a border that is big at the top or bottom

this is the header

<?php
/*
# ————————————————————————
# JA Travel Template
# ————————————————————————
# Copyright (C) 2004-2010 JoomlArt.com. All Rights Reserved.
# @license – PHP files are GNU/GPL V2. CSS / JS are Copyrighted Commercial,
# bound by Proprietary License of JoomlArt. For details on licensing,
# Please Read Terms of Use at http://www.joomlart.com/terms_of_use.html.
# Author: JoomlArt.com
# Websites: http://www.joomlart.com – http://www.joomlancers.com
# Redistribution, Modification or Re-licensing of this file in part of full,
# is bound by the License applied.
# ————————————————————————
*/

?>
<?php $this->genBlockBegin ($block) ?>
<?php
$app = & JFactory::getApplication();
$siteName = $app->getCfg(‘sitename’);
if ($this->getParam(‘logoType’, ‘image’)==’image’): ?>
<h1 class=”logo”>
<a href=”index.php” title=”<?php echo $siteName; ?>”><span><?php echo $siteName; ?></span></a>
</h1>

<?php else:
$logoText = (trim($this->getParam(‘logoText’))==”) ? $siteName : JText::_(trim($this->getParam(‘logoText’)));
$sloganText = JText::_(trim($this->getParam(‘sloganText’))); ?>
<div class=”logo-text”>
<h1><a href=”index.php” title=”<?php echo $siteName; ?>”><span><?php echo $logoText; ?></span></a></h1>
<p class=”site-slogan”><?php echo $sloganText;?></p>
</div>
<?php endif; ?>
<?php if($this->countModules(‘slideshow’)) : ?>
<div id=”ja-slideshow”>
<jdoc:include type=”modules” name=”slideshow” />
</div>
<?php endif; ?>
<h3></h3>
<?php if( $this->countModules(‘top_menu’)): ?>
<div id=”ja-topheader”>
<jdoc:include type=”modules” name=”top_menu” style=”raw” />
</div>
<?php endif; ?>

<?php if( $this->countModules(‘search’)): ?>
<div id=”ja-search”>
<jdoc:include type=”modules” name=”search” style=”raw” />
</div>
<?php endif; ?>

<?php $this->genBlockEnd ($block) ?>

do you have Skype

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#431465

My suggestion in Post #2 is the CSS that you need to work with to accomplish this (as far as I can see).
Again, however, your slideshow image needs to be larger to fill in the space.

What are the current height/width dimensions of your slideshow images?

1 user says Thank You to TomC for this useful post

1. djmarkus

[djmarkus Friend djmarkusJoin date: March 2011Posts: 110Downloads:0Uploads:1 Thanks: 14 Thanked: 2 times in 1 posts]

#431470

<em>@TomC 291550 wrote:</em><blockquote>My suggestion in Post #2 is the CSS that you need to work with to accomplish this (as far as I can see).
Again, however, your slideshow image needs to be larger to fill in the space.

What are the current height/width dimensions of your slideshow images?</blockquote>

the width is ok at 585 perfect
height is 95 anything more than that makes the retainer larger and pushes everything down i changed the bottom to the top http://www.aspanishproperty.com

need to fill the space below now but if i re size the logo dimensions it pushes everything down need it to fit perfect in space

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#431476

<em>@djmarkus 291555 wrote:</em><blockquote>the width is ok at 585 perfect
height is 95 anything more than that makes the retainer larger and pushes everything down i changed the bottom to the top http://www.aspanishproperty.com

need to fill the space below now but if i re size the logo dimensions it pushes everything down need it to fit perfect in space</blockquote>
Actually, if you increase the size of your image, we can then work with the “pushing everything down” issue separately.

What you need to do is figure out the height of the header area – which, I assume, is the height you want your image to be – and then re-size your images to that height. When you have done this, we can then address the “top space” issue.

[djmarkus Friend djmarkusJoin date: March 2011Posts: 110Downloads:0Uploads:1 Thanks: 14 Thanked: 2 times in 1 posts]

#431478

ok let me resize the image then

[djmarkus Friend djmarkusJoin date: March 2011Posts: 110Downloads:0Uploads:1 Thanks: 14 Thanked: 2 times in 1 posts]

#431480

resized image to 585 x 130 now need to get rid of the empty space under it as well as the empty space under the logo

take another look at http://www.aspanishproperty.com

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#431487

<em>@djmarkus 291566 wrote:</em><blockquote>resized image to 585 x 130 now need to get rid of the empty space under it as well as the empty space under the logo

take another look at http://www.aspanishproperty.com</blockquote>

Okay, NOW …. at line 11 within your template.css file . . . add a “margin-bottom: -50px” property

#ja-slideshow {
margin-bottom: -50px;
position: relative;
}


Let me know if we’re getting closer.

[djmarkus Friend djmarkusJoin date: March 2011Posts: 110Downloads:0Uploads:1 Thanks: 14 Thanked: 2 times in 1 posts]

#431491

done that all kings of space at the top this is what i have now

#slideshow{
float:left;
width: 650px;
}
#ja-slideshow {
left: -40px;
position: relative;
}
#ja-slideshow {
top: -0px;
position: relative;
}

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#431492

<em>@djmarkus 291579 wrote:</em><blockquote>done that all kings of space at the top this is what i have now

#slideshow{
float:left;
width: 650px;
}
#ja-slideshow {
left: -40px;
position: relative;
}
#ja-slideshow {
top: -0px;
position: relative;
}</blockquote>
In which file (and line numbers) are the CSS items you list above?

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#431493

Also, it doesn’t appear that you followed my previous recommendation . . . .

at line 11 within your template.css file . . . add a “margin-bottom: -50px” property

#ja-slideshow {
margin-bottom: -50px;
position: relative;
}


[djmarkus Friend djmarkusJoin date: March 2011Posts: 110Downloads:0Uploads:1 Thanks: 14 Thanked: 2 times in 1 posts]

#431496

template.css and at the very bottom i am using joomla version 1.5 do you skype i send the file

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#431498

Did you do the following? . . . . .

at line 11 within your template.css file . . . add a “margin-bottom: -50px” property

#ja-slideshow {
margin-bottom: -50px;
position: relative;
}


[djmarkus Friend djmarkusJoin date: March 2011Posts: 110Downloads:0Uploads:1 Thanks: 14 Thanked: 2 times in 1 posts]

#431554

Yes did that the it sits on the bottom with all kinds of space at the top and the logo is all the way to the top, I am wondering as I looked at template positions there is a menu that’s suppose to fit there to left of the social icons perhaps that placement is interfering

[Author]

Posts