We Keep Coding

How can I create the angle shown on the header with CSS?

I need to create a header that looks like the firs image, however, it can't be an image. Preferably just css, but open to jQuery if there is a way to do this with jQuery.
I have tried many different things, but cannot create the 45 degree angle on the header(just before Home). This is the closest I have gotten. The colors are wrong in this image but that is intentional so that I could better illustrate the issue.
This is part of my latest attempt make this work and I think I am close with it, but it still isn't right.
#header{
float:left;
margin-top:20px;
overflow: hidden;
padding-bottom: 10px;
background-color:#F1F1F1;
-moz-box-shadow: 3px 3px 5px 0px #ccc;
-webkit-box-shadow: 3px 3px 5px 0px #ccc;
box-shadow: 3px 3px 5px 0px #ccc;
width: 100%;
height:130px;
z-index: 1;
}
#secondHeader{
float:right;
background-color:#ffffff;
width:50%;
height: 80px;
position: relative;
margin-top: -50px;
margin-right:15px;
/* border-radius: 15px 15px 0px 20px; */
/* background-color:#ff0000; */
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc;
z-index: 10;
}
#secondHeader::before{
height: 80px;
width: 70px;
border-radius: 10px 10px 10px 10px;
background-color: #f1f1f1;
content: "";
position: absolute;
left: 32px;
top: 0px;
-webkit-transform: skewX(-45deg);
transform: skewX(-45deg);
z-index: -1;
}
What am I doing wrong? I have worked on this for two days and cannot figure it out.

this is pretty close to what you need. Simply using borders to do this:
#menubar {
width: 40vw;
min-height: 100px;
background-color: rgba(0,0,0,0.1);
}
#menubar ul {
margin-left: 55px;
padding-top: 40px;
}
#angle {
position: absolute;
border-top: 102px solid rgba(0,0,0,0.1);
border-right: 52px solid transparent;
border-left: 0px solid transparent;
height: 0;
width: 2px;
}
#angle2 {
position: absolute;
border-top: 100px solid white;
border-right: 50px solid transparent;
border-left: 0px solid transparent;
height: 0;
width: 1px;
}
<div id="menubar"><div id="angle"></div><div id="angle2"></div><ul>Menu here</ul></div>

How to automatically fit a paragraph into a div box

I'm using JQuery to prepend a <p> element into a div however if mainButtonText in the p element is too long, it will be outside of the div.
http://puu.sh/mvm7F/a99aba0b1e.jpg
I want it to look like this: http://puu.sh/mvmEy/c17db01e4a.jpg
Is it also possible to automatically resize the text font size?
html:
<div id="mainButton"></div>
css:
#mainButton {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
width: 100px;
height: 40px;
font-family: monospace;
font-size: 12px;
text-align: center;
line-height: 40px;
background: #808080;
color: #fff;
text-decoration: none;
border-radius: 10px;
box-shadow: inset 1px 1px 1px rgba(255,255,255,0.05), inset 0 0 35px rgba(0,0,0,0.6), 0 5px 5px -4px rgba(0,0,0,0.8);
}
#mainButton:hover {
background: #d3d3d3;
}
#mainButton:active {
top: 5px;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.4), inset 0 0 35px rgba(0,0,0,0.6), 0 1px 1px rgba(255,255,255,0.1), inset 0 6px 4px rgba(0,0,0,0.4);
}
javascript:
function changeMainButton() {
'use strict';
$('#mainButton').empty();
$('#mainButton').prepend('<p>' + mainButtonText + '</p>');
}
Thanks for any help! :)

Maybe this could help:
#mainButton {
...
overflow: hidden;
}

You can make the text adjust to its container using
#mainButton {
word-wrap: break-word;
}
You can also resize the font size in relation to its parent element using javascript like http://simplefocus.com/flowtype/ or http://fittextjs.com/ but if you want to control it in granular use #media, em and rem

Styling tomahawk upload file component

I am trying to style the t:inputFileUpload element, I tried this solution styling an input type=file, which is putting another input element and an image to occupy the same place the t:inputFileUpload takes.That is my code
<div id="file-div">
<h:inputText styleClass="replace-upload" id="fake-input" />
<div class="browse-img">
<span class="browse-button">#{msgs.select}</span>
</div>
<t:inputFileUpload id="file" value="#{createListBean.uploadedFile}"
size="22" accept=".xls,.xlsx,.csv" type="file" style="z-index :2;opacity:0;position:relative;"
onchange="changeFakeFile()" styleClass="file-real" />
</div>
And my styling
.replace-upload {
border: 1px solid #EEEEEE !important;
border-radius: 3px 3px 3px 3px !important;
box-shadow: 2px 2px 0 0 #CCCCCC inset !important;
color: #333333 !important;
font-size: 14px !important;
margin-top: -5px;
padding: 5px !important;
width: 157px !important;
position: absolute;
z-index: 1;
}
.browse-img {
background-color: #333333;
color: #FFFFFF;
width: 76px;
position: absolute;
left: 171px;
top:-2px;
border-radius: 3px 3px 3px 3px;
box-shadow: 0 1px 1px #000000;
}
.browse-button {
color:#FFFFFF;
cursor: pointer;
display: block;
font-size: 12px;
font-weight: bold;
line-height: normal;
padding: 5px 18px;
text-decoration: none;
}
Now when user clicks on the fake input element he would be actually clicking over the tomahawk element , the main problem is the path he selected doesn't show over the fake input, that is why I added some javascript to it function
changeFakeFile(){
var x = $('.file-real').val();
$('.replace-upload').text(x);}
The problem is the fake input value is changed but the value doesn't show to the user,how to make it appear?

