| Author |
 Topic  |
TJM
Advanced Member
United Kingdom
217 Posts |
 Posted - 09/09/2012 : 04:18
|
Hello to all
I am currently designing my new site with the Virtual CSS Gadgets Ecomm Plus Template. If you look at the Test homepage http://www(dot)tjmotorsport.co.uk/Test2/ you will see that the top hyperlinks are above the green line. I would like to lower them centrally (aligned left) under the green line.
Your advice will be appreciated.
Kind regards
Tim
Tim Jones
TJ Motorsport
https://www.tjmotorsport.co.uk |
|
quadrant
Ecommerce Template Expert
706 Posts |
Posted - 09/09/2012 : 06:27
|
Hi Tim,
Do you need the Black space that the menu is currently occupying for any other elements?
If not you will need to reduce the height of images/topbga.jpg as it is currently 200px and for the menu to fit in you will ideally need to make the black strip under the green line slightly thicker in photoshop or similar to fit the nav bar in which currently has a height of 45px.
Try changing/adding this to style.css
.header {
background-size: auto 150px;
height: 150px;
}
body {
background-size: auto 150px;
}
.menu1 {
position: absolute;
top: 125px;
}
.nav1 a {
height: 20px;
line-height: 20px;
}
some bits you already have so will need to replace with the above values and some need to be added.
It's not perfect as the image will need editing and I'm not sure where you want everything positioned but it should point you in the right direction.
Regards,
David |
 |
|
Sinbad
Administrator
USA
53981 Posts |
Posted - 09/09/2012 : 10:40
|
Hi Tim, or you could try adjusting the menu remove the background image and set the positioning.
.menu1 {
line-height: 45px;position: absolute; top:170px;
}
Winners never quit, quitters never win
User Manual for Ecommerce Templates
|
|
|
TJM
Advanced Member
United Kingdom
217 Posts |
Posted - 09/09/2012 : 11:19
|
Hello Sinbad
Used second option and everything seems to be fine.
Many thanks.
I am sure I will have plenty more questions with my new design.
Regards
Tim
Tim Jones
TJ Motorsport
https://www.tjmotorsport.co.uk |
|
|
TJM
Advanced Member
United Kingdom
217 Posts |
Posted - 09/09/2012 : 13:13
|
Hello again
Final issue for today. I have introduced the on the same page and as you can see the drop down is not working correctly.
I need the drop down boxes to line up under Online Shop link. Sub categories etc to follow.
I would also like to adjust the size of the drop down boxes but don't want to adjust the position of the Online Shop Link at the top unless I have to.
If possible I would also like to put a border around the drop down boxes, but not the Online Shop Link.
Again any advice would be appreciated.
Regards
Tim
Tim Jones
TJ Motorsport
https://www.tjmotorsport.co.uk |
Edited by - TJM on 09/09/2012 13:15 |
|
|
Sinbad
Administrator
USA
53981 Posts |
Posted - 09/09/2012 : 19:15
|
Hi Tim, I think its the positioning that is conflicting with the drop downs. Andy will be around tomorrow and can take a look perhaps there is another way of placing the menu below the line without too much fuss.
Winners never quit, quitters never win
User Manual for Ecommerce Templates
|
|
|
TJM
Advanced Member
United Kingdom
217 Posts |
|
Andy
Administrator
69510 Posts |
|
TJM
Advanced Member
United Kingdom
217 Posts |
Posted - 09/10/2012 : 14:23
|
Hello Andy
Thank you, that has worked. How do I now get the subcategories to go under each other and then those subcategories to come out on the side?
Also is there any way for me to reduce the height of the drop down boxes and increase the padding to each side of the drop down boxes?
Regards
Tim
Tim Jones
TJ Motorsport
https://www.tjmotorsport.co.uk |
|
|
Sinbad
Administrator
USA
53981 Posts |
Posted - 09/10/2012 : 15:42
|
Hi Tim, the problem is that the ect drop down menu has been placed within the nav1 ul which current is set with a float left which is needed for the other non-ect menu items. There are a couple of ways to fix it the best solution is to place Home About Us in its own ul tag, try closing it after about.
<ul class="nav1">
<li><a href="index.php" title="Back to Home Page." >Home</a></li>
<li><a href="about.php" title="About TJ Motorsport." >About Us</a></li></ul>
Then open it again for the next list items
<ul class="nav1">
<li><a href="clientlogin.php" title="Login to your Account." > My Account</a></li>
<li><a href="about.php" title="Contact TJ Motorsport." >Contact Us</a></li>
<li><a href="search.php" title="Search for Products." >Advanced Search</a></li>
<li><a href="orderstatus.php" title="Check your Order Status." >Order
Status</a></li></ul>
Then we will be able to work with the menu independently of the other menu items.
Winners never quit, quitters never win
User Manual for Ecommerce Templates
|
|
|
TJM
Advanced Member
United Kingdom
217 Posts |
Posted - 09/10/2012 : 16:06
|
Hello Sinbad
That has worked, menu is now independant. Just need to get everything aligned now and ideally underline hyperlink removed and text size adjusted to follow nav 1 text size.
Thanks for this support.
Regards
Tim
Tim Jones
TJ Motorsport
https://www.tjmotorsport.co.uk |
|
|
Sinbad
Administrator
USA
53981 Posts |
Posted - 09/10/2012 : 16:18
|
Hi Tim, looking at it the My account through Order staus might be better off using a different ul class <ul class="nav2">, then copy the css from nav1 to nav2 and add margin-left on nav2 to push it over after online shop. If you need more help let us know.
Winners never quit, quitters never win
User Manual for Ecommerce Templates
|
|
|
TJM
Advanced Member
United Kingdom
217 Posts |
Posted - 09/10/2012 : 17:09
|
I have put the nav 2 in but where do I put the margin-left code in and is that the full code?
Thanks again
Tim
Tim Jones
TJ Motorsport
https://www.tjmotorsport.co.uk |
|
|
Sinbad
Administrator
USA
53981 Posts |
Posted - 09/10/2012 : 17:41
|
Hi I think you will need to set the float left first so we can see where its alinged
.nav2 li { float: left;
}
Winners never quit, quitters never win
User Manual for Ecommerce Templates
|
|
|
TJM
Advanced Member
United Kingdom
217 Posts |
|
Andy
Administrator
69510 Posts |
Posted - 09/11/2012 : 03:40
|
I think part of the problem here is that you have like three menus in one like this
bulleted list menu | dynamic menu | bulleted list menu
By dropping the dynamic menu into a regular css styled menu you're causing layout issues which are going to be difficult to resolve.
What I would do is have the whole top nav bar as a dynamic menu like we have here http://www.ectdemostore.net/. You can then add pages like your home and about pages to the category admin pages, set as static URLs and $menucategoriesatroot=TRUE; set in vsadmin/includes.php
Andy
Ecommerce templates
ECT newsletter
ECT hosting suggestions
Dreamweaver templates
Follow us on Twitter, Facebook, Google + and YouTube
|
|
|
|
Topic |
|
CSS Template Advice
