how to change margin when the image width changes?

i have a fixed header and when i resize the browser window the logo on the header resizes and now i want to change the margin of the logo when the image is resized how do i do that?

this is the jquery that i use to resize the image

$(window).on('load resize', function() {

    var maxsize = 2560;
    var screenwidth = $(this).width();
    var factor = 0.27*screenwidth-(maxsize-screenwidth)*0.05;
    if (factor > 2560) factor = 2560;

    $('#logo').css('width', factor)
  });
});

CSS:
#logo{
        margin-top:5px;
        margin-left:10px;
        float:left;
        cursor: pointer;
        display:block;
        min-width:220px;
        height: auto;
        width: auto\9; /* ie8 */
}

Css element Max-Size

What is major differences in using these css rules

div{width:100px; overflow:hidden;}

And

div{max-width:100px; overflow:hidden!important;}

Is there going to be any cross-compatibility Issues.

css media queries, one or many for mobile optimization

I know that using media queries the mobile first way should make the website faster on mobile devices. I wonder if there is a difference in using a lot of media queries, like this:

#first {}

@media screen and (min-width: 37.5em) {
    #first {}
}

#second {}

@media screen and (min-width: 37.5em) {
    #second {}
}

instead of using one big one for all the desktop styles, like this:

#first {}

#second {}

@media screen and (min-width: 37.5em) {
    #first {}

    #second {}
}

Which is better, for the performance, or does it matter? I think that the first approach is more easy to read when dealing with lots of styles.

Move DIV to Right form Bottom with relative to Top DIV

I have following Scenario

http://ift.tt/1HDFdZj

<div class="wrapper">
<div id="first_div">first div</div>
<div id="second_div">second div</div>
<div id="third_div">third div</div>    
</div>

I want third div to be next to first div, first and second would be in same column, if right space is not available, i.e. on mobile, third div would float to bottom.

Current CSS that is applied goes as

.wrapper{
widht:250px;
}
#first_div {
background: yellow;
height: 200px; 
width:100px;
float:left;
}

#second_div {
background: cyan;
height: 300px;
width:100px;
clear:left;    
}
#third_div{
width:100px;
float:left;
background:blue;
}

SEO Impact of Bootstraps visible - lg/md/sm/xs - classes

I was wondering if anyone knows about the SEO impact of using bootstraps visible classes for creating a responsive website? I have created a new website with Bootstrap using these classes. On most of the pages the main content is on the left and then there are a number of links on the right side of the page. My structure is like this:

<div class="row">
    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
        //Main content here on left of page
    </div>

    <div class="col-lg-6 col-md-6 visible-lg visible-md">
        //Content on right of page for large and medium devices
    </div>

    <!--SMALL STARTS HERE-->      
    <div class="col-sm-12 visible-sm">
        //Same content on right of page for small devices
    </div>

    <!--EXTRA SMALL STARTS HERE-->    
    <div class="col-xs-12 visible-xs">
        //Same content on right of page for extra-small devices
    </div>
</div>

So my question is if this is a bad idea or not? I am worried that Google/Bing/Yahoo will see this as duplicate content on my pages and penalise me for it. Is this an issue I should be worried about? Thanks.

Adjust parent DIV height to inner content (RSS feeds)

I'm embedding a RSS feed into my html site using the Google Feed API. I tried to make the parent-DIV adjust its height with jquery:

function setHeightParent() {
                $("#Parent").height($("#feed").height() + 200);
                }

This results in a parent-DIV with a height of 200 px. I think the height is calculated before the "feed" div has any content therefore no height.. What am I doing wrong, how can I make it take the height of the final "feed" div?

Navigation bar made of images

I have five different images being used as buttons for my website's navigation. I want them to be inline horizontally and centred in the browser window. They looked fine until I added code to have text appear under each button when hovering over each image. The buttons are now all aligned vertically in the middle of the window.

