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
Solved

Div and position

Posted on 2013-05-16
8
232 Views
Last Modified: 2013-05-26
I have five dynamically generated Divs.  In my CSS I have named them .boxes

<style>
.boxes {
width:100px;
height:100px;
float:left;
position:relative;
}
</style>

Open in new window


The first box that is generated I want to have an additional attribute of top:-100px;

How do I apply that to the very first div and not all of the rest?
0
Comment
Question by:rgranlund
8 Comments
 
LVL 10

Expert Comment

by:jtwcs
ID: 39172838
You could use the first-child selector.

For example,
.boxes:first-child {
    top: -100px;
}

Open in new window

0
 
LVL 7

Author Comment

by:rgranlund
ID: 39172878
I tried that but it does not seem to work.
0
 
LVL 10

Expert Comment

by:jtwcs
ID: 39172940
First-child will only work if that first .boxes div is the first child element of the parent.

You could also try another selector like first-of-type.  This will catch the first .boxes div inside the parent element.
.boxes:first-of-type {
    top: -100px;
}

Open in new window

0
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 7

Author Comment

by:rgranlund
ID: 39172989
I tried that and it does not work in IE.
0
 
LVL 10

Accepted Solution

by:
jtwcs earned 500 total points
ID: 39173117
CSS3 selectors will not work with IE 8 and below.

An alternative would be to use the jQuery first-of-type selector and add the style inline or via a separate class.
0
 
LVL 10

Expert Comment

by:Ishaan Rawat
ID: 39173817
See this...

http://selectivizr.com/

It is a good plugin you can add .... Just add the plugin... and then see... your css3 selectors will work.... and your code will run fine...
0
 
LVL 20

Expert Comment

by:Mark Brady
ID: 39174437
or you could just add it via javascript when you are generating them dynamically. Put a counter in the loop and if it is 1 then add the top margin.
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39180589
Whenever I'm generating elements dynamically like this, it can often be useful to add some classes to help with the styling, such as first/last or odd/even:

<div class="boxes first odd">A nicely styled box!</div>
<div class="boxes even">A nicely styled box!</div>
<div class="boxes odd">A nicely styled box!</div>
<div class="boxes even">A nicely styled box!</div>
<div class="boxes last odd">A nicely styled box!</div>

<style>
.boxes { width:100px; height:100px; float:left; position:relative; }
.boxes.first { top: -100px; }
.boxes.last { margin-right: 20px; }
.boxes.odd { background-color: green; } 
.boxes.even { background-color: red; } 
</style>

Open in new window

Simple and works in all browsers - happy days :)
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Introduction This article is intended for those who are new to PHP error handling (https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html).  It addresses one of the most common problems that plague beginning PHP develop…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

861 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question