it seems to be a common practice to use a div with a class of “container” or “content” or something similar around the main content to help with the css-design of the page.
I personally don't like that, because it is (in my opinion) a violation of the rule to seperate presentation from content (because the -element serves no semantic purpose).
So my question is: Is there any way to get a similar result with just CSS? To be more specific, I want the site to have a background-image, but to have a solid white background around the main content.
I already tried something like setting two backgrounds for , one the image, the second a solid white and then size the second one down, but I guess, you can only use background-size on images?
Thanks in advance
You could use the html or body elements, except this is problematic across various browsers, which is why people frequently use a div.
Related
I'm looking to create a simple WordPress page that will display several images, along with some descriptions.
This page is for a customer who would like to update it on her own in the future. She has no familiarity with HTML or CSS.
I'm using a child theme based on "Attitude", although I think this issue would apply to most themes.
The layout I'm hoping for is one where an img is given the class "alignleft", to which I've appended the margin-right to be 50px.
So, it looks gorgeous as long as the text is beside the image. But, once the text gets below the image, it wraps back to the left of the page... just as it should, I suppose! :)
Only, for my page, I'd like for the text to stay "indented", even past the image.
The kicker is that the images are not all going to be the same height or width. Although the height and width dimensions will be between 100px and 300px in almost every case.
WHAT I'M HOPING FOR:
WHAT I'M GETTING:
Things I've already considered are...
div's. If it were just me updating the page, div's would be super easy to implement. But I don't want her to have to do any HTML. (Maybe I could make a template. Hmm...)
Tables. I feel like maybe this isn't ideal because of the variable widths of the images. I suppose I could set the alignment of the "images" column to be "right", and then set cell padding to 50px on the right side.
A NextGen Gallery. If I do this, then I lose the ability to have bullet points in the text part (since the "Description" section of NextGen photos doesn't appear to handle that sort of thing).
Adding a margin-bottom to the .alignleft class. But, again, the images will be different heights AND the paragraphs will be different lengths.
You know, I think I'm on to something here.
It may not be the most eloquent solution. But I think it's going to work.
I'm going with tables!
First off, I have the TinyMCE WordPress plugin installed, so adding tables using WordPress's visual editor is easy enough for anyone to do.
I've added the following CSS to my child themes style.css file (Again, I'm using a child theme of Attitude):
.entry-content table tr td { width:auto;text-align:justify;vertical-align:top;}
.entry-content table tr td:first-child { width: 36%}
.entry-content table tr td:first-child img {width:100%;height:auto;}
I might make a few tweaks. But otherwise, I think this'll work pretty well.
The images will now be the same width. Which is great. My friend can now upload images of different sizes (again, probably between 100px and 300px in height and width), and the CSS will take care of formatting. Huzzah!
Right, worst question in the history of web design. Who cares, just choose an option. So my question is like this...
What is the best answer to be standards compliant and (backwards) browser compatible?
jQuery used for layout which is supposed to be reserved for css and html
OR
Negative margin, extra containers , or other hacks or bloat?
Already spent too much time on this but looking for the "professional" way to do it.
EDIT: Here is a code example using Alexander's method.
Usually I use pure css/html solution which works in 99% cases:
I have a parent div with background-repeat on 'Y' axe. The general structure is going to be like this :
html:
<div id="container" class="clearfix">
<div class="LeftPane"></div>
<div class="CenterPane"></div>
<div class="RightPane"></div>
</div>
css:
#container{
background:url(imagePath) 0% repeat y;
}
for background image you can apply image for the borders, or everything else what can make users to think that all 3 blocks have the same height
There are many ways of successfully doing that, I think the easiest one of them is to simply wrap them all in a common parent container, set his display to table or table-row No need for parent at all. and set the original <div>s to display: table-cell;
jsFiddle.
For compatibility I'd suggest jQuery. Hacks and extra containers make your code bloated, as you've said, and will end up making it more difficult to edit if changes need to be made. And anyways, HTML is the layout of the page.
I have come up with a revolutionary new method for equal height columns. It is a pure CSS/HTML solution, tested in the latest Chrome and Firefox, and IE7-9. It is a bit tricky to set up but once it is done it works beautifully. The problem with every previous solution I have seen is that it doesn't actually create individual, side-by-side divs that can have their own borders, margins, etc. Other solutions always have some columns overlapping which means you can only contrast the different columns by changing the background. This method allows any column to be any height unlike some methods. The secret to its success is using float: right instead of left. If it was floated left you would have issues with extra space on the right causing scroll bars. Perhaps the only down side with this method is that it can be hard to wrap your head around!
Check it out here.
http://jsfiddle.net/wRCm6/2/
This is bothering the crap out of me and I can't see what's not allowing it to float left.
I've set a margin-left of 120px to the header text (450 Set, 230 Set, etc.) and did a float left to the link element with the image inside of it.
Here's the link to the site where it's happening: http://cl.ly/6lQa
What am I over looking or not seeing?
Thanks!
It's the h2 tag that's screwing it up. Use a div tag instead and apply the styles that you want.
Generally, I refrain from using the h1,h2,h3,h4..... tags because they come with pre-done stylings. I prefer to create classes for all of my stylings and use div or span tags. Only if I'm doing SEO, I'll use some h1,h2 tags at the top, but nothing more than that.
On a side note, you should also try to get away from relying on float. It is not a good way to go..... different browsers handle it differently, and many times I get errors like what you were getting here. Instead of float, use position:relative and place the elements on the page by specifying the pixels at which you would like them (e.g. left:200px, top:100px etc).
I just started using BlueprintCss, which provides a great framework to easily layout pages. It divides the page up in a grid, and using pre-defined classes, you layout the page (without floats!). It's amazing, you should look into it.
You should move <h2 class="entry-title"> above the a element containing your image.
Set a width on the <h2> that will fit into the remaining space (with the 120px margin) OR better yet use a <div> instead of the h2 and style the font the same way
I'm learning HTML and I wanted to practice by recreating a invoice sent to me by Electronics Expo.
However, I used the background-image property and repeated it by repeat-x and now, the background stretches across the page so much that it has a horizontal bar to drag.
http://htmlpocketreference.110mb.com/index.html
You can see what I did in my link above.
Also, I would really appreciate some advice on simplifying my CSS coding. It seems really messy and I have to move every element once something changes. -.-
Thanks!
It's because you have relatively positioned elements that do not have a fixed width - these elements take on the width of their parents, which is the width of your invoice, and stick out of the page, causing the overflow. Give them a background color, and you can see this quite clearly:
Give the elements a fixed width to fix this, or alternatively, look to other methods of laying out your elements, like floating them.
In addition to this problem, you're also repeating the id attribute, which is creating invalid HTML. You should look at using the class attribute for multiple elements sharing the same style, or even better, look at using inheritance and the cascade to not have to give every single element an id.
Further reading:
CSS Positioning 101
Inheritance and Cascade from The Web Standards Curriculum
Problem is not the background. The problem is the position relative you're giving to the block level elements without defining their width...
The h2 elements like (Ship To:) and (Phone) and all the paragraph elements. You need to give these elements a specific width and it will work fine
Try giving these elements a background-color: yellow; to see how the flow inside the document ( for your debugging purpose ) and you will see what I mean
I have noticed a common technique is to place a generic container div in the root of the body tag:
<html>
<head>
...
</head>
<body>
<div id="container">
...
</div>
</body>
</html>
Is there a valid reason for doing this? Why can't the CSS just reference the body tag?
The container div, and sometimes content div, are almost always used to allow for more sophisticated CSS styling. The body tag is special in some ways. Browsers don't treat it like a normal div; its position and dimensions are tied to the browser window.
But a container div is just a div and you can style it with margins and borders. You can give it a fixed width, and you can center it with margin-left: auto; margin-right: auto.
Plus, content, like a copyright notice for example, can go on the outside of the container div, but it can't go on the outside of the body, allowing for content on the outside of a border.
This method allows you to have more flexibility of styling your entire content. Effectively creating two containers that you can style. The HTML body tag which serves as your background, and the div with an id of the container which contains your content.
This then allows you to position your content within the page, while styling a background or other effects without issue. Think of it as a "Frame" for the content.
I faced this issue myself redesigning a website. Troy Dalmasso got me thinking. He makes a good point. So, I started to see if I could get it working without a container div.
I could when I set the width of the body. In my case to 960 pixels.
This is the CSS I use:
html {
text-align: center;
}
body {
margin: 0 auto;
width: 960px;
}
This nicely centers the inline-blocks which also have a fixed width.
The most common reasons for me are so that:
The layout can have a fixed width (yes, I know, I do a lot of work for designers who love fixed widths), and
So the layout can be centered by applying text-align: center to the body and then margin: auto to the left and right of the container div.
Certain browsers (<cough> Internet Explorer) don't support certain properties on the body, notably width and max-width.
This is one of the biggest bad habits perpetrated by front end coders.
All the previous answers are wrong. The body does take a width, margins, borders, etc. and should act as your initial container. The html element should act as your background "canvas" as it was intended. In dozens of sites I've done I've only had to use a container div once.
I'd be willing to be that these same coders using container divs are also littering their markup with divs inside of divs--everywhere else.
Don’t do it. Use divs sparingly and aim for lean markup.
I later found this, years after my answer, and see that there are some follow up replies. And, surely you jest?
The installed placeholder site you found for my domain, which I never claimed was my markup or styling, or even mentioned in my post, was very clearly a basic CMS install with not one word of content (it said as much on the homepage). That was not my markup and styling. That was the Silverstripe default template. And I take no credit for it. It is, though, perhaps one of only two examples I can think of that would necessitate a container div.
Example 1: A generic template designed to accommodate unknowns. In this case you were seeing a default CMS template that had divs inside of divs inside of divs.
The horror.
Example 2: A three column layout to get the footer to clear properly (I think this was probably the scenario I had that needed a container div, hard to remember because that was years ago.)
I did build (not even finished yet) a theme for my domain and started loading content. For this easily achieved example of semantic markup, click the link.
http://www.bitbeyond.com
Frankly, I'm baffled that people think you actually need a container div and start with one before ever even trying just a body. The body, as I heard it explained once by one of the original authors of the CSS spec, was intended as the "initial container".
Markup should be added as needed, not because that’s just the way you've seen it done.
div tags are used to style the webpage so that it look visually appealing for the users or audience of the website. Using container-div in HTML will make the website look more professional and attractive and therefore more people will want to explore your page.
Well, the container div is very good to have, because if you want the site centered, you just can't do it just with body or html...
But you can, with divs. Why container? It’s usually used, just because the code itself has to be clean and readable. So that is the container... It contains all of the website, in case you want to mess around with it :)
Forget the container. It's just a habit from the old, very old days.
Everything you can do using a div—you can also do it on a body tag.
I've never heard of issues using a div class="container" markup. But I have heard of issues using body as a top level container. See this article. Stick with the tried and true; who knows what browsers will do in the future.
Most of the browsers are taking the web page size by default.
So, sometimes the page will not display same in different browser. So, by using <div></div>, the user can change for a specific HTML element. For example, the user can add margin, size, width, height, etc. of a specific HTML tag.