In html file:

   <div class="nav">
        <div class="container">
            <ul>
            <div class="about">
            <li><input type="image" src="image.png" id="aboutPage" onClick = 'aboutPage()'/></li>
            <p class = "text1"> About </p>
            </div>

            <div class="resume">
            <li><input type="image" src="image.png" id="resumePage" onClick = 'resumePage()'/></li>
            <p class = "text2"> Resume </p>
            </div>

            <div class="home">
            <li><input type="image" src="image.png" id="homePage" onClick = 'homePage()'/></li>
            <p class = "text3"> Home </p>
            </div>

            <div class="portfolio">
            <li><input type="image" src="image.png" id="portfolioPage" onClick = 'portfolioPage()'/></li>
            <p class = "text4"> Portfolio </p>
            </div>

            <div class="contact">
            <li><input type="image" src="image.png" id="contactPage" onClick = 'contactPage()'/></li>
            <p class = "text5"> Contact </p>
            </div>
        </ul>
        </div>

In CSS file:

.nav {
  position: absolute;
  bottom: 0%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.nav .container {
   font-size: 12px;
  font-family: 'Shift', sans-serif;
  color: #5a5a5a;
  font-weight: lighter;
}

.nav .container ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.nav .container li {
  display: inline;
}

The following is a sample of the hover code for each image:

.nav .container .about .text1 {
   position:relative;
   bottom:0px;
   text-align: center;
   visibility: hidden;
}

.nav .container .about:hover .text1{
   visibility: visible;
}

Any help would be much appreciated! Thank you.

Safari is not showing a webpage

The webpage is not showing in Safari, but all other browsers are rendering it properly like --> Firefox, Chrome (I am not counting IE, I need not check it in IE). I just want the reason why the webpage is not being shown in Safari. What may be the possible reason?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ift.tt/kkyg93">
<html xmlns="http://ift.tt/lH0Osb">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>One-Great-Thing</title>

<style>
body {
    margin: 0;
    padding: 0;
    font-size: 62.5%;
}

#image-slider {
    position: relative;
}

#image-slider > div {
    overflow: hidden;
}

#container {
    position: relative;
    overflow: hidden;
}
#container .content{
    position: absolute;
    top: 10%;
    left: 0;
    color: #000;
    text-align: center;
    width: 100%;
    font-size: 6em;
    padding: 80px 0px;
    font-weight: bold;
    background: rgba(255,255,255,0.6);
    text-shadow: 3px 3px rgba(255, 255, 255, 0.5);
    text-decoration: none;
}
#container .content a{
    color: #000;
        font-family: 'myriad-std-tilt', sans-serif;
    text-decoration: none;
    font-size: 18px;
}

#container .content a.round img:hover{
 border: 3px solid #003366;
 border-radius: 50%;
}

</style>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function() {

    // IE detect
    function iedetect(v) {

        var r = RegExp('msie' + (!isNaN(v) ? ('\\s' + v) : ''), 'i');
        return r.test(navigator.userAgent);

    }

    // For mobile screens, just show an image called 'poster.jpg'. Mobile
    // screens don't support autoplaying videos, or for IE.
    if(screen.width < 800 || iedetect(8) || iedetect(7) || 'ontouchstart' in window) {

        (adjSize = function() { // Create function called adjSize

            $width = $(window).width(); // Width of the screen
            $height = $(window).height(); // Height of the screen

            // Resize image accordingly
            $('#container').css({
                'background' : 'url(ogt.png)', 
                'background-size' : 'cover', 
                'width' : $width+'px', 
                'height' : $height+'px'
            });

            // Hide video
            $('video').hide();

        })(); // Run instantly

        // Run on resize too
        $(window).resize(adjSize);
    }
    else {

        // Wait until the video meta data has loaded
        $('#container video').on('loadedmetadata', function() {

            var $width, $height, // Width and height of screen
                $vidwidth = this.videoWidth, // Width of video (actual width)
                $vidheight = this.videoHeight, // Height of video (actual height)
                $aspectRatio = $vidwidth / $vidheight; // The ratio the video's height and width are in

            (adjSize = function() { // Create function called adjSize

                $width = $(window).width(); // Width of the screen
                $height = $(window).height(); // Height of the screen

                $boxRatio = $width / $height; // The ratio the screen is in

                $adjRatio = $aspectRatio / $boxRatio; // The ratio of the video divided by the screen size

                // Set the container to be the width and height of the screen
                $('#container').css({'width' : $width+'px', 'height' : $height+'px'}); 

                if($boxRatio < $aspectRatio) { // If the screen ratio is less than the aspect ratio..
                    // Set the width of the video to the screen size multiplied by $adjRatio
                    $vid = $('#container video').css({'width' : $width*$adjRatio+'px'}); 
                } else {
                    // Else just set the video to the width of the screen/container
                    $vid = $('#container video').css({'width' : $width+'px'});
                }

            })(); // Run function immediately

            // Run function also on window resize.
            $(window).resize(adjSize);

        });
    }

});
</script>
</head>

