An error in my ASP.NET Web Application - asp.net

I'm using Microsoft Visual Studio 2010 as my editor. I experienced a problem regarding the layout. I haven't put on any content place holder yet so the links/header can be seen when I view it in browser.
<div id="header_container">
<div id="header">
<img src="Images/bannermj.png" alt="MichaelJona Trucking Services, Co." title="MichaelJona Trucking Services, Co." border="0" width="276" height="217" />
<ul>
<li >Home </li>
<li >About Us</li>
<li >Trucks</li>
<li >Services</li>
<li >Register</li>
<li class="contact">Contact</li>
</ul>
<h1></h1>
</div>
But because it needs a content place holder, I put the content place holder inside the tag:
<div id="header_container">
<div id="header">
<img src="Images/bannermj.png" alt="MichaelJona Trucking Services, Co." title="MichaelJona Trucking Services, Co." border="0" width="276" height="217" />
<asp:ContentPlaceHolder ID="sidebar" runat="server">
<ul>
<li >Home </li>
<li >About Us</li>
<li >Trucks</li>
<li >Services</li>
<li >Register</li>
<li class="contact">Contact</li>
</ul>
<h1></h1>
</asp:ContentPlaceHolder>
</div>
When I viewed it in browser, the headers can't be seen anymore. I'm not sure if the problem is on the css.
/*----TOP PANEL----*/
#header_container
{
height:299px;
position:relative;
margin:0 auto;
padding:0px;
background-image:url(images/header_slice.gif);
background-repeat:repeat-x;
background-position:top;
}
#header
{
width:755px;
height:299px;
position:relative;
margin:0 auto;
padding:0px 9px 0px 14px;
}
#header img
{
height:86px;
width: 728px;
position:absolute;
top:0;
left:50px;
padding:0px;}
#header ul
{
width:94px;
height:145px;
padding:23px 29px 20px 40px;
position:absolute;
top:103px;
left:0px;
background:url(images/ul.gif) 0 0 no-repeat;
}
#header ul li
{
background:url(images/bullet1.gif) 0 7px no-repeat #ccc;
border-bottom:#929292 dotted 1px;
font:12px/24px Verdana, Helvetica, sans-serif;
font-weight:bold;
color: #000;
padding-left:10px;}
#header ul li.contact
{
border:none;
}
#header ul li a
{
font-family:Verdana, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
text-decoration:none;
background:#ccc;
color:#212121;
}
#header ul li a:hover
{
background:#ccc;
color:#B53332;
text-decoration:none;
}
#header h1
{
padding:137px 0px 0px 33px;
background:url(Images/truck3.jpg) 0 0 no-repeat #fff;
width:547px;
height:51px;
font-family:Verdana, Helvetica, sans-serif;
font-size:13px;
font-weight:bold;
color: #3B3B3B;
position:absolute;
top:103px;
left:175px;
}
/*----sidebar----*/
#sidebar
{
width:94px;
height:145px;
padding:23px 29px 20px 40px;
position:absolute;
top:103px;
left:0px;
background:url(images/ul.gif) 0 0 no-repeat;
}
#sidebar ul
{
width:94px;
height:145px;
padding:23px 29px 20px 40px;
position:absolute;
top:103px;
left:0px;
background:url(images/ul.gif) 0 0 no-repeat;
}
#sidebar ul li
{
background:url(images/bullet1.gif) 0 7px no-repeat #ccc;
border-bottom:#929292 dotted 1px;
font:12px/24px Verdana, Helvetica, sans-serif;
font-weight:bold;
color: #000;
padding-left:10px;
}
#sidebar ul li.contact
{
border:none;
}
#sidebar ul li a
{
font-family:Verdana, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
text-decoration:none;
background:#ccc;
color:#212121;
}
#sidebar ul li a:hover
{
background:#ccc;
color:#B53332;
text-decoration:none;
}
#sidebar h1
{
padding:137px 0px 0px 33px;
background:url(Images/truck3.jpg) 0 0 no-repeat #fff;
width:547px;
height:51px;
font-family:Verdana, Helvetica, sans-serif;
font-size:13px;
font-weight:bold;
color: #3B3B3B;
position:absolute;
top:103px;
left:175px;
}
I really need help. I can't even identify where the problem is. I'm new in web application.

