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/
Related
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 am trying to set the margin-top for a section tag of my page. but when i set margin top for a particular section tag then the header tag also comes down with that. Please tell me the correct way to set the margin-top for a section tag here is my css. Id container is id of a section tag on which i am trying to set margin
body{
background-color:#F7F7F7;
}
#logo
{
background-image:url('../Images/LogoEB.jpg');
background-repeat:no-repeat;
width:128px;
height:150px;
}
#menu
{
float:left;
width:92%
}
nav ul
{
float:right;
list-style:none;
padding:0;
margin-right:10%;
}
nav li
{
float:left;
margin:0 1em;
color:#605C5D;
font-size:20px;
}
#login
{
float:right;
margin-right:4%;
width:auto;
margin-top:-4%;
}
#container
{
position: relative;
margin-top:50px;
background-color:#7F00FF;
}
my html
<!DOCTYPE HTML>
<html>
<title>Online Education</title>
<head>
<meta charset="UTF-8">
<meta name ="viewport" content="width=device-width,intial-scale=1.0"/>
<link rel="stylesheet" href="Css/reset.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="Css/style.css" type="text/css" media="screen"/>
<script src="Js/modernizr.js"></script>
<script src="Js/respond.min.js"></script>
</head>
<body>
<div>
<header>
<div id="menu">
<h1>
<div id="logo">
</div>
<nav>
<ul>
<li>
HOW IT WORKS
</li>
<li>
COURSES
</li>
<li>
SCHOOLS
</li>
<li>
REGISTER
</li>
</ul>
</nav>
</h1>
</div>
<div id="login">
<input type="button" value="login" id="loginbtn"/>
</div>
</header>
</div>
<div id="container">
<section >
<div >
</div>
</section>
</div>
</body>
<html>
add this css for your container...remove other css of your container just paste it
background-color: #7F00FF;
float: left;
margin-top: 50px;
position: relative;
I have been trying unsuccessfully to create a drop down menu for my navbar, every single CSS method doesnt seem to provide the desired effect that I require. Currently my HTML looks like....
<!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>Untitled</title>
</head>
<!-- Reset Sheet -->
<link href="reset.css" rel="stylesheet" type="text/css">
<!-- Main Sheet -->
<link href="main.css" rel="stylesheet" type="text/css">
<!-- Navigation Menu Sheet -->
<link href="navbar.css" rel="stylesheet" type="text/css">
<body>
<table id="header">
<table width="100%" style="height: 100%;" cellpadding="10" cellspacing="0" border="0">
<!-- Table containing logo -->
<tr>
<td colspan="2" valign="middle" height="30" align="center">
<img src="logo.JPG" alt="logo" width="570" >
</td></tr>
<!-- Table containing NavBar -->
<tr>
<td colspan="2" valign="middle" height="55" bgcolor="#300000" align="center">
<div class="navbar">
<ul class="horizontal">
<li><a class="first" href="#">Home</a></li>
<li>About Us</li>
<li>Our Products</li>
<li>Environment</li>
<li>Latest News</li>
<li><a class="last" href="#">Contact Us</a></li>
</ul>
</div>
</td></tr>
</table>
</body>
</html>
And to compliment that my CSS for the navbar looks like...
.navbar ul.horizontal
{
list-style-type:none;
margin:40 auto;
width:640px;
padding:0;
overflow:hidden;
}
.navbar ul.horizontal > li
{
float:left;
}
.navbar ul.horizontal li a
{
display: block;
text-decoration:none;
text-align:center;
padding:22px 20px 22px 20px;
font-family:Arial;
font-size:8pt;
font-weight:bold;
color:#FFFFFF;
text-transform:uppercase;
border-right:1px solid #607987;
background-color:#300000;
letter-spacing:.08em
}
.navbar ul.horizontal li a:hover
{
background-color:#680000;
color:#a2becf
}
.navbar ul.horizontal li a.first
{
border-left:0
}
.navbar ul.horizontal li a.last
{
border-right:0
}
My question to the point is if I was to make this menu a drop down menu for the "The products" button following a similar style pattern (such as hover colours and background colours) to the rest of the navbar. how would I go about with CSS to achieve this.
The new HTML for the css in question being...
<div class="navbar">
<ul class="horizontal">
<li><a class="first" href="#">Home</a></li>
<li>About Us</li>
<li>Our Products</li>
<ul>
<li>Apple</li>
<li>HTC</li>
<li>Nokia</li>
<li>Samsung</li>
</ul>
<li>Environment</li>
<li>Latest News</li>
<li><a class="last" href="#">Contact Us</a></li>
</ul>
</div>
I have tried with so many attempts but have failed to achieve a proper result. Your help will be greatly appreciated. Thanks
I am not quite sure if this is what you mean, maybe it needs some style adjustment.
The thing is that your submenu list should be inside the list item of the main menu. Like this:
<ul>
<li>Item
<ul>
<li>...</li>
</ul>
</li>
</ul>
Using that in your code (and optimized the CSS), this is what I came up with:
HTML
<div class="navbar">
<ul class="horizontal">
<li>Home</li>
<li>About Us</li>
<li>Our Products
<ul>
<li>Apple</li>
<li>HTC</li>
<li>Nokia</li>
<li>Samsung</li>
</ul>
</li>
<li>Environment</li>
<li>Latest News</li>
<li>Contact Us</li>
</ul>
</div>
CSS:
.horizontal {
list-style-type:none;
margin:40 auto;
width:640px;
padding:0;
overflow:hidden;
}
.horizontal > li {
float:left;
}
.horizontal li ul {
display: none;
margin: 0;
padding: 0;
list-style: none;
position: relative;
width: 100%;
}
.horizontal li:hover ul {
display: block;
}
.horizontal li a {
display: block;
text-decoration:none;
text-align:center;
padding:22px 10px;
font-family:Arial;
font-size:8pt;
font-weight:bold;
color:#FFFFFF;
text-transform:uppercase;
border-right:1px solid #607987;
background-color:#300000;
letter-spacing:.08em
}
.horizontal li a:hover {
background-color:#680000;
color:#a2becf
}
.horizontal li:first-child a { border-left:0; }
.horizontal li:last-child a { border-right:0; }
Like said, you may need to change some of the styles!
Also check the working JSFiddle Demo
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" />
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>