<body>
<div id="container">
    <video autoplay loop muted style="width: 100%;" poster="ogt.png">
        <source src="OGT-home.ogv" type="video/ogg" />
        <source src="OGT-home.mp4" type="video/mp4">
        <source src="OGT-home.webm" type="video/webm">
    </video>
    <div class="content">
    <a class="round" href="index2.html"><img src="128x128.png"></a><br /><br />
    <a class="ytube" href="http://ift.tt/1DKIXm0">Watch Us On <br /><img src="images/ytube.png" /></a><br /><br />
        <a href="index2.html"> Enter Into The Website</a>
    </div>
</div>

</body>
</html>

Above is the code of the page . BTW the image files and video files needed I am not providing here, but I am assuring all the links are perfect as checked in Firefox and Chrome.

Another thing I want to mention, I found that if I remove the absolute position attribute of the content block, then It's showing the content block perfectly in Safari(though video is not showing, may be I found somewhere the HTML5 autoplay doesn't work on Safari).

Please provide me a solution for Safari.

CSS background photo and scrolling not working properly on ios (safari) and other mobile devices

I'm trying to make a website mobile compatible and I'm struggling with the page scrolling mechanism (which the client doesn't want me to change). Here's a link to a simple page that shows the feature I'm struggling with: http://ift.tt/1brSlV3

If you view it on a laptop or desktop, it works as expected i.e. the images remain fixed while the blue & black divs slide over the images. The images also change as expected. I'm not sure how to get it to work on mobile devices.

• Android devices: As tested with chrome browser on these devices, it works decently (and I can live with this). Instead of the images maintaining a fixed position, they scroll with the divs. So you simply see photos before and after the appropriate divs (instead of the divs sliding over the images).

• Iphone & Ipad: On these devices (viewed with a Safari browser), it simply looks atrocious and I need to fix this. The images end up in seemingly weird positions and with strange sizes. Pls note that it works well on Safari on mac. I'll try to get a screenshot from iphone asap. Perhaps someone can figure this out by simply looking at the code or visiting that URL with an ios device.

Here's the code on jsfiddle: http://ift.tt/1bECP8P

<!DOCTYPE html>
<html>
  <head>
    <style>
      .pic {
        width:800px;
        height:600px;
        margin: 0px auto;
        background-position-x: 50%;
        background-position-y: 0%;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        position:relative;
      }

      #pic1 {
        background: url('http://ift.tt/1brSjfV') no-repeat center center fixed; 
      }

      #pic2 {
        background: url('http://ift.tt/1bECNhf') no-repeat center center fixed;
      }

      .page {
        width:800px;
        height:400px;
        margin: 0px auto;
      }

      .blue {
        background-color: blue;
      }

      .black {
        background-color: black;
      }
    </style>
  </head>

  <body>
    <div class="page black"></div>
    <div class="pic" id="pic1"></div>
    <div class="page blue"></div>
    <div class="pic" id="pic2"></div>
    <div class="page blue"></div>
    <div class="page black"></div>  
  </body>