The ContentPlaceHolder should be inside a Master page and should not have any elements within it.
You then place Content tags in your ASPX pages which point to the corresponding master page file.
The Content tags will have a ContentPlaceHolderID attribute which should match the ID of your ContentPlaceHolder in your Master Page.
Check this:
http://msdn.microsoft.com/en-us/library/wtxbf3hh.ASPX

Place everything which is inside the content place holder outside of it.

Related

CSS text alignment with Mac browsers

I've created a CSS top bar menu that uses the | character as separators. It's rendering exactly as it should on any browser I try for Linux or Windows. But, on Mac, with any browser, the | characters drop down a line or so, and render below the menu bar.
CSS
#menu {
position:relative;
width:80%;
min-width:800px;
margin-left:auto;
margin-right:auto;
margin-top:1%;
text-align:center;
border-top:1px solid #666666;
border-bottom:1px solid #666666;
padding: 12px 12px;
height:1.6em;
font-family: 'Geometria-Medium';
}
#menu ul {
display:inline-block;
margin: 0;
margin-left:auto;
margin-right:auto;
text-align:left;
padding: 0px;
line-height: 1.2em;
}
#menu li {
list-style:none;
}
#menu>ul>li {
float: left;
margin-right: 1px;
position:relative;
}
#menu>ul>li ul {
position:absolute;
}
#menu>ul>li ul>li {
bottom:0px;
display:none;
width:15em;
float:left;
}
#menu>ul>li:hover ul>li {
display:block
}
#menu a {
display:block;
padding: 0px 5%;
text-decoration: none;
text-transform: uppercase;
color:#666666;
line-height:2em;
}
#menu a:hover {
text-decoration: none;
cursor:pointer;
}
#menu .active {
}
#sub {
background-color:#CC0000;
line-height:2em;
}
#sub a:hover {
background-color:#ff9999;
}
HTML
<div id="menu">
<ul class="nav">
<li class="navLi" style="vertical-align: top !important;">Home <span style="vertical-align: top !important;"> |</span></li>
<li class="navLi">About <span style="vertical-align: top !important;"> |</span></li>
<li class="navLi">Services <span style="vertical-align: top !important;"> |</span></li>
<li class="navLi">Portfolio <span style="vertical-align: top !important;"> |</span>
<ul id="sub">
<li>The Sparkle Project</li>
<li>Jam In Jubilee</li>
<li>Connect Now Network</li>
<li>Ovidiu Bistriceanu</li>
<li>The Devon Clifford Music Foundation</li>
</ul>
</li>
<li class="navLi">Testimonials <span style="vertical-align: top !important;"> |</span></li>
<li class="navLi">Blog <span style="vertical-align: top !important;"> |</span></li>
<li class="navLi">Contact</li>
</ul>
</div>
Any help would be greatly appreciated. Thanks
If it was me..
I'd put all my css in a css file, not inline. Then I'd use css for visual appearances, like below..
#menu>ul>li{
border-right: 1px solid #000;
padding-right:20px;
padding-left: 10px;
}
#menu>ul>li:last-child {
border-right:none;
padding: none;
}
...
<div id="menu">
<ul class="nav">
<li class="navLi">Home</li>
<li class="navLi">About</li>
<li class="navLi">Services</li>
<li class="navLi">Portfolio
Demo

CSS Links Float IE7 or less

