We Keep Coding

Scale content with size of menu

I was trying something out as a test but didn't quite know how to program it the right way. I was hoping someone could help me out with that.
I made a sketch so it would be a little more clear about what I want to achieve. The menu on the left needs to stay in that exact position.
Let's say the content next to the menu would be smaller than the menu itself. Then the green sections would go underneath the menu. This is not what I want to achieve. I was thinking about scaling the height of the content with Javascript if the content element is too small.
Do you feel like this is the right way to accomplish the desired result? Or could you suggest a better/cleaner way to accomplish this? (An example on jsfiddle would be great)
Thanks in advance!
Edit: I would also like to inform that the menu's height needs to be dynamic. For example what if I add an extra menu item.

You mean something like this?
Just be wary this Only works on MODERN browsers as I am using the checkbox hack :)
Here is a code snipet
*{
box-sizing:border-box;
margin:0px;
padding:0px;
}
#head{
background-color:#000;
border-bottom:#333 solid 1px;
display:block;
padding:10px 0px 0px 10px;
}
#head ul{
background-color:#f00;
display:block;
width:150px;
position:relative;
list-style:none;
margin:0px;
text-align:center;
}
#head li{
display:none;
}
#head input{
display:none;
}
#head input:checked ~ li{
display:block;
}
#head input:checked ~ label{
background-color:#511;
color:#fff;
}
#head label{
font-family:Constantia;
width:100%;
padding:10px 0px;
color:#333;
border-bottom:#111 dotted 1px;
display:block;
font-weight:bold;
text-transform:uppercase;
}
#head label:hover{
background-color:#511;
color:#fff;
cursor:pointer;
}
#head a:link{
background-color:#f00;
width:150px;
display:block;
color:#111;
text-decoration:none;
border-bottom:#333 solid 1px;
padding:10px;
float:left;
margin-right:10px;
}
#head a:visited{
color:#111;
}
#head a:hover{
background-color:#911;
color:#fff;
border-bottom:#211 solid 1px;
font-weight:bold;
}
#body{
padding:10px;
}
<div id="head">
<ul>
<input type="checkbox" id="menu" />
<label for="menu">Menu</label>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
<div id="body">
<h1>Content</h1>
<p> All my content sits here what am I suppose to do?</p>
</div>
By making use of floats rather than position absolute lets the browser know there is suppose to be content under the header if I had to change it to apply position absolute it would still go out the header but won't take up any space therfore the content wont shift next to or under it but rather behind the navigation.
You should see that the content will go below it when the window gets smaller if you wish to make the content not be squashed up a bit before going underneath the navigation is to set a min-width to the #body{} tag.

How to get around child element in a UL issue

I'm trying to Validate to HTML5 standards and have 1 error left which I can't get passed.
"Element section not allowed as child of element ul in this context." is the error, which I've found covered below and I know is a no-no. It works perfectly, it just doesn't validate.
Allowed child elements of ul
My question is how to I get around it? I'm trying to get a .js button to work within a Nav bar. I've tried every way I can think of to nest it and no luck. Either I lose the .css and it looks like a standard button and/or lose my positioning.
Here's the code. Thanks a lot!
<ul class="navlinks">
<section>
<li>link1</li>
<li>link2</li>
<li><button id="contactpanel">Contact</button></li>
</section></ul>
.navlinks {
border-left:orange solid 1px;
margin-left:6%;
margin-top:10%;
z-index: 6;
position:fixed;
font-size:1.1em;
font-family: 'Lato', sans-serif;
color:#18112D;
list-style:none;
font-weight:500;
padding-left:6px;
padding-top:20px;
padding-bottom:20px;
}
.navlinks > section {
outline: none;
}
.navlinks > section button {
border: none;
display: block;
width:100%;
cursor: pointer;
z-index:6;
font-size:1em;
font-family: 'Lato', sans-serif;
color:#18112D;
font-weight:500;
margin-left:-7px;
outline: none;
background-color:transparent;
}
.navlinks > section button:hover {
color:#514966;
opacity:0.3;
color:#18112D;
height:auto;
}
.navlinks > section button.active {
background-color: orange;
opacity:1;
color:white;
outline: none;
padding-right:18px;
}

