The default code shows the Home menu item aligned to the right. I changed the ul:menu and added attribute float:left to get the 'Home' menu too be aligned to the left of the page but to no avail.
Is there way to show the 'home' menu to be on the left end of the page. I am trying to create a menu bar similar to SO as a learning project
its a CSS issue but in site.css you can make following changes:
#menucontainer
{
margin-top:40px;
clear: both; /* Add this*/
}
and also
ul#menu
{
border-bottom: 1px #5C87B2 solid;
padding: 0 0 2px;
position: relative;
margin: 0;
text-align: left; /* Change from right to left */
}
Work for this Site.Master
<%# Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<asp:ContentPlaceHolder ID="head" runat="server">
<title></title>
</asp:ContentPlaceHolder>
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="page">
<div id="header">
<div id="title">
<h1>My MVC Application</h1>
</div>
<div id="logindisplay">
<% Html.RenderPartial("LogOnUserControl"); %>
</div>
<div id="menucontainer">
<ul id="menu">
<li><%= Html.ActionLink("Home", "Index", "Home")%></li>
<li><%= Html.ActionLink("About", "About", "Home")%></li>
</ul>
</div>
</div>
<div id="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
<div id="footer">
</div>
</div>
</div>
</body>
</html>
Related
So I need to do my school project which is building a website using asp.net and including a master page.
Now I kind of got stuck since My menu isn't where I want it to be (I pointed where I want it to be using paint), I have no idea what I'm doing wrong so if someone could tell me how to change the menu location and why it didn't work for me I will be very glad.
this is the video page code
`<%# Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="Videos.aspx.cs" Inherits="WebApplication1.Videos" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<link href="StyleSheet.css" rel="stylesheet" />
<style type="text/css">
.auto-style1 {
height: 298px;
margin-top: 0px;
}
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<h1>Videos</h1>
<p>This page will show avideos about Muay Thai techniques, trainings and also other intresting content</p>
<div id="video1">
<iframe width="420" height="315" src="https://www.youtube.com/embed/6Glyrl0-cSk" frameborder="0" allowfullscreen class="auto-style3"></iframe>
</div>
<h3>Buakaw training</h3>
<p></p>
<p></p>
<div id="video2">
<iframe width="420" src="https://www.youtube.com/embed/Mf1Ch8mJ464" frameborder="0" allowfullscreen class="auto-style1"></iframe>
</div>
</asp:Content>`
this is the css code:
`body {
background-color:black;
font-size:13px;
font-family:Arial, Helvetica, sans-serif;
color: #333;
margin: 0;
padding: 0;
line-height: 16px;
direction:rtl;
border-color:cornsilk;
}
#header{
height:120px;
background:url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSljBA8SLU52gNwOjT0HYxWNs17EXF3ykPDNLaiwy0lsC4rx71w") repeat-x;
direction:rtl;
text-align:center;
position:fixed;
}
#header2
{
height:30px;
}
p
{
direction:rtl;
text-align:left;
color:brown;
font-size: x-large;
}
HomePage picture
{
text-align:left;
}
table,td
{
border:1px white solid;
border-collapse:collapse;
border-spacing:30px;
}
td
{
font-size:23px
}
td
{
padding-top: .5em;
padding-bottom: .5em;
}
h1
{
text-align:center;
}
img
{
padding:5px;
}
video1
{
text-align:left;
position:absolute
}
video2
{
text-align:left;
position:relative;
}
#video1
{
position:static;
text-align:left;
}
#video2
{
position:static;
text-align:left;
}
h3{
text-align:left;
}`
and this is the master page code:
` <%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="NewWebsite.Site1" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title></title>
<link href="StyleSheet.css" rel="stylesheet" />
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<div id="header">
</div>
<div id="header2">
<form id="form1" runat="server">
<div>
<h2>Menu</h2>
<table>
<tr>
<td> Home Page</td>
</tr>
<tr>
<td> Top Fighters</td>
</tr>
<tr>
<td>Videos</td>
</tr>
</table>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</div>
<div id="left">
</div>
</body>
</html>`
Where I want to put my manu
i just dont know why you are not using bootstrap ?
if you will usew bootstrap it would be easy to place content any where you want with a responsive design Like
just make a a row with 2 divs inside that like
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row col-sm-8">
Now place your Video Content here like :
<h1>Videos</h1>
<p>This page will show avideos about Muay Thai techniques, trainings and also other intresting content</p>
<div id="video1">
<iframe width="420" height="315" src="https://www.youtube.com/embed/6Glyrl0-cSk" frameborder="0" allowfullscreen class="auto-style3"></iframe>
</div>
<h3>Buakaw training</h3>
<p></p>
<p></p>
</div>
<div class="row col-sm-4">
And place you navigation here like :
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</div>
</div>
</div>
</body>
</html>
Run this Snippet in a full page view you will find out how to adjust more and do stuff that you want
I am trying to create a website but these images I have are not working, they should be under the title, for example, the alcohol photo should be under the alcohol title and nervous system photo should be under the nervous system title.
Here is a screenshot of how it looks like at the moment:
Here is my code at the moment:
HTML: http://hastebin.com/utafabumof.xml
CSS: http://hastebin.com/arefipaguy.css
Thank you for helping if you can. it'd mean a lot.
The images should be inside the same div, for example alcohol image should be in
<div class="science">
<div class="alco">Image for Alco goes Here</div>
<div class="nersys">Image for Nersys goes Here</div>
</div>
Try this.
html file:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Science - Portfolio</title>
<link rel="stylesheet" type="text/css" href="styles/science.css"/>
</head>
<body>
<header>
<div class="nav">
<ul>
<li class="home">Home</li>
<li class="about">English</li>
<li class="news">Hosptality & Catering</li>
<li class="contact">Leisure & Tourism</li>
<li class="contact">BTEC Computing</li>
<li class="contact">BTEC Business</li>
<li class="contact">CV</li>
</ul>
</div>
</header>
<div class="science">
<center><h2>Science:</h2></center>
</div>
<div class="center-block">
<div class="alco">
<h4>Alcohol:</h4>
<div class="alcoimage"><img src="images/Science/alcohol.jpg" width="400" height="357" alt=""/></div>
</div>
<div class="nersys">
<h4>Nervous System:</h4>
<div class="alcoimage"><img src="images/Science/NervousSystem.jpg" width="291" height="291" class="nerimage" /></div>
</div>
</div>
<div id="wrapper">
<div id="footer">
<p><center>Contact Me:</center></p>
<p><center>11lanjac#abbeyfield.wilts.sch.uk</center></p>
</div>
</div>
</body>
</html>
And Css file:
....
.science {
padding-top: 30px;
}
.center-block{
text-align: center;
}
.center-block .alco {
display: inline-block;
vertical-align: top;
text-align: center;
padding-right:150px;
}
.center-block .nersys{
display: inline-block;
text-align: center;
padding-left:150px;
}
.alcoimage {
padding-top: 60px;
}
#footer {
background:#40ea3c;
width:100%;
height:80px;
position:absolute;
bottom:0;
left:0;
color: white;
}
I want to use this template in my MVC project.
But the left column is not showing in index.aspx.
Thanks for helping me to find the error.
Site.css
body{
margin:0;
padding:0;
line-height: 1.5em;
}
b{font-size: 110%;}
em{color: red;}
#maincontainer{
width: 840px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
}
#topsection{
background: #EAEAEA;
height: 90px; /*Height of top section*/
}
#topsection h1{
margin: 0;
padding-top: 15px;
}
#contentwrapper{
float: left;
width: 100%;
}
#contentcolumn{
margin-left: 200px; /*Set left margin to LeftColumnWidth*/
}
#leftcolumn{
float: left;
width: 200px; /*Width of left column*/
background: #C8FC98;
}
#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}
#footer a{
color: #FFFF80;
}
Site.Master
<%# Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
<!DOCTYPE html>
<html>
<head id="topsection" runat="server">
<link href="<%=Url.Content("~/Content/Site.css")%>" rel="stylesheet" type="text/css" />
<title>
<asp:ContentPlaceHolder ID="TitleContent" runat="server" />
</title>
</head>
<body>
<asp:ContentPlaceHolder ID="pageHeadPlaceHolder" runat="server">
<div id="pageHead">
<p>Head</p>
</div>
</asp:ContentPlaceHolder>
<div id="mainContainer">
<asp:ContentPlaceHolder ID="leftColPlaceHolder" runat="server">
<div id="leftcolumn">
<ul>
<li>Home</li>
<li>Contact Us</li>
<li>About Us</li>
</ul>
<div class="innertube"><b>Left Column: <em>200px</em></b></div>
</div>
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="MainContent" runat="server">
<div id="contentwrapper">
<div id="contentcolumn">
<p>
test</p>
</div>
</div>
</asp:ContentPlaceHolder>
</div>
<asp:ContentPlaceHolder ID="pageFooterPlaceHolder" runat="server">
<div id="footer">
</div>
</asp:ContentPlaceHolder>
</body>
</html>
Index.aspx
<%# Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
Home Page
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<h2><%: ViewData["Message"] %></h2>
<p>
To learn more about ASP.NET MVC visit http://asp.net/mvc.
</p>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="leftColPlaceHolder" runat="server"></asp:Content>
UPDATED Image
Have you checked the HTML output? If the left column code is not there then its not a CSS issue. It looks like you are overwriting your left column code in the master with the blank content tag. Try removing the following from your index.aspx.
<asp:Content ID="Content3" ContentPlaceHolderID="leftColPlaceHolder" runat="server"></asp:Content>
You only need to declare it in the index.aspx if you plan on replacing what is in the master.
Love,
I can't see the css file included anywhere in your Site.Master. Try adding a reference to that, something along the lines of (or whatever the path to your particular css may be):
<link href="<%=Url.Content("~/Content/Site.css")%>" rel="stylesheet" type="text/css" />
I am trying to get my menu aligned horizontally across the top, but after doing so it is still in the side. Below is my css and masterpage. Note. I am using .net microsoft visual studios.
CSS page..
#title, #menu, #footer {
background-color: #0174DF;
color: #fff;
}
ul#menu
{
margin-left: 0;
padding-left: 0;
white-space: nowrap;
}
#menu li
{
display: inline;
list-style-type: none;
}
#menu a { padding: 3px 10px; }
#menu a:link, #menu a:visited
{
color: #fff;
background-color: #036;
text-decoration: none;
}
#menu a:hover
{
color: #fff;
background-color: #369;
text-decoration: none;
}
#footer {
text-align: center;
Masterpage...
<%# 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">
<title>Lottery Syndicate Web Site</title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
<link href="css/css/reset.css" media="screen" rel="stylesheet" type="text/css" >
<link href="css/css/960.css" media="screen" rel="stylesheet" type="text/css" >
<link href="css/css/text.css" media="screen" rel="stylesheet" type="text/css" >
<link href="css/style.css" media="screen" rel="stylesheet" type="text/css" >
</head>
<body>
<form id="form1" runat="server">
<div id="container" class="container_16">
<div id="title" class="grid_16">
<img src="images/bingo.png" alt="bingo header" />
</div>
<div id="menu" class="grid_3">
<ul>
<li>Home</li>
<li>Exercise 1</li>
<li>Exercise 2</li>
<li>Exercise 3</li>
<li>Exercise 4</li>
<li>Exercise 5</li>
<li>Exercise 6</li>
<li>Exercise 7</li>
<li>Exercise 8</li>
</ul>
</div>
<div id="content" class="grid_13">
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="footer" class="grid_16">
<p>Footer here</p>
</div>
</div>
</form>
</body>
</html>
Your CSS expects your ul to have an id of menu... But the element with that id is the containing div. I'd clear that up first.
ul#menu
As all of li elements are set to be inline in your css, you problem could be solved like this:
#menu { text-align: center; }
Hope it helps.
I have created a jsfiddle for you that solves the problem and centers the div horizontally http://jsfiddle.net/trickeedickee/Wj6U9/
I have two templates. index.html (PARENT) and test.html (CHILD)
I have a DIV which is fixed on top of the page, like a bar [#TopBar]. it stays there on the the PARENT template, but once it reaches the CHILD template, it insists on adding some sort of padding or margin, and its a few pixels off the top.
I tried overiding the css from within the child template, and still no luck. I stopped using the templates, and creating two full HTML files and that works(don't want to do this as i am duplicating html code). So it seems everytime i put {% extends "crm/index.html" %} on the child template it stuffs things up.
Heres my code:
PARENT - index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>{%block title%}Control Panel {%endblock%}</title>
<link rel="stylesheet" type="text/css" href="{{STATIC_URL}}crm/crm.css" />
</head>
<body>
<div id="TopBar" >
<div id="header">
<h1> TITLE</h1>
</div>
<div id="searches" >
<input type="text" id="search" name="search" /> <input type="button" value="submit" />
</div>
</div>
<div id="LeftCol">
<div id="LeftMenu">
<h3>MENU</h3>
</div>
</div>
<div id="RightCol">
<div id="UserProfile">
{% block content %}
<h1 class="profile"> USER PROFILE</h1>
<p>Random text</p>
{%endblock%}
</div>
</div>
</body>
</html>
CHILD - test.html
{% extends "crm/index.html" %}
{%block title%} Test {%endblock%}
{%block content%}
<h1 class="profile"> test</h1>
<p> hkhksjhgkdhskghdk</p>
{%endblock%}
CSS
*{padding:0px;margin:0px;}
body{background-color:#DBDBDB; }
#TopBar{width:100%; height:50px; background-color:#009999; margin:0px;}
#header{float:left}
#searches{float:right; padding:15px;}
#LeftCol{height:840px; margin-top:10px; width:200px; background-color:#C0C0C0; -moz-border-radius: 20px; -webkit-border-radius: 20px;-khtml-border-radius: 20px; border-radius: 20px;
display:block; overflow: hidden; float:left;}
#RightCol{width:1040px; margin:10px; color:black;-moz-border-radius: 20px; -webkit-border-radius: 20px;-khtml-border-radius: 20px; border-radius: 20px;
display:block; overflow: hidden; background-color:white; float:left;}
h1{color:white;font-family:"Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
padding:5px;}
h1.profile{ color:black;font-family:"Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
padding:5px;}
.h3{margin-left:70px; padding-top:10px}
I Only want to change content in the {% block content %} there is no reason for me to put other DIVS in blocks.
This is the output I get from the browser (right click, view source):
index.html:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title> Control Panel </title>
<link rel="stylesheet" type="text/css" href="/static/crm/crm.css" />
</head>
<body>
<div id="TopBar" >
<div id="header">
<h1>Control Panel</h1>
</div>
<div id="searches" >
<input type="text" id="search" name="search" /> <input type="button" value="submit" />
</div>
</div>
<div id="LeftCol">
<div id="LeftMenu">
<h3>MENU</h3>
</div>
</div>
<div id="RightCol">
<div id="Contents">
<h1 class="profile"> USER PROFILE</h1>
<p>Random text</p>
</div>
</div>
</body>
</html>
test.html:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title> Test </title>
<link rel="stylesheet" type="text/css" href="/static/crm/crm.css" />
</head>
<body>
<div id="TopBar" >
<div id="header">
<h1> Test</h1>
</div>
<div id="searches" >
<input type="text" id="search" name="search" /> <input type="button" value="submit" />
</div>
</div>
<div id="LeftCol">
<div id="LeftMenu">
<h3>MENU</h3>
</div>
</div>
<div id="RightCol">
<div id="Contents">
<h1 class="profile"> test</h1>
<p> hkhksjhgkdhskghdk</p>
</div>
</div>
</body>
</html>
i don't think this is a django problem, the extended template seems right.. maybe you could post the full HTML output of both the index.html and the test.html you receive when accessing your views in the browser...
try using the stylesheet for css reset it removes a lot of margins and paddings. it may not solve your problem, but usually it helps a lot