Showing posts with label css. Show all posts
Showing posts with label css. Show all posts

Wednesday, March 25, 2015

[HTML/CSS] Bottom footer for reference

Yea! For once and for all, the bottom footer has been solved. I'm such a noob. Here is my reference to an example:


The only quirk I had once an extra spacing that was occurring at the bottom of the page. To help this, I added overflow:hidden to the wrapper container.

Cheers
Posted by at No comments:
Labels: , , , ,

Friday, July 25, 2014

[HTML/CSS/Javascript] Floating header/scrollable body

So you want to build something like this....

Header

Scrollable Body

When content vertically overflows, the expected outcome is this (red is the scrollbar):

Header

Scrollable Body

So in the early versions of Internet Explorer, it expresses evilness like so:

Header

Scrollable Body

So yea. The only way to make IE behave properly is to use conditional CSS properties and native javascript. I would use jQuery because I'm noob, but I got too lazy to find the CDN link.

Here is the code below:

<!DOCTYPE html>
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8"> <![endif]-->
<!--[if (gt IE 8)|!(IE)]><!-->
<html class="">
<!--<![endif]-->

<head>
    <title>Floating Header</title>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #container {
            width: 100%;
            height: 100%;
            position: relative;
        }
        #header {
            width: 100%;
            height: 120px;
            background: blue;
            position: absolute;
            top: 0;
            left: 0
        }
        #content-scroll-container {
            overflow: auto;
            overflow-x: hidden;
            background: black;
            width: 100%;
            height: 100%;
            padding: 0;
        }
        #content {
            margin-top: 120px;
            color: white;
        }
        .tbl-whole-span {
            width: 100%;
            margin: 0;
            padding: 0;
        }
        .tbl-whole-span td {
            background: gray;
        }
    </style>
</head>

<body>

    <div id="container">
        <div id="header"></div>
        <div id="content-scroll-container">
            <div id="content">
                First line of destruction
                <br/>
                <input id="btnAddLine" type="button" value="Add Line" onclick="addLine()" />
                <br/>
                <table class="tbl-whole-span">
                    <tr>
                        <td>
                            Some table contents here.
                            <span style="float:right">Text to the right</span>
                        </td>
                    </tr>
                </table>
                Some content, some content
                <br/>Some content, some content
                <br/>Some content, some content
                <br/>Some content, some content
                <br/>Some content, some content
                <br/>Some content, some content
                <br/>Some content, some content
                <br/>Some content, some content
                <br/>Some content, some content
                <br/>Some content, some content
                <br/>Some content, some content
                <br/>Some content, some content
                <br/>Some content, some content
                <br/>Some content, some content
                <br/>Some content, some content
                <br/>Some content, some content
                <br/>Some content, some content
                <br/>Some content, some content
                <br/>Some content, some content
                <br/>Some content, some content
                <br/>Some content, some content
                <br/>Some content, some content
                <br/>Some content, some content
                <br/>Some content, some content
                <br/>Some content, some content
                <br/>Some content, some content
                <br/>Some content, some content
                <br/>
            </div>
        </div>
    </div>
    <script>
        ;
         // Adjust content width when vert scrollbar appears
        function adjustWidth() {
            var scrollDiv = document.getElementById("content-scroll-container");
            var contentDiv = document.getElementById("content");
            var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
            var newWidth = scrollDiv.offsetWidth - scrollbarWidth;
            var percentageWidth = newWidth * 100.00 / scrollDiv.offsetWidth;
            contentDiv.style.width = percentageWidth + "%";
        }

         // Function to add content. This function relies on calling
         // adjustWidth.
        function addLine() {
            var content = document.getElementById("content");
            content.innerHTML += "Line Added<br />";

            // Detect version of IE here. Modify if needed. 
            var html = document.getElementsByTagName("html")[0];
            if (html.className != "")
                adjustWidth(); // adjust width only if class is IE
        }
    </script>
</body>

</html>
Posted by at No comments:
Labels: , , , , , , , , , , , , , , ,

Thursday, June 7, 2012

[HTML] Divs no wrap in Doctype 4.0 Transitional for IE7

So you're making a menu and you're forced to use Doctype 4.0 Transitional. This means that min-width will not work for you if you are doing this for IE7. So for fancy stuff like a menu bar, the elements will start stacking underneath each other as the window is resized. I believe min-width may work for Google Chrome, I'm not sure.

I won't put any code here in the mean time since I'm at a very special place, so I'll try to give an idea as best as I can.

My goal was to make a horizontal menu to look like this:

| ---------------------------- page width = 100% --------------------------------------------|

-----------------------------------------------------------------------------------------------
|  Home |  Links |  About Me |                                                                                              
-----------------------------------------------------------------------------------------------

Let's break it down (3 parts) and give them the needed CSS values.

1. Wrapper
-----------------------------------------------------------------------------------------------

-----------------------------------------------------------------------------------------------
width:100%
border-top: whatever u want
border-bottom: whatever u want

2. Wrapper of the actual menu elements ( no visual representation here)
width:Choose a value that extends the width of the accumulated menu elements

3. Actual Menu Elements
| Home | Links | About Me |
float: left
border-left: whatever u want
border-right:whatever u want

That's ittt....

Next up is blocking a floating right div. So say you have a layout like this:

----------------------------------------------------------------------------------------------
|                                                                                                                            float item |
|                                                                                                                                           |

So when you resize it, it will look like this, which is not desired

---------
| at item|

So you want to block it the float at some point to keep it from moving left. I haven't figured that out yet so stay tuned.

Posted by at No comments:
Labels: , , , , , , , , , ,
Subscribe to: Posts (Atom)