I have this design layout that has a gradient background in the content container.
the gradient is a solid color on the left and right and gradient to white near the center. (horizontal gradient)
I have three images left-solid.png and a right-solid.png for extending the left and right of the content area if the viewing area is larger. I have main-gradient.png as the background for the main content and is a fixed size of 900px
Is there a way to lay this out without using a html table?
It looks like I need three columns of some sort
[leftcolumn][contentcolumn][rightcolumn]
rightcontent= can stretch and filled with right-solid.png repeat-x
content = 900px filled with main-gradient.png as background no repeat
leftcontent = canstrech and filled with left-solid.png repeat-y
any suggestions?
There are a number of ways you can achieve a multi-column layout without using tables. In fact, using tables is semantically incorrect. This very thing is one of the reasons CSS was created.
Using the following HTML structure:
<div class="container">
<div class="left">
</div>
<div class="middle">
</div>
<div class="right">
</div>
</div>
Then you could do this in CSS:
.left, .middle, .right {
display: inline-block;
}
This will tell the div's to appear next to each other. Additional CSS styles will be needed as well, like width properties for each column (preferable to use percents).
Another option for CSS would be:
.left, .middle, .right {
float: left;
}
This will also tell the div's to appear next to each other, but it does it a very different way.
A further note is that you don't need to use images for your gradient. You can do gradients using CSS. Take a look at http://www.colorzilla.com
Related
sorry if this question looks duplicate, but those explanations were in some way different from what I was looking for.
I have a DIV that is displayed a table. It has two DIVs as cells which also have their own DIVs inside.
<div class="theTable">
<div class="theRow">
<div class="cell1">
<div class="cell1Content">
cell one content
</div>
</div>
<div class="cell2">
<div class="cell2Content">
cell two content
</div>
</div>
</div>
</div>
Now, when by any means (such as writing, or changing attributes), I enlarge the content of one of these cells (say cell2) instead of the content being enlarged from downward, and filling the area of the parent DIV (which is a cell), what happens is that the parent DIV actually expands from top. This behavior is not desired. I want the parent DIV to stay the same size, and the content to resize from bottom (downward).
I know this can be achieved using, position:relative, top:2em, but that's not what I am intending to do, because I do not want to disrupt the flow of the document, rather a simple answer as to how to get round this problem.
As in the case above, the CSS file is like this:
.theTable {display:table}
.theRow {display:table-row;}
.cell1 {display:table-cell}
.cell2 {display:table-cell}
.cell1Content {display:block; height:10em; background:blue;}
.cell2Content {display:block; background:yellow; height:5em; margin-top:2em;}
If you change the last line (margin-top:0em) you'll see, it is not only the child that is changing size, but also the parent. I don't understand why? And what can be done about it?
So what you want is that the cells start from bottom to grow upwards right?
Something like this could solve it:
http://jsfiddle.net/7y19n8eh/
.theTable {display:table}
.theRow {display:table-row;}
.cell1 {display:table-cell;vertical-align: bottom}
.cell2 {display:table-cell;vertical-align: bottom}
.cell1Content {display:block; height:10em; background:blue;}
.cell2Content {display:block; background:yellow; height:5em; margin-top:2em;}
What I did was to add vertical-align:bottom to the cells.
The vertical-align property sets the vertical alignment of an element and is compatible with all major browsers.
I am trying to create a page with 2 divs side by side, that when the screen becomes too narrow to fit them both will put the second div below the first one, both centered on the screen. Is there a simple solution for this?
This is pretty simple standard css. Place 2 div's inside another div. Center both of them and set the width to a px size of your choosing. The divs will each be next to each other centered and if you adjust the screen size to not fit them both on one line, one will go beneath the other, still centered.
In the example below, click "full page" and just adjust the size of the screen to see how it will go onto the same line/go to next line depending if it fits or not.
#one, #two {
display: inline-block;
width: 400px;
height:300px;
border: 2px solid red;
}
<div align="center">
<div id="one" align="center">things</div>
<div id="two" align="center">more things</div>
</div>
I found this fairly simple with very little code. Place the two divs in a container. add display:inline-block; attribute to both divs inside the container and they will stack upon certain widths.
https://jsfiddle.net/Lg06c1sb/
I want to make an image fill a cell in a grid row. I want to use the CSS background-size: cover property to allow it to scale to fill the cell accordingly.
For example:
<div class='row'>
<div class='medium-6 columns'>
<div style='
background: url("/img/picture.jpg");
background-position: center top;
background-repeat: no-repeat;
background-size: cover;'></div>
</div>
<div class='medium-6 columns'>
... bunch of text ...
</div>
</div>
How can I get that div in the first cell to expand to the entire cell space?
Note, I'm not using an img element since I'm trying to get the cover behaviour. If there is a way to do that using img I can do that instead.
I don't know if the answer will be Foundation specific or CSS generic. Either will do, provided it works in Foundation grids.
You can create an equal height container using a few data attributes. Apply the data-equalizer attribute to a parent container. Then apply the data-equalizer-watch attribute to each element you'd like to have an equal height. The height of data-equalizer-watch attribute will be equal to that of the tallest element.
Read more here: http://foundation.zurb.com/docs/components/equalizer.html
The issue is your background-image div has no height or width or content.
.medium-6 will afford width (as a percentage), but not height. If you want the background-image div to be of the same height as the "bunch of text" div, you should use the Zurb Block Grid, which is similar but uses display: inline-block; so each sibling inherits the greatest height.
You could also use display: table-cell on "bunch a text" and "background image" and display: table-row on .row.
I'm trying to create a sort-of table of clips on my webpage. The idea is that it's basically (in my mind) a table with a thumbnail in the left column, and then a right column would house a title, where the story appeared, a date, and a description. I have no trouble doing this using HTML <table> but I'm trying very hard to get better at CSS.
I've combed this (very helpful) site and am far ahead of where I was this morning. However, I'm having trouble with setting the "height." I don't want to set a firm height. I want the "row" to adjust to the height of an image or block of text, and for the height to be the same for both "columns."
Right now I have this.
HTML:
<p class="imageclass">thumbnail</p>
<p class="textclass">all sorts of text, separated by line breaks</p>
CSS:
.container {
width:620px;
}
.imageclass {
float:left;
width:120px;
}
.textclass {
float:left;
width:500px;
}
Have you tried applying overflow: hidden to .container?
If this is really going to be a "row", why not wrap all of the content in a div? This div will scale to be the height of its tallest child. Then if you need to manipulate the rows you can just use CSS selectors for the row class:
<div class="row">
<p style="height:200px; background: black;" class="imageclass">thumbnail</p>
<p class="textclass">all sorts of text, separated by line breaks</p>
</div>
This question already has answers here:
How to avoid wrapping in CSS float
(2 answers)
Closed 3 years ago.
On the left we have a context sensitive navigation/information bar. At times there is very little information in it and other times it takes up the entire height of the page. I've seen a bunch of suggestions on other posts about floating, etc but nothing I've tried works.
.tablebox {float:left;position:relative;z-index:1;border-right:1px solid #000000;}
.groupbox {float:left;position:relative;z-index:-1;border-right:1px solid #000000;}
So two divs for the sidebar - one to create the background layer which will take up the entire height of the page and then tablebox with the actual content on it - it could have a different background color as required.
<div class="tablebox" style="margin-top:5px;width:247px;">Sidebar</div>
<div class="groupbox" style="width:247px;background-color:#FFFFFF;top:120px;bottom:0;left:0px;"></div>
Then we have the right hand side main content... again the idea being that tablebox would have a different background colour and appear to float on top of the page.
<div class="tablebox" style="margin-top:5px;width:777px;">Main content</div>
<div class="groupbox" style="width:777px;top:120px;bottom:0;left:247px;"></div>
Now if the browser width gets to be too small the right hand div falls below the sidebar. Whether there's room there or not.
SOLUTION:
The problem was that the two sets of divs's parent did not have a defined size. As the browser window was resized the children got shuffled to fit inside of the new size. By defining a parent div with a fixed width and adding a overflow:auto the parent would not change even if the browser window was.
Note: This is not the best way to resolve this obviously - this means that the content does not dynamically format itself. It now has a fixed width. In my case I have no other choice. It is a band aid solution but if you're in the design stage think about people viewing your page from a cellphone or old people with their low resolution screens and giant text.
To be clear for those easily confused:
<div style="width:1053px;overflow:auto">
<div class="tablebox" style="margin-top:5px;width:247px;">Sidebar</div>
<div class="groupbox" style="width:247px;background-color:#FFFFFF;top:120px;bottom:0;left:0px;"></div>
<div class="tablebox" style="margin-top:5px;width:777px;">Main content</div>
<div class="groupbox" style="width:777px;top:120px;bottom:0;left:247px;"></div>
</div>
But again - if you have a choice don't do this! Fixed width will not make your site very pretty on some devices.
<head>
<style>
body {
padding:0;
margin:0;
}
div {
width:25%;
height:25%;
}
div.left {
background-color:red;
float:left;
}
div.right {
background-color:yellow;
float:right;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
</body>
http://jsfiddle.net/8gNDU/2/