django

dimanche 28 juin 2015

Float table elements using only html/css

I'm trying to write a responsive email template at present so am restricted to using html tables and inline css (without the assistance of javascript or media queries) in order to support as many email clients as possible.

Specifically I'd like to float some elements (either entire tables or internal columns) so that they fill the width available evenly but also drop to the next to the line when the width available isn't large enough to accommodate all text.

This is my first attempt which spaces the elements evenly within the width available: http://ift.tt/1K5V3i8.

table { 
    width: 100%;
    max-width: 600px;
    background-color: #eeeeee;
    text-align: justify; 
}
table:after {
    display: inline-block !important;
}
table th { 
    vertical-align:top; 
    text-align: center;
    font-weight:normal; 
}

<table align="center">
    <tr>
        <th>One</th>
        <th>Two</th>
        <th>Three</th>
        <th>Four</th>
        <th>Five</th>
        <th>Six</th>
        <th>Seven</th>
        <th>Eight</th>
        <th>Nine</th>
        <th>Ten</th>
    </tr>
</table>

This is my second attempt which allows the elements to drop to the next line when necessary but does not evenly distribute the elements within the full width available: http://ift.tt/1QWQYkq.

table { 
    width: 100%;
    max-width: 600px;
    background-color: #eeeeee;
    text-align: justify; 
}
table th { 
    display: inline-block !important;
    vertical-align:top; 
    text-align: center;
    font-weight:normal; 
}

<table align="center">
    <tr>
        <th>One</th>
        <th>Two</th>
        <th>Three</th>
        <th>Four</th>
        <th>Five</th>
        <th>Six</th>
        <th>Seven</th>
        <th>Eight</th>
        <th>Nine</th>
        <th>Ten</th>
    </tr>
</table>

Is it possible to combine both these effects to distribute the elements evenly but also allow them to drop to the next line when the available width is not sufficient?

Note: I realise it's a little unorthodox to use th elements, however it's to combat an Android quirk.

How do you position div's in html5?

I have been for hours attempting to get several div's to display and align properly. I have looked all over the internet and I just cannot get it right.

What I want is inside a section determined by a theme of a wordpress page, is the title of the space in the top left of that section, an info box to the left of the title, and below both of those a section containing a table.

At this point, I Just need to make a typical web page where I can build the thing i am building and I can worry about adding it into wordpress later.

|-----------------------------------------|-------------------------------------------| |.......................Title......................|...........................Info.....................| |-----------------------------------------|-------------------------------------------| |..........................................................................................................| |.................................................Table.................................................| |..........................................................................................................| |-------------------------------------------------------------------------------------|

Why that is so hard is beyond me.