Try getting rid of the <section> and targeting the button with this selector .navlinks li > button. See example codepen.

Just get rid of the <section> tags all together (or wrap the whole <ul> in it). It's not doing anything for you here anyway.
Then change .navlinks > section button to .navlinks button

What technique do I use to get text into each individual tab?

I have been stuck on this for ages, here is my code so far:
<html>
<head>
<script src="http://mihaifrentiu.com/wp-content/themes/mf/js/jquery_1.7.1.min.js" type="text/javascript"></script>
<style type="text/css">
body, html, div, ul, li, a {
margin:0;
padding:0;
}
body {
font-family:arial;
font-size:12px;
color:#000000;
}
.clear {
clear:both;
}
ul {
list-style:none;
position:relative;
z-index:2;
top:1px;
display:table;
border-left:5px solid #808080;
}
ul li {
float:left;
}
ul li a {
background:#000000;
color:#000000;
display:block;
padding:6px 15px;
text-decoration:none;
border-right:100px solid #000000;
border-top:1px solid #000000;
border-right:3px solid #808080;
}
ul li a.selected {
border-bottom:1px solid #808080;
color:#000000;
background:#808080;
}
h1 {
display:block;
width:600px;
margin:0 auto;
padding:200px 0;
color:#000000;
}
#navigation {
width:602px;
margin: 0 auto;
}
#content {
width:600px;
margin:0 auto;
height:200px;
background:#ffffff;
border:1px solid #000000;
z-index:1;
text-align:center;
padding:10px 0;
}
#logo {
width:600px;
margin:0 auto;
padding:10px 0;
text-align:right;
}
</style>
</head>
<body>
<div id="navigation">
<ul>
<li><font color="white">Tab 1</li>
<li><font color="white">Tab 2</li>
<li><font color="white">Tab 3</li>
<li><font color="white">Tab 4</li>
<li><font color="white">Tab 5</li>
</ul>
<div class="clear"></div>
</div>
<div id="content">
<p id="content_changer">You have selected Tab 1</p>
<p>See the page source for full code</p>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#navigation ul a').click(function() {
$('#navigation ul a').removeClass('selected');
$(this).addClass('selected');
$('#content_changer').html('You have selected ' + $(this).html());
});
});
</script>
</body>
</html>
I can not figure out how to get one of these tabs menu thing to work, I have tried so many different methods but nothing will work.

It's not very good code, but it works for me. The only problem is that the #content text is set to font color white, so you can't see it, though it is there.
You should avoid font tags, as they are badly out of date, as well as inline JS.

I tried running your code. I found that the text is written #content_changer element, but its white colored.
Here's how you can solve it.
Add the following css rule
#content_changer{
color:#000;
}
Change the $(this).html() to $(this).text().
That much should do.

The problem is not in your JS, but in your CSS. Font color is white on the links in the navigation, which means it will be invisible on the content area. Also, using is deprecated and you need to set content-area color to black.
Here is a working jsFiddle:
http://jsfiddle.net/8ftyy/
Differences are these:
#content_changer {
color: black;
}
ul li a {
color: white;
}
and no font-color in html.

common width to span text

Hello I am working on a project, which I need to use anchor tag with text and images for this I have used ul tag, but the problem is I want to right align the image and left align the text inside LI.
here is my code
<div class="button-no-record">
<ul>
<li><span>ADD NEW</span><img src="images/add_enabled.gif"></li>
</ul>
and the css
.button-no-record ul {
display:table-cell;
vertical-align:middle;
}
.button-no-record li{
list-style-type:none;
display:inline-block;
margin-top:10px;
margin-left:5px;
vertical-align:middle;
line-height:29px;
height:29px;
width:103px;
border-radius:8px;
background:#e4e4e4;
color:black;
font-family:Arial;
font-size:.9em;
font-weight:bold;
}
.button-no-record a span {
width:100px;
overflow:hidden;
margin-left:4px;
color:black;
vertical-align:middle;
}
.button-no-record a img{
vertical-align:middle;
}
I want output like this
My Text [Image]
My [Image]
but currenty it is
My Text [Image]
My [Image]

