Solved

CSS positioning question

Posted on 2013-05-30

1 solution

281 Views

Last Modified: 2013-05-30

I have a car website and I'm trying to position the group of images up just underneath the main image of the car and left aligned with the car. I can't seem to get it done with CSS. Can someone help me adjust the CSS

http://www.drivecore.com/Product.aspx?ProductID=66407&CategoryID=23&L=1

Comment

Question by:saturation

[X]

Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

Help others & share knowledge
Earn cash & points
Learn & ask questions

Join The Community

2 Comments

LVL 53

Accepted Solution

by:COBOLdinosaur

COBOLdinosaur earned 500 total points

ID: 392087592013-05-30

The main picture is in a box with height:300px

Reduce the height and the small ones will move up; or give the class scrollarea a negative value for margin-top.

Cd&

LVL 57

Expert Comment

by:Julian Hansen

ID: 392090152013-05-30

1. Remove the height from here

<div style="cursor: pointer;height: 325px;" onclick="javascript:ShowLargeViewPopup()" class="imageholder"><img src="Image.aspx?strFileName=BUICK_1G4GC5EC8BF391013.01.jpg&strItemType=p&numMaxHeight=275&numMaxWidth=325&numItem=66407&strParent=" id="placeholder_p_66407" alt="2011 BUICK LACROSSE CXL">
</div>

2. Remove the margin from this style line 668 of general.css

.imageholder img {
  margin: -40px; <== remove this
  padding: 0;
}

Open in new window

3. Remove margin from this style line 679 of general.css

.imageviewer .gallery {
  background-color: #FFFFFF;
  border-top: 1px solid #FFFFFF;
  margin-left: 17px;
  margin-top: -105px;  <== Remove this
  text-align: left;
  width: 300px;
  z-index: 1000;
}

Open in new window

You can also probably remove the spacers and use positive margins for those.

Featured Post

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Bootstrap Masterclass – Part 1

Article by: Gary

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…

CSS Best Practices

Article by: Experts Exchange

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…

Alpha Transparency in CSS

Video by: Sarah

In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

HTML
CSS

Corner Ribbon Effect in CSS

Video by: Sarah

In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon": Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …