For example, I'm making a website with width of 960px. How should I use the container of this width? Are there any rules about it?
.container {
width: 960px;
margin: 0 auto;
}
What is more correct?
1) <div class='container'>[whole website]</div>
2) <div id='menu/header/etc'><div class='container'>[content for this block]</div></div>
3) <div id='menu/header/etc' class='container'>[content for this block]</div>
There are two ways to do that:
<div id="container">whole website</div>
<header><div class="container"></div></header>
The advantage of the second method is you can set background: red for the header and center its content within the container
I agree with #magreenberg, and I'd also say look around at boilerplates like Foundation, Bootstrap, or Skeleton Framework and look at their code to see how they format their pages.
Normally you get a Container (full width), Wrapper (content width like 960px), and rows, and within those rows you get various numbers of columns from 1-12.
Make sure to validate your HTML as you go to make sure what you write is semantically correct, and also check your pages in different browsers to check your CSS.
Related
I have a small image that i need to repeat along the x direction, a specific number of times.
The 'row' of images should be scrollable, and i want to avoid tables if possible.
Is this possible to do with Html + Css? The html code will be dynamic generated using PHP.
Any extra-ideas?
Thanks!
I wonder if ajax has the best looking solutions for you, but you haven't really explained your scenario too well, why are you repeating the same image and making it scrollable? That doesn't sound like valid functionality for anything. Are you trying to scale a background image or something? IF so, what's with the scroll bar???
Anyways here you go:
http://wowslider.com/rq/ajax-image-scroller/
Garry's answer is good. If you just want regular scrollbars, however, wrap the dynamic area (into which you will be loading your images) with a div (or canvas, probably works the same way), and add a class to it. Then you can target all of the images with CSS and have them float, which will line them up, regardless of how many you load dynamically. (Just don't forget to put a width on the container.)
It would look something like this (short-hand, but you get the idea):
div.image-container {
width: 400px;
overflow: scroll;
}
div.image-loader img {
float: left;
}
<div class="image-loader">
<img/>
<img/>
</div>
A lot of people's HTML markup looks like this:
<html>
<body>
<div id="wrapper">
<p>Stuff in here</p>
</div>
</body>
</html>
And most of the time in examples here, or on the web, people suggest that you should apply width settings to the #wrapper, instead of the <body>.
Is there an underlying reason for that?
For example, in an article on techniques for gracefully degrading media queries, and to give you some context on Technique 1: Do Nothing:
The elephant in the room is Internet Explorer for the desktop.
With a mobile-first solution, large screens will display the content
in one column, resulting in a painful reading experience for the user,
way past the established maximum for comfort: 50 to 75 characters.
It might be worth setting a max-width property in your main container and then upping that max-width in a media query.
And their CSS:
#wrapper {
_width: 460px; /* Take that, IE6! */
max-width: 460px;
}
#media only screen and (width) {
#wrapper {
max-width: 1200px;
}
}
Here's how it'd come together for IE (media query is commented out).
Would there be any difference whereby instead of applying that to #wrapper, we would apply it to <body> — with the standard website in mind?
Any potential bugs? I tried it here, and it seems to be OK. Just what if the layout gets more advanced...
Well, you want to use as few elements as possible I guess. However there are many instances where #page-wrapper and body are not interchangeable. In many situations you need to use the body as the background color instead of the html tag. In these cases (weighted footers for example) you need the body to stretch out the html and you need a wrapper to contain the content, maybe center the content, and force the body to stretch out and contain it.
So - I guess I would say, that most people use a wrapper because they saw it in their first class or online tutorial. I think that for the most part, it is a habit for many. I would leave the body as is and margin the wrapper to 0 auto and use a max width like you have. It's just EI 8 and before - can I use media queries ? - maybe you should detect EI 8 and make a unique style sheet. I find that after defining everything for mobil, my media queries are only a few lines of iteration after that -
Hi all and thanks in advance for your help.
I'm pretty new to the CSS, and I would like to have a good input to start building and learning the fastest way possible. I'm already doing some CSS tests myself. Right on the question.
this is the relative css code (I put it on pastebin because it's a bit long)
CSS CODE
As you can see in the code, the 2 tables showing up in the image, have a background and I had to set their size manually with
width:100px;
height:120px;
in the td.menuleft and td.menucenter classes.
1° Question
How do I make automatically resizing cells?
For example i want to say:
Make table tag wide 100% of the page width, then let me make classes for cell tables that are a certain percentage of the table width.
Example
Pic of my work, and how I want to make it like
This way it will be easy to make up tables into tags to automatically fill pages. I've seen something about positioning (relative, absolute) but I didn't managed to make it work.
2° question
What's the best way to structure a web page with css in general? It's ok to do like I said, a div, with tables inside and place every element in a table like manner?
Or can you give me any guide step to step on how to do a particular template?
Thanks guys.
when you want to learn how to make good and effective design that are also considered any worth by search engines, then don't use tables for layouts. tables are there for showing table data, not layout. Use instead divs and start reading about positions, displays, floats.
That is the way you want to go
If you set the tds to be a certain percentage width, they will be the percentage of the parent. so:
table {
width: 100px;
}
tr {
width: 100% /* Will be 100px */
}
td.quarter {
width: 25%; /* Will be 25px */
}
td.half {
width: 50%; /* Will be 50px */
}
And I agree with the previous poster, do NOT use tables for layouts. Not that you are doing that here. But for layouts stick to divs and such.
I have a bunch of items (text, image, mixed content, etc) that I want to display. The user can define what row and what column that item appears in. For example, in row 1, there could be two items/columns, both images. In row two, there could be three items / columns, one with an image, two others as pure text. Oh, and the user may specify the width of any particular column/image/item.
I have a solution that uses multiple tables that works. In essence, each row is a new table. This works for the most part.
I'm wondering if I can use just divs?
Now my CSS foo is lacking, and I tried to copy examples from the web, and I haven't been able to get it working. Right now I have something like this:
[for each row]
[div style="float: none"]
[for each column]
[div style="float: left"]
[content]
[/div]
[/div]
[br]
But everything is overlapping each other.
I've also tried using "position: relative", but things look even more borked.
So can divs actually be used for multiple rows and different number of columns?
They sure can! The basic effect (it sounds like) you're looking for is like so:
#wrapper {
width: 900px;
}
.item {
height: 200px;
width: 200px;
margin: 10px;
float: left;
}
<div id="wrapper">
<div class="item">Something</div>
<div class="item">Something else</div>
<div class="item">Something cool</div>
<div class="item">Something sweet</div>
<div class="item">Something just ok</div>
</div>
So what this would do is set up a fixed-width container (the #wrapper) and fill it with "blocks". Because each has a fixed width and is floated left, they'll line up in a grid. Because of the width/margin I've set for each, you should get 4 per row. If you need spacers, just put in blank DIVs to get the content on the right row/column.
The 960 Grid System is designed to accomplish things just like this. Take a look at http://960.gs/ they have plenty of examples of what you can do with 960.
For the unindoctrinated, it defines two types of layouts 12 column or 16 column. Each column is a predefined width with predefined gutters between them. You can then use the built in css styles to have a div span any number of the columns. It's incredibly powerful for layouts where different sections of the page using different layouts.
I have a two column layout, with a gray sidebar on the right. I need the sidebar's height to expand when the height of the left column is increased (due to content being dynamically expanded). I can make the sidebar fit a static page, but I cannot get it to increase in size with the rest of the page. Did some Googling, but couldn't find a work-around that worked for me.
Does anyone know how to do this?
This is a common problem when using DIVS for this type of layout.
If you google 'Faux column' you should get some answers.
eg. http://www.alistapart.com/articles/fauxcolumns/
This may be slightly off but if you use jQuery on your site you can perform a quick calculation and resize all DIVs sharing a similar class to the maximum height:
$('.elements').height(Math.max($('#div1').height(), $('#div2').height()));
I have been haunted by this problem for a while and I wrote an article about this issue: Done with faux columns. Here is what I argued:
JavaScript based solution for this
problem is not worse than any other
solution. In fact if you are using
JavaScript, you may save a few hours
of frustration of trying to get things
working. People will warn you against
this by saying “What will happen if
the user turned off JavaScript?“.
Believe me, if the user has turned off
JavaScript, most of the web is broken
for him anyway. Your sidebar does not
matter to him.
As cballou mentioned, the simplest way to do this thing is to use JQuery code:
$(".sidebar").height(Math.max($(".content").height(),$(".sidebar").height()));
I changed the background-color to the same color as my sidebar, on that specific page, although I do have backgrounds for all my sections rather than one overall background. But that might not work for everyone.
In my stylesheet,
.sidec
{
background-color:#123456;
}
In my HTML page,
<body class="sidec">
content....
</body>
I recently saw a quite creative solution to this problem using the CSS properties position:absolute and border.
Definitely worth checking out to see if it works for you.
Link: http://woorkup.com/2009/10/11/really-simple-css-trick-for-equal-height-columns/
I'm not sure if this will help, as I'm a newbie. However, when struggling with getting my sidebar to show the whole content when I doubled it's size I did the following. I was changing my height and width with no response until I changed the class. My class was listed SB frame SB width. So when I changed my class to read SB height SB width it fit to my content instead of the original frame size. I also tried SB max sb width with worked too, but it took out my footer menu bar (meaning it wouldn't show it anymore). I went back to SB height SB width, and all is well. That's super duper elementary for all of you I'm sure, but just in case there is another newbie reading this that doesn't understand much about html code like myself... I hope this helps =)
Happy Holidays Everyone!
hugs, tara
I'm guessing you want to apply certain effect to your layout such that it will require both columns to resize together. If you want to dynamically change the values of the height of the columns, I doubt it will work simply with css unless you implement some javascript to control the style.
As Dal suggested, do look at the link on faux columns. As the name suggests, the solution isn't much about modifying the columns height. Instead, it gives the "illusion" that both columns appear to be of the same height when in reality they are not -- and is with the use of tiles of background image.
The idea is there isn't a need to complicate the mark-up. Simple structure with a touch of "illusion" with images is a common practice in web design.
Regards,
Jonah
With the poor attitude towards new members on here I expect to be barracked for this answer, here goes.
I got around this problem by creating a background image 960px wide 1px high with the two colors I needed for the columns in their respective widths (780px and 180px). I then used this as the background image for my container repeated on the y axis and made the content and the right sidebar background-color: transparent.
.container {
width: 960px;
background-color: #FFFFFF;
margin: 0 auto;
background-image: url(../images/bgs/conbg.jpg);
background-repeat: repeat-y;
}
.sidebar1 {
float: right;
width: 180px;
height:auto;
background-color:transparent;
padding-bottom: 10px;
}
.content {
padding: 10px 0;
width: 780px;
background-color:transparent;
float: right;
}
I am sure that this method has its limitations but it works perfectly on all my pages.
It is possible that I have not explained this very well, if so, be nice about it will you please. I will endevour to expand on my method(which is probably already common knowledge).