I want to make a grid 3x3, but problem is that the height on some of the cells will expand with content.
Apart from those height marked with the red arrows, the rest is fixed px.
I made a 3x3 grid with divs to test:
<div id="container">
<div id="one">1</div> <div id="two">2</div> <div id="three">3</div>
<div id="four">4</div> <div id="five">5</div> <div id="six">6</div>
<div id="seven">7</div> <div id="eight">8</div> <div id="nine">9</div>
</div>
#container {
width: 300px;
margin: 0px auto;
}
#one, #two, #three, #four, #five, #six, #seven, #eight, #nine {
width: 100px;
float: left;
padding: 0px; 0px;
text-align: center;
}
But as soon as I change one height they jump out of place.
Any idea?
It looks to me like you want columns.
A structure like this:
<div class="column-thing">
<div class="left-thing">
<div>A</div>
<div>C</div>
</div>
<div class="right-thing">
<div>B<br>B</div>
<div>D</div>
</div>
</div>
And some absolute positioning:
.column-thing {
position: relative;
}
.left-thing {
left: 0;
position: absolute;
right: 50%;
}
.right-thing {
left: 50%;
position: absolute;
right: 0;
}
Voilà.
You can also use lists (ul/ol, li) (without javascript)
<ul class="list">
<li>
<ul>
<li><div>1<br/>1</div></li>
<li><div>2</div></li>
<li><div>3</div></li>
</ul>
</li>
...
</ul>
http://jsfiddle.net/xKjNG/
If you want to ensure that there's three divs in each row, you need to ensure that there's actually a div enclosing each set of three divs...
Try this:
<style>
#one, #two, #three, #four, #five, #six, #seven, #eight, #nine {
width: 100px;
float: left;
padding: 0px; 0px;
text-align: center;
outline: 1px solid black;
}
.clear_float {
clear: both;
}
</style>
<div id="container">
<div id="one">1</div> <div id="two">2</div> <div id="three">3</div><div class = "clear_float"></div>
<div id="four">4</div> <div id="five">5</div> <div id="six">6</div><div class = "clear_float"></div>
<div id="seven">7</div> <div id="eight">8</div> <div id="nine">9</div><div class = "clear_float"></div>
</div>
I'm taking it that the content shouldn't be table based which is why you don't want to use a table.
But an idea would be to use a faux table:
<div class="table">
<div class="tr">
<div class="td">
</div>
<div class="td">
</div>
</div>
</div>
Then on .table add CSS display:table and on .td add CSS display:table-cell.
The naming convention helps work with the code because you'll be used to working with a table's tags structure.
I made a quick example (needed more work than I thought it would): http://jsfiddle.net/cyv6y/1/
needs tidying up a bit but the concept works.
Related
NB
My Header:
<header>
<div style="float:left;margin-left:20px;">
<div style="float:left; margin-left:10px;margin-top:55px;background-color:#2BC3A7; height:3px; width:200px;"> </div>
<div style="clear:both;float:left;"></div>
<div style="float:left; margin-left:10px;margin-top:5px;font-family:DIN; font-size:12pt;color:#2BC3A7;">Services/Products</div>
</div>
</div>
</header>
I have 2 divs:
<div id="#content1">
<div id="divWelcome" style="margin-top:50px;">
<div id="headerimg" style="position: relative;">
<div style="position: absolute; bottom:255px; left: 20px; width: 550px; font-family:DIN; font-size:23pt; font-weight:600; color: white; letter-spacing:0.01em;">
We offer Cloud solutions for small businesses to help them manage their workflow requirements
</div>
<hr style="height:6px;position: absolute; bottom:210px; left: 20px; width: 490px;"/>
<div style="position: absolute; bottom:175px; left: 20px; width: 550px; font-family:DIN; font-size:14pt; font-weight:500; color: white; letter-spacing:0.01em;">
Our core sectors of expertise are professional services, data management and outsourcing.
</div>
</div>
<div id="divAboutContents" style="margin-top:50px; background-color:red;position: relative;display: none;">
</div>
</div>
</div>
So when the page loads the 1st div shows. The effect I want is when the user presses a button the divFirst gently fades away and the divSecond gently fades in. I have used this bit of jQuery but the affect does not look very pleasing.
<script type="text/javascript">
$(document).ready(function () {
$("#divAbout").click(function () {
$("#headerimg").fadeOut();
$("#divAboutContents").fadeIn();
});
});
</script>
What else can I try/read up on? Thanks
NB
This is part of my CSS
#content1 {
clear: both;
position: absolute;
}
Also I was fading the other one out. just forgot to put it in the question. The affect I get is 'clunky'
'Pleasing' is a very subjective term, however to improve it you could place both div elements within a parent container positioned absolutely so they overlap. You can then fadeToggle() between the two as needed. Something like this:
$('#container').click(function() {
$(this).find('div').fadeToggle();
})
#container > div {
position: absolute;
}
#divSecond {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="container">
<div id="divFirst">some content with images</div>
<div id="divSecond">different content with images</div>
</div>
Click the text to see the fade transition in action.
I'm building a site using fullpage.js and Foundation. I'm trying to vertically center an image inside of a section and I'm having no luck.
I've tried this:
https://css-tricks.com/centering-in-the-unknown/
I think that the issue has something to do with the fp-tableCell div that fullpage.js creates.
<div id="first-section" class="section sTop active">
<div id="first-section-row" class="row inner">
<div id="slide_1_wrapper" class="small-12 medium-6 columns">
<h1 class="title">Hello!</h1>
<h2 class="subtitle">My name is Whatever</h2>
</div>
<div id="main-picture-wrapper" class="small-12 medium-6 columns">
<img id="main-picture" src="img/headshot.jpg" alt="my_picture">
</div>
</div>
</div>
I tried the CSS from the article above with no luck:
#main-picture {
max-height: 400px;
}
#main-picture-wrapper {
display: inline-block;
vertical-align: middle;
}
#slide-1-wrapper {
position: relative;
}
#first-section:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
Screenshot of the rendered html, showing the fp-tableCell
try to add this in html
<div id="page">
<div id="content_container" class="small-12 medium-6 columns">
<div id="main-picture-wrapper">
<img id="main-picture" src="keyboard_search.png" alt="my_picture">
</div>
</div>
</div>
in css
*{ margin:0; padding:0;}
#page{display:table;overflow:hidden;margin:0px auto;}
#content_container{display:table-cell;vertical-align: middle;}
#main-picture-wrapper p{text-align:center;}
html,body{height:100%;}
#page{height:100%;width:100%; max-width:600px; text-align:center;}
.bannerimg{width:100%;max-width:600px;margin:0px auto;}
may help you
By default fullpage.js uses the option verticalCentered:true, so any image you add will be automatically centered unless you change it by using CSS.
You can easily see this in any demo online or in any of the provided examples.
From Michael in the comments:
Try giving the wrapper ID or class position: relative and then the image class or ID position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; - Rough Demo: jsfiddle.net/rrh5c04a
Note: I am unable to edit the HTML, so I have to find a workaround.
HTML:
<div id="container">
<div id="breadcrumbAds">...</div>
<div id="breadcrumbWrapper">...</div>
<div id="containerTopParsys">...</div>
<div id="leftColWrapper" class="column663Wrapper">...</div>
<div id="rightColWrapper" class="rightColumn663Wrapper">...</div>
<div style="clear:both;"></div>
<div id="containerBottomParsys">...</div>
<div style="clear:both;"></div>
<div id="bgpromo">...</div>
<div style="clear:both;">...</div>
<div style="clear:both;"></div>
</div>
The issue is that all of the divs inside #container, EXCEPT for #leftColWrapper and #rightColWrapper, need to be 100% width of #container, but #leftColWrapper and #rightColWrapper need to be stacked next to each other and centered (together) within the 100% #container, with a max-width of 1224px.
I tried utilizing the following jQuery to add a wrapper div around #left... and #right..., but it ended up grabbing the ads in those containers and placing them in the component where the JS for the page is stored.
(function($) {
$("#leftColWrapper, #rightColWrapper").wrapAll("<div class=\"colWrapper\" />");
})(jQuery);
I either need another solution to wrap those two divs together, so that I can set a max-width of 1224px and center them, or I need to know why this jQuery is picking up those ads and duplicating them within the JS component.
#container{
text-align: center;
font-size: 0;
}
#container > div{
outline: 1px solid #333;
display: inline-block;
min-height: 10px;
text-align: left;
width: 100%;
font-size: 14px;
}
#container #leftColWrapper, #container #rightColWrapper{
width: 50%;
max-width: 612px;
}
<div id="container">
<div id="breadcrumbAds">...</div>
<div id="breadcrumbWrapper">...</div>
<div id="containerTopParsys">...</div>
<div id="leftColWrapper" class="column663Wrapper">width: 50%;<br>
max-width: 612px;</div><div id="rightColWrapper" class="rightColumn663Wrapper">width: 50%;<br>
max-width: 612px;</div>
<div style="clear:both;"></div>
<div id="containerBottomParsys">...</div>
<div style="clear:both;"></div>
<div id="bgpromo">...</div>
<div style="clear:both;">...</div>
<div style="clear:both;"></div>
</div>
So I am trying this for one day but I am still not able to do it. I have created a new index page for my website. I have copied code from my previous homepage.
If you see the sliders on the left(first homepage) and on the right(new homepage). You could see that on the new homepage the sliders are behaving abnormally. I can't figure out in my CSS why is this happening.
I have tried this:
<div id="testimonial">
<div id="black_title">
<h1>Bead X Testimonials</h1>
</div>
<div class="bx-wrapper" style="max-width: 100%;">
<div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 232px;">
<ul class="slide_left" style="width: 415%; position: relative; -webkit-transition: 0s; transition: 0s; -webkit-transform: translate3d(-288px, 0px, 0px);">
<li style="float: left; list-style: none; position: relative; width: 248px;" class="bx-clone">
<iframe src="//player.vimeo.com/video/73331040" width="258" height="207" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe> The Bead X Difference
</li>
<li style="float: left; list-style: none; position: relative; width: 248px;">
<img src="images/test_img.png"> The Bead X Difference
</li>
<li style="float: left; list-style: none; position: relative; width: 248px;">
<iframe src="//player.vimeo.com/video/73331040" width="258" height="207" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe> The Bead X Difference
</li>
<li style="float: left; list-style: none; position: relative; width: 248px;" class="bx-clone">
<img src="images/test_img.png"> The Bead X Difference
</li>
</ul>
</div>
<div class="bx-controls bx-has-pager">
<div class="bx-pager bx-default-pager">
<div class="bx-pager-item">1
</div>
<div class="bx-pager-item">2
</div>
</div>
</div>
</div>
<div class="navigation">
<!-- <p><span id="left-prev"></span> <span id="left-next"></span></p> -->
<div id="left-prev">
<a class="bx-prev" href=""><img src="images/slider_prev.png" height="25" width="25"></a>
</div>
<div id="left-next">
<a class="bx-next" href=""><img src="images/slider_next.png" height="25" width="25"></a>
</div>
<div id="read_more"> View all
</div>
</div>
</div>
By abnormally I mean, that the text below the images in the slider is getting overflown and the controls of the slider are messed up.
But the result is still weird. How to resolve this?
Unfortunately there are quite a few issues going on here that you will have to deal with. First it looks like that "Wax Daddys Promise" pane is an image with at Width of 269px yet the column you are trying to align is 275px so it will not fill that area correctly to give you good lines.
The .testimonial class margins are all out of place.
#testimonial {
text-align: center;
width: 95%;
height: 310px;
background: white;
border: 4px solid rgb(209, 209, 209);
margin: 15px 2px 2px 17px;
}
You should use:
margin: 15px 0 0 0;
or better yet:
margin-top: 15px;
And that is just to give yourself a top buffer. If you give the same to each of the testimonial classes or just use class="testimonial" on all of those you'll get the top separation.
That should help a bit. In the future you may want to look into bootstrap, makes grid layout really easy without having to get deep with custom styling. Hope that helps.
You will still need to do a bit of formatting to clean up the layout, but this should help you resolve some of the issues:
Modified CSS:
#read_more { float: right; }
.bx-next, .bx-prev { padding: 0px; }
#left-next, #left-prev { float: left; }
.bx-pager { padding: 0px; position: relative; top: 0; }
Also, add a clear fix after your #read_more and after your .bx-controls DIVs:
<div style="clear: both;"></div>
SOLVED:
After re-reading the w3 spec for transforms, I realised the footer was being considered part of the 3d context due to DOM structure and was being affected by rotated elements. I simply put .cardsContainer inside of another element .cards3dContainer and the footer is now not considered part of the 3d context.
-webkit-perspective:1000px; seems to state that the 3d context begins at that point in the DOM.
Having a major problem with a container that is being rotated using css3 transforms and over-writing part of a buttons hit area in another div.
The transform visually works and the container is leaning back (using rotateX). However, the button in the footer, despite being of a higher z-index and naturally stacked to be above the container, is having its hit area ignored where the rotated container and the button visually overlap. The button still 'appears' to be on top of the rotated container, but acts like it is under it.
I should mention im using Less for the css (and all the Less code does work).
I've looked through lots of similar questions and the various solutions didn't work for me. Amongst those that didn't work (vendor prefixes omitted):
translate3d(0px, 0px, 0px);
transform-style: flat;
Here is the short version of the code:
html:
<div class="screen snap" style="display: block;">
<div class="container">**<!-- has perspective set to 1000 -->**
<div class="cardsContainer"> **<!-- is rotated on x using transform -->**
<div class="card" style="left: 130px; display: block;">
<div class="cardBack"></div>
<div class="cardFront" style="opacity: 0;">
<div class="cardContent">A piece of fruit.</div>
</div>
</div>
</div>
<footer>
**<!-- at certain screen sizes, when the container and footer overlap, top half of this buttons hit area is inactive-->**
<button class="checkButton">Start</button>
</footer>
</div>
</div>
Here are the full length files, look forward to any advice / tips:
.html file:
<div class="screen snap" style="display: block;">
<div class="container">
<div class="cardsContainer">
<div class="card" style="left: 130px; display: block;">
<div class="cardBack"></div>
<div class="cardFront" style="opacity: 0;">
<div class="cardContent">A piece of fruit.</div>
</div>
</div>
<div class="card" style="left: 420px; display: block;">
<div class="cardBack"></div>
<div class="cardFront" style="opacity: 0;">
<div class="cardContent">Paint</div>
</div>
</div>
<div class="card" style="left: 420px; display: none;">
<div class="cardBack"></div>
<div class="cardFront">
<div class="cardContent">Nail</div>
</div>
</div>
<div class="card" style="left: 420px; display: none;">
<div class="cardBack"></div>
<div class="cardFront">
<div class="cardContent">Apple</div>
</div>
</div>
<div class="card" style="left: 420px; display: none;">
<div class="cardBack"></div>
<div class="cardFront">
<div class="cardContent">House</div>
</div>
</div>
</div>
<footer>
<button class="checkButton">Start</button>
</footer>
</div>
</div>
.less file:
.screen.snap .container{
padding: 0;
margin: 0;
border: 0;
left: 0;
right: 0;
bottom: 0;
top: 0;
border-radius: 0;
box-shadow: none;
vertical-align: baseline;
background-color: #efe8b6;
-webkit-perspective:1000px;
.cardsContainer{
position:absolute;
width:800px;
height:350px;
top:100px;
text-align: center;
background-color: lighten(#efe8b6, 10%);
-webkit-transform: rotateX(20deg);
.card {
position: absolute;
width:250px;
height:350px;
border-radius: 10px;
.cardFront{
background-image: url('images/snap_card_front.png');
background-repeat: no-repeat;
width:250px;
height:350px;
position: absolute;
.cardContent{
width:200px;
height:300px;
font-size: 37px;
}
}
.cardBack{
background-image: url('images/snap_card_back.png');
background-repeat: no-repeat;
width:250px;
height:350px;
position: absolute;
}
}
}
}
footer{
z-index:999;
background-color: #f00;
position: relative;
.button{
position:absolute;
width:50px;
height:50px;
background-color: #ccc;
border-radius: 5px;
font-size: 25px;
cursor: pointer;
}
}
After re-reading the w3 spec for transforms, I realised what the problem was.
-webkit-perspective:1000px; seems to state that the 3d context begins at that point in the DOM. I was applying the perspective style to the container which both the footer and the cardsContainer were part of. The footer was then being considered part of the 3d context due to DOM structure and was being affected by rotated elements.
I simply put .cardsContainer inside of another element .cards3dContainer and the footer is now not considered part of the 3d context because it is now not inside the dom structure which has perspective style set.
The new structure is now this:
.screen.snap .container{
.cards3dContainer{
-webkit-perspective:1000px;
.cardsContainer{
}
}
.footer{
}
}
Apologies to anyone who may have been working on an answer at the moment.