The other problem is that I wish for this to be browser independent. I would like to figure out a way for it to be displayed in just such a manner on a desktop computer or a tablet or phone screen. (This may not be possible without a little effort but I thought I'd throw it out there.)

The html generated by php:

<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Knights Tour</title>
<link rel="stylesheet" type="text/css" href="http://bmfmain/kt/game.css">
<script src="http://bmfmain/kt/jquery.min.js"></script>
</head>
<body>
<div id="header">
    <div id="title">
        <h1>Knight's Tour</h1>
    </div>

    <div id="info">
        <p>adsf</p>
    </div>
</div>

<div id="section">

    <table id="game">
        <tr>  
            <td class="tdcls" name="0"></td>  
            <td class="tdcls" name="1"></td>  
            <td class="tdcls" name="2"></td>  
            <td class="tdcls" name="3"></td>  
            <td class="tdcls" name="4"></td>  
            <td class="tdcls" name="5"></td>  
            <td class="tdcls" name="6"></td>  
            <td class="tdcls" name="7"></td>
        </tr>
        <tr>  
            <td class="tdcls" name="8"></td>  
            <td class="tdcls" name="9"></td>  
            <td class="tdcls" name="10"></td>  
            <td class="tdcls" name="11"></td>  
            <td class="tdcls" name="12"></td>  
            <td class="tdcls" name="13"></td>  
            <td class="tdcls" name="14"></td>  
            <td class="tdcls" name="15"></td>
        </tr>
        <tr>  
            <td class="tdcls" name="16"></td>  
            <td class="tdcls" name="17"></td>  
            <td class="tdcls" name="18"></td>  
            <td class="tdcls" name="19"></td>  
            <td class="tdcls" name="20"></td>  
            <td class="tdcls" name="21"></td>  
            <td class="tdcls" name="22"></td>  
            <td class="tdcls" name="23"></td>
        </tr>
        <tr>  
            <td class="tdcls" name="24"></td>  
            <td class="tdcls" name="25"></td>  
            <td class="tdcls" name="26"></td>  
            <td class="tdcls" name="27"></td>  
            <td class="tdcls" name="28"></td>  
            <td class="tdcls" name="29"></td>  
            <td class="tdcls" name="30"></td>  
            <td class="tdcls" name="31"></td>
        </tr>
        <tr>  
            <td class="tdcls" name="32"></td>  
            <td class="tdcls" name="33"></td>  
            <td class="tdcls" name="34"></td>  
            <td class="tdcls" name="35"></td>  
            <td class="tdcls" name="36"></td>  
            <td class="tdcls" name="37"></td>  
            <td class="tdcls" name="38"></td>  
            <td class="tdcls" name="39"></td>
        </tr>
        <tr>  
            <td class="tdcls" name="40"></td>  
            <td class="tdcls" name="41"></td>  
            <td class="tdcls" name="42"></td>  
            <td class="tdcls" name="43"></td>  
            <td class="tdcls" name="44"></td>  
            <td class="tdcls" name="45"></td>  
            <td class="tdcls" name="46"></td>  
            <td class="tdcls" name="47"></td>
        </tr>
        <tr>  
            <td class="tdcls" name="48"></td>  
            <td class="tdcls" name="49"></td>  
            <td class="tdcls" name="50"></td>  
            <td class="tdcls" name="51"></td>  
            <td class="tdcls" name="52"></td>  
            <td class="tdcls" name="53"></td>  
            <td class="tdcls" name="54"></td>  
            <td class="tdcls" name="55"></td>
        </tr>
        <tr>  
            <td class="tdcls" name="56"></td>  
            <td class="tdcls" name="57"></td>  
            <td class="tdcls" name="58"></td>  
            <td class="tdcls" name="59"></td>  
            <td class="tdcls" name="60"></td>  
            <td class="tdcls" name="61"></td>  
            <td class="tdcls" name="62"></td>  
            <td class="tdcls" name="63"></td>
        </tr>  
    </table>

</div>
<script src="http://bmfmain/kt/game.js"></script>
</body>
</html>

Formatting slightly off due to copy/paste.

The css that is currently being used: (Will change as I work the problem.)

html, body 
{
margin: 0;
padding: 0;
}
#header
{
width: 800px;
margin: 0 auto;
float: top;
padding: 5px;

}
#title
{
width: 400px;
text-align: center;
float: left;
position: absolute;
}
#info
{
width: 400px;
text-align: center;
float: right;
position: absolute;
}
#section
{
width: 800px;
height: 800px;
margin: 0 auto;
float: bottom;

}
table 
{
width: 100%;
height: 100%;
}
table, th, td 
{
border: 1px solid #0000cc;
border-spacing: 0.0rem;
}
th, td 
{
width: 8%;
height: 8%;
text-align: center;
background-color: transparent;
}

Again, formatting is off due to not being able to copy/paste code straight into stackexchange.com.

The question is: How do I make the div's appear like the picture above? How do I make the div's appear like the picture above on any platform, computer, tablet, or phone?

Thank you.

Current live example:

Overriding media queries for particular width - CSS

I have created a sub-theme of Responsive Bartik and I need to reduce the width of sidebars without touching the original theme:

Original:

@media all and (min-width: 851px) {
.
.
.
  #sidebar-first {
    width: 25%;
    margin-left: -100%; /* LTR */
  }
  #sidebar-second {
    width: 25%;
    margin-left: -25%; /* LTR */
    clear: none;
  }
.
.
.
}

CSS in sub-theme:

/* Raj: To reduce the width of the sidebar: */
@media all and (min-width: 851px)
{
    #sidebar-first {
        width: 18% !important;
        margin-left: -92% !important; /* LTR */
    }
    #sidebar-second {
        width: 18%;
        margin-left: -32%; /* LTR */
        clear: none;
    }
}

To my surprise the original CSS is taking effect. Except for the media queries any other css properties I am able to override. If I change 25% to 18% and -100% to -92% in the original css file itself I am getting the desired result, but I am not able to figure out how to override these values in another css file.

I tried to google but all I am getting is regarding the priorities in media queries but nothing regarding overriding.

I'm going nuts a bit trying to do a website but I'm absolutely incapable of center my <nav> tag. I've read tons of threads with suggestions that involve putting in the CSS margin: 0 auto; or things like text-align: center but nothing seems to work.

I have my CSS in a separate file and so, since my CSS doesn't work at all, I'll only put the HTML here:

<nav>
    <ul class="nav nav-pills">
        <li class="active"><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="jobs.html">Jobs</a></li>
        <li><a href="contactus.html">Contact us</a></li>
    </ul>
</nav>

I'm using Bootstrap as you can see, and I just want to center it.

display: inline doesn't work properly with div

I'm a HTML/CSS beginner and currently I'm building a simple website. What I wanna do is I'd like to make 3 divs. One for the whole site, one for the content and one for the navigation list - row.

It should look like this:

_ _ _ _ _ _ (navigation list - row)