Following CSS - works fine in IE8 or greate but not for IE7 or less:
#main_navi {
list-style:none;
text-align:left;
padding:0px;
margin:0px 0px 20px 0px;
float:left;
}
.dsn li {
display: none;
}
a.main_navi_0 ul {
float:left;
display:none;
}
a.main_navi_0:link, a.main_navi_0:visited {
color:blue;
font-size:16px;
font-weight:200;
font-family: 'Allerta', sans-serif;
height:65px;
padding:40px 10px 0 20px;
display:block;
float:left;
text-align:center;
}
a.main_navi_1:link, a.main_navi_1:visited {
font-size:16px;
font-weight:200;
font-family: 'Allerta', sans-serif;
height:65px;
padding:40px 10px 0 20px;
display:block;
float:left;
text-align:center;
color: #3c94e2;
}
a.main_navi_0:hover, a.main_navi_1:hover {
color:#000;
border-bottom:5px solid #3c94e2;
}
a.sub_navi_0:link, a.sub_navi_0:visited {
color:#696969;
font-size:13px;
font-weight:200;
font-family: 'Allerta', sans-serif;
height:25px;
padding:5px 10px 0 10px;
display:block;
float:left;
text-align:center;
z-index:999;
position:relative;
border-bottom:2px solid #dedad6;
}
a.sub_navi_1:link, a.sub_navi_1:visited {
color:#696969;
font-size:13px;
font-weight:200;
font-family: 'Allerta', sans-serif;
height:25px;
padding:5px 10px 0 10px;
display:block;
float:left;
text-align:center;
z-index:999;
position:relative;
border-bottom:2px solid #3c94e2;
}
a.sub_navi_0:hover, a.sub_navi_1:hover {
color:#000;
border-bottom:2px solid #3c94e2;
}
MY html-file:
<div id="nav">
<div id="logo">
<a target="_self" href="fileadmin/../home.html">
<img border="0" title="4fleet Group" alt="" src="fileadmin/../fileadmin/img/logo.jpg">
</a>
</div>
<div id="main_navi">
<ul>
<li class="dsn">
<a class="main_navi_0" href="xyz.html">Über uns</a>
<ul>
<li>
<a class="sub_navi_0" href="xyz/team.html">Team</a>
</li>
<li>
<a class="sub_navi_0" href="xyz/presse.html">Presse</a>
</li>
</ul>
</li>
*another li with class ="dsn" tree*
</ul>
</div>
My output in IE7 or less than IE7:
Link1
Link2
Link3
I want it that way:
Link1 Link2 Link3
How do I get it to work in IE7. I do have an extra CSS file for IE7. I just don't know the code in CSS.
inline-block; is not a valid value for float
I guess you meant display: inline-block;. This won't work in IE7 though.
What you probably want is float: left; but it's hard to say without seeing any HTML.

Footer runs through middle of div

