If there is a specific name for the following thing, please tell me so I can make some proper research (so far what came up from my searches was things with the z index which is something totally different).
Alright, Consider the following situation. You have:
<div class="foo">Foo</div>
<div class="bar">bar</div>
Suppose the classes are defined in css sheets, so when you add another css sheet they change.
For the properties like font, color, bg it clear to me.
The question is how to modify their position. Consider that I want the following output:
(you can only change the css) 'Foo' to be second, 'bar' to be first. 'foo' and 'bar' to be on one row.
PS: if there is a specific name for this (changing position with css styles) please tell me.
Changing index is not possible through css you can just style them:
http://jsfiddle.net/K9Pj8/
like
.foo{ position: relative; top: 20px;}
.bar{ position: relative; top: -20px;}
There is a further more you can do it with a wrapper like this example:
http://jsfiddle.net/K9Pj8/1/
You have several options to position divs with css.
position is one of them.
For a more flexible solution you can also use float.
Whatever you need on the right assign float:right;
Whatever you need on the left assign float:left;
Demo
http://jsbin.com/oluyay/1/edit
Try manipulating position css attribute with top, left, bottom, right as required. If you want them to be one after another horizontally, you can try float:left
Yes, you have to use css floats to achieve it.
A float simply pushes elements to a specified direction and stacks up according to available space.
To get the result you need to apply this,
.foo, .bar { float: right; }
Make sure you have these tags wrapped in a parent element and make it as inline-block, or else they will float to end of full block
Check this fiddle
http://jsfiddle.net/8hAmw/
Related
I want to set the left postition of n-th div to (n-1)*250px, for e.g:
1st child: left = 0px
2nd child: left = 250px
...
is it possible to do so in css? I am using Javascript to set this. Thanks.
The CSS3 calc() method comes to mind, but it doesn't support using the index (n) as an operand, so that will not work.
Recommended solution: You could potentially design your layout such that the widths of each of the elements is 250px. Give each of the elements display: inline-block or float: left and they'll line up as you intend. If the width of the content of the elements needs to be larger than 250px, ensure overflow: visible (default value) is set on the elements and allow the content to overflow. Without more information, this should achieve the effect you are intending.
However, if you need to use a more direct method of positioning, you should stick with JavaScript to set the position of these elements. Likely, you'll want to take into account screen width, element width, and more, and CSS will leave you unable to do so.
Take a look at this JSFiddle for inspiration. If you post a sketch of what you're looking to achieve, I can help you further.
You can use:
div:nth-of-type(an+b)
// or
div:nth-child(an+b)
to address your divs.
div{
position:absolute;
}
div:nth-child(2){
left: 250px;
}
div:nth-child(3){
left: 500px;
}
without preprocessor you need to write every rule by hand because there is no possibility for a dynamic way when setting the left property.
Another possiblity (depending on what you really want to do) would be to introduce nesting and set padding-left:250px. But that only works if you can alter your markup accordingly.
Javascript probably is the easiest way here.
I'm learning HTML/CSS and I encountered a problem. I'm currently working on goodwill.heyscout.com as a side project.
From learnlayout.org, I learned that the best way to structure a layout with a div is to give the inner a position:absolute, and the outer a position:relative. This works.
However, this throws the alignment off as soon as I add the position:absolute (I want the profile cards side-by-side). Without the position absolute, everything gets shifted if I want to alter the layout of the profile card. As you can see on the bottom two profile cards, they align as those aren't altered.
Can anybody point me in the right direction?
I also know that my code is pretty messy and that's what I really need to get better at... any other suggestions on how I can improve my code would also be useful.
You can throw a float: left onto your outer class and that should get them sitting side by side again. You may want to read up on using floats at some point as they can be very powerful (if a little hard to get your head around at first)
.outer {
width: 49%;
display: inline-block;
float: left;
}
BTW, I notice you using id="outer" multiple times. You should change this to class="outer" as an ID should be unique, whereas a class can be used multiple times. You'll see in the above CSS that I've used .outer as I'm targeting by a class name (rather than #outer which targets by ID)
Interesting problem you have found. I can't tell you exactly why it is behaving this way but it appears to be related to having text directly in the #box div or not. If you remove the "test" from the second one it aligns as you would expect. Likewise, if you put the exact same content in the second div as the first, they align.
For improvements I would start by never re-using an id (like you are doing with #outer and #box for example, these should be classes). The id attribute needs to be unique, no two DOM-elements should have the same id.
I would also suggest using a ul for #businesscards sice it represents a list of cards. This would make #outer an li. You did this in #navlist so you know what I mean.
Give just vertical-align: top; to your #outer div. The problem will be solved.
As this happens only to child elements, give something like this to solve the issue:
div > * { /* or just '*' */
vertical-align: top; /* or middle */
}
I realize this is a a pretty basic question, and perhaps I'm taking advantage of you all while I should be sifting through some dense css books/materials. But I can't figure out why my code doesn't work.
I'm trying to create two divs on a page, one below the other and it seems like I should be able to give the lower and absolute position which is below the top div.
I've got to div box whose css layouts are all the same but they don't look anything like eachother. Why is it that the second one looks completely unlike the first, why can't I make a "copy" of the first and place it below the first?
Heres the code. the top is the desired scroller is the desired effect. http://jsfiddle.net/7YueC/
Take out the IDs on the divs and/or add the class .same and then switch the #lasteventimg styles to .same. Remove the #2 styles.
Fiddle: http://jsfiddle.net/7YueC/7/
You don't have to use absolute positioning to position one div below another.
Check out this, a jsFiddle I did to demonstrate how to get one div below another.
since you are trying to achieve the exact same effect on both divs and all the contained elements - why not define a class that is applied to each div. div is a block level element, so they will stack on top of one another by default - no absolute positioning needed.
Here is your code, with the addition of the class eventimg and slightly modified CSS http://jsfiddle.net/ZXGUt/
Like mentioned prior if you are duplicating the same effect on two divs, change the styling to a class and use it on both. Secondly an ID cannot start with a number, otherwise the styling will not take affect. Change it to secondEventImage or similar. If you are programming websites, I would suggest using Firefox and plugin Firebug. It allows you to check if the styling is being applied and make quick edits to view how things will be prior to making changes in the code.
CODE - Example
div#two {margin-left: 10%;margin-right: 10%;overflow-x: scroll;overflow-y: hidden;}
div#two ul {list-style: none;height: 100%;width: 8000px;}
div#two ul li{float:left;}
div#two img {width: 200px;float: left;}
OR
div.sameDivs {..........}
div.sameDivs ul {..........}
div.sameDivs ul li {..........}
div.sameDivs img {..........}
<div id="lasteventimg" class="sameDivs"> ....... </div>
My site's main stylesheet has the div elements arranged in a very particular order. In my print stylesheet, I wish to rearrange the order of my div elements using purely CSS. How can I do this?
Presume these to be divs in my main stylesheet:
a d
b e
c f
I want it to look like this on my print stylesheet (I remove non-printer friendly divs):
a
f
c
d
You can remove the unwanted divs and stack the remaining divs like this...
http://jsfiddle.net/ywTJy/2/
div {
width: 50%;
background-color: #ccc;
float: left;
}
/* print CSS */
div {
float: none;
width: 100%;
}
#b, #e {
display: none;
}
I'm not sure if you intentionally want to move the "F" div to the 2nd position but it seems awkward if you would order your content one way for the Web and re-order it for print.
Depends on exactly how you "want" to position them, and there are many ways to use CSS. The most barebones basic way to move a div all around the page would be using position: absolute and adjusting top/left/etc CSS properties accordingly. I think it should still work with print fine.
Mind you, I wouldn't rely "solely" on absolutely positioned items to design a webpage, but that's one way.
If the content is flowed and/or dynamic you're going to have problems. If you can reliably know where the items will be in relation to each other you can do things like:
<div style="width:100px;position:relative;left:100px">
<div style="width:100px;position:relative;left:-100px">
Which would swap the visual position of two side-by-side divs.
In general, no: you cannot cause position:static items (the default) to flow in a different order. CSS change change the presentation of elements, but there is a fuzzy line between what is semantic in your content and what is the presentation. Just as one sentence and paragraph logically follows the other, you cannot use CSS to change the meaning of the content.
Trying to style a CSS popup. I know there's libraries, I'm doing it by hand anyway.
<div class="labelDiv">
<span class="label helpText">Description</span>
<div id="activeHelpTip" class="helpTip messageBox">
Help text not defined for this field.
</div>
</div>
.labelDiv { float: left; position: relative; }
.helpTip
{
display: block;
position: absolute;
padding:2px;
max-width:350px;
z-index:1;
left: 5px;
top:22px;
}
.labelDiv is position rel so the absolute .helpTip is absolute relative to its owning labelDiv. AFAICT .helpTip must be absolute so it is ignored in normal page flow.
How do I get my tooltip to float over the input box to the right? I want it to float over everything except the edge of the browser.
http://img213.imageshack.us/img213/278/popupcss.png
First of all you'll need to give .labelDiv an overflow:visible. Can you give a more detailed HTML example or a link to this page?
-edit-
also the tooltip will need a width or at least min-width to make sure it doesn't adjust to the size of the containing div
Shouldn't you just adjust the top and left properties accordingly? What happens if you do?
EDIT
If your labels are set with, say 100px for simplicities sake, then adjusting the left to 100px will make the tooltip float over your input field. In this case there are two things to consider - you need to make sure your label div has overflow:visible and that it has a higher z-index than your input field.
If your label div is NOT set width you can adjust the right bound eg. right:0px which will put it on the right edge of the label. You can use negative numbers as well to make it break out of the label div in which case you will have to take the above two points into consideration as well.
We do need a little more info but try adding a z-index to the ".labelDiv" that is greater than the z-index of the input box. You may need to add a positioning to theinput box to make it accept z-index. I if it's a floated element I usually add "position:relative;float:left" to the element that I need lower but don't need to position it.
So my answer is z-index.
It should work.
EDIT
As faux paus as it might be. Would a negative right margin do the trick?
Couple of things, you should probably be using the <label> tag to declare the label for the input field. Using the title attribute on the input with the text of your tooltip will create the hover text you want over the input field and the browser will do all the work for you.
You guys were right, more HTML context was necessary. I ended up promoting the tooltip div all the way up to the body element, then manually positioning it relative to the appropriate label. I couldn't get the browser to do it for me without similar minor issues.