asdfwefwefwe

cofwerferwefw (content)

To recognize the divs I background-colored them. Whenever I use display-inline it looks like this. whole site div(red colored), main content(orange colored)

http://ift.tt/1Ildxtp

When I use display: inline-block whole site div(red colored), main content(orange colored), navigation list - row(blue colored)

http://ift.tt/1GEVdpE

Now it works but I want a navigation - row bar and not a ranked list but I don't know how to do it.

Here is my css for the navigation list - row:

.navigationlist{
    height:20%;
    width:100%;
    display:inline-block;
    background-color:blue;
}

Thank you very much for reading and for hopefully good answers.

Jquery for duplicate tabs

I am trying to create tabs in jquery and have been successful. However, there is one issue I am unable to solve and that is duplicate tabs.

With a single tab, jquery works fine but when I copy and paste that tab it does not work properly. I did add some extra code to find the tab in which the use is currently in by using the closest function but still no result.

Have a look at the code.

//HTML

<div class="tabsContainer">
    <ul class="tabs-nav">
        <li>
            <a href="#tab1" class="active">Tab One</a>
        </li>

        <li>
            <a href="#tab2">Tab Two</a>
        </li>

        <li>
            <a href="#tab3">Tab Three</a>
        </li>
    </ul>
    <section class="tabs-content">
       <div class="tabs active" id="tab1">
            This is tab 1<br />
            This is tab 1<br />
            This is tab 1<br />
        </div>

        <div class="tabs" id="tab2">
            This is tab 2<br />
            This is tab 2<br />
            This is tab 2<br />
        </div>

        <div class="tabs" id="tab3">
            This is tab 3<br />
            This is tab 3<br />
            This is tab 3<br />
        </div>
    </section>
</div>


//2nd tab
<div class="tabsContainer">
    <ul class="tabs-nav">
        <li>
            <a href="#tab1" class="active">Tab One</a>
        </li>

        <li>
            <a href="#tab2">Tab Two</a>
        </li>

        <li>
            <a href="#tab3">Tab Three</a>
        </li>
    </ul>
    <section class="tabs-content">
        <div class="tabs active" id="tab1">
            This is tab 1<br />
            This is tab 1<br />
            This is tab 1<br />
        </div>

        <div class="tabs" id="tab2">
            This is tab 2<br />
            This is tab 2<br />
            This is tab 2<br />
        </div>

        <div class="tabs" id="tab3">
            This is tab 3<br />
            This is tab 3<br />
            This is tab 3<br />
        </div>

    </section>
</div>

CSS Code

.tabsContainer{
    overflow:hidden;
}
.tabs-nav{
    overflow:hidden;
    margin:0;
    padding:0;
    list-style:none;
}
.tabs-nav li {
    display: inline-block;
    background: #34495E;
    border-width: 1px 1px 0 1px;
    border-style: solid;
    border-color: #34495E;
    margin-right: 5px;
}
.tabs-nav li a {
    display: block;
    padding: 10px 15px;
    font-weight: bold;
    color: #fff;
}
.tabs-nav li a.active {
    background: #FFF;
}

.tabs-nav li a.active {
    color: inherit;
}
.tabs-content {
    border: 1px solid #34495E;
    padding: 10px;
    background: #FFF;
    margin-top: -1px;
    overflow:hidden;
}
.tabs-content .tabs{
    overflow:hidden;
    display:none;
    margin:0 0 30px;
}
.tabs-content .tabs.active{
    display:block;
}

JAVAScript

$(function() {

    //listeing for click events
    $('.tabsContainer .tabs-nav li a').on('click', function(){

        //if more than 1 tab find out which tab you are currently in using the closest function
        //by clicking on the a tag it will find which container it is a part of.
        var $tab = $(this).closest('.tabsContainer'); 

        $tab.find('.tabs-nav li a.active').removeClass('active');
        $(this).addClass('active');
        //grabbing the tab which is clicked using the attribute "href"
        var currentClick = $(this).attr('href');

        //hiding the current panel
        //using a call back function. What this does is wait for the slideup to finish and then it will excute the call back function
        $tab.find('.tabs-content .tabs.active').slideUp(300, nextTab);

        //the call back function to show the new tab
        function nextTab(){
            $(this).removeClass('active');
            $(currentClick).slideDown(300, function(){
                $(this).addClass('active');
            });
        }
    });
});

i cann't import my css into project java web

i'm beginner in java web.. so i can't import file css into project java web, please help me fix it, thanks so much this is my code

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://ift.tt/kTyqzh">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Demo Form Angular</title>
<script src="lib/angular.min.js"></script>
<link type="text/css" rel="stylesheet" href="<c:url value="/css/formAngular.css"" />
</head>
<body>
<div>
<p class="contain">Hello Angular</p>
</div>
</body>
</html>