I have a top tab bar with 4 different tabs. My issue is that due to the fact that the tab titles are not around the same length, they look like they padding is off where the smallest title has a lot of spacing, while everything else is very cramped together (Example of this: https://codepen.io/bigzee/pen/XKLKxG). You can see exactly what I mean when you make the screen browser small (iPhone 5s screen size)
To solve this, I added in left/right spacing (Example here: https://codepen.io/bigzee/pen/OXZXom). However, now when you make the browser small (iPhone 5s screen size) the titles overlap. I tried to use z-index to fix this, but that didn't work. Here's my code with the z-index:
<div class="tabs-striped tabs-top tabs-background-royal" >
<div class="tabs" style="position: relative;">
<a class="bar-royal tab-item" style="color:white; position: relative; z-index: 1;">
<p class="" style="position: relative; left: 5%;">Top</p>
</a>
<a class="bar-royal tab-item" style="color:white; position: relative; z-index: 2;">
<p class="" style="position: relative; right: 15%;">Top tab 2</p>
</a>
<a class="bar-royal tab-item" style="color:white; position: relative; z-index: 3;">
<p class="" style="position: relative; right: 15%;">Top tab 3</p>
</a>
<a class="bar-royal tab-item" style="color:white; position: relative; z-index: 4;">
<p class="" style="position: relative; right: 15%;">Top tab tab 4</p>
</a>
</div>
</div>
I tried using rows/columns as well (https://codepen.io/bigzee/pen/PzAzvK) but it was still didn't look right. The code for the rows/columns is below:
<div class="tabs-striped tabs-top tabs-background-royal" >
<div class="tabs row" style="">
<a class="bar-royal tab-item col col-10" style="color:white; min-width: 40px; margin-left: 2%;">
<p class="" style="">Top</p>
</a>
<a class="bar-royal tab-item col col-30" style="color:white;">
<p class="" style="">Top tab 2</p>
</a>
<a class="bar-royal tab-item col col-30" style="color:white;">
<p class="" style="">Top tab 3</p>
</a>
<a class="bar-royal tab-item col col-30" style="color:white;">
<p class="" style="">Top tab tab 4</p>
</a>
</div>
</div>
Any advice on how I can fix this?
Solution:
http://codepen.io/bigzee/pen/XKLymE
The accepted answer has the solution on how to fix this. I simply added in a media query to set a max font-size so that on smaller screens the font gets smaller.
Use display: inline-block
.container {
width: 320px;
background-color: rgba(0, 0, 0, .1);
height: 100vh;
overflow: hidden;
margin: 0 auto;
}
* {
margin: 0;
padding: 0;
}
.top-menu {
text-align: center;
}
ul {
display: inline-flex;
}
li {
display: inline-block;
}
li {
list-style: none;
border: 1px solid;
padding: 1em;
}
<div class="container">
<div class="top-menu">
<ul>
<li>top</li>
<li>top tab 2</li>
<li>top tab 3</li>
<li>top tab tab 4</li>
</ul>
</div>
</div>
If you want the spacing to be consistent, then leaving the <a> tags on width: auto, applying left and right margins to them, and setting text-align: center on the their container is a good bet.
HTML
<div class="tabs">
<a>Top</a>
<a>Top tab 2</a>
<a>Top tab 3</a>
<a>Top tab tab 4</a>
</div>
CSS
div.tabs {
text-align: center;
}
a {
margin: 0 5%;
}
Here's a JSFiddle that has a group of centered links with consistent spacing.
https://jsfiddle.net/reid_horton/53xfjyob/
The percentage based margins help make this example a little more responsive, but if that's not enough, you could also add some media queries.
Side note: unfortunately, you can't have both consistent width and consistent space. If each link is the same width, then narrower links are going to have more space around them. If each link has the same space around them, then they can't all be the same width.
Related
I want to share the initial visible area of my page between a slideshow and my navbar like the below diagram which will then stick at the top when you scroll down the document. This is where I've run into issues.
I've tried doing something like height: 90vh for my slideshow and height: 10vh for my navbar but I want the website to be dynamic and able to fit to most resolutions until you hit cellphone level or at least like 200% zoom on Microsoft edge wherein another stylesheet will be used.
I've also tried placing them within the same div, setting height: 90% for the slideshow and height: auto for the navbar. This worked best in terms of how dynamic it is but the position: sticky obviously didn't work because it only traverses the height of the parent div.
The one that works best is setting the slideshow height to height: 90vh and allowing the navbar to go accordingly. It kinda sorta works but not nearly good enough for me.
The navbar has to initially be at the bottom then stick to the top. If possible I'd rather have a purely CSS solution, but I am open to javascript. Though I'd rather have pure javascript as opposed to jQuery but if it's well explained I'm okay with it.
The actual question is: How do I make my navbar and my slideshow share the initial visible height dynamically?
Here is all the relevant code:
#container {
display: flex;
flex-direction: column;
height: 100vh;
}
.slideshow-base {
flex-grow: 1;
width: 100%;
margin: 0px;
}
.slideshow-container {
height: 100%;
width: 100%;
position: relative;
overflow: hidden;
}
.Slides {
position: absolute;
transform: translateX(-100%);
transition: transform 2s;
display: inline-block;
width: 100%;
height: 100%;
margin: 0;
}
.Slides-Images {
width: 100%;
height: 100%;
object-fit: cover;
}
.navbar-base {
font-weight: bold;
z-index: 2;
font-variant: small-caps;
height: 100%;
width: auto;
top: 0px;
background-color: rgba(50, 64, 147, 0.9);
display: block;
border-bottom: 1px solid rgb(226, 208, 0);
}
<div id="container">
<!--Slideshow-->
<div class="slideshow-base" style="background-color: rgb(50, 64, 147); height: 90vh">
<div class="slideshow-container">
<div class="Slides">
<img src="~/Images/Slideshow/Gallery-1.jpg" class="Slides-Images">
</div>
<div class="Slides">
<img src="~/Images/Slideshow/Gallery-2.jpg" class="Slides-Images">
</div>
<div class="Slides">
<img src="~/Images/Slideshow/Gallery-3.jpg" class="Slides-Images">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="dot-base">
<span class="dot" onclick="currentSlide(1)">᛫</span>
<span class="dot" onclick="currentSlide(2)">᛫</span>
<span class="dot" onclick="currentSlide(3)">᛫</span>
</div>
</div>
</div>
<hr />
<!--Sticky Navbar-->
<div class="navbar-base" style="width: 100%; height: auto; position: sticky;">
<ul>
<li class="navbar-button" style="display: inline-block;"> #Html.ActionLink("main page", "MainPage", "Home") </li>
<li class="navbar-button" style="display: inline-block;">
#Html.ActionLink("about", "About", "About")
<ul class="navbar-ddmenu">
<li class="navbar-ddcontent" style="display: inline-block;">#Html.ActionLink("academy", "Academy", "About")</li>
<li class="navbar-ddcontent" style="display: inline-block;">#Html.ActionLink("the club", "DKClub", "About")</li>
<li class="navbar-ddcontent" style="display: inline-block;">#Html.ActionLink("taebo", "TaeBo", "About")</li>
<li class="navbar-ddcontent" style="display: inline-block;">#Html.ActionLink("founders and staff", "Staff", "About")</li>
</ul>
</li>
<li class="navbar-button" style="float:right"> #Html.ActionLink("contacts", "Contacts")</li>
<li class="navbar-button" style="float:right"> #Html.ActionLink("gallery", "Gallery")</li>
<li class="navbar-button" style="float:right"> #Html.ActionLink("shop dk", "Index", "Shop")</li>
</ul>
</div>
</div>
Use CSS Grids
body {
margin: 0;
}
#container {
width: 100vw;
background: #ccc;
padding: 10px;
height: 100vh;
display: grid;
grid-template-rows: 90vh 10vh;
grid-gap: 10px;
}
#container>div {
background: #999;
}
<section id="container">
<div>Sticky</div>
<div>NavBar</div>
</section>
Ok, I would use a flexbox approach for your initial view, then a bit of js to add a class on scroll:
window.onscroll = function() {
var nav = document.getElementById('nav');
var scrollTop = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
if (scrollTop > 100) { // not sure how much you want it to scroll before it is made sticky
nav.classList.add("fixed");
} else {
nav.classList.remove("fixed");
}
}
body {
margin:0;
height:200vh; /* just so there is some scrolling */
}
.container {
height:100vh;
display:flex;
flex-direction:column;
}
.slideshow-base {
flex-grow:1; /* this will make shadow base take the rest of the available height to start with */
}
.fixed {
position:fixed;
top:0;
left:0;
right:0;
}
<div class="container">
<div class="slideshow-base" style="background-color: rgb(50, 64, 147); height: 90vh">
<div class="slideshow-container">
<div class="Slides">
<img src="~/Images/Slideshow/Gallery-1.jpg" class="Slides-Images">
</div>
<div class="Slides">
<img src="~/Images/Slideshow/Gallery-2.jpg" class="Slides-Images">
</div>
<div class="Slides">
<img src="~/Images/Slideshow/Gallery-3.jpg" class="Slides-Images">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="dot-base">
<span class="dot" onclick="currentSlide(1)">᛫</span>
<span class="dot" onclick="currentSlide(2)">᛫</span>
<span class="dot" onclick="currentSlide(3)">᛫</span>
</div>
</div>
</div>
<hr />
<!--Sticky Navbar-->
<div id="nav" class="navbar-base">
<ul>
<li class="navbar-button" style="display: inline-block;"> #Html.ActionLink("main page", "MainPage", "Home") </li>
<li class="navbar-button" style="display: inline-block;">
#Html.ActionLink("about", "About", "About")
<ul class="navbar-ddmenu">
<li class="navbar-ddcontent" style="display: inline-block;">#Html.ActionLink("academy", "Academy", "About")</li>
<li class="navbar-ddcontent" style="display: inline-block;">#Html.ActionLink("the club", "DKClub", "About")</li>
<li class="navbar-ddcontent" style="display: inline-block;">#Html.ActionLink("taebo", "TaeBo", "About")</li>
<li class="navbar-ddcontent" style="display: inline-block;">#Html.ActionLink("founders and staff", "Staff", "About")</li>
</ul>
</li>
<li class="navbar-button" style="float:right"> #Html.ActionLink("contacts", "Contacts")</li>
<li class="navbar-button" style="float:right"> #Html.ActionLink("gallery", "Gallery")</li>
<li class="navbar-button" style="float:right"> #Html.ActionLink("shop dk", "Index", "Shop")</li>
</ul>
</div>
</div>
You can probably wrap those 2 elements in a wrapper (and optionally give it a height) and use flexbox to make them share space.
In the example below, the slideshow will always cover 90% of the wrapper's height and nav will cover 10% of it.
.slideshow,
.nav {
border: 2px solid #000
}
.wrapper {
display: flex;
flex-direction: column;
height: 90vh
}
.nav {
/* An arbitrary value to start with */
flex-grow: 1;
}
.slideshow {
/* Grow this element 9 times more than the other element. */
flex-grow: 9;
}
<div class="wrapper">
<div class="slideshow">
Slideshow content
</div>
<nav class="nav">
Navigation content
</nav>
</div>
I have a video iframe that expands when clicking a button. This is contained inside of a header for the page which has 100vh height (full screen). When the video expands, it pushes the rest of the content in the header up in order to have everything vertically centred within the header. Instead, I would like to increase the height of the header div beyond 100vh to 100vh plus the video height. However, the code I have so far isn't working.
LINK TO PAGE
$(document).ready(function(){
$(".video" ).click(function() {
$(".header").height("+=315");
document.getElementById("video__player").style.maxHeight = "50vw";
document.getElementById("video-btn").style.display = "none";
});
});
.header {height: 100vh; width: 100vw;}
.header__content {height: calc(100vh); width: 100%; display: flex; display: -webkit-flex;}
.header__content--container {margin: auto; display: flex; display: -webkit-flex; flex-direction: column; -webkit-flex-direction: column;}
.video__container {text-align: center;}
.video {color: gray; width: 100%; height: auto;}
.play-btn {width: 20px; height: 20px; vertical-align: middle;}
.video__player {overflow: hidden; width: 300px; max-height: 0px; transition: max-height 0.5s ease-in-out; -webkit-transition: max-height 0.5s ease-in-out; margin: auto;}
<div class="header" id="header">
<div class="header__menu">
<div class="header__menu--left">
<div class="logo">
<img class="logo__full img__full" src="assets/kbd-logo-english.svg">
<img class="logo__mobile img__full" src="assets/kbd-logo-mobile.svg">
</div>
</div>
<div class="header__menu--right">
<div class="phone">
<h9 class="strong" style="color: #5CBDE1;">1-855-636-0002</h9>
</div>
<a class="quote menu__quote clickable" href="https://pt.atrium-uw.com/Quote?Id=81" style="margin: 0;">
<h8 class="strong" style="margin: auto;">Get your quote</h6>
</a>
<div class="language">
<h9 class="clickable strong" style="color: #5CBDE1;">FR</h9>
</div>
</div>
</div>
<div class="header__content">
<div class="header__content--container animatedParent animateOnce">
<h1>Hi, we're KBD Insurance.</h1>
<br>
<h2 class="text__center">Life is chaotic. Insurance doesn't have to be.</h2>
<br><br>
<div class="quote__wrapper header__quote--wrapper">
<a class="quote menu__quote clickable animated fadeInDownShort slow" href="https://pt.atrium-uw.com/Quote?Id=81" style="margin: 0; height: 60px;">
<h8 class="strong" style="margin: auto;">Get your quote</h6>
</a>
</div>
<br><br>
<div class="video__container animated fadeInDownShort slow">
<a class="h6 video clickable" id="video-btn">Watch the video <img class="play-btn" src="assets/kbd-icon-play.svg"></a>
</div>
<div class="video__player" id="video__player">
<iframe src="https://www.youtube.com/embed/SIaFtAKnqBU" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
The margin of .header__content--container is currently set to auto. Change the margin to some hard-coded value like, for example, 300px, and it works like you want it to.
EDIT: the requested function
function setMarginTop() {
const $header = $(".header__content--container");
const marginTop = $header.css("margin-top");
$header.css("margin-top", marginTop);
}
I have a site I'm working on where I have a nav bar in a div at the top of the page followed by a separate div which contains an image directly below it.
I'm trying to figure out the best way to change the image by hovering over each part of the nav bar.
Basically I want an image for home to show up when the home nav feature is hovered and so on with the rest of the menu.
UPDATE:
As I tried to explain before (not as clear as I could have) I want to make each nav bar element (Home, Downloads, etc.) show a different image in the div below it. Here is the section of code for the two elements.
<li class="active">Home</li>
<li >About</li>
<li >Mods</li>
<li>Forums</li>
<li >Downloads</li>
<li>Blog</li>
</ul>
</div>
</nav>
<div class="parallax-container">
<div class="container" style="background: rgb(55,71,79); width:960px; padding-top: 10px; padding-left: 50px; border: 2px; border-radius: 50px;">
<div class="row">
<div class="hover-image white-text col s12 l6">
<img src="homeimage.png" class="hover image" style="height:auto; width:auto; max-width: 860px; max-height: 860px;"/>
<h5 class="hover-header" style="padding-left: 20px;">Home</h2>
<p class="hover-paragraph" style="padding-left: 25px;">Welcome to the page!</p>
</div>
</div>
</div>
<div class="parallax"><img src="/img/image.png"></div>
</div>
<style>
.hover-image {
position: relative;
width: 100%;
margin: auto;
}
.hover-header {
position: absolute;
top: 350px;
left: 10;
width: 100%;
}
.hover-paragraph {
position: absolute;
top: 380px;
width: 100%;
}
</style>
Page Layout
Try CSS something like this;
.nav:hover .image{
background-image: url('path/to/image.ext');
}
If you can share your code, I can be more specific.
try this code -
CSS -
#navImage img{
display:block;
width:500px;
height:auto;
}
#myNav{
list-style-type: none;
}
#myNav li {
display: inline;
padding: 10px;
}
#myNav li a:hover {
color:#00ffff;
}
#navImage img{
display:none;
}
HTML
<ul id="myNav">
<li>Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<div id="navImage">
<img src="img_chania.jpg" alt="Chania">
<img src="img_chania2.jpg" alt="Chania">
<img src="img_flower.jpg" alt="Flower">
<img src="img_flower2.jpg" alt="Flower">
</div>
JS to initialize (with jQuery) -
$("#myNav li a").on('mouseover', function(){
$("#navImage img").hide().eq($(this).closest('li').index()).show();
});
Please note, if you are working on responsive design(using bootstrap navigation), you need to do changes accordingly.
jsfiddle - https://jsfiddle.net/guruling/k2zgot5r/
.myButtonLink {
display: block;
width: 100px;
height: 100px;
background: url('/path/to/myImage.png') bottom;
text-indent: -99999px;
}
.myButtonLink:hover {
background-position: 0 0;
}
<a class="myButtonLink" href="#LinkURL">Leaf</a>
Do you want something like this. Please check this link:-http://kyleschaeffer.com/development/pure-css-image-hover/
I have set up 3 divs, one on the left and two on the right on top of each other.
I want the 'onclick' to make the div on the left slide out from the left
and one of divs on the right-top to go up and the one on the right-bottom to slide in from the right.
After that animations are finished I want the next time I press the 'onclick' button to do the same to the next divs (with different content) to come in from the points the previous divs came.
I've managed to change the background color of the div's but not the content and animations.
This is what I've gotten so far.
$(document).ready(function(){
$('#next').click(function(){
if ($('.active').next('.case').length) {
$('.active').removeClass('active')
.next('.case')
.addClass('active');
}
});
$('#prev').click(function(){
if ($('.active').prev('.case').length) {
$('.active').removeClass('active')
.prev('.case')
.addClass('active');
}
});
});
html,body,section{
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
}
#next,#prev{
position:fixed;
z-index:101;
}
#next{
right:0px;
}
#prev{
left:0px;
}
#t1{
float:left;
height:100%;
width:43%;
background-color: #c92639;
position: absolute;
left: 0px;
}
#logo >h1{
color: white;
}
#logo >h3{
width: 58%;
margin: 0 auto;
}
#t2,#t3{
height: 50%;
width: 57%;
margin-left: auto;
margin-right: 0px;
}
#t3{
position: absolute;
right: 0px;
bottom: 0px;
background-color: #c8c8c8;
}
#t2{
background-color: white;
position: absolute;
right: 0px;
top: 0px;
}
#t2 >img{
margin-top: 11%;
}
#logo{
margin-top: 40%;
}
#t3>ul{
display: inline-table;
width: 80%;
margin: 0 auto;
margin-top: 50px;
}
#t3>ul>li{
display: inline-table;
width: 33%;
}
#t3>ul>li>div>img{
width: 53%;
margin-top: 25%;
}
#home{
display: none !important;
}
#circle1,#circle2,#circle3{
border-radius: 128px;
width: 150px;
height: 150px;
margin: 0 auto;
box-shadow: 10px 10px 5px #888888;
}
#circle1{
background: #32325f;
}
#circle2{
background: white;
}
#circle3{
background: #ef9d34;
}
.active{
display:initial !important;
z-index:100;
}
#case{
display:none;
position:absolute;
top:0px;
height: 100%;
width: 100%;
z-index:99;
}
.stern1{
background:blue;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="next">
<h1>next</h1>
</div>
<div id="prev">
<h1>prev</h1>
</div>
<div id="case" class="case active">
<div id="t1" class="tcee1">
<div id="logo"><img src="img/cee.png" id="cee">
<div id="underline"></div>
<br>
<h1>BRINGING AN OFFLINE ENCOUNTER TO AN ONLINE RELATION</h1><br>
<h3>Every day Cee-Platform helps their customers to build a bridge between their offline and online marketing challenges.</h3>
</div>
</div>
<div id="t2" class="case tcee2">
<img src="img/ceedev.png">
</div>
<div id="t3" class="tcee3">
<ul>
<li>
<div id="circle1">
<img src="img/computer.png">
</div>
<br>
<div id="underline"></div>
<h2>Responsiv</h2><br>
<p>My expierences with developing websites has learned me to make them structualy responsive from the ground up making it accesible for all platforms</p>
</li>
<li>
<div id="circle2">
<img src="img/g.png">
</div>
<br>
<div id="underline"></div>
<h2>SEO</h2><br>
<p>Optimizing your website to result with high results on googles googles list</p>
</li>
<li>
<div id="circle3">
<img src="img/hand.png">
</div>
<br>
<div id="underline"></div>
<h2>Storytelling</h2><br>
<p>With every website you want to tell a story, it doens't matter if you want to tell your visitor how aswesome your compeny or how important your goal is. I'll make it the best one out there</p>
</li>
</ul>
</div>
</div>
<div id="case" class="case">
<div id="t1" class="tstern1" style="background:blue;">
<div id="logo"><img src="img/cee.png" id="cee">
<div id="underline"></div>
<br>
<h1>BRINGING AN OFFLINE ENCOUNTER TO AN ONLINE RELATION</h1><br>
<h3>Every day Cee-Platform helps their customers to build a bridge between their offline and online marketing challenges.</h3>
</div>
</div>
<div id="t2" class="tstern2">
<img src="img/ceedev.png">
</div>
<div id="t3" class="tstern3">
<ul>
<li>
<div id="circle1">
<img src="img/computer.png">
</div>
<br>
<div id="underline"></div>
<h2>Responsiv</h2><br>
<p>My expierences with developing websites has learned me to make them structualy responsive from the ground up making it accesible for all platforms</p>
</li>
<li>
<div id="circle2">
<img src="img/g.png">
</div>
<br>
<div id="underline"></div>
<h2>SEO</h2><br>
<p>Optimizing your website to result with high results on googles googles list</p>
</li>
<li>
<div id="circle3">
<img src="img/hand.png">
</div>
<br>
<div id="underline"></div>
<h2>Storytelling</h2><br>
<p>With every website you want to tell a story, it doens't matter if you want to tell your visitor how aswesome your compeny or how important your goal is. I'll make it the best one out there</p>
</li>
</ul>
</div>
</div>
<div id="case" class="case">
<div id="t1" class="tstern1" style="background:black;">
<div id="logo"><img src="img/cee.png" id="cee">
<div id="underline"></div>
<br>
<h1>BRINGING AN OFFLINE ENCOUNTER TO AN ONLINE RELATION</h1><br>
<h3>Every day Cee-Platform helps their customers to build a bridge between their offline and online marketing challenges.</h3>
</div>
</div>
<div id="t2" class="tstern2">
<img src="img/ceedev.png">
</div>
<div id="t3" class="tstern3">
<ul>
<li>
<div id="circle1">
<img src="img/computer.png">
</div>
<br>
<div id="underline"></div>
<h2>Responsiv</h2><br>
<p>My expierences with developing websites has learned me to make them structualy responsive from the ground up making it accesible for all platforms</p>
</li>
<li>
<div id="circle2">
<img src="img/g.png">
</div>
<br>
<div id="underline"></div>
<h2>SEO</h2><br>
<p>Optimizing your website to result with high results on googles googles list</p>
</li>
<li>
<div id="circle3">
<img src="img/hand.png">
</div>
<br>
<div id="underline"></div>
<h2>Storytelling</h2><br>
<p>With every website you want to tell a story, it doens't matter if you want to tell your visitor how aswesome your compeny or how important your goal is. I'll make it the best one out there</p>
</li>
</ul>
</div>
</div>
have a look at this simple tutorial, its worked fine for me and you can add / improve it as well.
simple javascript slideshow
I have a set of 1-4 divs sitting vertically inside of a <section>. There are 4 buttons which decide how many divs will be invoked. I need the divs to expand to a proportional size, side by side, when they are instantiated. Here is some HTML and CSS code which relate to this.
First the HTML5 markup...
<section id="main">
<div id="resultContainer">
<section id="i0" class="wDay">
<h2>
<span class="day" ></span>
<span class="temp" ></span>
</h2>
<img src="">
<span class="wDescript" style="color:#2050ff;word-break:break-all;"></span>
<span class="wind" ></span><br/>
<span class="humid" ></span>
<span class="other1" ></span>
<span class="other2" ></span>
</section>
<section id="i1" class="wDay">
<h2>
<span class="day"></span>
<span class="temp"> </span>
</h2>
<img src="">
<span class="wDescript" style="color:#2050ff;word-break:break-all;"></span>
<span class="wind" ></span><br/>
<span class="humid"></span>
<span class="other1"></span>
<span class="other2"></span>
</section>
<section id="i2" class="wDay">
<h2>
<span class="day" ></span>
<span class="temp" </span>
</h2>
<img src="">
<span class="wDescript" style="color:#2050ff;word-break:break-all;"></span>
<span class="wind"></span><br/>
<span class="humid"></span>
<span class="other1"></span>
<span class="other2"></span>
</section>
<section id="i3" class="wDay">
<h2>
<span class="day"></span>
<span class="temp"></span>
</h2>
<img src="">
<span class="wDescript" style="color:#2050ff;word-break:break-all;"></span>
<span class="wind"></span><br/>
<span class="humid"></span>
<span class="other1"></span>
<span class="other2"></span>
</section>
</div>
</section>
And the CSS:
#main {
filter: none;
position: relative;
top: 20px;
height: 400px;
-webkit-background-color: rgba(72, 72, 72, 0.2);
background-color: rgba(72, 72, 72, 0.2);
/*background-color: #484848;*/
width: 460px;
margin: 0 auto;
-webkit-border-radius: 5px;
-webkit-border: 1px solid #a1a1a1;
border-radius: 5px;
border: 1px solid #a1a1a1;
}
TIA
Dennis
Since Legacy support was required and I had trouble even with the use of a table, I improvised a non-CSS only solution. Clicking on the buttons 1-4 gives me the divisor (nDays) and I used it to divide the width of the container, which gave me the correct width for each div which houses the forecast day div.
dayWidth = parseInt(420/nDays);
$('#i'+i).css('width',dayWidth);
$('#i'+i).css('display','inline-block');
Works great, without all the convolutions of trying to make CSS do it automatically.
And here is the result.
Edit: I missed the bit about legacy support being required, making this answer not quite appropriate.
CSS solution:
#resultContainer{
table-layout: fixed; /* Stops cell widths varying depending on content */
}
.wDay{
display:table-cell; /* Display as table cell. */
width: 1%; /* Needs some width to start with */
text-align: center; /* centres cell content and balances "table" margins */
}
There's no need to put a display: table; in the parent div but you could to make it clearer.
Need to check different browsers!
please try this one in css
.wDay{
float: left;
margin: 5px;
}