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.
Related
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/
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 want the first layer to expand to the whole screen when I apply my CSS properties. There are margins, left and right of the page.
What I want is similar to this.
The first layer is that one in black color.
How can I expand mine to the whole screen, then organize the content inside the remaining part?
Here is the CSS I have just proposed with my first layer:
#main{
margin-top:0px;
width: 100%;
height: 600px;
background-color: blue;
}
You have to be more specific, a layer and a table are two very different things. Also, the BBC site you referenced as well as most new websites use <div> tags to organize their html rather than tables. If you could be more specific with some HTML examples you would get a lot more help.
If you have a heading <div> that has similar styling to the css you posted, then have a content wrapper <div> that you could set the width on it should do what you wanted.
Again, if you can be more specific, we can give more specific help.
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>