I've spent the past two days troubleshooting this problem for my portfolio website, and have yet to find a solution.
The basic structure of the page is a header, a wrapper for content (nav bar and content divs), and the footer. The problem is that the footer is cutting through the middle of the wrapper div, making the content run around and below the footer. I would post a screenshot, but I don't have enough reputation.
It looks like the div containing the résumé info is the only one causing the problem, whereas the footer is only corresponding to the nav bar.
Code is below.
Additional info:
When I tried setting the footer's position to fixed, it disappears completely from the page. I also tried removing the .wrapper div and just using the content divs. I also tried changing the positions of the divs to absolute and relative.
HTML
<!DOCTYPE html5>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel='icon' href='/favicon.png' />
<link rel='stylesheet' href='main.css' />
<link rel='stylesheet' href='webfonts.css' />
<title>Kyle Simmonds: Design, Writing and Web</title>
</head>
<body>
<header>
<!--<a class='headerlogo' href="http://kylesimmonds.com"><h1>Kyle Simmonds</h1></a>-->
<a href='index.html'>
<ul>
<li id='title'>Kyle Simmonds</li>
<li id='subtitle'>Copywriting, Graphic Design and Web Development</li>
</ul>
</a>
</header>
<div class='wrapper'>
<!-- NAVIGATION BAR -->
<nav>
<ul class='firstlevel'>
<li><a href='index.html'>Home</a></li>
<li><a href='resume.html'>Résumé</a></li>
<li><a href='portfolio.html'>Portfolio</a></li>
<li><a href='blog.html'>Musings</a></li>
<li><a href='contact.html'><font color='#f00'>Contact Me</font></a>
<ul class='secondlevel'>
<li>Email: <a href='mailto:kbsimmonds#gmail.com'>kbsimmonds#gmail.com</a></li>
</ul>
</li>
</ul>
</nav>
<div class='content' id='resume'>
<h2>ABOUT ME</h2>
<p></p>
<hr />
<h2>EXPERIENCE</h2>
<h4>Gulliver's Travel</h4>
<ul>
<li id='jobtitle'>Social Media Intern</li>
<li id='subhead'>January–August '12</li>
<li>// Established and managed company's Facebook and Twitter pages</li>
<li>// Created graphics for emails and promotions</li>
</ul>
<h4>TCU Schieffer School of Journalism</h4>
<ul>
<li id='jobtitle'>Website Assistant</li>
<li id='subhead'>August '09–December '12</li>
<li>// Uploaded content onto the school's website through HTML and CSS</li>
<li>// Managed the site by keeping it free of visual and typographical errors</li>
</ul>
<h4>TCU Student Activities</h4>
<ul>
<li id='jobtitle'>Graphic Designer</li>
<li id='subhead'>September '10–December '12</li>
<li>// Designed posters for campus-wide events</li>
<li>// Created invitations and printed materials for special events</li>
</ul>
<h4>Peaceable Kingdom Retreat for Children</h4>
<ul>
<li id='jobtitle'>Summer Staff</li>
<li id='subhead'>Summer '10–'11</li>
<li>// Facilitated activities for campers including high-ropes courses (zip line and rock climbing) and pool activities</li>
<li>// Ensured a safe and fun environment for campers by being lifeguard, CPR and high-ropes certified</li>
</ul>
<hr />
<h2>SKILLS</h2>
<ul id='skills'>
<li>// Advertising</li>
<li>// Copywriting/editing</li>
<li>// Graphic Design</li>
<li>// Photoshop</li>
<li>// InDesign</li>
<li>// Illustrator</li>
<li>// Web Development</li>
<li>// HTML</li>
<li>// CSS</li>
<li>// jQuery</li>
<li>// Audio/Video Editing</li>
</ul>
<hr />
<h2>EDUCATION</h2>
<h4>Texas Christian University</h4>
<ul>
<li id='subhead'>December '12</li>
<li>// BS Strategic Communication</li>
<li>// Music Minor</li>
<li>// Studies in Italian</li>
</ul>
</div>
</div>
<footer>
<p>© 2013 Kyle Simmonds. All rights reserved.</p>
</footer>
<script src='jquery-1.8.3.js'></script>
<script src='jquery-ui-1.9.2.custom.min.js'></script>
</body>
</html>
CSS
body{
font-family:'OpenSans', sans-serif;
margin:0 auto;
padding:0px;
width:100%;
height:100%;
}
a, a:hover,a:active,a:visited{
text-decoration:none;
color:#000;
}
header{
width:100%;
height:70px;
background:#000;
margin:0 auto;
padding:0px;
}
header h1{
margin:0 0 0 10px;
}
header h4{
font-weight:300;
margin:10px;
}
header ul{
width:960px;
margin:0px 0 0 0;
padding:8px 0 0 50;
overflow:hidden;
}
header li{
list-style:none;
display:inline;
}
#title{
font-size:36px;
color:#fff;
}
#subtitle{
font-size:12px;
font-weight:lighter;
font-style:italic;
color:#ddd;
}
.wrapper{
height:100%;
width:960px;
margin:0 auto;
margin-bottom:10px;
padding:0px;
position:relative;
}
nav{
height:100%;
width:300px;
margin:0 auto;
float:left;
padding:10px;
}
nav .firstlevel{
height:100%;
margin:0px;
padding:0px;
display:block;
border-right:solid 2px #000;
float:left;
}
nav .firstlevel li{
list-style-type:none;
font-weight:lighter;
font-size:16px;
padding:10px;
}
nav .secondlevel ul{
display:inline;
}
nav .secondlevel li{
font-size:12px;
margin:0 0 0 -30px;
padding:10px;
}
.content{
height:100%;
width:600px;
margin:10px 0 0 50;
padding:0px;
position:absolute;
}
.content p{
font-size:12px;
}
hr{
border:0;
height:1px;
background:#aaa;
}
#resume{
display:inline;
}
#resume h2{
font-size:16px;
color:#aaa;
margin-bottom:5px;
padding:0;
}
#resume h4{
font-size:14px;
color:#444;
margin-top:15px;
margin-bottom:0;
}
#resume ul{
margin:0 0 0 0px;
}
#jobtitle{
font-weight:bold;
font-size:16px;
margin:3px 0 0 0;
}
#subhead{
color:#aaa;
}
#resume li{
font-size:12px;
list-style:none;
display:block;
margin:0;
padding:0;
}
footer{
background-color:#000;
height:6%;
width:100%;
margin:0 auto;
margin-bottom:0px;
padding:0px 0 0 0;
position:absolute;
clear:both;
}
footer p{
position:relative;
font-size: 10px;
color:#fff;
text-align:right;
margin:8px 10 0 0;
}
Also, if you have suggestions for making this a better question, or for better code, please let me know. Thank you for any help.
Okay, so I have a few suggestions. You can go look at the updated jsFiddle, here:
http://jsfiddle.net/tf4cq/1/
Basically, there isn't any good reason to have .content positioned absolutely. You floated the sidebar (your nav menu), so to make sure the content lines up correctly on the left side, just add a left-padding value equal to or greater than the width of the sidebar.
The reason your footer doesn't wind up where you thought it should is that the two elements above it (the nav bar and the content) are both taken out of the normal document flow as soon as you apply either float or position: absolute (or fixed, for that matter).
Basically, you just need to update your CSS file a bit:
body{
font-family:'Open Sans', sans-serif;
margin:0 auto;
padding:0;
width:100%;
height:100%;
}
a, a:hover, a:active, a:visited{
text-decoration:none;
color:#000;
}
header{
width:100%;
height:70px;
background:#000;
margin:0 auto;
padding:0;
}
header h1{
margin:0 0 0 10px;
}
header h4{
font-weight:300;
margin:10px;
}
header ul{
width:960px;
margin:0;
padding:8px 0 0 50;
overflow:hidden;
}
header li{
list-style:none;
display:inline;
}
#title{
font-size:36px;
color:#fff;
}
#subtitle{
font-size:12px;
font-weight:lighter;
font-style:italic;
color:#ddd;
}
.wrapper{
height:100%;
width:960px;
margin:0 auto 10px;
padding:0;
position:relative;
}
nav{
height:100%;
width:300px;
margin:0 auto;
float:left;
padding:10px;
}
nav .firstlevel{
height:100%;
margin:0px;
padding:0px;
display:block;
border-right:solid 2px #000;
float:left;
}
nav .firstlevel li{
list-style-type:none;
font-weight:lighter;
font-size:16px;
padding:10px;
}
nav .secondlevel ul{
display:inline;
}
nav .secondlevel li{
font-size:12px;
margin:0 0 0 -30px;
padding:10px;
}
.content{
height:100%;
width:600px;
margin:10px;
padding:0;
padding-left:300px;
}
.content p{
font-size:12px;
}
hr{
border:0;
height:1px;
background:#aaa;
}
#resume{
}
#resume h2{
font-size:16px;
color:#aaa;
margin-bottom:5px;
padding:0;
}
#resume h4{
font-size:14px;
color:#444;
margin-top:15px;
margin-bottom:0;
}
#resume ul{
margin:0 0 0 0px;
}
#resume li{
font-size:12px;
list-style:none;
display:block;
margin:0;
padding:0;
}
#jobtitle{
font-weight:bold;
font-size:16px;
margin:3px 0 0 0;
}
#subhead{
color:#aaa;
}
footer{
background-color:#000;
height:6%;
width:100%;
margin:0 auto;
margin-bottom:0px;
padding:0;
position:absolute;
clear:both;
}
footer p{
position:relative;
font-size: 10px;
color:#fff;
text-align:right;
margin:8px 10 0 0;
}
What I (stupidly) realized was that the DOCTYPE says html5, when html is the correct declaration. #TiesonT. thank you for helping. Changing the DOCTYPE solved the problem.

