I am new to designing websites and I had a question. I am designing the webpage to have 3 columns (fluid layout), and I was wondering how to make it so I can have multiple items in each column? What I am trying to accomplish with this webpage is to embed 9 youtube videos on this webpage, and I want 3 rows, so I need to be able to put 3 stacked over each other in each column. And I'm trying to figure out how to center each video in the columns without using the deprecated center tag.
Thanks
Heres the coding:
http://jsfiddle.net/5Ajt8/
it looks messed up in the preview on that site so if you copy and paste it out and look in the browser it should look normal
Put a table inside one of the columns.
You can try either text-align:center; on the container for each column.
You can also wrap each video in its own div and give that div a margin:0 auto
By declaring margin-left and margin-right as auto you can center
a block element within it's container.
http://jsfiddle.net/L74yt/
Something like this?
http://jsfiddle.net/marvo/NBgKZ/
Structure:
<div class="page">
<div class="column">
<div class="item">Item #1</div>
<div class="item">Item #2</div>
<div class="item">Item #3</div>
</div>
<div class="column">
<div class="item">Item #1</div>
<div class="item">Item #2</div>
<div class="item">Item #3</div>
</div>
<div class="column">
<div class="item">Item #1</div>
<div class="item">Item #2</div>
<div class="item">Item #3</div>
</div>
</div>
Styles:
.page {
width : 640px;
}
.column {
background-color : #e0e0e0;
width : 200px;
float : left;
border : 1px solid black;
}
.item {
background-color : yellow;
width : 100px;
border : 1px dashed red;
margin : 5px auto 5px auto;
}
Related
Forget how to code a div style table.
I haven't coded html in years and am pretty rusty. I'm trying to create a responsive div style table with the first div spans the entire column with 2 more divs next to it. A div with 2 cells on top and a div that spans the 2 cells on bottom.
I'm trying to create something that looks like this image.
<div class="table">
<div class="row">
<div class="cell">cell 1</div>
</div>
<div class="row">
<div class="cell">cell 1</div>
<div class="cell">cell 2</div>
</div>
<div class="row">
<div class="cell colspan">
<div><div>
cell 3
</div></div>
</div>
<div class="cell"></div>
</div>
Use flexbox. By assigning display: flex; to the .table, .row, and .column elements, child elements of each all become flexible and can easily be controlled to take up certain percentages of space within the table, and grow to fill all the available space like a table would.
The flex property takes a little getting used to. Here I used it to tell flex items to grow (the first value, flex-grow), and starting widths (the third value, flex-basis). This resource makes it pretty easy to understand: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
* { box-sizing: border-box; }
.table,
.row,
.column {
display: flex;
}
.column {
flex: 1 0 50%;
flex-direction: column;
}
.first-column {
flex-basis: 33%;
}
.cell {
flex: 1 0 100%;
padding: 20px;
border: 1px solid dodgerblue;
}
.first-row .cell {
border-left: none;
}
.second-row .cell {
border-top: none;
border-left: none;
}
<div class="table">
<div class="column first-column">
<!-- just the one cell in this column -->
<div class="cell">cell 1</div>
</div>
<div class="column">
<!-- need 2 rows here -->
<div class="row first-row">
<!-- first row will have 2 columns -->
<div class="column">
<div class="cell">cell 2</div>
</div>
<div class="column">
<div class="cell">cell 3</div>
</div>
</div>
<div class="row second-row">
<div class="cell">cell 4</div>
</div>
</div>
</div>
This question might be simpler in conditional CSS.
I have five rows with some contents and based on some condition, I'm adding a class named 'previous' to show different background color.
When I hover the previous class content, I'm getting transparent background which is not good.
I wanted to show the same background color (grey) even if it is hovered.
So, I tried the below code and tried to use :has condition in css, If it has previous class, change the hover color to grey. But it didn't worked.
My expectation is to have the same background color even if it is hovered.
Can someone help me on this as I need the solution only from CSS/SCSS. not from javascript.
.previous {
background-color: grey;
}
.row:hover {
background-color: transparent;
:has(.previous) {
background-color: grey;
}
}
<div class="row">Some Content 1</div>
<div class="row previous">Some Content 2</div>
<div class="row">Some Content 3</div>
<div class="row previous">Some Content 4</div>
<div class="row">Some Content 5</div>
You can do this using :not pseudo class to exclude rows with previous class from hover effect. Now :hover will run on every element that has a .row class but doesn't also have .previous class.
.row {
background-color: lightblue;
}
.previous {
background-color: grey;
}
.row:not(.previous):hover {
background: transparent;
}
<div class="row">Some Content 1</div>
<div class="row previous">Some Content 2</div>
<div class="row">Some Content 3</div>
<div class="row previous">Some Content 4</div>
<div class="row">Some Content 5</div>
Why not just change the order of your selectors and add a hover to the previous class too:
.row:hover {
background-color: transparent;
}
.previous,
.previous:hover {
background-color: grey;
}
<div class="row">Some Content 1</div>
<div class="row previous">Some Content 2</div>
<div class="row">Some Content 3</div>
<div class="row previous">Some Content 4</div>
<div class="row">Some Content 5</div>
Also, if you are wanting a row with the class previous, you just combine the selectors: .row.previous
:has is css4 and has very little support: https://developer.mozilla.org/en-US/docs/Web/CSS/:has
Here is a pure css solution.
You could set different styles for the hover when it has the previous class or not.
.row:hover {
background-color: transparent;
}
.row.previous {
background-color: grey;
}
.row.previous:hover {
background-color: #595959; /*any color really*/
}
<div class="row">Some Content 1</div>
<div class="row previous">Some Content 2</div>
<div class="row">Some Content 3</div>
<div class="row previous">Some Content 4</div>
<div class="row">Some Content 5</div>
I don't know if this is possible with flex but what i need is a list with two items side by side and the width per item depends on the content. Like here:
<div class="items">
<div class="item">Item 1 with text</div>
<div class="item">Item 2 with more text</div>
<div class="item">Item 3 with some text</div>
<div class="item">Item 4 without text</div>
<div class="item">Item 5 lorem</div>
<div class="item">Item 6 ipsum</div>
<div class="item">Item 7 with lorem</div>
<div class="item">Item 8 with ipsum</div>
</div>
.items {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.item {
align-self: flex-end;
box-sizing: border-box;
background: #e0ddd5;
color: #171e42;
padding: 10px;
}
.item:nth-child(even) {
background-color: darkgrey;
}
How can i realise that always two items are side by side no matter how many li items i have? There is no outer container that limits the width. I don't want to use float. Is there a flexible solution with grid template columns?
Final result like this (but aligned to the right):
In addition to theAlexandrian's answer, and if you can add an inner wrapper, here is an option, where you use the inner div, displayed as inline-block, for styling, e.g. padding etc.
Since we deal with inline elements, they, like characters, can have a space between them. One way is to take it out using a negative margin, and here is a few more options:
How do I remove the space between inline-block elements?
Note, since the space width is based on the font, the negative margin might need an adjustment.
Stack snippet
.items {
text-align: right;
}
.item {
display: inline;
margin-right: -4px; /* take out inline element space */
}
.item div {
display: inline-block;
background: #e0ddd5;
color: #171e42;
padding: 10px;
}
.item:nth-child(even) div {
background-color: darkgrey;
}
.item:nth-child(even)::after {
content: '\A';
white-space: pre;
}
<div class="items">
<div class="item"><div> Item 1 with text </div></div>
<div class="item"><div> Item 2 with more text </div></div>
<div class="item"><div> Item 3 with some text </div></div>
<div class="item"><div> Item 4 without text </div></div>
<div class="item"><div> Item 5 lorem </div></div>
<div class="item"><div> Item 6 ipsum </div></div>
<div class="item"><div> Item 7 with lorem </div></div>
<div class="item"><div> Item 8 with ipsum </div></div>
</div>
If float is forbidden, I do have a simple solution for you! :)
We will use inline, block, :nth-child and ::after.
There we go:
.item {
display: inline;
}
.item:nth-child(2n)::after {
display: block;
content: '';
}
<div class="items">
<div class="item">Item 1 with text</div>
<div class="item">Item 2 with more text</div>
<div class="item">Item 3 with some text</div>
<div class="item">Item 4 without text</div>
<div class="item">Item 5 lorem</div>
<div class="item">Item 6 ipsum</div>
<div class="item">Item 7 with lorem</div>
<div class="item">Item 8 with ipsum</div>
</div>
Simple, isn't it?
Have you tried css columns?
.items {
columns: 2
}
<div class="items">
<div class="item">Item 1 with text</div>
<div class="item">Item 2 with more text</div>
<div class="item">Item 3 with some text</div>
<div class="item">Item 4 without text</div>
<div class="item">Item 5 lorem</div>
<div class="item">Item 6 ipsum</div>
<div class="item">Item 7 with lorem</div>
<div class="item">Item 8 with ipsum</div>
</div>
How can I place 4 divs next to each other which width's will be calculated automatically (since every resolution of a monitor is different).
So whenever I have 16 divs, the amount shown div's still has to be 4.
I thought of giving a percentage, for each div. But that doesn't seem to be working (which is pretty obvious since every monitor has a different resolution of their screen displaying)
Just add a width using a percentage value (25%) which will put 4 boxes next to each other on each line.
.box {
float: left;
width: 25%;
}
I suggest you use a framework like bootstrap.
But this is the basic requirement you need to show 4 divs in a row...
just ignore the background and the div:nth-child(even) - I added that just so you could see the div areas clearly.
section {
max-width: 960px;
margin: auto;
}
div {
width: 25%;
float: left;
background: cornsilk;
}
div:nth-child(even) {
background: lightgreen;
}
<section>
<div>number 1</div>
<div>number 2</div>
<div>number 3</div>
<div>number 4</div>
<div>number 5</div>
<div>number 6</div>
<div>number 7</div>
<div>number 8</div>
<div>number 9</div>
<div>number 10</div>
<div>number 11</div>
<div>number 12</div>
<div>number 13</div>
<div>number 14</div>
<div>number 15</div>
<div>number 16</div>
</section>
You can better use Bootstrap framework.
for example,
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="searcharea col-md-12">
<div class="col-md-12">
<div class="col-md-3">1</div>
<div class="col-md-3">2</div>
<div class="col-md-3">3</div>
<div class="col-md-3">4</div>
</div>
</body>
</html>
I have created 3 different sets of columns, but I want the ability to style each column differently.
<div id="container">
<div class="first">
<div class="column">Featured Work</div>
<div class="column">info</div>
<div class="column">info</div>
</div>
<div class="middle">
<div class="column">News</div>
<div class="column">middle column</div>
<div class="column">right column</div>
</div>
<div class="footer">
<div class="column">body copy 1</div>
<div class="column">body copy 2</div>
<div class="column">body copy 3</div>
</div>
this is my current code: http://jsfiddle.net/TroyAlford/Cj6dj/2/
I want to style the featured work and news columns with top and bottom boarders and to style the type. The two Info columns along with the middle and Right columns would have full boarder around it.
Would I rename each class to a unique name to achieve this effect?
You can you the :first-child selector - DEMO
#container .first div.column:first-child,
#container .middle div.column:first-child {
border-width: 1px 0;
color: #c00;
}