I replaced $('.replace-upload').text(x); with $('.replace-upload').val(x); and it worked.

Changing CSS dynamically according to its inner elements

Just look at my code
http://jsfiddle.net/rkumarnirmal/GXAYa/6/
#box_bg is the outer gray box and #box is the inner black box. I used jquery accordion in the #box. What I need is #box_bg should dynamically enlarge or reduce its height according to the size of the inner #box.
Could anyone help me?
Thanks!

Don't specify an absolute height: just use height:auto. With a static position of #box and some padding for the frame the #box_bg will automatically resize to its content.
See http://jsfiddle.net/GXAYa/18/

I'm not sure why you need the position: absolute, so try this as an option and see if it resolves your problem:
#box_bg {
cursor: move;
background-color: #4f575e;
border-radius: 10px;
-moz-box-shadow: 3px 3px 5px 6px #00000;
-webkit-box-shadow: 0px 3px 5px 6px #00000;
box-shadow: 0px -3px 3px 1px #4f575e;
overflow: hidden;
width: 245px;
position: relative;
padding-bottom: 2em;
margin-left: 100px;
margin-top: 150px;
}
#box {
cursor: pointer;
background-color: #24272a;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-bottom-right-radius:10px;
border-bottom-left-radius:10px;
box-shadow: 0px 0px 3px 1px #4f575e;
width: 225px;
margin-top: 20px;
padding: 10px;
word-wrap: break-word;
}
JSFiddle here.

Change height:260px; to height:auto;.
UPD: Add position:relative to the #box

How to make links look like tabs using html/css?

I have this wireframe I am working from: http://problemio.com/wireframe.pdf
I am trying to make the tabbed items that read like "ongoing discussion | suggested solutions | solution history... " to look tabbed as they are on the wireframe.
So far I am able to use JavaScript to show/hide the correct elements, but what I am not sure how to do is highlight the tab that is active, and how to draw the lines surrounding the tab.
Here is an example of what I have so far:
http://www.problemio.com/problems/problem.php?problem_id=179
Even if I make each link a div, how do I toggle between the styling of those divs?
Thanks!!

If you already have the showing and hiding down and are looking for a non-jQuery option you could try something like this:
http://jsfiddle.net/wqEdj/
It's a basic styling of straight anchor elements.

You're easiest bet will be using jQueryUI Tabs. Example here http://jqueryui.com/demos/tabs/

Here is a CSS/JS solution that you can run here to see it in action. JQuery is used, but could easily be replaced with standard JS. No images required.
The source of this solution:
https://css-tricks.com/better-tabs-with-round-out-borders/
Another related example with the tabs under the line can be found here: http://codepen.io/chriscoyier/pen/JozNqX
$(function() {
$("li").click(function(e) {
e.preventDefault();
$("li").removeClass("selected");
$(this).addClass("selected");
});
});
.tabrow {
text-align: center;
list-style: none;
margin: 20px 0 20px;
padding: 0;
line-height: 24px;
height: 26px;
overflow: hidden;
font-size: 12px;
font-family: verdana;
position: relative;
}
.tabrow li {
border: 1px solid #AAA;
background: #D1D1D1;
background: -o-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
background: -ms-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
background: -moz-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
background: -webkit-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
background: linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
display: inline-block;
position: relative;
z-index: 0;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4), inset 0 1px 0 #FFF;
text-shadow: 0 1px #FFF;
margin: 0 -5px;
padding: 0 20px;
}
.tabrow a {
color: #555;
text-decoration: none;
}
.tabrow li.selected {
background: #FFF;
color: #333;
z-index: 2;
border-bottom-color: #FFF;
}
.tabrow:before {
position: absolute;
content: " ";
width: 100%;
bottom: 0;
left: 0;
border-bottom: 1px solid #AAA;
z-index: 1;
}
.tabrow li:before,
.tabrow li:after {
border: 1px solid #AAA;
position: absolute;
bottom: -1px;
width: 5px;
height: 5px;
content: " ";
}
.tabrow li:before {
left: -6px;
border-bottom-right-radius: 6px;
border-width: 0 1px 1px 0;
box-shadow: 2px 2px 0 #D1D1D1;
}
.tabrow li:after {
right: -6px;
border-bottom-left-radius: 6px;
border-width: 0 0 1px 1px;
box-shadow: -2px 2px 0 #D1D1D1;
}
.tabrow li.selected:before {
box-shadow: 2px 2px 0 #FFF;
}
.tabrow li.selected:after {
box-shadow: -2px 2px 0 #FFF;
}
<ul class="tabrow">
<li>Lorem</li>
<li>Ipsum</li>
<li class="selected">Sit amet</li>
<li>Consectetur adipisicing</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>