I want to use a div to centre a website, should this be done on the site.master or on each page?
thanks
<div id="wrapper">
//Rest Of Masterpage
</div>
in CSS
#wrapper
{
margin: auto;
}
This should center everythign in your masterpage
Add this CSS to your stylesheet
* { margin:0; padding:0; }
body { text-align:center; }
#container { width:960px; margin:0 auto; text-align:left; }
Then in the master page
<div id="container">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</div>
<div>
<center>
<asp:ContentPlaceHolder ID="Content1" runat="server"/>
</center>
</div>
ASPX:
<div id="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</div>
CSS:
#main { margin: 0 auto; }
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
<html>
<head>
<title>Float Issue in IE7</title>
<style type="text/css">
.right { float: right; }
.left { float: left; }
.clear { clear: both; }
</style>
</head>
<body>
<div class="right">
<div class="right">Right Text</div>
<br/><br/>
<div class="right">Right Text 2</div>
</div>
<div class="left">Left Text</div>
<br class="clear" />
</body>
</html>
The issue is that "Left Text" shows up after "Right Text 2" instead of being level with "Right Text" in IE7.
I've been searching for over an hour and tried numerous things, but haven't been able to fix it.
Any help would be great.
Thanks.
Try this code, is what you want?
DEMO
<html>
<head>
<title>Float Issue in IE7</title>
<style type="text/css">
.right { float: right; }
.left { float: left; }
.clear { clear: both; }
</style>
</head>
<body>
<div class="right">Right Text</div>
<br/>
<div class="left">Left Text</div>
<br class="clear" />
<div class="right">Right Text 2</div>
<br class="clear" />
</body>
</html>
Need help.
I cannot figure out why I cannot place div side by side in the child .aspx of master page.
The code works if I hardcode the style like this
<div id="pagemiddleleft" style="float:left;">
But when I move the style into the CSS file, the div's refuse to sit side by side.
Below is the child code
<%# Page Title="Home Page" Language="VB" MasterPageFile="~/Site.Master"
AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<div id="pagetop">
</div>
<div id="pagemiddle">
<div id="pagemiddleleft">111111
</div>
<div id="pagemiddlecenter">111111
</div>
<div id="pagemiddleright">111111
</div>
<div style="clear: both"></div>
</div>
<div id="pagebottom">
</div>
</asp:Content>
Below is an extraction of the Master Page
<div class="page">
<div class="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</div>
<div class="clear">
</div>
</div>
Below is the CSS portion for the child aspx page
#pagemiddleleft {
float: left; background-color: #FFFF00;}
#pagemiddlecenter {
float: left; background-color: #00FFFF;}
#pagemiddleright {
float: right; background-color: #FF00FF;}
Try this master page layout
Master Page
<%# 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></title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<style type="text/css">
div.page
{
float: left;
width: 100%;
background:#ffc;
}
div#main
{
float: left;
clear: both;
width: 100%;
position: relative;
}
div#page-left
{
float: left;
width: 20%;
background:orange;
}
div#page-right
{
float: right;
width: 20%;
background:green;
}
div#page-middle
{
float: left;
margin: 0 auto;
width: 60%;
background:blue;
}
</style>
</head>
<body>
<div class="page">
<div id="main">
<form id="form1" runat="server">
<div id="page-left">
<asp:ContentPlaceHolder ID="leftContent" runat="server"></asp:ContentPlaceHolder>
</div>
<div id="page-middle">
<asp:ContentPlaceHolder ID="middleContent" runat="server"></asp:ContentPlaceHolder>
</div>
<div id="page-right">
<asp:ContentPlaceHolder ID="rightContent" runat="server"></asp:ContentPlaceHolder>
</div>
</form>
</div>
</div>
</body>
</html>
Content Page
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" MasterPageFile="~/MasterPage.master"
Inherits="_Default" %>
<asp:Content ContentPlaceHolderID="leftContent" runat="server" ID="PageLeft">
Page Left Contentt</asp:Content>
<asp:Content ContentPlaceHolderID="middleContent" runat="server" ID="PageMiddle">
Page Middle Content</asp:Content>
<asp:Content ContentPlaceHolderID="rightContent" runat="server" ID="PageRight">
Page Right Content</asp:Content>
I think it's important to set the width on your elements and you can lose the clear: both <div> and just put overflow: hidden on pagemiddle. (The height isn't needed, I just put it there to better illustrate my answer)
#pagemiddle { overflow: hidden; width: 500px; }
#pagemiddleleft { float: left; background-color: #FFFF00; width: 100px; height: 100px; }
#pagemiddlecenter { float: left; background-color: #00FFFF; width: 300px; height: 100px; }
#pagemiddleright { float: right; background-color: #FF00FF; width: 100px; height: 100px; }
Demo - http://jsfiddle.net/8NH8t/
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 have an image that links to my homepage. Is there an attribute that I can specify to right align the image within its column (my code below)? I don't want to use anything more complicated than using just an attribute. Thanks.
Please note: I just want to right align ONLY this image. Not the whole div.
<div class="leftCol">
<asp:HyperLink ID="HyperLink" runat="server" ImageUrl="~/home.jpg" NavigateUrl="http://myhomepage.edu">HyperLink</asp:HyperLink>
</div>
Use CSS:
<style type="text/css">
.leftCol a img { float: right; }
</style>
<div class="leftCol">
some text here <asp:HyperLink ID="HyperLink" runat="server" ImageUrl="~/home.jpg" NavigateUrl="http://myhomepage.edu">HyperLink</asp:HyperLink>
</div>
or (better)
<style type="text/css">
.rightAlign { float: right; }
</style>
<div class="leftCol">
some text here <asp:HyperLink CssClass="rightAlign" ID="HyperLink" runat="server" ImageUrl="~/home.jpg" NavigateUrl="http://myhomepage.edu">HyperLink</asp:HyperLink>
</div>
Its recommended to place the CSS in your stylesheet file, but for demonstration purposes, I included the style inline here.
<div class="leftCol">
<div>
Stuff that should align left
</div>
<div style="float:right; display:inline;">
<asp:HyperLink ID="HyperLink" runat="server" ImageUrl="~/home.jpg"
NavigateUrl="http://myhomepage.edu">HyperLink</asp:HyperLink>
</div>
</div>
<style type="text/css">
.link
{
float: right;
}
</style>
<div>
<asp:HyperLink ID="HyperLink1" runat="server" ImageUrl="~/logo.png" CssClass="link">HyperLink</asp:HyperLink>
</div>
</form>