I have a page that I'm working on (longtime developer, new to CSS tho) where I have layed out a bunch of divs with content. I tried to make each div at the same level and not nest a bunch of stuff so that I could move them around more easily. So the question is if I want to have those divs in a completely different layout, is it appropriate to use CSS to put negative margins on a bunch of stuff along with relative positions an shove them into the right place.
So if page one was:
<div class="div1">stuff here</div>
<div class="div2>other stuff</div>
So by the natural order of divs, div2 is below div1. But what if I want to move div2 above div1? The only way I've seen to do this is to set div2 to relative position and shove it where I want with top, left, right and bottom.
It seems odd, but it works. It just seems really inelegant. One page is natural and requires no manipulation, the second is forced into place.
Is there a better way to accomplish my goal?
You are trying to do structure with CSS. That's not what it is for. The structure is done with the HTML, and CSS does the presentation. If you want to reverse order than change the HTML. Then use CSS margin, padding, align, float, and all the other attributes to get exact positioning and the polished look you want.
HTML is a MACK truck. CSS is Porshe.
http://coding.smashingmagazine.com/2011/09/19/css3-flexible-box-layout-explained/
Scroll down/search for box-ordinal-group. Essentially you can define reverse order or arbitrary order using flexboxes. Unfortunately, the flexbox display is only supported via browser extensions (-moz/-webkit) by the good browsers. Check out http://icanuse.com for more info.
Related
I have barely used anything other than vanilla CSS but would really like to do a couple things that aren't working well now:
I have an inner border inside a div, which I want to actually border the inside of the encapsulating div's border (double border). However with window resizing, the inner border will sometimes have too large/small width/height, even when using a measurement like % or vh/vw. I need the inner border (just a div with a border right now) to always stretch/shrink to fit snug right next to the parent border.
Similarly (notoriously) with centering, I imagine there must be a library with the ability to easily center elements vertically and horizontally. Generally I use flex box but would love something that works more consistently, elegantly and intuitively.
What say ye?
I think you're talking about a CSS framework, they help out a lot, especially when working on a major project. I would check out Twitter Bootstrap or Google's Material Design, I personally use mdbootstrap, which is a 3rd party hybrid of the two.
You could give Tacit a try for this particular need.
Tacit is a class-less CSS framework were all you need is just a single <link> statement in your HTML and the web page will have a complete and finished look.
The centering of elements vertically and horizontally come out of the box, and you can skip the usage of <div> elements or the work of defining classes for your elements.
As a side note, here are a few examples of pages that use Tacit, and the only work put into was including the CSS file: http://filfreire.com/, http://www.jare.io/, https://socatar.com/
I was wondering what would be the best way to create a feature strip of background in a website layout?
The approach that comes to mind, would be to create an absolute positioned div with a z-index of -1 and adjust top/height to match up behind a fixed layout.
Is this a good way to go about it? Or is there a better way?
Thank you for any help! :D
A div containing an image placed behind the content is probably the best way to make a scaling background.
I think CSS3 also supports background scaling, but it is not widely supported.
A more semantic approach would be to apply the background strip to an element on the page -- in the case of your example, the "slideshow" element. This element's outer constraint (whether that be a div, a ul, or something else) can then be stretched to 100% of the width of the page, and the content of the element centered (or positioned as desired).
This approach would be more maintainable than some other approaches -- content could be added before the element without breaking the layout, the strip could be changed without much effort, etc.
Background scaling could be taken care of in several ways:
Make your background big enough that it isn't likely to ever be a problem.
Use a tile-able background.
Use CSS3 background-size property. A jsfiddle example is here. (Not supported in <=IE8, but with a little creativity could degrade gracefully.)
Put the image inside your div (or similar) and then use CSS to position absolutely, set the z-index to force below the content, and stretch the image to the width and height of the element. Here's a jsfiddle example. (Note: UNSEMANTIC! Reduces maintainability, etc. But does have better support than CSS3 background-size...)
Number of websites "cheat" : the site's background image already have the strip on it
It's simple and painless but it's static.
This looks a lot easier than I am probably making it sound. I have a content div, 600px wide. It is constantly, for the sake of this argument, in the middle of my page. It is set in the middle using
margin: 0px auto;
In the top right hand corner of this div, I have set a second div, which contains options (it will be share options, such as Facebook, Twitter, etc.). It is currently controlled using CSS, no Javascript. When my cursor is away from the Options div, it remains as a button. When my cursor is over the Options div, it expands. I want for it to expand over my content, but for my content to still wrap around the original (in this case) 50px square box.
I have two test pages currently uploaded:
Test 1 - This displays the Options div in the correct place (set using float: right;), but when I roll over it, the content wraps around the reiszed div.
Test 2 - This makes sure my div floats over my content, but it is set using position: absolute, and it remains at the top right hand corner of the page.
I have missed something, I know I have. Are there any suggestions as to how I can get it working together? I would prefer solely CSS, but I am not opposed to Javascript, either standalone or using jQuery (I'd prefer that, since other scripts I use in my site use the jQuery framework). Code is 100% inline for this example, CSS is using and not tags, so if you wish to look, it's all there.
Test 2 would be perfect if you set position: relative; on the containing div and then added a spacer div that remained in the flow of the document: http://jsfiddle.net/sl1dr/GyvM4/
use z-index with absolute postion. Set the z-index to be higher than the content.
Try this fiddle
It's 1:30am where I am so this is not my best work. Hopefully it should be cross browser compatible.
note I changed #options to options for re-use.
http://jsfiddle.net/7T2c6/ I got it with no extra DOM. However I did move the location of the anchor tag. Outer div no longer provides style, just spacing. Inner elements are position absolute and provide all style. Just my variant. :)
Use position:absolute without defining a top/right/left/bottom value, and add a z-index value. This will keep it in an absolute position but since it's not really specified, it will remain at the required location, causing it to overlap other objects. Play with margin to move it around.
In CSS 2.1, how can I put different divs next to each others? I found that there is a property float and values left, right, none and inherit and I guess they allow me to put for example picture A left and picture B right. But how can I put a picture B below picture A, or for example such that pictures are 15 pixels below the navigation bar of the site?
Even after editing the question, I'm still not 100% sure what you are after. You are mentioning two images and how they are positioned relative to one another but it sounds like the problem is really that they are overlapping another part of the page. Floating an element will allow you to position an element and have the rest of its parent's content wrap around it, like a picture in a news article for example. You can also position divs side by side but that gets a little trickier.
Originally, you mentioned wanting to position one image below another and have those two move together, in which case you would wrap the images in a div and then float the div however you wanted.
In this updated question, it sounds like you would basically just want the images to appear below your page's navigation bar. Without knowing the details, I assume the images are overlapping your page header because they are floated and they are siblings (at the same level in the DOM tree) with the navigation bar's markup. You could do a couple things to fix that. First, you could give the images a margin-top value that's equal to the height of the navigation bar. But that's definitely a hack. Here's a better approach...
Without example HTML, it sounds like you really have two different parts of a page - a header/nav bar and the body of your page. If that's the case, then I would use a div for each. The images would presumably be wrapped in the body's div and no matter how you float them it within that body div, they shouldn't ever overlap the header's div. For example...
<body>
<div id="navigationHeader">
Navigation Option 1
Navigation Option 2
</div>
<div id="pageContent">
<img src="http://www.google.com/intl/en_ALL/images/srpr/logo1w.png" style="float:left;" />
Even though the image is floated left, it still won't overlap the page navigation header.
</div>
</body>
floats etc requires a fair bit of study ( not that it's a huge deal but a bit more complex than you might think ) .....
figure out the following
inline vs block elements ( you can change the default setting)
clearing divs
these will help too
http://css-tricks.com/all-about-floats/
http://css.maxdesign.com.au/floatutorial/
http://www.w3schools.com/Css/css_float.asp
http://www.positioniseverything.net/ordered-floats.html
reading your question again it looks like you might be finding that you need a clearing div beneath the two pictures ( this is non semantic by the way)
Is thee any benefit to wrap Main content and Context div in a content div?
Column can be increased. like 1. Main content 2. left sidebar 3. right sidebar.
My main question is is there any benefit to wrap all in another div?
(source: wpdfd.com)
There can be. So the answer is... it depends.
Generally I will wrap adjacent divs like this, particularly if there is a semantic reason to do so. But even if there isn't there's next to no overhead. Often you will find it much less awkward if you have this kind of nesting. For example, it would make it much easier if you wanted to float one or both child elements.
In this case you could argue your document consists of:
Header
Content
Footer
On this page there are two columns to the content but on other pages there might not be. Other pages might be a single column or have five. Whatever the case, having that content div wrapping all the columns will make a general layout (for all cases) much easier.
Is it necessary? Absolutely not. You could make it work either way. Both approaches are fine and work.
Use it if you intend to "group" the positions of main content and context together, so that you for example can position them relative from each other without influencing the other elements such as header and footer negatively. In semantic/SEO terms that extra div has in fact no impact.
If the sidebar and main-content divs are always together, I think the second option is smarter, because you can use the id for the outer-content wrapper for both css and javascript to manipulate the entire area at once.
The only reason to NOT do it, other than a strong minimalist attitude (which I tend to have) is if you want each area of the page to be truly modular and independent. Experiments like csszengarden are founded on such a principle. This philosophy, in a nutshell, thinks that divs and other elements are chunks of information that should have the ability to be arranged in any way a designer wants (putting your header at the bottom, for instances, or swapping the main-content with the sidebar div, etc). By using a wrapper div, you are forced to use techniques like fixed positioning to break that inner div out of the wrapper (maybe to put it in the upper left corner, for instance).
But aside from that, semantically the two chunks seem to go together, so wrapping them is not a hack. Look forward to the HTML 5 element <aside> which is explicitly meant for side notes like the one in your example.