Change it to:
.button-no-record a span {
display: inline-block;
[...]
<span> is an inline-element, and so width won't apply for it. When you set it to display: inline-block;, it will apply.

This is because the <span> tag is an inline-element by default.
You can change this by adding
.button-no-record a span {
display: inline-block;
/* dirty IE7 hack (only if needed) */
*display: inline;
zoom: 1;
}

.button-no-record ul li span
{
float: left;
width: 200px;
}
.button-no-record ul li img
{
float: right;
}
Use the above style.

Use float: left and float: right
.button-no-record a span {
width:100px;
overflow:hidden;
margin-left:4px;
color:black;
width:40px;
vertical-align:middle;
float: left;
}
.button-no-record a img{
vertical-align:middle;
float: right;
}
demo

HTML
<img id="image" src="images/add_enabled.gif">
CSS
#image {
float:right;
}

add display:block to .button-no-record a span
Also why have you decalred two widths in .button-no-record a span

Navigation bar/menu getting disappeared on smaller screen - CSS issue

I am in middle of developing a website and I am facing a small problem. The top navigation bar of the website works fine upto a particular screen resolution. However, if I adjust my browser window (smaller in size), the navigation bar is getting disappeared. The same problem also persist if I view the website on my Ipad. I am not able to figure out what am I doing wrong with the CSS code for navigation menu.
I have uploaded the website on a testing server
http://bcklight.hostoi.com/
HTML Code
<section id="start" class="start">
<div id="section-nav" class="section-nav">
<div class="container">
<ul class="nav">
<li>Home</li>
<li>Product&Services</li>
<li>Work</li>
<li>Company</li>
<li>Contact</li>
<li>Fi | En</li>
</ul>
</div>
</div>
CSS Code
.container{
margin:0 auto;
max-width:960px;
padding:0 5%;
width:90%
}
.section-nav{
background:#FFFFFF;
-webkit-box-shadow:0 0 5px #111;
-moz-box-shadow:0 0 5px #111;
box-shadow:0 0 5px #111;
color:#838383;
display:none;
font:800 .688em "proxima-nova",sans-serif;
letter-spacing:.3em;height:31px;line-height:31px;
position:absolute;
text-align:center;
text-transform:uppercase;
top:0;
width:100%;
z-index:9999
}
.section-nav.fixed{
position:fixed
}
.section-nav ul{
clear:both;
list-style:none;
margin:0;
padding:0
}
.section-nav li{
display:inline-block;
padding:0 3%
}
.section-nav li.active a{
color:#f7e442;
text-decoration:none
}
.section-nav a{
-webkit-transition:400ms;
-moz-transition:400ms;
-o-transition:400ms;
transition:400ms;
color:#838383;
font-weight:700;
outline:0;
text-decoration:none
}
.section-nav a.active,.section-nav a:hover{
color:#FF8C00;
text-decoration:none
}
.nav-trigger{
text-indent:100%;
white-space:nowrap;
overflow:hidden;
background:yellow;
cursor:pointer;
display:none;
float:right;
height:16px;
margin-top:7px;
width:16px
}
.section-header{
font:800 1.875em "proxima-nova",sans-serif;
letter-spacing:10px;
margin:0 0 20%;
padding-left:10px;
text-align:center;
text-transform:uppercase
}
Please have a look at inspect element on the browser if I am missing anything to mention over here.

I don't understand what's the problem - you're using "display: none;" on both
media="screen, projection"
.section-nav
and then (when it get's even smaller):
media="screen, projection"
screen.css:2057#media only screen and (max-width: 768px)
.section-nav .nav { display: none; }
i think you've got messed up with all the media queries and lost track of what does what :) happens to me all the time. you just need to use Chrome Inspector to figure those out ;-)
http://someimage.com/nFKmzAA

Position fixed has very poor support on mobile browsers.
You should use a media query to change it from position fixed to position absolute on mobile browsers.

in screen.css, line 93
.section-nav{
display:none;}
display none makes this issue.