</html>

Confused about setting width for jquery dropdown

With help from tutorials I have produced this code shown below. Where I have got stuck is that I don't want it to be 100% width. I only want the button to have 20px padding either side of the text. Then I want the dropdown that comes up to take up whatever width it needs to with 20px either side of the max width too.

Can anyone help me do this? I tried assigning padding: 20px to the ul but it didn't work.

$(function () {
    $('.click-nav > ul').toggleClass('no-js js');
    $('.click-nav .js ul').hide();
    $('.click-nav .js').click(function (e) {
        $('.click-nav .js ul').toggle();
        $('.clicker').toggleClass('active');
        e.stopPropagation();
    });
    $(document).click(function () {
        if ($('.click-nav .js ul').is(':visible')) {
            $('.click-nav .js ul', this).slideUp();
            $('.clicker').removeClass('active');
        }
    });
});

* {margin: 0; padding: 0;}
.click-nav ul {
    position:relative;
}
.click-nav ul li {
    position:relative;
    list-style:none;
    cursor:pointer;
}
.click-nav ul li ul {
    position:absolute;
    left:0;
    right:0;
}
.click-nav ul .clicker {
    position:relative;
    color:black;
}
.click-nav ul .clicker:hover, .click-nav ul .active {
    background:#196F9A;
}
.click-nav ul li a {
    display:block;
    padding:8px 10px;
    background:#FFF;
    color:#333;
    text-decoration:none;
}
.click-nav ul li a:hover {
    background:#F2F2F2;
}
/* Fallbacks */
 .click-nav .no-js ul {
    display:none;
}
.click-nav .no-js:hover ul {
    display:block;
}

<script src="http://ift.tt/1q8wkLp"></script>
<div class="click-nav">
    <ul class="no-js">
    <li> <a href="#" class="clicker">Any Time</a>

        <ul>
            <li><a href="#">Any Time</a>
            </li>
            <li><a href="#">Past 3 days</a>
            </li>
            <li><a href="#">Past 5 days</a>
            </li>
        </ul>
    </li>
</ul>
</div>

scroll page then at certian position scroll element

I am at a bit of a loss for how how to do this.

I have a web page. I want a user to scroll down, then at a specific distance from the top I want the mouse scroll to effect an elements position (making it appear as thought that element is scrolling). then when that element hits a position (ie top: -500) I want the scroll to apply to the main webpage again. Any thoughts on how I can do this?

Im working on a fiddle now but not having any luck, I will post when I have something to show

Edit: The beginning of a solution/sudo code http://ift.tt/1bEDvv9

Attached is an image of one area in which I am applying this.

//pageFeature.style.backgroundPosition = "0px " + parseInt(-y / 6) + 'px'); 

var element = document.getElementById('container').getBoundingClientRect();
var elementTop = element.top //distance from top 720;

// variable to stop function from being replayed on scroll when scrolling image
var isScrollingImage = false;

// disables scroll on body
var disableScroll = function() {
    document.body.style.overflow='hidden';
}
// enables scroll on body
var enableScroll = function() {
    document.body.style.overflow='auto';
}
//change position of background along y axis with scroll
var scrollImage = function() {
    console.log("called");
   isScrollingImage = true;
   var pageFeature = document.getElementById("inner");
   var pageFeaturePosition;
   pageFeature.style.backgroundPositionY=parseInt(-scrollY / 10) + "px";
    //if (background is scrolled to bottom) {
    //    enableScroll();
    // }
}

//when element gets to center of viewport and animation is scroll is not on element
//call scrollImage()
function checkPosition() {
    if (scrollY > 720 && !isScrollingImage) {
        disableScroll();
        scrollImage();
    }
    //isScrollingImage = false;
}

//once out of view port will have to bring the image back down, 
//scroll image will only happen on the way down

document.addEventListener('scroll', checkPosition);

Move first div below second div via CSS only

I have 2 divs inside a container like this:

