I am relatively new to HTML/CSS and am having an impossible time making two pics line up with an ASP MVC website. The bookend pic we are using for the menu bar cannot line up with the rest of the background pics. Below is a screenshot of the problem, the HTML and the CSS. The bookend pic that is not adjusted correctly is NAV-Left-Corner, and it's id in the CSS is "#menuLeft." The rest of the nav bar uses a small blue pic repeated horizontally. That portion of the CSS can be found in the "ul#Menu" section. (I'm having the same problem with the right bookend, just wanted to simplify things for the sake of this post)
HTML
<body>
#using Monet.Common
<div class="page">
<header>
<div style="margin: 20px;">
#* Monet *#
<span href="Home" style="color: white; font-size: 36px; font-weight: bold;text-decoration: none;" onclick="DoFun();">Monet </span>
<span style="color: white; font-size: 18px; "> </span>
</div>
#* </a>*#
#* <div id="logindisplay">
#Html.Partial("_LogOnPartial")
</div>*#
<nav>
<ul id="menu">
<img src="../../Content/images/NAV-Left-Corner.gif" id="menuLeft" alt="mLeft"/>
<li id="mTop">#Html.MenuLink("Agents", "Index", "Agent")</li>
<li class="mProducts">#Html.MenuLink("Products", "Index", "Product")</li>
<li class="mPt">#Html.MenuLink("Product Training", "Index", "Course")</li>
<li class="mCe">#Html.MenuLink("Continuing Ed", "Index", "ContEdCourse")</li>
<li id="mBottom">#Html.MenuLink("Help", "About", "Home")</li>
<img src="../../Content/images/NAV-Right-Corner.gif" id="menuRight" alt="mRight"/>
</ul>
</nav>
</header>
<img src="../../Content/images/TEST2body_top.png" id="topPic" alt="tag"/>
<section id="main">
#RenderBody()
</section>
<footer>
<span style="color: Gray;"> Copyright © 2012 For Internal Use Only. </span>
</footer>
</div>
</body>
CSS
ul#menu {
/*border-bottom: 1px #5C87B2 solid;*/
background-image: url('../../Content/Images/Nav-Background.gif');
background-position:center;
background-repeat:repeat-x;
padding: 0 0 2px;
position: relative;
margin: 0;
text-align: right;
}
#menuLeft
{
vertical-align:middle;
}
#menuRight
{
vertical-align:middle;
}
I agree with Nile in comment ("dont do it this way").
Anyway - you can just move anything up or down by adding some padding or margin. You can also use negative padding-top, to move image up, even outside its container.
ul#menu {
/*border-bottom: 1px #5C87B2 solid;*/
background-image: url('../../Content/Images/Nav-Background.gif');
background-position:center;
background-repeat:repeat-x;
/* HERE */
padding: -5 0 2px;
position: relative;
margin: 0;
text-align: right;
}
Im not sure that is recipe for you, but it may be good tip about positioning items.
Edit/added later:
Maybe you should not experiment with CSS in serious app like this. App "for internal use only" dont need fancy effects.
Read good tutorial about CSS and make some exercises (positioning, gradients, browser support) before you use it in work :)
The New Boston is very good website with most professional free courses and tutorials i ever saw.
Related
this part has been bothering me for half an hour, and I dont know how to solve. So, how do I remove the lightgrey space between heading and div? Should I be using margin and padding to do it?
Below is my code:
<!-- Description -->
<h3 style="background-color:white; font-size:20px;">
Within three years, production area had more than tripled to meet growing demands. The year
1999 marked the completion of our current plant of 65,000
square feet, fully equipped with state-of-the-art technology, as well as the start of our
Surface Mount Technology process. Implementation of new
lead-free production lines began in early 2003. Our success is the result of the joint-efforts
of our innovative and quality-focused engineering team,
whose expertise range from design to debugging, and the dedication of the rest of our staff.
</h3>
<!-- ------------------------------ -->
<div style="width: 100%; display: table;margin:0px; padding:0px; background-color:#D6EAF8 ">
<div style="display: table-row">
<!-- ------------------------------------------------------------------ -->
<!-- Why Us -->
<div style="margin:0px; padding:0px; display: table-cell">
<h3 style="padding-left:620px">Why Us?</h3>
<ul style="padding-left:640px">
<li><a href="http://www.scope.com.my/2014/SMSB2014/qpolicy.htm" style="background-
color:#D6EAF8 ; color:black">Policy</a></li>
<li><a href="http://www.scope.com.my/2014/SMSB2014/manufacturing_capability.htm"
style="background-color:#D6EAF8 ; color:black">Capability</a></li>
<li><a href="https://www.scope.com.my/career.html" style="background-color:#D6EAF8 ;
color:black">Careers</a></li>
</ul>
</div>
<!-- Follow Us -->
<div style="margin:0px; padding:0px; display: table-cell">
<h3 style="padding-right:500px">Follow Us</h3>
<ul style="padding-left:20px">
<li><a href="https://www.facebook.com/pages/SCOPE-Manufacturers-M-Sdn-Bhd/304477286279886"
style="background-color:#D6EAF8 ; color:black">
<img src="icon1.jpg" alt=""> Facebook</a></li>
<li><img src="icon2.jpg" alt=""> Twitter</li>
<li><img src="icon3.jpg" alt=""> Linkedin</li>
</ul>
</div>
<!-- ------------------------------------------------------------------- -->
</div>
</div>
It's margin-bottom of h3, make it as h3 {margin-bottom: 0}
you should remove margin bottom: h3
<h3 style="background-color:white; font-size:20px;margin-bottom:0;">
All you really need is to apply margin-bottom:0; to the first h3:
<h3 style="background-color:white; font-size:20px; margin-bottom:0;">
Although, I'd like to offer you a solution without so much inline-CSS as well. Read more on What's so bad about in-line CSS?.
I've effectively moved duplicate styling into classes and included some id's to define your styling. All styling is included in pure CSS and could be included as an external style sheet.
See the JSFiddle
.h3_Summary {
background-color: white;
font-size: 20px;
margin-bottom: 0;
}
.div_outer {
width: 100%;
display: table;
margin: 0px;
padding: 0px;
background-color: #D6EAF8;
}
.div_inner {
display: table-row;
}
.div_container {
margin: 0px;
padding: 0px;
display: table-cell;
}
#h3_whyUs {
padding-left: 620px;
}
.ul_first {
padding-left: 640px;
}
ul li a {
background-color: #D6EAF8;
color: black;
}
#h3_followUs {
padding-right: 500px;
}
.ul_second {
padding-left: 20px;
}
<!-- Description -->
<h3 class="h3_Summary">
Within three years, production area had more than tripled to meet growing demands. The year
1999 marked the completion of our current plant of 65,000
square feet, fully equipped with state-of-the-art technology, as well as the start of our
Surface Mount Technology process. Implementation of new
lead-free production lines began in early 2003. Our success is the result of the joint-efforts
of our innovative and quality-focused engineering team,
whose expertise range from design to debugging, and the dedication of the rest of our staff.
</h3>
<!-- ------------------------------ -->
<div class="div_outer">
<div class="div_inner">
<!-- ------------------------------------------------------------------ -->
<!-- Why Us -->
<div class="div_container">
<h3 id="h3_whyUs">Why Us?</h3>
<ul class="ul_first">
<li>Policy</li>
<li>Capability</li>
<li>Careers</li>
</ul>
</div>
<!-- Follow Us -->
<div class="div_container">
<h3 id="h3_followUs">Follow Us</h3>
<ul class="ul_second">
<li><a href="https://www.facebook.com/pages/SCOPE-Manufacturers-M-Sdn-Bhd/304477286279886">
<img src="icon1.jpg" alt=""> Facebook</a></li>
<li><img src="icon2.jpg" alt=""> Twitter</li>
<li><img src="icon3.jpg" alt=""> Linkedin</li>
</ul>
</div>
<!-- ------------------------------------------------------------------- -->
</div>
</div>
Let me know if you want any clarification! Goodluck with it! :)
Add following css lines to your style sheet.
h3 { margin-bottom: 0; }
I am trying to get an image aligned right of some text/lists while having the image still be 100% in height and within the div. So far I've come close but the image is always overlapping the bottom of the div. Here's an example of what I'm trying to achieve:
Here's the code I've come up with so far, I've been using inline CSS but once I've figured it out it'll be in a separate CSS file. Any help is really appreciated, been trying to figure this out for days!
<div style="background: #000; width: 90%; color: #fff; margin: 0 auto; text-align:left; border: 1px solid #95403c;">
<p>
<img style="float: right; margin: 1px 1px 1px 1px; width: 355px;" src="" />
<div align="center">
<h1>Gold (proper style coming soon)</h1><br />
<clear>
<u>All Edited Videos Include:</u>
<ul style="display: inline-block; text-align: left;">
<li>60-90 Minute Interview Documentary</li>
<ul><li>B-Roll Footage</li>
<li>Incorporation of personal video clips (up to 15) and photographs (up to 125)</li>
<li>Interview Transcript</li></ul>
<li>1-2 Minute Individual Clips of Family Members </li>
<li>Up to 5 individuals will share a favorite memory with or express their love for the subject </li>
<li>5-10 Minute Prized Possession</li>
<li>The subject will share and describe their most prized possession</li>
<li>Behind The Scenes Photographs</li></ul>
</ul>
<clear>
<div style=" display: inline-block; vertical-align: top;">
<u>You Will Receive:</u>
<ul style="display: inline-block; text-align: left;">
<li>USB flash drive with all edited video files,<br /> pictures, and interview transcript</li>
<li>15 DVDs</li>
<ul><li>Customized printed DVDs</li>
<li>Customized menu and chapters</li>
<li>Hard cases with customized insert</li></ul>
</ul></div>
<div style="display: inline-block; vertical-align: top;">
<u>All Edited Videos Include:</u>
<ul style="display: inline-block; text-align: left;">
<li>Customized Titles</li>
<li>Customized Graphics</li>
<li>Music</li>
<li>Sound Design</li>
<li>Color Correction</li>
</ul>
</div>
<clear>
<br style="clear: both;" /></p>
</div>
I am designing a website and I want the footer to have two small images on the bottom left side followed by #* (a twitter address). In the middle of the footer I want the address and on the right of the footer I want the contact number.
At present I have all of the above in the footer div however they are not all aligned. The images are very far apart and the text is in the wrong place. The text is below the images and to the right. However I want everything to be aligned horizontally.
I am using HTML and CSS on macromedia dreamweaver.
The current code is:
<div class="footer content">
<ul>
<li> <img src="Images/facebook.png" /> <img src="Images/twitter.png" /> </li>
<li>#TWITTERADRESS</li>
<li>POSTAL ADDRESS </li>
<li>TEL NUMBER</li>
</ul>
</div> <!--end of footer-->
CSS
.footer {
text-align:centre;
background-color:#C8C8C8;
color:#000000;
padding-bottom:1em;
}
First of all edit the CSS as
.footer ul li {
display: inline; // in a straight line
}
Edit the HTML part as:
<div class="footer">
<ul>
<li class="image"><img src="Images/facebook.png" />
<img src="Images/twitter.png" /></li>
<li class="twitter">#TWITTERADRESS</li>
<li class="address">POSTAL ADDRESS </li>
<li class="number">TEL NUMBER</li>
</ul>
</div>
Edit the CSS part now as:
.image {
float: left; // float to the left
}
.number {
float: right; // float to the right
}
Try it here: http://jsfiddle.net/afzaal_ahmad_zeeshan/6zYeA/
maybe something like this:
.footer {
text-align:centre;
background-color:#C8C8C8;
color:#000000;
padding-bottom:1em;
}
.footer li{
float: left;
width: 25%;
}
From the designer point of view... with Photoshop, Illustrator, Freehand or similar you can design a beautiful footer, or better a beautiful draft of the entire page first, the very one you would like to see. Then, start with the markup skeleton writing sections like this (html5):
<div id="wrapperdiv">
<header>
<nav>
<ul>
<li><a href='#'>home</li>
<li>...
<li><a href='#'>contact</li>
</ul>
</nav>
</header>
<section><blockquote>...</blockquote>...</section>
...
<footer>
<img src='.../footerLogo_left.png' id='footerLogo_left'>
<img src='.../footerMiddle_text.png' id='footerMiddle_text'>
<img src='.../footerLogo_right.png' id='footerLogo_right'>
</footer>
</div>
At this point we can write the CSS3 code (maybe at styles.css):
...
#wrapperdiv {background...}
header {width...}
nav li a{...}
...
footer{
width:...;
height:...;
margin:...;
}
Next thing to do is to cut images from the draft, like footer_bg.png, footerLogo_left.png, footerLogo_right.png, footerMiddle_text.png..., and link them to the markup:
footer{
background:url(.../footer_bg.png) repeat_x;
width:...;
height:...;
margin:...;
}
#footerLogo_left {
float:left;
margin:...}
#footerMiddle_text {
float:left;
margin: (the same than left)}
#footerLogo_right {
float:right;
margin: (the same than left)}
Ok, it's not as easy as it seems, but this way can give you very visual websites (graphical draft + html skeleton + css styles).
A few days ago I was working on a classic menu. It has a logo on the left and some menu buttons on the right. This was my first try – fiddle1. But someone from this community told me that menus normally aren't coded like that but with <ul>and <li>.
So I tried to rebuild that menu – fiddle2. Unfortunately nothing works.
My first issue is that I have the feeling that the <div id="menubuttons"> is not located IN the <div id="header">. The second problem is that <div id="menubuttons" align="right"> isn't aligned right as it should be.
Can you help me to get the visual result of fiddle1 with <ul>and <li> tags?
ul element by default will take margin
So please add css like this, it will remove the default margin and padding
ul{margin:0; padding:0}
#menubuttons { float:right}
Check this Demo
I changed some code, try this:
http://jsfiddle.net/WnneG/
<ul style="float:left;paddin:0px;margin:0px;">
<li class="menubutton"> Home
</li >
<li class="menubutton"> Info
</li>
<li class="menubutton"> Spenden
</li >
<li class="menubutton" align="right" style="margin-right: 20px;"> Kontakt & Impressum
</li >
</ul>
replace this line of code:
<div id="header_logo" align="left">
<img src="http://futurized.t15.org/fut_logo.png" style="height: 12px; z-index: 2;" />
</div>
<div id="header_menu" align="right">
with:
<div id="header_logo" style="float:left;">
<img src="http://futurized.t15.org/fut_logo.png" style="height: 12px; z-index: 2;" />
</div>
<div id="header_menu" style="float:right;">
hopefully you will get your desired result if this help You please mark it as green
See the code in the fiddles you posted. Yours tries to create a menu from divs, while the one you are trying to get to, has <li> items with float: left;
Put to <li> tag style display:block;float:right; like this: <li style="display:block;float:right">
Use float = right instead of align for the div menubuttons.
#menubuttons {
margin-right: 0;
margin-top: 0;
height: 2.5em;
line-height: 2.5em;
display: block;
float:right;
}
I have created a version of your menu. I think this helps: http://jsfiddle.net/yBTJF/4/
.menu
{
height: 30px;
background: #FFFFFF;
line-height: 30px;
list-style: none;
padding: 0 5px;
margin: 0px;
}
If you want :hover, all you have to do is create a selector in your CSS:
.menu a:hover
{
// ...
}
I have a simple HTML page which displays 2 lists one besides the other. Each item on the list is a div element (round-corner box) that contains some data. now when I run it from my STS and view it in my browser: lists are displayed one beside the other. When I deploy it to the couldfoundry and view it with my browser the second list is displayed below the 1st one.
Here is my HTML (I appologize on the missing indentation) :
<section title="item List">
<div class="inner"><h4>ITEMS</h4></div>
<div class="inner"><h4>OTHERS</h4></div>
<div style="clear: both"></div>
<!-- item only list -->
<div class="container">
<ul class="plainList">
<c:forEach items="${itemsFrom.itemsOnly}" var="item" varStatus="status">
<li><div class="inner">
<img src="resources/images/${item.id}.png">
<ul class="plainList">
<li><h4>${item.title} ™</h4></li>
<li><h5>${item.description}</h5></li>
</ul>
<input style="float: right;" type="checkbox" name="itemIds" value="${item.id}" />
<div style="clear: both"></div>
</div>
</li>
</c:forEach>
</ul>
</div>
<!-- Others only list -->
<div class="container">
<ul class="plainList">
<c:forEach items="${itemsFrom.othersOnly}" var="item" varStatus="status">
<li><div class="inner">
<img src="resources/images/${item.id}.png"/>
<ul class="plainList">
<li><h4>${item.title} ™</h4></li>
<li><h5>${item.description}</h5></li>
</ul>
<input style="float: right;" type="checkbox" name="itemIds" value="${item.id}" />
<div style="clear: both"></div>
</div>
</li>
</c:forEach>
</ul>
</div>
</section>
and here is the CSS:
body {
font-size:100%;
font-family: Comic Sans MS, Georgia, ariel;
}
div.inner { margin: 0; padding: 10px; border:0; zoom:1; background: #dcdcdc}
div.outer { float: left; margin: 5px; background: #c10506; padding: 8px, width: 26em}
.container {
margin: 0px;
padding: 0px;
float: left
}
ul.plainList {
list-style-type: none;
margin: 0px;
padding: 0px;
float: left
}
HTML rendering doesn't have to do with Server Side directly. The results generated from the server side can have a influence in what the dynamic portions of your page have to show.
So for instance if you view your page in dev env vs. staging, you'll see, due to the number of records being more most likely in stage, a difference in your UI.
I would say check your persistence and see if you can have the same exact number of data being sent to your client side from server side on Cloud Foundry as your localhost.
Again remember UI rending doesn't change just because your application is deployed to a PAAS environment. It's the Server Side data you have in each environment which is causing your issue. This can simply happen on your localhost as well.