Responsive div with image aligned 100% to text - html

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>

Related

Removing space between heading and div

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; }

html table cell content left and right same position

Im trying to get the text from the left table cell and right table cell to allign at the same place. Also im using blogger if this helps. Here is a picture of what i want
What i want
Here is my table html
<div id="text1">
Motives are extremely important and not taking care of your motives can cause alot of problems.</div>
<br />
<br />
<div id="table1">
<br />
<table border="0" cellpadding="3" cellspacing="3" id="table1" style="background-color: white; border-collapse: collapse; border: 0px solid #FFCC00; color: black; width: 850;">
<tbody>
<tr>
<td height="400px" width="425px">
<div id="title1">
Sims with Bad Motives:</div>
<br />
<div id="text1">
<ul id="list1" style="list-style-type: disc;">
<li>Can cause your work or school performance to suffer</li>
<br />
<li>Can give you a negative moodlet. </li>
<br />
<li>Can cause death</li>
</ul>
</div>
</td>
<td height="400px" width="425px"><div id="title1">
Sims with Good Motives:
</div>
<br />
<div id="text1">
<ul id="list1" style="list-style-type: disc;">
<li>Get promotions fast</li>
<br />
<li>Earn life time rewards from mood bar being high.</li>
<br />
<li>Get to pick two extra traits when a baby is born</li>
<br />
<li>Learn skills faster</li>
</ul>
</div>
</td>
</tr>
</tbody></table>
</div>
and here is any css associated with it
#title1 {
text-align:center;
text-decoration: underline;
font-weight: bold;
font-size: 20px;
}
#text1 {
font-size: 15px;
text-align: center;
}
#table1 {
text-align: center;
vertical-align: top center;
}
#table1 {
margin-top: -10px;
}
Gosh, horrible markup. I can barely look at it :)
Nevertheless, you have elements with the same ID on the page > #title1, #table1... IDs are unique. Classes are reusable on the same page. You can use the same ID on different pages, but you can't use two elements with the same ID on the same page.
There is a sort of uniformity you need to apply to your markup, and that's what classes are for. You need sort of a same layout for your left and you right columns.
This is the "fix": jsfiddle.net/swqza86p
What I did was to transform IDs into classes and set your tr elements with the vertical-align: top property.

Why does align="right" not work?

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
{
// ...
}

Move pic up using HTML/CSS

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.

Page layout behaves differently on my localhost and on the cloudfoundry

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.