<div id="container">
   <div id="first">Hello World</div>
   <div id="second">I want to be at the top</div>
</div>

I want to align the first div below the second div without changing the HTML. How is this possible?

Here is my CSS:

#container {
    float:left;
    width:100%;
}

#first {
    float:left;
    width:100%;
    height:200px;
}

#second {
    float:left;
    height:200px;
    width:100%;
}

I am aware I can set position:fixed to #second and align it to the top but is there any other way to achieve this?

Here is a jsFiddle.

Scroll to div then fix it to top of page

I currently have a div (#sticky) within the right bar of my page and would like to fix it to the top of the page once I scroll to it. The div (#sticky) I want fixed to the top of the page sits about 1000px down the page.

HTML:

<div id="right-bar">
  <div id="sticky-anchor"></div>
  <div id="sticky"></div>
</div>

CSS:

#right-bar {
  display: inline-block;
  float: left;
  width: 336px;
  height: 10000px;
  margin-left: 15px;
}

#sticky {
  display: block;
  width: 334px;
  height: 600px;
  background-color: white;
  border: 1px solid #e5e5e5;
  margin-top: 15px;
}

#sticky .stick {
  position: fixed;
  top: 0;
  z-index: 10000;
}

JAVASCRIPT: (within head tags)

<script>
  function sticky_relocate() {
  var window_top = $(window).scrollTop();
  var div_top = $('#sticky-anchor').offset().top;
  if (window_top > div_top) {
    $('#sticky').addClass('stick');
  } else {
    $('#sticky').removeClass('stick');
  }
}

$(function () {
  $(window).scroll(sticky_relocate);
  sticky_relocate();
});
</script>

Not quite sure what I am doing wrong, but once I scroll to the div, I bypass it without it getting stuck to the top of the page.

Any and all help is appreciated!

Jquery, get values from tag

I have list with id myid. I can get values li values like this $('#' + i).text(). But I am using $( '#myid' ).sortable() . How can get values in currently displayed order? Demo here. I need to implement function in stop:

 <ul id='myid'>  
        <li id='1'>value 1</li>   
        <li id='2'>value 2</li>  
        <li id='3'>value 3</li>  
        <li id='4'>value 4</li>  
        <li id='5'>value 5</li>  
    </ul>

How to show horizontal scrollbar if user resizes the window created on fullpage.js

I created a very simple webpage that uses fullPage.js script. Basically it works as the sample page provided by the author. Now, I would like to put there min-width on the page, so that when user decides to resize the window horizontally and make it small enough - instead of shrinking the divs inside - I would just display browser-native horizontal scrollbars. I tried to add either:

body {
    min-width: 900px;
    width: 100%;            
}

or the same in other css tag:

.section {
    text-align:center;
    width: 100%;
    min-width: 900px;
}

but none of those worked well. I found this communication with the author of the plugin, but I'm not exactly sure if his response is helpful enough. Can you help me with implementation of that feature? Thanks!

background image and text horizontal nav bar

I'm a student relatively new to CSS3. I'm trying to properly style a horizontal nav bar using a background image icon and text links at the block level, and to which are inline as well. Also, I'm trying to do the same on the hover states as well.

Here's a link to what I'm stuck with so far:

http://ift.tt/1ddI1B3