Custom CSS menu, "Active" tab remains on 'Home' not the actual page

I created this custom css menu, but when switching tabs, the "Active" tab design remains on the 'Home' link on the menu, rather than the actual page I'm on. Any idea how I an fix this?
HTML :
<ul class="menu">
<li><span>Home</span></li>
<li><span>Testing post</span></li>
</ul>
CSS :
.menu {margin:0 auto; padding:0; height:30px; width:100%; display:block; background:url('http://media.datahc.com/Affiliates/43817/Brands/Image/topmenuimages.png') repeat-x;}
.menu li {padding:0; margin:0; list-style:none; display:inline;}
.menu li a {float:left; padding-left:15px; display:block; color:rgb(255,255,255); text-decoration:none; font:12px Verdana, Arial, Helvetica, sans-serif; cursor:pointer; background:url('http://media.datahc.com/Affiliates/43817/Brands/Image/topmenuimages.png') 0px -30px no-repeat;}
.menu li a span {line-height:30px; float:left; display:block; padding-right:15px; background:url('http://media.datahc.com/Affiliates/43817/Brands/Image/topmenuimages.png') 100% -30px no-repeat;}
.menu li a:hover {background-position:0px -60px; color:rgb(255,255,255);}
.menu li a:hover span {background-position:100% -60px;}
.menu li a.active,
.menu li a.active:hover {line-height:30px; font:12px Verdana, Arial, Helvetica, sans-serif; background:url('http://media.datahc.com/Affiliates/43817/Brands/Image/topmenuimages.png') 0px -90px no-repeat; color:rgb(255,255,255);}
.menu li a.active span,
.menu li a.active:hover span {background:url('http://media.datahc.com/Affiliates/43817/Brands/Image/topmenuimages.png') 100% -90px no-repeat;}
HTML:
<div class="menu">
<ul>
<li><a class="menuLink active" href="#">Home</a></li>
<li> <a class="menuLink" href="#">Page1</a></li>
<li><a class="menuLink" href="#">Page2</a></li>
<li><a class="menuLink" href="#">Page3</a></li>
</ul>
</div>
css:
.menu
{
height:64px;
width:100%;
background-repeat:repeat-x;
text-align:center;
}
.menuLink, .menuLink:visited
{
color:#00000;
background-image:url(img/btk.png);
text-decoration:none;
font-size: 20px;
width:70px;
height: 50px;
padding: 10px;
display:block;
margin-left: 10px;
margin-right: 10px;
margin-top: 6px;
}
.menuLink:hover
{
color:#CC7011;
background-color:aqua;
font-size: 26px;
}
.active{
background-color:aqua;
}
ul,li{
display:inline-block;
list-style:none;
line-height:60px;
vertical-align:bottom;
}
​
jquery:
$('.menuLink').click(function(){
$('a').removeClass('active');
$(this).addClass('active');
});​
Live Demo
http://jsfiddle.net/PYW35/
First you have an extraneous semicolon in in the first <li>
You need to move the class="active" to the <li> that you want to be active.
I don't know the exact answer to it but, I would say to find something that gets the url and if it matches the link in the bar then that would get class active, else, none are active.
I thing you need some JavaScript to get it done,
Here is the simple demo.
Hope this helps
Note : getElementsByClassName() not supported by some browsers
Take a look on the following comparison table

