I am trying to create a master page with vertical menubar and the content should show beside the menubar. Just like a normal web page having vertical menu bar in the left side and contents side by it.
But the content is pushed below the side bar. How can fix this design issue? Please help. Attached is the screen shot.
My master page
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Layout.master.cs" Inherits="FMS.UIWebUsers.Layout" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="../../css/navigationMenu.css" rel="stylesheet" />
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div id="menu12">
<ul>
<li>
<div class="bt1">
<span class="ht11">ยป </span>
<span class="hw12">Navigation Menu</span>
</div>
</li>
<li><a title="Home" href="#">Home</a></li>
<li><a title="Photos" href="#">Photo Gallery</a></li>
<li><a title="Events" href="#">Events Calendar</a></li>
<li><a title="Forum" href="#">Community</a></li>
<li><a title="Articles" href="#">Article Directory</a></li>
<li><a title="Link Directory" href="#">Link Directory</a></li>
<li><a title="Download" href="#">Freeware Download</a></li>
</ul>
</div>
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
css for the vertical menu bar
#menu12 {
width: 178px;
padding: 0 0 0 0;
margin-bottom: 1em;
font-size: 11px;
font-weight: normal;
font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
background-color: #6898d0;
color: #333;
}
#menu12 ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}
#menu12 li {
border-bottom: 1px solid #90bade;
margin: 0;
width: auto;
}
#menu12 li a {
display: block;
padding: 3px 0px 3px 0.5em;
border-left: 5px solid #8AA1B6;
border-right: 5px solid #8AA1B6;
background-color: #6898d0;
color: #fff;
text-decoration: none;
width: auto;
}
#menu12 li a:hover {
border-left: 5px solid #800000;
border-right: 5px solid #800000;
background-color: #FF7C3E;
color: #fff;
}
.bt1 {
width : auto;
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 10px;
text-align : left;
font-weight : bold;
color : #ffffff;
background-color : #8AA1B6;
padding-top : 3px;
padding-bottom : 4px;
padding-left : 4px;
border-left: 5px solid #FF7C3E;
display : block;
}
.ht11 {
font-size : 10px;
font-weight: bold;
color : #000;
font-family : Verdana, Arial, Helvetica, sans-serif;
text-decoration : none;
}
.hw12 {
font-size : 11px;
font-weight : bold;
color : #ffffff;
font-family : verdana, arial, helvetica, sans-serif;
text-decoration : none;
}
My webpage code
<%# Page Language="C#" AutoEventWireup="true" MasterPageFile="~/Layout.Master" CodeBehind="WebForm1.aspx.cs" Inherits="FMS.UIWebUsers.WebForm1" %>
<asp:Content ID="BodyContent" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<h2><%: Title %>.</h2>
<h3>Your application description page.</h3>
<p>Use this area to provide additional information.</p>
</asp:Content>
Related
My CSS page makes my entire body section disappear. Everything in the header appears like it should, but literally anything I put in the body will not show up.
If I take out the CSS page, it comes in just fine. But once I put the CSS page back, the body disappears. I tried just p, h*, div, p nested in div. Everything is closed properly; the debugger can't find anything wrong with the code.
html {
font-family: "Source Sans Pro", "Staatliches," Arial, sans-serif;
font-size: 16px;
color: #000000;
}
/* links */
a {
color:#000000;
font-weight: bold;
}
a:visited {
color:#000000;
font-weight: bold;
}
a:hover {
color:#98ff98;
font-weight: bold;
}
a:active {
color:#000000;
font-weight: bold;
}
/* header */
header {
background-color: #98ff98;
font-family: "Source Sans Pro", Arial, Helvetica, sans-serif;
border-bottom: 1px solid #98ff98;
width: 100%;
top: 0;
padding: 0;
position: absolute;
}
#name {
float: right;
margin-right: 20px;
}
.name {
text-transform: uppercase;
font-family: "Staatliches", "Arial Black", sans-serif;
}
#nav {
text-align: center;
padding: 0 20px;
/* removed margin: 30px auto; b/c it looked weird */
}
li {
display: inline-block;
border: 1px solid #c8cfc8;
border-radius: 55px;
padding: 10px 10px;
background-color: #c8cfc8;
}
/* body? */
body {
background-color: #c8cfc8;
color: #000000;
font-family: "Source Sans Pro", "Staatliches," Arial, sans-serif;
}
<!DOCTYPE html>
<html>
<head>
<title>website</title>
<link href="resources/css/index.css" type="text/css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Merriweather:wght#400;700&family=Source+Sans+Pro:wght#400;700&family=Staatliches&display=swap" rel="stylesheet">
</head>
<header>
<div id="nav">
<ul>
<li class="link">Home</li>
<li class="link">Contact</li>
<li class="link">About</li>
</ul>
</div>
<div id="name">
<h1 class="name">Username</h1>
<h4 class="minibio">tag line/one sentence bio</h4>
</div>
</header>
<body>
<p>test</p>
<h1>test</h1>
<div>test</div>
<div>
<p>also test</p>
</div>
</body>
</html>
The postion: absolute in your header is doing this.
It's allowing the body to go behind the header, so the body still there, but is behind the green background color.
Replacing the position: absolute for the desired height can do the job as I saw.
html {
font-family: "Source Sans Pro", "Staatliches," Arial, sans-serif;
font-size: 16px;
color: #000000;
}
/* links */
a {
color:#000000;
font-weight: bold;
}
a:visited {
color:#000000;
font-weight: bold;
}
a:hover {
color:#98ff98;
font-weight: bold;
}
a:active {
color:#000000;
font-weight: bold;
}
/* header */
header {
background-color: #98ff98;
font-family: "Source Sans Pro", Arial, Helvetica, sans-serif;
border-bottom: 1px solid #98ff98;
width: 100%;
top: 0;
padding: 0;
height: 200px;
/*position: absolute;*/
}
body {
display: absolute;
}
#name {
float: right;
margin-right: 20px;
}
.name {
text-transform: uppercase;
font-family: "Staatliches", "Arial Black", sans-serif;
}
#nav {
text-align: center;
padding: 0 20px;
/* removed margin: 30px auto; b/c it looked weird */
}
li {
display: inline-block;
border: 1px solid #c8cfc8;
border-radius: 55px;
padding: 10px 10px;
background-color: #c8cfc8;
}
/* body? */
body {
background-color: #c8cfc8;
color: #000000;
font-family: "Source Sans Pro", "Staatliches," Arial, sans-serif;
}
<!DOCTYPE html>
<html>
<head>
<title>website</title>
<link href="resources/css/index.css" type="text/css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Merriweather:wght#400;700&family=Source+Sans+Pro:wght#400;700&family=Staatliches&display=swap" rel="stylesheet">
</head>
<header>
<div id="nav">
<ul>
<li class="link">Home</li>
<li class="link">Contact</li>
<li class="link">About</li>
</ul>
</div>
<div id="name">
<h1 class="name">Username</h1>
<h4 class="minibio">tag line/one sentence bio</h4>
</div>
</header>
<body>
<p>test</p>
<h1>test</h1>
<div>test</div>
<div>
<p>also test</p>
</div>
</body>
</html>
Simple answer here. The text is behind the header, so we just need to shift the text downwards. We can do this by adding a margin to the top of the text.
All you have to do is add the following margin-top:
body {
background-color: #c8cfc8;
color: #000000;
font-family: "Source Sans Pro", "Staatliches," Arial, sans-serif;
margin-top: 150px;
}
As Isabelle said, your header is now sitting in front of the body. However, another thing to note is that your header element should be inside the body. The body element should contain all the other elements. Create a div element with an id like content to use as the "body" of the page and set some padding to the top of it.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<header>
<div id="nav">
<ul>
<li class="link">Home</li>
<li class="link">Contact</li>
<li class="link">About</li>
</ul>
</div>
<div id="name">
<h1 class="name">Username</h1>
<h4 class="minibio">tag line/one sentence bio</h4>
</div>
</header>
<div id="content">
<p>test</p>
<h1>test</h1>
<div>test</div>
</div>
</body>
</html>
And add some padding
#content {
padding-top: 200px;
}
Currently, I'm working on a basic navigation bar that changes the color of the text when clicked to go to a new page (So text on one page is a different color than text on another). I started the project ultimately using multiple CSS files to get the result I am looking for but it is horrendously inefficient. Obviously "if" statements don't exist in CSS but are there a way to call on an action if a certain page is loaded.
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First Project</title>
<link href="css/main.css" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
</head>
<body>
<div class="header">
<div class="navigation">
<ul>
<li class="login">Login</li>
<li class="shop">Shop</li>
<li class="wname">Website Name</li>
<li class="contact">Contact</li>
<li class="about">About</li>
</ul>
</div>
</div>
</body>
</html>
CSS Code
* {
box-sizing: border-box;
}
.header {
text-align: center;
width: 100%;
}
li {
color: rgba(102, 102, 102, .5);
padding: 20px;
margin: 20px;
font-size: 16px;
font-family: "Open Sans Condensed", sans-serif ;
text-transform: uppercase;
display: inline-block;
}
.wname {
font-size: 32px;
color: #F68404;
font-weight: 200;
border-bottom: solid 1px;
border-bottom-color: #F68404;
}
li:active {
color: #F68404;
border-bottom: solid 1px;
border-bottom-color: #F68404;
}
li:hover {
color: #F68404;
font-weight: 300;
}
/*.jumbotron {
background: url("https://newevolutiondesigns.com/images/freebies/city-wallpaper-11.jpg") no-repeat top center;
background-size: cover;
height: 800px;
}
.main {
color: rgb(102, 102, 102);
font-family: "Open Sans Condensed", sans-serif;
text-align: center;
}
.btn-main {
font-size: 32px;
padding: 10px;
border: solid 1px #000;
background-color: aliceblue;
color: #000;
border-radius: 10%;
}
.btn-main:hover {
color: aliceblue;
background-color: #000;
border: solid 1px aliceblue;
}*/
/*Class Rules for all anchors/hyperlinks*/
a {
text-decoration: none;
color: inherit;
}
I would appreciate any help,
Jordan
Change this rule to add an active class as well:
li.active,
li:hover {
color: #F68404;
font-weight: 300;
}
And in your individual pages, use the class for the <li>. Let's say, in the Shop page, use this code:
<li class="shop active">Shop</li>
This is because, you aren't using anything that checks the location and does stuff. Also, you aren't using any back end applications, which generate dynamic header, based on the URL.
Hello people!
I'm very new to this site and to HTML... I would like to build my own website but since I don't have much experience and knowledge about HTML I need help.
I want a side bar menu like on this website http://crichd.in/live/. Can someone help me? Also I want the IPL T20 text on the top left like on the website. On the website the side bar menu and table is inside a div box. As I said, I'm very nooby :|.
Also, the last table content "wallpapers" Is a little bit too big... I set my custom size for it but it still is bigger then the other boxes. Can someone also fix this?
<html>
<title>IPLRADAR</TITLE>
<head>
<style>
#cssmenu {
background: #333;
list-style: none;
margin: 0;
padding: 0;
width: 12em;
}
#cssmenu li {
font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
margin: 0;
padding: 0;
list-style: none;
}
#cssmenu a {
background: #333;
border-bottom: 1px solid #393939;
color: #ccc;
display: block;
margin: 0;
padding: 8px 12px;
text-decoration: none;
font-weight: normal;
}
#cssmenu a:hover {
background: #2580a2 url("images/hover.gif") left center no-repeat;
color: #fff;
padding-bottom: 8px;
}
</style>
<style>
body {
background-color: #C0C0C0;
}
</style>
<style>
table, th, td {
border: 1px solid #CFD9BB;
background: #E5E5E5;
table-layout: fixed;
</style>
<style>
.div1 {
width: 500px;
height: 750px;
border: 2px solid black;
background: #CFD9BB
}
</style>
<style>
.div2 {
width: 50px;
height: 50px;
border: 0px solid black;
background: #F2F2F2
}
</style>
</head>
<body>
<div id='cssmenu'>
<ul>
<li class='active'><a href='#'><span>Home</span></a></li>
<li><a href='#'><span>Products</span></a></li>
<li><a href='#'><span>Company</span></a></li>
<li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>
</body>
<center>
<table>
<tr>
<th style="background-color: #808080" width="500px">
<h3><font size="5" COLOR="blue" face="verdana">IPL</font><Font size ="5" color="white" face="verdana">T20</font></h3>
<div style="position: relative; top: -20px; left: 5px; margin: 0; padding: 0; text-decoration: none; "><i>Free streams and news</i></th>
</tr></table>
<table>
<tr>
<td height="25px" width="500px" style="background-color: #F2F2F2; color:white;text-align:center">
<p><font face ="verdana">Watch match (Stream)</font>
</td>
</tr>
<td height="25px" width="500px" style="background-color: #F2F2F2; color:white;text-align:center">
<p><font face ="verdana">Fixtures this week</font>
</tr></td>
<tr style=" height:25px"><td height="25px" width="500px" style="background-color: #F2F2F2; color:white;text-align:center">
<p><font face="verdana">Wallpapers</font> <font size="0,5" color ="red"><div style="position: relative; top: -37px; left: 55px; margin: 0; padding: 0; text-decoration: none; ">BETA</font>
</tr></td>
</table>
I've added a new css element to my master page. But After that, I can't click on other controls in the page. I know some div is overlapping the other making click not working. But I couldn't figure it out with the css file. My css file is given below:
here where I placed my div in html :
/* XLSF 2007 */
body {
background: #333 url(image/bg-strip-dark.png) 0px 0px;
font-family: normal, "Century Gothic", "Helvetica Neue Light", "Helvetica Neue", georgia, "times new roman", "Arial Rounded MT Bold", helvetica, verdana, tahoma, arial, "sans serif";
font-size: 75%;
color: #666;
}
h1,
h1 a {
color: #999;
text-decoration: none;
}
h1 {
color: #999;
margin-bottom: 0;
margin-left: -5px;
margin-top: 0;
padding-left: 5px;
padding-right: 5px;
}
h1,
h2,
h3 {
clear: both;
float: left;
font-family: normal, "Century Gothic", "Helvetica Neue Light", "Helvetica Neue", georgia, "times new roman", "Arial Rounded MT Bold", helvetica, verdana, tahoma, arial, "sans serif";
font-size: 3em;
font-size-adjust: none;
margin-bottom: 0.25em;
padding-bottom: 1px;
}
h1,
h2 {
letter-spacing: -1px;
margin-bottom: 0;
margin-left: -5px;
margin-top: 0;
padding-left: 5px;
padding-right: 5px;
}
a {
color: #6699cc;
padding: 0px 2px;
text-decoration: none;
}
a:hover {
background: #6699cc;
color: #fff;
}
#lights {
clear: both;
position: relative;
left: 0px;
top: 0px;
width: 100%;
height: 96px;
overflow: hidden;
z-index: 1;
}
.xlsf-light {
position: relative;
}
body.fast .xlsf-light {
opacity: 0.9;
}
.xlsf-fragment {
position: relative;
background: transparent url(image/bulbs-50x50-fragments.png) no-repeat 0px 0px;
width: 50px;
height: 50px;
}
.xlsf-fragment-box {
position: relative;
left: 0px;
top: 0px;
width: 50px;
height: 50px;
*width: 100%;
*height: 100%;
display: none;
}
.xlsf-cover {
position: relative;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background: #fff;
opacity: 1;
z-index: 999;
display: none;
}
/*
.xlsf-light.bottom {
height:49px;
border-bottom:1px solid #006600;
}
.xlsf-light.top {
height:49px;
border-top:1px solid #009900;
}
*/
<%# Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link rel="stylesheet" media="screen" href="christmaslights.css" />
<title>Untitled Page</title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
<style type="text/css">
.style1 {
width: 135px;
}
</style>
<script src="snowstorm.js"></script>
<script>
snowStorm.snowColor = '#99ccff'; // blue-ish snow!?
snowStorm.flakesMaxActive = 96; // show more snow on screen at once
snowStorm.useTwinkleEffect = true; // let the snow flicker in and out of view
</script>
<script src="lights/soundmanager2-nodebug-jsmin.js"></script>
<script src="http://yui.yahooapis.com/combo?2.6.0/build/yahoo-dom-event/yahoo-dom-event.js&2.6.0/build/animation/animation-min.js"></script>
<script src="lights/christmaslights.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table style="width:100%;">
<tr>
<td class="style1">
<asp:Image ID="Image1" runat="server" ImageUrl="~/images/remedyonline-logo.png" />
</td>
<td>
<span style="font-family: Tahoma; font-size: xx-large; font-weight: bold; color: #666666; padding-left: 10px;">Representatives Corner
<marquee direction="right"><font color=#993300 size=5 ><strong>GDS Wishes A HAPPY X'MAS</strong></marquee></font>
</span>
</td>
</tr>
</table>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
<div id="lights">
</div>
</body>
</html>
At least please notify me where's the problem. I am new to html and css.
It could be that one of the elements with a modified z-index property is rendered above the aforementioned controls. The solution, then, would be to isolate which one of them is problematic for you by removing the properties and observing the results.
A better solution, however, might be to learn about the developer tools in your favorite browser - they can be incredibly helpful for situations like this:
Chrome Dev Tools
Firefox Dev Tools
I have a problem with my css file. I'm programming with visual studio in asp.net and I want to do a design of my page login. But sometimes, it works and sometimes, it doesn't...
Thanks for your help ;)
This is my code CSS :
#charset "utf-8";
/* CSS Document */
#import url(http://meyerweb.com/eric/tools/css/reset/reset.css);
/* ---------- FONTAWESOME ---------- */
/*[class*="fontawesome-"]:before
{
font-family: Calibri, Candara, Segoe, "Segoe UI" , Optima, Arial, sans-serif;
}*/
/* ---------- GENERAL ---------- */
body
{
background-color: #C0C0C0;
color: #000;
font-family: Calibri, Candara, Segoe, "Segoe UI" , Optima, Arial, sans-serif;
font-size: 16px;
line-height: 1.5em;
}
.input
{
border: none;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
-webkit-appearance: none;
}
/* ---------- LOGIN ---------- */
#login
{
margin: 50px auto;
width: 400px;
}
#login h2
{
background-color: #f95252;
-webkit-border-radius: 20px 20px 0 0;
-moz-border-radius: 20px 20px 0 0;
border-radius: 20px 20px 0 0;
color: #fff;
font-size: 28px;
padding: 20px 26px;
}
#login h2 span[class*="fontawesome-"]
{
margin-right: 14px;
}
#login fieldset
{
background-color: #fff;
-webkit-border-radius: 0 0 20px 20px;
-moz-border-radius: 0 0 20px 20px;
border-radius: 0 0 20px 20px;
padding: 20px 26px;
}
#login fieldset p
{
color: #777;
margin-bottom: 14px;
}
#login fieldset p:last-child
{
margin-bottom: 0;
}
#login fieldset input
{
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
#UserEmail
{
background-color: #eee;
color: #777;
padding: 4px 10px;
width: 328px;
}
#login fieldset input[type="email"], #login fieldset input[type="password"]
{
background-color: #eee;
color: #777;
padding: 4px 10px;
width: 328px;
}
#login fieldset input[type="submit"]
{
background-color: #33cc77;
color: #fff;
display: block;
margin: 0 auto;
padding: 4px 0;
width: 100px;
}
#login fieldset input[type="submit"]:hover
{
background-color: #28ad63;
}
and this is my aspx page :
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Logon.aspx.cs" Inherits="projetDGCS1.Logon" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//FR" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Connexion | DGCS</title>
<link href="css/styleLogin.css" rel="Stylesheet" />
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
</head>
<body>
<center>
<form id="form1" runat="server">
<div id="login">
<h2>
Connexion</h2>
<fieldset>
<p>
<label for="email">
Nom</label></p>
<p>
<asp:TextBox ID="UserEmail" runat="server" CssClass="input" /></p>
<p>
<label for="password">
Mot de passe</label></p>
<p>
<asp:TextBox ID="UserPass" TextMode="Password" runat="server" CssClass="input" /></p>
<p>
<asp:Button ID="Submit1" OnClick="Logon_Click" Text="Se connecter" runat="server" /></p>
<p>
<asp:Label ID="Msg" ForeColor="red" runat="server" />
</p>
</fieldset>
</div>
</form>
</center>
</body>
</html>
It works well for me. The only mistakes I can see are the 'for' attributes on your labels which should match the id attributes of your form elements.
So Nom label should be: <label for="UserEmail">
Is this login tied to forms authentication? you might need to add a location path in your web.config file:
<configuration>
<location path="css/styleLogin.css">
<system.web>
<authorization>
<allow users="*"/>
</authorization>
</system.web>
</location>
</configuration>