#aside_sect_mm {
  margin: 0px;
  background-position: 0%;
  background-color: #004E27;
  max-width: 704px;
  max-height: 100px;
  background-repeat: no-repeat;
  position: relative;
}
#aside_sect_mm nav {
  text-align: center;
  max-width: 704px;
  width: 100%;
  max-height: 60px;
  margin-top: 0%;
  display: block;
  position: relative;
}
#aside_sect_mm nav:after {
  content: "";
  display: table;
  clear: both;
}
#aside_sect_mm nav ul {
  padding: 0;
  margin: 0;
  max-height: 100px;
  max-width: 704px;
  position: relative;
}
#aside_sect_mm nav ul li {
  font-size: 1.1em;
  font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
  font-weight: lighter;
  text-align: center;
  list-style: none;
  line-height: 1.1em;
  position: relative;
  padding: 6.5% 0% 0% 0%;
  max-height: 60px;
  color: #FCE011;
  display: inline-block;
  float: left;
  min-width: 20%;
  background-color: #004E27;
  overflow: auto;
}
#aside_sect_mm nav ul li.bio_icon,
#aside_sect_mm nav ul li.stat_icon,
#aside_sect_mm nav ul li.img_icon,
#aside_sect_mm nav ul li.vid_icon,
#aside_sect_mm nav ul li.fut_icon {
  position: relative;
  max-height: 60px;
  max-width: 60px;
  background-repeat: no-repeat;
  background-position: 50% 0%;
  background-size: 40px 40px;
  display: block;
}
#aside_sect_mm nav ul li.bio_icon {
  background-image: url(../svg/bio_ore_ylw.svg);
}
#aside_sect_mm nav ul li.stat_icon {
  background-image: url(../svg/stats_ore_ylw.svg);
}
#aside_sect_mm nav ul li.img_icon {
  background-image: url(../svg/img_ore_ylw.svg);
}
#aside_sect_mm nav ul li.vid_icon {
  background-image: url(../svg/vids_ore_ylw.svg);
}
#aside_sect_mm nav ul li.fut_icon {
  background-image: url(../svg/fut_ore_ylw.svg);
}
#aside_sect_mm nav ul li.bio_icon a,
#aside_sect_mm nav ul li.stat_icon a,
#aside_sect_mm nav ul li.img_icon a,
#aside_sect_mm nav ul li.vid_icon a,
#aside_sect_mm nav ul li.fut_icon a {
  position: relative;
  display: block;
  text-align: center;
  max-height: 60px;
  max-width: 60px;
  text-decoration: none;
  color: #F6EF1B;
}
#aside_sect_mm nav ul li.bio_icon a:hover,
#aside_sect_mm nav ul li.stat_icon a:hover,
#aside_sect_mm nav ul li.img_icon a:hover,
#aside_sect_mm nav ul li.vid_icon a:hover,
#aside_sect_mm nav ul li.fut_icon a:hover {
  position: relative;
  max-height: 60px;
  max-width: 60px;
  display: block;
  background-color: #F6EF1B;
  background-repeat: no-repeat;
  background-position: 0%;
  text-decoration: none;
  line-height: 2.5em;
  color: #004E27;
}
#aside_sect_mm nav ul li.bio_icon a:hover {
  background-image: url(../svg/bio_ore_grn.svg);
}
#aside_sect_mm nav ul li.stat_icon a:hover {
  background-image: url(../svg/stats_ore_grn.svg);
}
#aside_sect_mm nav ul li.img_icon a:hover {
  background-image: url(../svg/img_ore_grn.svg);
}
#aside_sect_mm nav ul li.vid_icon a:hover {
  background-image: url(../svg/vids_ore_grn.svg);
}
#aside_sect_mm nav ul li.fut_icon a:hover {
  background-image: url(../svg/fut_ore_grn.svg);
}

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Untitled Document</title>
  <link rel="stylesheet" type="text/css" href="css/test.css">
</head>

<body>
  <section id="aside_sect_mm">
    <nav>
      <ul>
        <li class="bio_icon"><a href="#bio">Bio</a>
        </li>
        <li class="stat_icon"><a href="#stats">Stats</a>
        </li>
        <li class="img_icon"><a href="#images">Images</a>
        </li>
        <li class="vid_icon"><a href="#videos">Videos</a>
        </li>
        <li class="fut_icon"><a href="#future">Future</a>
      </ul>
    </nav>
  </section>

</body>

</html>

UPDATE:

Ashwani corrected the positioning of the nav bar, thank you sir! Now, I'm just trying to achieve the state to be the same by allowing the clickable hover link area to fill the whole block of each button region. The hover width is correct, but the bg image is over center of the link text. I want it to position just like in it's normal "up" state.

