Solved

Div and position

Posted on 2013-05-16
8
213 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
 
LVL 7

Author Comment

by:rgranlund
ID: 39172989
I tried that and it does not work in IE.
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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 9

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
change password links 7 72
Download a website to hdd 2 49
WordPress syntax 2 25
jquery - show / hide div depending on day and time 19 25
Since pre-biblical times, humans have sought ways to keep secrets, and share the secrets selectively.  This article explores the ways PHP can be used to hide and encrypt information.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

919 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now