Been trying several ways to change the style of a DropDownListFor element. Either I am doing something wrong or there is something overriding it.. I've tried changing it in the view element and in the CSS.. and no go.
View:
<div style="width: 100%; ">
<div style="float: left;"> #Html.DropDownListFor(model => model.FranPID, new SelectList(Model.FranchiseList, "FranchiseID", "FranBusinessName", new { #class = "selectStyle" }))</div>
</div>
CSS:
.selectStyle {
border: 1px solid #93A9C8;
padding: 2px;
font-size: 1em;
color: #444;
width: 200px;
border-radius: 3px 3px 3px 3px;
-webkit-border-radius: 3px 3px 3px 3px;
-moz-border-radius: 3px 3px 3px 3px;
-o-border-radius: 3px 3px 3px 3px;
}
EDIT Solved:
Correct Call:
<div style="width: 100%; ">
<div style="float: left;"> #Html.DropDownListFor(model => model.FranPID, new SelectList(Model.FranchiseList, "FranchiseID", "FranBusinessName"), new { #class = "selectStyle" })</div>
</div>
Badsically I had the new inside the SelectList call.. moving it out (changing the parans) and all is working
Well, this is one way...I'd like others to show me if there's a better way because I need to learn more!
in the view:
<div id="products" class="container" >
<div class="row">
<div class="col-lg-10 col-md-5 col-sm-4 dropdownlist">
#Html.LabelFor(m => m.SelectedCategoryId)
#Html.DropDownList("id", Model.CategoryItems, new { #id = "ddlCategories", onchange = "this.form.submit();" })
</div>
</div>
</div>
and in the css:
/* the width of the entire in div of id=product */
#products {
width: 100%;
}
/* any item in the div of id=product with its class having dropdownlist */
#products .dropdownlist{
font-size: 18px;
}
/* any dropdown in product id div */
#products select{
color: blue;
}
/* specifically, any item with id of ddlCategories in the div of id=product */
#products #ddlCategories
{
color: red;
}
Hope this helps.
Related
The question is almost self-explanatory. I have the razor component "board.razor" and it also has a "board.razor.css" which contains all the styles for that page. If I do it like that, then the styles won't get applied. If I insert the style classes on the top of the "board.razor", everything works like it should. I'll provide the code and the pictures for you.
Board.razor with style tag at top:
<style>
.dropzone {
padding: 10px;
background: #e2eaf2;
list-style: none;
height: 100%;
min-width: 50%;
}
.no-drop {
border: 2px dashed red;
background-color: #e6d8d8;
}
.can-drop {
border: 2px dashed green;
background-color: #d8e6d8;
}
.draggable {
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.2);
margin-bottom: -8px;
padding: 10px;
cursor: move;
background: #fff;
color: #000;
border-radius: 3px;
max-width: 500px;
}
.draggable:active {
cursor: move;
background: #f1f8ff;
}
.draggable:hover {
cursor: move;
background: #f1f8ff;
}
h6 {
position: -webkit-sticky;
position: sticky;
top: 0;
}
.dragging {
cursor: move;
}
.description {
font-size: 14px;
}
.sum {
font-size: 17px;
word-wrap: break-word;
color: midnightblue;
font-weight: bold;
}
.last-updated {
margin-bottom: 0;
font-size: 11px;
color: #474747;
font-weight: bold;
}
.last-updated small {
text-transform: uppercase;
color: #474747;
font-size: 11px;
}
h6 {
width: 100%;
height: auto;
}
.scrollbar {
top: 0;
bottom: 0;
overflow: hidden;
overflow-y: auto;
}
.status-details[open] {
transition: height 3s;
}
.status-details-summary {
padding: 1px 0px 1px 8px;
position: sticky;
top: 3rem;
bottom: 0;
z-index: 20;
font-size: 12px;
background-color: white;
}
.status-container {
display: flex;
}
.status-list {
display: flex;
flex-direction: column;
padding: 5px;
width: 100%;
}
.status-header {
display: flex;
position: sticky;
top: 0;
background-color: white;
z-index: 21;
}
.status-header-item {
font-weight: bold;
margin: 5px;
margin-bottom: -5px;
padding: 10px;
background: #e2eaf2;
flex-direction: column;
display: flex;
width: 100%;
}
#bsettings {
text-decoration: none;
color: inherit;
cursor: default;
display: block;
}
<NavBar OnIssueCreated="LoadIssues"></NavBar>
<div class="bodyContainer">
#if (changeMenuShow)
{
<h3 style="padding-left:5px"><b>Aktive Sprints</b></h3>
}
#*<FilterBar AllIssues="issues"></FilterBar>*#
<div class="dropdown">
<button class="btn btn-blue" style=" float: right; height: 38px; width: 41px; margin-left: 10px" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
<i class="oi oi-cog"></i>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li class="dropdown-item">Board Einstellungen(unfertig)</li>
#*<li class="dropdown-item" #onclick="ModalShow">Board erstellen</li>*#
#if (changeMenuShow)
{
<li class="dropdown-item" #onclick="MenuShow">Menüs ausblenden</li>
}
else if (!changeMenuShow)
{
<li class="dropdown-item" #onclick="MenuShow">Menüs einblenden</li>
}
#if (dialogType.Equals(EditDialogType.Sidebar))
{
<li class="dropdown-item" #onclick="DialogToModal">Vorgänge im Dialogfeld öffnen</li>
}
else if (dialogType.Equals(EditDialogType.Modal))
{
<li class="dropdown-item" #onclick="DialogToSidebar">Vorgänge in der Seitenleiste öffnen</li>
}
</ul>
</div>
#if (activeSprint != null)
{
<div style="float: right; margin-left: 10px ">
<button style="height: 38px;" class="btn btn-blue" #onclick="Complete">Sprint abschließen</button>
</div>
}
<div class="custom-control custom-switch" style="display: inline; float: left; margin-top: 8px; margin-left: 10px">
<input type="checkbox" class="custom-control-input" id="addMorebox" #bind="ShowOpenForToday" />
<label class="custom-control-label" for="addMorebox">Heute zu erledigen anzeigen</label>
</div>
<div class="custom-control custom-switch" style="display: inline; float: left; margin-top:8px; margin-left: 10px;">
<input type="checkbox" class="custom-control-input" id="addWaitReply" #bind="showWaitForReply" />
<label class="custom-control-label" for="addWaitReply">Warte auf Rückmeldung anzeigen</label>
</div>
<br />
<br />
<br />
<IssueDialogOpener DialogType="dialogType">
<div class="scrollbar" style="height: 70vh; ">
<header class="status-header">
<div class="status-header-item">Zu Erledigen</div>
#if (ShowOpenForToday)
{
<div class="status-header-item">Heute zu Erledigen</div>
}
#if (showWaitForReply)
{
<div class="status-header-item" style="display: inline;">Warte auf Rückmeldung</div>
}
<div class="status-header-item">In Arbeit</div>
<div class="status-header-item">Fertig</div>
</header>
<div>
#if (parentIssues.Count > 0)
{
#foreach (var issue in parentIssues)
{
<SubtaskStatusContainer Issue="issue" ShowOpenForToday="#ShowOpenForToday" showWaitForReply="#showWaitForReply" OnChange="LoadIssues"></SubtaskStatusContainer>
}
#if (issues.Count != 0)
{
<StatusContainer Issues="#issues" ShowOpenForToday="#ShowOpenForToday" showWaitForReply="#showWaitForReply" OnChange="LoadIssues"></StatusContainer>
}
}
else if (issues.Count != 0)
{
<StatusContainer IsWithoutSubtasks=true Issues="#issues" ShowOpenForToday="#ShowOpenForToday" showWaitForReply="#showWaitForReply" OnChange="LoadIssues"></StatusContainer>
}
</div>
</div>
</IssueDialogOpener>
</div>
How it looks:
How it looks with styles isolated in the board.razor.css:
For CSS from an Isolated css file to work in a sub component you need to use the ::deep operator. DOCS
Push all styles back to Board.razor.css file
If your application is server-side then make sure if you have this line in your _Layout.cshtml
And if your application is Web Assembly then make sure this line is in your index.html file
<head>
<link href="yourprojectname.styles.css" rel="stylesheet" />
</head>
How do you use a normal js script with normal html code in a webform? I have this code below but when it runs the div tags display on the page for two seconds then they disappear. When checking the elements i see that the div tag is being assigned the class aspNetHidden. How can i fix this?
HTML code:
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<div class="numbertext">1 / 9</div>
<img src="Images/slide1.png" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 9</div>
<img src="Images/slide2.png" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 9</div>
<img src="Images/slide3.png" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">4 / 9</div>
<img src="Images/slide4.png" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">5 / 9</div>
<img src="Images/slide5.png" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">6 / 9</div>
<img src="Images/slide6.png" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">7 / 9</div>
<img src="Images/slide7.png" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">8 / 9</div>
<img src="Images/slide8.png" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">9 / 9</div>
<img src="Images/slide9.png" style="width:100%">
</div>
js Code:
<script type="text/javascript">
var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
</script>
If relevant, the css code:
<style>
* {box-sizing:border-box}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
</style>
You can add your code segments within the content tags, I just tried and it worked. refer the code below. Simply you can create a new web application with site.master files and you can add your code segments in the aspx file
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<div class="numbertext">1 / 9</div>
<img src="Images/slide1.png" style="width: 100%">
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 9</div>
<img src="Images/slide2.png" style="width: 100%">
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 9</div>
<img src="Images/slide3.png" style="width: 100%">
</div>
<div class="mySlides fade">
<div class="numbertext">4 / 9</div>
<img src="Images/slide4.png" style="width: 100%">
</div>
<div class="mySlides fade">
<div class="numbertext">5 / 9</div>
<img src="Images/slide5.png" style="width: 100%">
</div>
<div class="mySlides fade">
<div class="numbertext">6 / 9</div>
<img src="Images/slide6.png" style="width: 100%">
</div>
<div class="mySlides fade">
<div class="numbertext">7 / 9</div>
<img src="Images/slide7.png" style="width: 100%">
</div>
<div class="mySlides fade">
<div class="numbertext">8 / 9</div>
<img src="Images/slide8.png" style="width: 100%">
</div>
<div class="mySlides fade">
<div class="numbertext">9 / 9</div>
<img src="Images/slide9.png" style="width: 100%">
</div>
</div>
<script type="text/javascript">
var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) { slideIndex = 1 }
if (n < 1) { slideIndex = slides.length }
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
}
</script>
<style>
* {
box-sizing: border-box;
}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {
opacity: .4;
}
to {
opacity: 1;
}
}
#keyframes fade {
from {
opacity: .4;
}
to {
opacity: 1;
}
}
</style>
Okay so it turns out it was just a css error, the fade was kicking in before the code could run. just remove fade from all the tags and it works.
I've a input list. I've bind the data items from my code behind page. But the items are not showing in drop down but the items are shown in webdeveloper tools.
Please see the attached figure. In the text box when I type "a" no items are displayed, but when I debug the UI using web developer tool, the items are shown there.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Sample.aspx.cs" Inherits="Sample" MasterPageFile="AdminMaster.master" %>
<asp:Content ID="UserContent" runat="server" ContentPlaceHolderID="ContentPlaceHolder1">
<style>
.content {
min-height: 250px;
padding: 15px;
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}
.box {
position: relative;
border-radius: 3px;
background: #ffffff;
border-top: 3px solid #d2d6de;
margin-bottom: 20px;
width: 100%;
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}
.box.box-default {
border-top-color: #d2d6de;
}
.box-title {
display: inline-block;
font-size: 18px;
margin: 0;
line-height: 1;
}
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}
/*.fa-tag:before {
content: "\f02b";
}*/
.box-header.with-border {
border-bottom: 1px solid #f4f4f4;
}
.box-header {
color: #444;
display: block;
padding: 10px;
position: relative;
}
.form-horizontal .form-group {
margin-left: -15px;
margin-right: -15px;
}
.box-body {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
padding: 10px;
}
.form-horizontal .control-label {
padding-top: 7px;
margin-bottom: 0;
text-align: right;
}
.form-control {
display: block;
width: 50%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.form-control:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
.form-control::-moz-placeholder {
color: #999;
opacity: 1;
}
.form-control:-ms-input-placeholder {
color: #999;
}
.form-control::-webkit-input-placeholder {
color: #999;
}
label {
display: inline-block;
margin-bottom: 5px;
font-weight: 700;
}
.input_text {
width: 80%;
text-transform: uppercase;
}
</style>
<div class="content">
<div class="box box-default ">
<div class="box-header with-border">
<h3 class="box-title"><i class="fa fa-tag"></i>Student Registration</h3>
</div>
<div class="form-horizontal">
<div class="box-body">
<div class="form-group">
<label for="inputName" class="col-md-1 control-label">Name</label>
<div class="col-md-8">
<input type="text" class="form-control input_text" id="inputName" placeholder="NAME" />
</div>
</div>
<div class="form-group">
<label for="inputRoll" class="col-md-1 control-label">Roll Number</label>
<div class="col-md-8">
<input type="text" class="form-control input_text" id="inputRoll" placeholder="ROLL" />
</div>
</div>
<div class="form-group">
<label for="inputAddress" class="col-md-1 control-label">Gender</label>
<div class="col-md-8">
<label class="radio-inline">
<input type="radio" name="clouds" id="Clear" value="clear" checked="checked" />
Male
</label>
<label class="radio-inline">
<input type="radio" name="clouds" id="Cloudy" value="cloudy" />
Female
</label>
</div>
</div>
<div class="form-group">
<label for="inputAddress" class="col-md-1 control-label">Class</label>
<div class="col-md-8">
<input list="fruits" runat="server" />
<datalist id="fruits" runat="server"></datalist>
</div>
</div>
<div class="form-group">
<label for="inputAddress" class="col-md-1 control-label">Address</label>
<div class="col-md-8">
<input type="text" class="form-control input_text" id="inputAddress2" placeholder="Email" />
</div>
</div>
</div>
</div>
</div>
</div>
</asp:Content>
code behind page code
protected void Page_Load(object sender, EventArgs e)
{
DataTable table = new DataTable();
table.Columns.Add("fruits");
table.Rows.Add("apple");
table.Rows.Add("banana");
table.Rows.Add("pineapple");
table.Rows.Add("mango");
table.Rows.Add("watermelon");
table.Rows.Add("lemon");
table.Rows.Add("guava");
table.Rows.Add("jackfruit");
var builder = new System.Text.StringBuilder();
for (int i = 0; i < table.Rows.Count; i++)
builder.Append(String.Format("<option value='{0}'>", table.Rows[i][0]));
fruits.InnerHtml = builder.ToString();
}
The problem is that the datalist ID generated by ASP.NET is not fruits but ContentPlaceHolder1_fruits.
You should first give the input an ID, so you can access it from the code behind.
<input list="fruits" runat="server" id="fruitsInput" />
And then from the code behind set the right datalist ID
fruitsInput.Attributes["list"] = fruits.ClientID;
So your markup should look like this
<div class="col-md-8">
<input list="fruits" runat="server" />
<datalist id="fruits" runat="server"></datalist>
</div>
And you code behind like this
protected void Page_Load(object sender, EventArgs e)
{
DataTable table = new DataTable();
table.Columns.Add("fruits");
table.Rows.Add("apple");
table.Rows.Add("banana");
table.Rows.Add("pineapple");
table.Rows.Add("mango");
table.Rows.Add("watermelon");
table.Rows.Add("lemon");
table.Rows.Add("guava");
table.Rows.Add("jackfruit");
var builder = new System.Text.StringBuilder();
for (int i = 0; i < table.Rows.Count; i++)
builder.Append(String.Format("<option value='{0}'>", table.Rows[i][0]));
fruits.InnerHtml = builder.ToString();
fruitsInput.Attributes["list"] = fruits.ClientID;
}
I can't seem to manage to put a new css in a validationMessageFor in my Ajax form...
#using (Ajax.BeginForm(new AjaxOptions { HttpMethod = "POST", OnSuccess = "Success", OnFailure = "Fail" }))
{
<div class="separaror">
<div class="line1">
#Html.LabelFor(m => m.Name)
<br />
#Html.TextBoxFor(m => m.Name)
#Html.ValidationMessageFor(m => m.Name)
</div>
<div class="linha2">
<br>
<input type="submit" value="Save" />
<input type="button" id="btnCancel" value="Cancel" />
</div>
</div>
}
My css
.field-validation-error {
color: #e80c4d;
font-weight: bold;
}
.field-validation-valid {
display: none;
}
input.input-validation-error {
border: 1px solid #e80c4d;
}
input[type="checkbox"].input-validation-error {
border: 0 none;
}
.validation-summary-errors {
color: #e80c4d;
font-weight: bold;
font-size: 1.1em;
}
.validation-summary-valid {
display: none;
}
It doesn't override.. Why is that? Any help would be appreciated!
I copied the css directly from the default Asp MVC 4 application from visual studio,
I have no idea why this doesnt work.
The application I'm doing is not the default application from mvc 4, so there must be something I'm missing
You need to set .input-validation-error for validation for inputs
This is how you do it
.input-validation-error{ background: pink; border: 1px solid red; }
If you style up the .field-validation-error it will change the validation error message(s).
.field-validation-error{ color: red; font-weight: bold; }
Hope it helps
I am trying to get 3 flexible images to line up horizontally and stay within the confines of their flexible div container which has a flexible background,
the background of the container and the 3 images should all stay in relation to each other positionally so they are always on top of each other. they should get larger and smaller with the size of the browser window but not exceed 800 px in width.
The problem I am having is the background and footer slam to the left and the button divs go right.
My JSFIDDLE
HTML:
<div id="container">
<div id="footer">
<div id="left">
<input type="image" name="MyLeftButton" id="MyLeftButton" class="imgstretch" src="Images/MyLeftImage.png" style="border-width:0px;">
</div>
<div id="middle">
<input type="image" name="MyMiddleButton" id="MyMiddleButton" class="imgstretch" src="Images/MyMiddleImage.png" style="border-width:0px;">
</div>
<div id="right">
<input type="image" name="MyRightButton" id="MyRightButton" class="imgstretch" src="Images/MyRightImage.png" style="border-width:0px;">
</div>
</div>
</div>
CSS:
#container {
margin: 0em auto 0em auto;
width: 100%;
max-width: 800px;
}
#footer {
width: 100%;
max-width: 800px;
max-height: 80px;
float: left;
text-align: center;
position: fixed;
bottom: 0em;
background-color: #009FC1;
}
#left {
float: left;
max-height: 80px;
max-width: 294px;
width: 36%;
margin-left: 20px;
display: inline-block;
background-color: #CCCCCC;
}
#middle {
max-height: 80px;
width: 25%;
float: left;
max-width: 202px;
display: inline-block;
background-color: #889FC1;
}
#right {
max-height: 80px;
max-width: 294px;
width: 36%;
float: left;
display: inline-block;
background-color: #9999DD;
}
.imgstretch {
width:100%;
}
You have a couple of things going on.
1) Footer is set to fixed position, which makes it ignore the parent element and fix itself to the window. I don't know if this is an issue for your layout, but something to note.
2) You have inline styles set on elements that you already have a defined class for. Seems unnecessary.
3) Your dimension calculations are WAY off in relation to your % and px. 36% should be (0.36 * 800) which would come out as 288px, not 294px, and THEN plus a 20px margin.
I've forked your fiddle. http://jsfiddle.net/ZBJPF/8/
html {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
}
#container {
margin: 0 auto;
width: 100%;
max-width: 800px;
}
#footer {
width: 100%;
max-width: 780px;
max-height: 80px;
margin: 0 auto;
padding-left: 20px;
text-align: center;
position: fixed;
bottom: 0;
background-color: #009FC1;
}
.footer-element-lg {
float: left;
width: 36%;
max-width: 280px;
position: relative;
}
.footer-element-sm {
float: left;
width: 28%;
max-width: 220px;
position: relative;
}
#left {
background-color: #CCCCCC;
}
#middle {
background-color: #889FC1;
}
#right {
background-color: #9999DD;
}
.imgstretch {
width:100%;
border: none;
}
<div id="container">
<div id="footer">
<div id="left" class="footer-element-lg">
<input type="image" name="MyLeftButton" id="MyLeftButton" class="imgstretch" src="Images/MyLeftImage.png">
</div>
<div id="middle" class="footer-element-sm">
<input type="image" name="MyMiddleButton" id="MyMiddleButton" class="imgstretch" src="Images/MyMiddleImage.png">
</div>
<div id="right" class="footer-element-lg">
<input type="image" name="MyRightButton" id="MyRightButton" class="imgstretch" src="Images/MyRightImage.png">
</div>
</div>
</div>
I removed a 20px margin and made the spacing as a 20px padding for continuity sake.