how to make sub menu appear when hover over link?

how do i make a sub menu dissapear and appear when i hover over a link?
this is my menu:
<div class="sideMenu2">
<ul>
<li><a href>retail</a>
<ul class="subsideMenu2">
<li>cabot circus</li>
<li>st. stephen's</li>
<li>silverburn</li>
<li>braehead</li>
</ul>
</li>
<li><a href>sports & leisure</a>
<ul class="subsideMenu2">
</ul>
</li>
</ul>
</div>
This is my current css:
.sideMenu2 ul li.on a
{
height:2em;
padding-top: 2px;
background:url(../images/point.png) no-repeat;
font-weight:bold;
}
.sideMenu2 ul
{
padding: 15px 0px 0px 0px;
list-style-type:none;
font-size:0.9em;
width:20em;
color:#fff;
margin-left:-10px;
}
.sideMenu2 ul a{
padding: 2px 20px 0px 0px;
color:#fff;
text-decoration:none;
float:left;
width:19.2em;
}
.sideMenu2 li a
{
height:2em;
padding-top: 1px;
padding-left:15px;
}
.sideMenu2 li a:hover{
background:url(../images/point.png) no-repeat;
cursor:pointer;
padding-left:-15px;
}
.subsideMenu2 {
display: none;
}
.sideMenu2 li:hover .subsideMenu2 {
display: block;
}
But won't work in old Internet Explorer, for them the only option is javascript.
see this example script of header menu dropdwon style
http://bit.ly/1abEJ9o

Resources