Here's the updated sample:

http://ift.tt/1ddI1B3

#aside_sect_mm {
  margin: 0px;
  background-position: 0%;
  background-color: #004E27;
  max-width: 704px;
  max-height: 100px;
  background-repeat: no-repeat;
  position: relative;
}
#aside_sect_mm nav {
  text-align: center;
  max-width: 704px;
  width: 100%;
  height: 100%;
  margin-top: 0%;
  display: block;
  position: relative;
}
#aside_sect_mm nav:after {
  content: "";
  display: table;
  clear: both;
}
#aside_sect_mm nav ul {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  position: relative;
}
#aside_sect_mm nav ul li {
  font-size: 1.1em;
  font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
  font-weight: lighter;
  text-align: center;
  list-style: none;
  line-height: 1.1em;
  position: relative;
  padding: 6.5% 0% 0% 0%;
  height: 100%;
  width: 100%;
  color: #FCE011;
  display: inline-block;
  float: left;
  min-width: 20%;
  background-color: #004E27;
  overflow: auto;
}
#aside_sect_mm nav ul li.bio_icon,
#aside_sect_mm nav ul li.stat_icon,
#aside_sect_mm nav ul li.img_icon,
#aside_sect_mm nav ul li.vid_icon,
#aside_sect_mm nav ul li.fut_icon {
  position: relative;
  max-height: 100%;
  max-width: 140.8px;
  background-repeat: no-repeat;
  background-position: 50% 0%;
  background-size: 40px 40px;
  display: block;
  overflow: auto;
}
#aside_sect_mm nav ul li.bio_icon {
  background-image: url(../svg/bio_ore_ylw.svg);
}
#aside_sect_mm nav ul li.stat_icon {
  background-image: url(../svg/stats_ore_ylw.svg);
}
#aside_sect_mm nav ul li.img_icon {
  background-image: url(../svg/img_ore_ylw.svg);
}
#aside_sect_mm nav ul li.vid_icon {
  background-image: url(../svg/vids_ore_ylw.svg);
}
#aside_sect_mm nav ul li.fut_icon {
  background-image: url(../svg/fut_ore_ylw.svg);
}
#aside_sect_mm nav ul li.bio_icon a,
#aside_sect_mm nav ul li.stat_icon a,
#aside_sect_mm nav ul li.img_icon a,
#aside_sect_mm nav ul li.vid_icon a,
#aside_sect_mm nav ul li.fut_icon a {
  clear: left;
  position: relative;
  display: block;
  max-height: 60px;
  text-decoration: none;
  color: #F6EF1B;
  overflow: auto;
}
#aside_sect_mm nav ul li.bio_icon a:hover,
#aside_sect_mm nav ul li.stat_icon a:hover,
#aside_sect_mm nav ul li.img_icon a:hover,
#aside_sect_mm nav ul li.vid_icon a:hover,
#aside_sect_mm nav ul li.fut_icon a:hover {
  position: relative;
  height: 100%;
  display: block;
  background-repeat: no-repeat;
  background-color: #F6EF1B;
  background-position: 50% 50%;
  background-size: 40px 40px;
  text-decoration: none;
  line-height: 1.1em;
  color: #004E27;
  overflow: auto;
}
#aside_sect_mm nav ul li.bio_icon a:hover {
  background-image: url(../svg/bio_ore_grn.svg);
}
#aside_sect_mm nav ul li.stat_icon a:hover {
  background-image: url(../svg/stats_ore_grn.svg);
}
#aside_sect_mm nav ul li.img_icon a:hover {
  background-image: url(../svg/img_ore_grn.svg);
}
#aside_sect_mm nav ul li.vid_icon a:hover {
  background-image: url(../svg/vids_ore_grn.svg);
}
#aside_sect_mm nav ul li.fut_icon a:hover {
  background-image: url(../svg/fut_ore_grn.svg);
}

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Untitled Document</title>
  <link rel="stylesheet" type="text/css" href="css/test.css">
