so i have a great looking one page website that looks great on one screen, but when i change browsers and use larger screens the aspect of the page always looks different.. I know bootstrap would solve this issue, but unfortunately i cant do it in bootstrap for other reasons... Can anybody help please??
CSS
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Siemens.Packing.PackingStatsShiftOverview.Default" %>
<!DOCTYPE html>
<html>
<head>
<title>Packing Shift Summary</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
window.setTimeout('document.forms[0].submit()', 5000); //refresh the page (without losing state)
</script>
</head>
<body style="height: 100%">
<form runat="server" name="PackingStatsForm">
<div style="height:100%">
<div class="split left">
<div class="center" width:100%>
<h1>TOTAL QUANTITY PACKED</h1>
<asp:Label ID="labeltotal" runat="server" Font-Size="190pt" style="text-align: center; padding-top: 800px; color: #ff0000; transform: translate(-50%, -50%); text-align: center; padding-left: 90px; " CssClass="auto-style1" Font-Bold="True"></asp:Label>
</div>
<div class ="center" width:100%>
<img class ="imgFooter" src="Logo/siemensblack1.png" />
</div>
</div>
<div class="split right">
<div class="center" width:100%>
<asp:DropDownList ID="DDLProduct" runat="server" AutoPostBack="True" OnSelectedIndexChanged="Dropdownlist1_SelectedIndexChanged" Font-Bold="True" ViewStateMode="Enabled" >
</asp:DropDownList>
<h1>CELL TARGETS & ACTUAL FIGURES</h1>
<asp:GridView ID="GridView1" runat="server" BackColor="White" BorderColor="black" BorderStyle="Ridge" CellPadding="22" ForeColor="Black" GridLines="Horizontal" HorizontalAlign="Center" Font-Size="23px" OnRowDataBound="GridView1_RowDataBound" Width="100%" Font-Bold="True" >
<AlternatingRowStyle BackColor="White"/>
<FooterStyle BackColor="#CCCC99"/>
<HeaderStyle BackColor="white" Font-Bold="True" ForeColor="black"/>
<PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right"/>
<RowStyle BackColor="#F7F7DE"/>
<SelectedRowStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="black"/>
<SortedAscendingCellStyle BackColor="#FBFBF2"/>
<SortedAscendingHeaderStyle BackColor="#848384"/>
<SortedDescendingCellStyle BackColor="#EAEAD3"/>
<SortedDescendingHeaderStyle BackColor="#575357"/>
</asp:GridView>
<div class="center" width:100% >
<img class="imgFooter" src="Logo/siemenswhite1.png" />
</div>
</div>
</div>
</div>
</form>
</body>
</html>
CSS
body {
font-family: Arial;
color: white;
}
.split {
height: 100%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 20px;
}
.left {
left: 0;
background-color: #110;
width: 30%;
height: 100%;
text-align: center;
}
.right {
right: 0;
background-color: white;
width: 70%;
text-align: center;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.center {
text-align: center;
}
.auto-style1 {
position: absolute;
width: 100%;
height: 100%;
top: 49%;
left: 43%;
}
h1 {
color: red;
font-weight: bold;
padding-top: 20px;
}
div { padding: 30px 10px 15px; }
.imgFooter {
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
bottom: 10%;
}
.clsLeft {
float: left;
width:30%;
background-color:Cyan;
}
.clsRight {
width:70%;
float:right;
background-color:Yellow;
}
.clsColumn {
height: 100%;
text-align: center;
}
table {
border: 1px solid black;
background-color:White;
margin: 0 auto; /* or margin: 0 auto 0 auto */
}
th {
font-style:Bold;
background-color:White;
}
td {
text-align: center;
}
#parent {
Height:100%;
display: table;
}
#child {
font-size:24pt;
display: table-cell;
vertical-align: middle;
}
Using floats and absolute positioning is not the best solution for responsive web development, you can apply flexbox to the container and have a good looking form, let me suggest a solution for your form:
<!DOCTYPE html>
Packing Shift Summary
<script>
window.setTimeout('document.forms[0].submit()', 5000); //refresh the page (without losing state)
</script>
<form runat="server" name="PackingStatsForm">
<!-- <div style="height:100%"> -->
<div class="split left">
<div class="center" width:100%>
<h1>TOTAL QUANTITY PACKED</h1>
<asp:Label ID="labeltotal" runat="server" Font-Size="190pt" style="text-align: center; padding-top: 800px; color: #ff0000; transform: translate(-50%, -50%); text-align: center; padding-left: 90px; "
CssClass="auto-style1" Font-Bold="True"></asp:Label>
</div>
<div class="center" width:100%>
<img class="imgFooter" src="Logo/siemensblack1.png" />
</div>
</div>
<div class="split right">
<div class="center" width:100%>
<asp:DropDownList ID="DDLProduct" runat="server" AutoPostBack="True" OnSelectedIndexChanged="Dropdownlist1_SelectedIndexChanged"
Font-Bold="True" ViewStateMode="Enabled">
</asp:DropDownList>
<h1>CELL TARGETS & ACTUAL FIGURES</h1>
<asp:GridView ID="GridView1" runat="server" BackColor="White" BorderColor="black" BorderStyle="Ridge" CellPadding="22" ForeColor="Black"
GridLines="Horizontal" HorizontalAlign="Center" Font-Size="23px" OnRowDataBound="GridView1_RowDataBound" Width="100%"
Font-Bold="True">
<AlternatingRowStyle BackColor="White" />
<FooterStyle BackColor="#CCCC99" />
<HeaderStyle BackColor="white" Font-Bold="True" ForeColor="black" />
<PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right" />
<RowStyle BackColor="#F7F7DE" />
<SelectedRowStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="black" />
<SortedAscendingCellStyle BackColor="#FBFBF2" />
<SortedAscendingHeaderStyle BackColor="#848384" />
<SortedDescendingCellStyle BackColor="#EAEAD3" />
<SortedDescendingHeaderStyle BackColor="#575357" />
</asp:GridView>
</div>
<div class="center" width:100%>
<img class="imgFooter" src="Logo/siemenswhite1.png" />
</div>
</div>
<!-- </div> -->
</form>
In the html, i commented (removed) the div container and i will apply flexbox just to the parent which in this case is the element ..
body {
font-family: Arial;
color: white;
}
.center {
text-align: center;
border: 1px solid red;
}
h1 {
color: red;
font-weight: bold;
}
div {
padding: 30px 10px 15px;
}
form {
display: flex;
height: 100vh;
justify-content: space-between;
width: 100%;
}
.split {
display: flex;
flex-direction: column;
justify-content: space-evenly;
width: 100%;
height: 100%;
}
.left {
background-color: black;
flex: 0 0 30%;
}
.right {
flex: 0 0 70%;
}
th {
font-style: Bold;
background-color: White;
}
td {
text-align: center;
}
#media only screen and (max-width: 480px) {
form {
flex-flow: column nowrap;
}
}
In the CSS i replaced the floats with flexbox, in the form the height is 100vh so your form will take 100% height of any screen, .left and .right have a flex-basis of 30% and 70% , keep using relative units for better responsive design than using pixels,also use media queries for mobile and tablet,i used one breakpoint here to stack the two parts in a column view if the screen is less than 480px, i will link a refrence to flexbox, it's a very useful resource , also you can see this code in the linked codpen.. hope that help
FlexBoxGuide
Codepen
Related
I have 2 monitors. The one is 24" and the other is my laptop's monitor (12.5"). A "div" (red box) in my web application can be shown on big monitor full height, but just part of it on my small monitor.
My question is why it displays differently on different size of monitor? Because all height settings in my css are percentage and I never used absolute number for the height. Why does the red box (div id is "scrollTable") show differently on different size of monitor? Because this issue, the dynamic table in this "div" cannot be shown completely even if the div is scrolled to the bottom. The row number of the dynamic table depends on Users' search result, maybe only 1 or 2 rows or maybe more than 30 or 40 rows sometimes. Please see the css and html below. Thanks for your help.
html,
body {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
header {
height: 6%;
margin: 0px;
padding: 0.2px;
padding-left: 6px;
text-align: left;
vertical-align: central;
background: #8a1841;
color: papayawhip;
display: block;
}
#nsmap {
float: left;
left: 0;
width: 80%;
bottom: 0;
height: 94%;
}
#searchPanel {
padding: 3px;
float: right;
height: 94%;
width: 20%
}
#HomeButton {
position: absolute;
top: 135px;
left: 20px;
z-index: 50;
}
label {
font-size: 10px;
font-weight: bold;
text-align: center;
}
table.imagetable {}
table.imagetable tr td {
border: 1px solid #000000;
text-align: center;
padding: 8px;
font-size: 10px;
}
table.imagetable th {
border: 1px solid #000000;
text-align: center;
padding: 8px;
font-size: 10px;
}
table.imagetable tr:nth-child(even) {
background-color: #92c8da;
}
table.imagetable tbody tr:hover {
background-color: #EBECCD;
}
.cboWidth {
border: 1px solid #000000;
width: 100%;
}
.ccTable1 {
height: 77%;
}
#scrollTable {
border: 2px solid red;
max-height: 80%;
min-height: 80%;
width: 100%;
overflow-y: auto;
overflow-x: auto;
}
#StreetKey {
width: 100%;
}
.thirty {
width: 30%;
}
.twenty {
width: 20%;
}
.fifteen {
width: 15%;
}
thead {
visibility: visible;
}
.dijitButtonNode {
width: 160px;
height: 25px;
text-align: left;
font-size: 16px;
border: hidden;
}
.dijitButtonNode:hover {
font-weight: bold;
}
.center {
display: block;
margin-left: 52%;
width: 45%;
}
#tbPrint {
border: 0px;
padding: 8px;
min-width: 350px;
max-width: 350px;
}
.tdPrint {
border: 0px;
text-align: left;
padding: 0px;
font-size: 10px;
max-width: 140px;
min-width: 140px;
}
#trPrint {
background-color: white;
}
<!DOCTYPE html>
<html>
<head></head>
<body>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<title> Online Map Book </title>
<header>
<h4>Online Map Guide Book</h4>
</header>
<div id="nsmap" style="background-color:whitesmoke">
</div>
<div id="searchPanel">
<form action="/action_page.php">
<label style="font-weight:bold;font-size:12.5px">Select Electoral District:</label> <br>
<select id="EDNum" name="EDNum" class="cboWidth"></select>
<br><br>
<label style="font-weight:bold;font-size:12.5px">
Select Polling Division: </label><br>
<select id="PDNum" name="PDNum" style="border:1px solid #000000"></select>
<br><br>
<div class="dropdown" style="width:100px">
<table id="tbPrint">
<tr>
<td><label style="font-size:12.5px">Print map or street key:</label></td>
</tr>
<tr id="trPrint">
<td class="tdPrint">
<button id="btnPrintGroup" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" disabled>
Print
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<div id="btnPrint"></div>
</li>
<li>
<div>
<div class="dijitButtonNode" id="btnStKey" onclick="printStKey()" style="margin-left:10px">
Street Key
</div>
</div>
</li>
</ul>
</td>
</tr>
</table>
</div>
</form>
<hr>
<div id="StreetKey" class="ccTable1">
<div style="font-size:14px; font-weight:bold"> Street Key </div>
<div id="scrollTable">
<table id="streetTable" class="imagetable " style="cursor: pointer;">
<colgroup>
<col class="thirty" />
<col class="twenty" />
<col class="fifteen" />
<col class="fifteen" />
<col class="twenty" />
</colgroup>
<thead>
<tr>
<th>Street</th>
<th>Town</th>
<th>Low No.</th>
<th>High No.</th>
<th>Order</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</body>
</html>
When you use 100% it means that you take the whole heigth os the div's parent. If you want to show your div always in the viewport, try using this units : vh
They mean: viewport height, so if you set the height:100vh, the div will always be fit to the viewport no matter what screen. :)
https://css-tricks.com/fun-viewport-units/
Hi I know that there have been a lot of questions about this before but I can't seem to find my problem with the footer.
This did a lot already but when i scroll down, does my footer stay at the same place as it was when the page loaded. Is there a way to fix this?
body {
font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
line-height: 24px;
font-size: 12px;
background-color: #FF3333;
height: 100%;
}
h1 {
color: #777777;
font-weight: normal;
font-size: 19px;
text-transform: uppercase;
border-bottom: 3px #DDDDDD solid;
padding: 3px 0px;
margin-left: 5px;
}
p {
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
margin-left: 5px;
font-size: 1.5em;
}
h2 {
display: block;
font-size: 1.5em;
-webkit-margin-before: 0.83em;
-webkit-margin-after: 0.83em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: bold;
margin-left: 5px;
}
.Logo {
position: absolute;
padding-bottom: 5px;
padding-right: 10px;
top: 20px;
right: 20px;
}
form {
margin: 0px 22% -1rem;
background-color: white;
min-height: 100%;
margin-bottom: -60px;
}
#MainNav {
margin-left: 5px;
}
.GridViewEditRow {
width: 100%;
}
body, html { /*body and html have to be 100% to push header down */
height: 100%;
width: 100%;
}
body > #wrapper { /* all content must be wrapped... #wrapper is my id. Position relative IMPORTANT */
position: relative;
height: auto;
min-height: 100%;
}
#header {
height: 100px;
background: rgba(255,255,255,0.2);
}
#content-wrap { /*#content-wrap is the wrapper for the content without header or footer | padding-bottom = footer height */
padding-bottom: 100px;
}
#footer { /* position must be absolute and bottom must be 0 */
height: 100px;
width: 100%;
background: rgba(255,255,255,0.2);
position: absolute;
bottom: 0;
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>SvShop!</title>
<link href="../CSS/SvShop.css" rel="stylesheet" />
<link rel="shortcut icon" href="/images/SvShopIcon.ico" />
<asp:ContentPlaceHolder ID="head" runat="server"></asp:ContentPlaceHolder>
<style type="text/css">
#Container {
height: 506px;
margin-top: 0px;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="Logo">
<img src="../Images/SvShop%20logo%20(Links%20rood,%20Zwarte%20tekst).jpg" style="height: 140px; width: 140px" />
</div>
<form runat="server">
<div class="page-wrap">
<h1>SvShop</h1>
<div id="MainNav">
<asp:Menu ID="MenuMain" runat="server" Orientation="Horizontal">
<Items>
<asp:MenuItem NavigateUrl="~/Index.aspx" Text="Startpagina" Value="Startpagina"></asp:MenuItem>
<asp:MenuItem Text="Kopen" Value="Kopen">
<asp:MenuItem NavigateUrl="~/Overzichten/OverzichtAtlas.aspx" Text="Atlas" Value="Atlas"></asp:MenuItem>
<asp:MenuItem NavigateUrl="~/Overzichten/OverzichtRekenmachine.aspx" Text="Rekenmachine" Value="Rekenmachine"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem NavigateUrl="~/Verkopen.aspx" Text="Verkopen" Value="Verkopen"></asp:MenuItem>
<asp:MenuItem Text="Contact" Value="Contact">
<asp:MenuItem NavigateUrl="~/Contact/Contact.aspx" Text="Contact" Value="Contact"></asp:MenuItem>
<asp:MenuItem NavigateUrl="~/Contact/Info.aspx" Text="Info" Value="Info"></asp:MenuItem>
</asp:MenuItem>
</Items>
</asp:Menu>
</div>
<br />
<br />
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</div>
<footer>
© SvShop - door Demey Thimo 6ITN - in opdracht van De Jaeger Els </footer>
</body>
</html>
I removed the "#" since it isn't an id.
footer {
height: 100px;
width: 100%;
background: rgba(255,255,255,0.2);
position: absolute;
bottom: 0;
}
Take a look at this sticky footer, it may contains some code that could interest you if you want a sticky footer. Otherwise, the trick would be to fix the minimum height and a margin value, as:
min-height: 100%; // This sends your footer at the bottom of your page
margin-bottom: -X em; // Where X is the height of your footer, em recommended
This Code works for my footer. Thank you everybody who helped me.
html {
position: relative;
min-height: 100%;}
form {
margin: 0px 22% -1rem ;
background-color: white;
min-height: 100%;
margin-bottom: -1em;}
footer {
border-top: 2px solid red;
border-bottom: 2px solid red;
color: black;
background-color: lightgrey;
font-size: 1em;
text-align: center;
padding: 1em;
position: absolute;
left: 0;
bottom: 0;
width: 100%;}
body {
font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
line-height: 24px;
font-size: 12px;
background-color: #FF3333;
margin: 0 0 100px;
height: 100%;}
I have a CSS problem here, my top div is just like I want it, but my link div fails here, if I put a padding in, it will be right under it, but will be higher than I want the div to be, so my issue here is:
I want the "link" div to be RIGHT under my "top" div. Right now it will add a little space between divs, and that space is white, so it looks bad.
<%# Master Language="C#" AutoEventWireup="true" CodeFile="Hovedside.master.cs" Inherits="Hovedside" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title></title>
<link rel="stylesheet" href="styling/stylinghoved.css" type="text/css" />
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
<style type="text/css">
.auto-style1 {
width: 94%;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="siden">
<div id="top">
<table id="toptable">
<tr>
<td rowspan="2" id="toptablemilto" class="auto-style1">
Milto
</td>
<td style="margin:auto">
login // kurv
</td>
</tr>
<tr>
<td>
søg:
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</td>
</tr>
</table>
</div>
<div id="links">
<ul id="lin">
<li><asp:HyperLink ID="HyperLink1" runat="server">LK Produkter</asp:HyperLink></li>
<li><asp:HyperLink ID="HyperLink2" runat="server">Flash Light</asp:HyperLink></li>
<li><asp:HyperLink ID="HyperLink3" runat="server">Philips</asp:HyperLink></li>
<li><asp:HyperLink ID="HyperLink4" runat="server">HyperLink</asp:HyperLink></li>
</ul>
</div>
<div id="indhold">
<asp:ContentPlaceHolder id="hovedsideplaceholder" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="bund">bund</div>
</div>
</div>
</form>
</body>
</html>
#siden {
margin: auto;
width: 80%;
overflow:hidden;
padding-bottom: 20px;
}
#top {
height: 150px;
background: linear-gradient(to top, #c2bcb5, #ffffff);
}
#top {}
#toptable {
width: 100%;
height: 150px;
}
#toptablemilto {
width:80%;
font-size:80px;
padding-left:50px;
line-height:0px;
}
#bund {
clear:both;
}
#indhold {}
#links {
height: 45px;
background: linear-gradient(to bottom, #c2bcb5, #ffffff);
}
#lin {
display: block;
list-style: none;
text-align: center;
}
#lin ul {
display: none;
list-style: none;
}
#lin li {
float: left;
display: block;
margin-top: 15px;
text-transform: uppercase;
padding: 0px 20px 0px 20px;
border-left: 1px solid #ffffff;
}
#lin a:link, #nav a:visited, #nav:active {
display: block;
color: #574c3f;
text-decoration: none;
}
#lin a:hover {
background-color: white;
}
changes css of #lin to display:inline-block & remove unwanted css
#lin {
display: inline-block;
list-style: none;
text-align: center;
width:100%;
}
jsfiddle
Not sure why at the moment, but you can fix this by changing the display property for your <ul>.
#lin {
display: inline-block;
}
I put a attribute margin on '#lin'. But i don't know if it is what you want
#siden {
margin: auto;
width: 80%;
overflow:hidden;
padding-bottom: 20px;
}
#top {
height: 150px;
background: linear-gradient(to top, #c2bcb5, #ffffff);
}
#top {
}
#toptable {
width: 100%;
height: 150px;
}
#toptablemilto {
width:80%;
font-size:80px;
padding-left:50px;
line-height:0px;
}
#bund {
clear:both;
}
#indhold {
}
#links {
height: 45px;
background: linear-gradient(to bottom, #c2bcb5, #ffffff);
}
#lin {
display: block;
list-style: none;
text-align: center;
}
#lin ul {
display: none;
list-style: none;
}
#lin li {
float: left;
display: block;
margin-top: 15px;
text-transform: uppercase;
padding: 0px 20px 0px 20px;
border-left: 1px solid #ffffff;
}
#lin a:link, #nav a:visited, #nav:active {
display: block;
color: #574c3f;
text-decoration: none;
}
#lin a:hover {
background-color: white;
}
#lin {
margin: 0;
}
<!DOCTYPE html>
<html>
<head runat="server">
<title></title>
<link rel="stylesheet" href="styling/stylinghoved.css" type="text/css" />
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
<style type="text/css">
.auto-style1 {
width: 94%;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="siden">
<div id="top">
<table id="toptable">
<tr>
<td rowspan="2" id="toptablemilto" class="auto-style1">
Milto
</td>
<td style="margin:auto">
login // kurv
</td>
</tr>
<tr>
<td>
søg:
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</td>
</tr>
</table>
</div>
<div id="links">
<ul id="lin">
<li><asp:HyperLink ID="HyperLink1" runat="server">LK Produkter</asp:HyperLink></li>
<li><asp:HyperLink ID="HyperLink2" runat="server">Flash Light</asp:HyperLink></li>
<li><asp:HyperLink ID="HyperLink3" runat="server">Philips</asp:HyperLink></li>
<li><asp:HyperLink ID="HyperLink4" runat="server">HyperLink</asp:HyperLink></li>
</ul>
</div>
<div id="indhold">
<asp:ContentPlaceHolder id="hovedsideplaceholder" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="bund">bund</div>
</div>
</div>
</form>
</body>
</html>
I'm trying to put elements in the end of header. I'm using a WYSIWYG designer. In designer, it is as I wanted, but on browser, elements are not at the position I wanted. Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Home</title>
<style type="text/css">
#header
{
background-color:#FF6600;
height: 151px;
width:100%;
}
#title
{
z-index: 1;
left: 20px;
top: 32px;
position: absolute;
height: 47px;
width: 353px;
color:White;
font-size:48px;
font-family:Consolas;
}
#motto
{
z-index: 1;
left: 21px;
top: 103px;
position: absolute;
height: 42px;
width: 381px;
right: 951px;
font-size:20px;
color:White;
}
div
{
font-family:Consolas;
width: 121px;
}
#txtUserName
{
z-index: 1;
left: 1083px;
top: 23px;
position: absolute;
width: 250px;
height: 30px;
}
#txtPassword
{
z-index: 1;
left: 1082px;
top: 65px;
position: absolute;
width: 250px;
height: 30px;
}
#btnLogin
{
z-index: 1;
left: 1082px;
top: 107px;
position: absolute;
width: 250px;
height: 30px;
background-color:Black;
color:White;
font-family:Consolas;
font-size:20px;
}
</style>
</head>
<body style="background-color:#F5F5F5; height: 748px;">
<div id="header">
<div id="title">
My Webpage
</div>
<div id="motto">
Home
</div>
<input id="txtUserName" type="text" />
<input id="txtPassword" type="text" />
<input id="btnLogin" type="submit" value="Login" />
</div>
</body>
</html>
I want to put the elements in header to the end of it, but i can't. I know it happens because I use absolute positioning but I don't know how to solve it. Thanks for help.
I hope this helps:
html
<div id="header">
<div class="login-wrapper">
<input id="txtUserName" type="text" placeholder="username" />
<input id="txtPassword" type="text" placeholder="password" />
<input id="btnLogin" type="submit" value="Login" />
</div>
<h1>My Webpage</h1>
<ul>
<li>Home</li>
<li>About</li>
<li>Misc</li>
</ul>
</div>
css
* {
margin: 0;
padding: 0
}
#header {
background-color:#FF6600;
width: 100%;
padding: 15px;
clear: both;
}
#header input[type="text"],
#header input[type="password"] {
border: 1px solid black;
display: inline-block;
padding: 5px;
}
#header h1 {
color: white;
font-size: 30px;
margin-top: 0;
}
#header .motto {
font-size:20px;
color: white;
display: block;
}
#header .login-wrapper {
float: right;
margin: 10px;
}
#header ul li{
list-style: none;
display: inline-block;
}
#header ul li a{
text-decoration: none;
color: white;
display: block;
margin: 10px;
}
}
See a preview at http://jsfiddle.net/c5o3wywc/2/
i'm having a problem that the dynamic items of the menu are inside the Container div while i need to make them show up outside it without the need to use absolute to asp.net menu
The Main point is that Asp.Net Menu is clipped by so the rest of the dynamic part of the menu is not shown to the user because it is hidden inside the
i hope you understand the code and suggest some solutions to the problem
Thanks for any effort
<!-- language: lang-html -->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="rtl">
<head runat="server">
<link href="StyleSheet/MainStyleSheet.css" rel="stylesheet" />
<link href="Content/themes/base/all.css" rel="stylesheet" />
<link href="Content/themes/smoothness/jquery-ui.smoothness.css" rel="stylesheet" />
<link href="StyleSheet/jquery-ui-timepicker-addon.css" rel="stylesheet" />
<script src="Scripts/jquery-2.1.3.js"></script>
<script src="Scripts/jquery-ui-1.11.4.js"></script>
<script src="Scripts/jquery.ui.datepicker-ar.js"></script>
<script src="Scripts/jquery-ui-timepicker-addon.js"></script>
<style type="text/css">
html,body, form {
font-family: AmiriWeb, 'Amiri QuranWeb', Amiri, Arial;
direction: rtl;
overflow-x: hidden;
}
input, textarea, select {
font-family: AmiriWeb, 'Amiri QuranWeb', Amiri, Arial;
direction: rtl;
}
.Container {
width: 1000px;
margin: 0px auto;
direction: rtl;
overflow: hidden;
}
.TdGeneralStyle {
padding: 10px 10px 10px 10px;
}
.AdminMenuStyle{
background-color: black;
}
.AdminMenuStyle a{
color: lightgreen;
display: block;
font-weight: bold;
padding: 10px;
width: 100%;
background-position: 14% center !important;
}
.AdminMenuStyle ul, .AdminMenuStyle li{
background-color: black;
border: 1px solid #F75D59;
}
.AdminMenuStyle ul:hover, .AdminMenuStyle li:hover{
background-color: #F75D59;
}
.AdminStaticMenuStyle{
width: 100% !important;
}
.AdminDynamicMenuStyle{
width: 180px !important;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div class="Container">
<table style="border: 5px solid green; border-collapse: collapse; width: 100%;">
<tr style="background-color: green; ">
<td style="width: 20%; color: yellow; font-weight: bold; " class="TdGeneralStyle">إسم المستخدم </td>
<td style="width: 80%; " class="TdGeneralStyle"></td>
</tr>
<tr>
<td style="width: 20%; background-color: black; vertical-align: top;">
<asp:Menu ID="Menu1" CssClass="AdminMenuStyle" Width="100%" runat="server" StaticPopOutImageUrl="~/AppItems/AppImages/PalFlagIconMenu.png" DynamicPopOutImageUrl="~/AppItems/AppImages/PalFlagIconMenu.png" MaximumDynamicDisplayLevels="5">
<DynamicMenuStyle CssClass="AdminDynamicMenuStyle" />
<Items>
<asp:MenuItem Text="المقالات" Value="المقالات">
<asp:MenuItem Text="جديد" Value="جديد" NavigateUrl="~/Admin/ArticlesAdmin/AddArticle.aspx"></asp:MenuItem>
<asp:MenuItem Text="تعديل" Value="تعديل"></asp:MenuItem>
<asp:MenuItem Text="الكاتب" Value="الكاتب">
<asp:MenuItem NavigateUrl="~/Admin/WriterAdmin/AddWriter.aspx" Text="جديد" Value="جديد"></asp:MenuItem>
<asp:MenuItem Text="تعديل" Value="تعديل"></asp:MenuItem>
</asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="مستخدم" Value="مستخدم">
<asp:MenuItem Text="جديد" Value="جديد"></asp:MenuItem>
<asp:MenuItem Text="تعديل" Value="تعديل"></asp:MenuItem>
<asp:MenuItem Text="تغيير الكلمة السرية" Value="تغيير الكلمة السرية"></asp:MenuItem>
</asp:MenuItem>
</Items>
<StaticMenuStyle CssClass="AdminStaticMenuStyle" />
</asp:Menu>
</td>
<td style="width: 80%; vertical-align: top;" class="TdGeneralStyle" >
<asp:ContentPlaceHolder ID="cphDefaultAdminMasterPageBody" runat="server">
</asp:ContentPlaceHolder>
</td>
</tr>
<tr>
<td colspan="2" style="border-top: 5px solid green; font-weight: bold; text-align: center; background-color: green; color:yellow;">
2015
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
the solution to the menu problem was using absolute only this is what i got and problem solved:
.AdminMenuStyle {
background-color: black;
position: absolute;
}
.AdminMenuStyle a {
color: lightgreen;
display: block;
font-weight: bold;
padding: 10px;
width: 100%;
background-position: 14% center !important;
}
.AdminMenuStyle ul, .AdminMenuStyle li {
background-color: black;
border: 1px solid #F75D59;
width: 100% !important;
}
.AdminMenuStyle ul:hover, .AdminMenuStyle li:hover {
background-color: #F75D59;
}
.AdminStaticMenuStyle {
}
.AdminDynamicMenuStyle {
}
<script>
function fixMenuBackContainerHeight() {
var menuObject = $('#<%= mAdminMenu.ClientID %>');
var tdMenuContainer = $('#tdMenuContainer');
var menuHeight = menuObject.height();
tdMenuContainer.css("min-height", menuHeight);
menuObject.width(tdMenuContainer.width());
}
$(function () {
fixMenuBackContainerHeight();
});
</script>