</head>

<body>
  <section id="aside_sect_mm">
    <nav>
      <ul>
        <li class="bio_icon"><a href="#bio">Bio</a>
        </li>
        <li class="stat_icon"><a href="#stats">Stats</a>
        </li>
        <li class="img_icon"><a href="#images">Images</a>
        </li>
        <li class="vid_icon"><a href="#videos">Videos</a>
        </li>
        <li class="fut_icon"><a href="#future">Future</a>
      </ul>
    </nav>
  </section>

</body>

</html>

Why does my text div spill out past my container div?

I really need your help,

I can't seem to figure out as to why my div #text spills out past my container div? It should fit nicely inside its container?

Here is the CSS markup:

    height: 100px;
    width: 500px;
    bottom: 50%;
    right: 50%;
    position: absolute;
    display: none;
}

#container {
    background: #FFF;
    left: 50%;
    padding: 10px;
    top: 50%;
    margin: 0;
    padding: 0;
    height: 100%;
    border: 2px solid rgb(100,139,170);
    height: 100%;
    position: relative;
}
.topbar {
    cursor: pointer;
    color: white;
    background: rgb(100,139,170);
    padding: 4px;
    font-weight: bold;
}
#text {

    height: 100%;
    border: 1px solid red;

}

HTML:

<div id="wrapper">

    <div id="container">

        <div style="float:left;" class="topbar">Custom Dialog Box</div><div class="topbar" style="text-align: right;">Close</div>

        <div id="text"><p>test</p></div>

    </div>

</div>

Here is a snapshot of the problem:

A 'light swtch' to toggle text and background colours for a full page using CSS

I'm trying to create a 'light switch' with CSS to toggle the colours of a page. I've made a bad start using Joe's excellent response to this question: Change background on button click, using CSS only?

Is it possible to target the whole page rather than content inside divs? Also: can I do anything more to disguise the button as a link?

http://ift.tt/1GtdGZ3

HTML:

<label for="check" class="lights">Click here to invert colours</label>
<input type="checkbox" id="check" />
<div>This works...</br>
<a href="http://www.google.com">but how about links (and the button itself)...</a>
</div>
<p>and how about the full page (without containing everything in a div)?</p>

CSS:

body, a {
    color: #000
}
div {
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
}
input[type="checkbox"] {
    display: none;
}
input[type="checkbox"]:checked + div {
    background: #000;
    color: #fff;
}

Thank you for looking - and apologies, I'm really naive.

Merging Cells in Bootstrap Table

I have troubles merging Cells in Bootstrap Table I've found an example here.

But I don't want the merging executed by clicking a button, instead I want to merge automatically.

Here's my code:

<table id='ViewTable'
       data-toggle='table'
       data-url='func/json.php?id=1'
       data-class='table table-hover table-condensed'
       data-striped='true'
       data-show-header='false'>
    <thead>
    <tr>
        <th data-field='picture'></th>
        <th data-field='description'></th>
        <th data-field='value'></th>
    </tr>
    </thead>
    </table>

    <script>
    $(document).ready(function() {
        $('#ViewTable').bootstrapTable('mergeCells', {
                index: 0,
                field: 'picture',
                rowspan: 12
        });
    });
    </script>

Any suggetions?

Full screen 7x5 grid with Foundation SCSS

Hope there's someone here that have done what I'm currently trying to accomplish. I'm learning some new JS frameworks and I've got an idea to make full screen calendar with topbar fixed as my homepage. This calendar should take full width and full height available on normal monitors.

I've managed to make it full width using Foundation SCSS by changing this in _settings.scss:

$row-width: 100%;
$total-columns: 7;

My main question is - what's the optimal way for creating 5 rows (it's always 5 rows for single month) that will always take full remaining height of the screen? (remaining because of that topbar navigation that is fixed).

I'm ok with SCSS so all suggestions are welcome.

Thanks!