Float property in Div
Is float property supported in Div TLF 2.0?
No, it's only for <img>, which is flashx.textLayout.elements.InlineGraphicElement.
Similar Messages
-
I was changing my Home page's Master Page, so I went to the advanced mode via SharePoint designer and changed the Master Page line, then that happened! I tried to export and Import the Home.aspx but same?!
Hi,
According to your post, my understanding is that you got errors when you changed the master page.
Based on the earlier threads, If you forget the <zone template> tags, this issue may happen.
You can wrap your whole code in a <div> tag, then check whether it works.
There are some similar threads for your reference.
http://mysharepointwork.blogspot.com/2011/07/type-microsoftsharepointwebcontrolsscri.html
http://www.sharepointboris.net/2009/02/type-microsoftsharepointwebcontrolsformfield-does-not-have-a-public-property-named-xmlnssharepoint-error/
http://social.technet.microsoft.com/Forums/en-US/89e99b85-5af3-45c1-a39e-677711329aba/error-systemwebuiwebcontrolscontentplaceholder-does-not-have-a-public-property-named?forum=sharepointadminprevious
Thanks & Regards,
Jason
Jason Guo
TechNet Community Support -
Why does my footer background colour change when adding a float to a DIV element?
Bear with me as I am a student learning dreamweaver....
I am trying to insert a series of 4 DIVs into a footer area with a black background. WHen I insert a float to constrain them to a horizontal position, the black background disappears and the body background shows through. A strip of the footer displays on top of the area where the DIVs are placed. The float works but the problem is with the background colour. It's almost as if the divs have been pushed down below the footer area. I have tried placing my cursor in several locations before inserting the float but it doesn't change anything.
Can anyone help?It all depends on the code you're working with. In the following example, I applied overflow:hidden to the <footer> element.
Copy & paste this code into a new, blank HTML page to see how it works.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Layout</title>
<style type="text/css">
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #CCC;
padding: 0;
color: #000;
width: 1000px;
margin: 45px auto;
header {width: 100%; display:block; background: #A5C9C9; min-height: 100px}
section {width: 100%; display:block; background:#FFF; min-height: 300px}
footer {width: 100%; display:block; background: #FF9; overflow:hidden;}
aside {width: 22%; float:left; display:block; margin-right: 4%; background:#D8E9B6; min-height: 200px;}
aside:last-child {margin-right:0}
</style>
</head>
</body>
<header>
<h1>Content for header goes here</h1>
</header>
<section>Content for section goes here</section>
<footer>
<aside>aside 1</aside>
<aside>aside 2</aside>
<aside>aside 3</aside>
<aside>aside 4</aside>
</footer>
</body>
</html>
Nancy O. -
I have a div inside another div
The pearent div is NOT floated (and has height auto)
When i apply float to the inside DIV it behaves as if it is not inside the pearent DIV
is this normal?
if yes
how do i float objects inside a non-floated pearent div with auto height?When i apply float to the inside DIV it behaves as if it is not inside the pearent DIV
is this normal?
Yes. What is happening is due to the nature of floats. When you float an object it is removed from the normal flow of the page. This means that its parent container will suddenly lose sight of that object as a descendent element. This usually causes the parent to collapse to the height of its non-floated content, and if there is none, the parent container could collapse all the way down to a thin line. The floated element will appear to be OUTSIDE of the parent and for many purposes, it *is* outside the parent (CSS will still cascade into it properly though).
if yes
how do i float objects inside a non-floated pearent div with auto height?
Auto height is misleading in that it's the default. Assigning NO height is the same as assigning auto height. It really does nothing for you and is usually therefore both redundant and unnecessary. What you must do to 'keep the descendent element in the parent' is one of these three things (haven't we been through these with you before?):
1. Assign a width to the parent element and float it (a floated element will always contain its descendent floated elements).
2. Apply an overflow:hidden style to the parent (this forces the parent to acquire a new block formatting context, and thereby contain its descendent floats).
3. Clear the floats before closing the parent tag (perhaps with something as simple as '<br style="clear:both;">'.
Make sense? -
Hello,
I'm trying to embed Flash movie (MP3 player) to HTML using SWFObject. The SWF is 30px high but when you roll over some elements, the height can go up to 100px because some elements show up. What I want to do is to have div 30px high but when I roll over particular Flash elements, then the elements that should show up are not visible. I was wondering if there is a way to allow Flash to 'float out' of the div so the taller elements become visible when rolled over the Flash movie.
Thanks!If you are still wondering, i may have a solution but I haven't had a chance to apply it to an actual site, though it has worked in publish previews. Assuming you were using flash pro, go to publish settings and click on the html tab.
There are a few settings here that i attempted to mess around with until I got the right result. This means I have no idea how this translates in the html code. Anyways for the following:
Dimensions: set to percent, and keep it at 100%. This keeps your flash proportionate. The other settings are match movie and pixels. Pixels will allow you to set your own scale while match movie will set it to the dimensions you designated in Flash. I naturally gravitated to match movie but found that if this is done the div table seems to be fixed. We don't have to worry because there's another setting that will maintain the scale you worked with.
Window Mode: This really depends on how your flash is set up. I personally had a frame so I went with opaque windowless. If you have something where you have a transparent bg or no bg at all, you'll probably go with transparent, but this is something I really have no idea on. Of course having it in window mode will restrict how far your animations can go when in html. So really, you want to have window mode off. I think this is the most important setting you are looking for.
Scale: This is the setting that allows you to control the actual size of your flash within your stage. I kind of imagine it being similar to how you set up your desktop background with fill, fit, stretch, and center. This would translate to no scale, exact fit, no border, and default. For this one, I went with exact fit since my dimensions were proportionate to my flash.
both scale and dimensions are pretty flexible, but you need to mess around with it a little to get the window mode to work. You probably figured this out already but I thought I'd put in some input here for anyone else looking for a solution.
also, sorry if you were trying to solve this in html. I can't really help you there. -
Floating a footer DIV bottom center of screen inside a container Div??
Hi Im having terriblr trouble..........typical- i get the website done nice and fast and the last thing the annoying client wants I struggle!! I have a container div for the whole site keeping it centered. The client now wants the 'copyright' footer at the bottom of the screen......foalting of course......so its always centered and at the bottom of the screen whatever the size of your monitor.
Im struggling like hell...........I maybe not doing it right but when i get somwhere close it seems to be conflicting with the scrolling background pictures.
please have a look and advise if you know help.....thanks!! www.websitesmonthly.com/townhouseI think you're making this overly complex. All you need is a simple 2-column layout.
http://alt-web.com/TEMPLATES/CSS-Basic-2-column-layout.shtml
Add whatever you wish to the #mainContent (left) div.
Nancy O. -
I am having difficulty properly floating a div tag in my site. The page is http://www.planetwhistler.com/bandbs.html The Div on the bottom of the second column with 'content for right_bandb_div' goes here will not properly float to the right of the Div to the left of it. I have floated the 'right_bandb_' div to the left with enough of a margin to clear the div tag in the first column, I have also put the code for 'right_bandb' before the code for the div to the left of it but for some reason it won't properly place itself. Thanks for any help provided.
I realize my Template isn't exactly like yours, but you can learn from it.
http://alt-web.com/TEMPLATES/CSS-centered-round-boxes.shtml
1) apply min-height values to all your .boxes.
2) add a float clearing between rows.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb -
Floating a <div>
I have two content areas below my logo and navigation bar, I entered this HTML,
<div id=”bodyArea”>
<div id=”left”></div>
<div id=”right”></div>
</div>
I then floated the left div to the left and the right div to the right, I never specified a height for the left div as I wanted it to auto expand with the content as it dose, the right div I did specify a height of 300 pixels, now I thought once the left div came down by the 300 pixles mark and cleared the right div I thought it would then take up the space on the below the right div.
I thought of another idea but don't know if it's possible, to make only one area bellow my navigation bar that auto expands with the content, and place a box (div) on top is this possible, (like floating a div on top of another) I just want an area of 200x300 like a notice area to sit on top of the main content area, any help or suggestions would be greatly appreciated.Goodness. This is a very strange reply.
A floated <div> will never surround (or go under in the way you're saying) a non-floated <div>
This is correct.
floated divs basically seem to have less priority than those that are not.
This is fantasy.
In that case you would want the right <div> to have the rule {float: right;} so the content in the left one would essentially surround it.
That's incorrect. If you have this -
<div id="left"></div>
<div id="right" style="float:right;"></div>
then the right div will be BELOW the left div, not to its right. To make it appear to the right, you would have to float the left div to the left, and the right div to the left as well.
If you decide you still want the left one floated, what you can do to make that floated <div> extend beyond the content <div> is add the rule {overflow: auto;} to it and that may work, or you may have to have to set that on the #bodyArea div if that doesn't work.
Sorry, this makes no sense at all. -
Why is the length of a floated div ignored by the outer wrapper?
I'm having a hard time understanding whether floated elements are relatively or absolutely positioned.
When I do a "float:right" on a narrow column, the text outside that column seems very aware of its existence. It won't appear under it - it will instead wrap around it. It will make room for it.
However, the outer wrapping div ignores the floated div completely. It will only take into account (and accomodate for) whatever amount of text is NOT in that inner floating div.
Example :
<div class="wrapper">
<div style="float:right">
Float right contents.
</div>
This is the content that isn't floating right.
</div>
If the right-floated contents are longer than the content that isn't floated right, the outer wrapper ignores it. It will only accomodate the text that isn't being floated. If the floated text exceeds the non-floating text, the floating text will bleed outside the outer wrapper.
How do I make the outer wrapper accomodate the right-floated div as well?I'm having a hard time understanding whether floated elements are relatively or absolutely positioned
Neither. Floats are floats. The take content out of the normal flow. For this reason, you must clear floats after they are no longer needed. I typically use a br, p or hr tag with a clearing class like so:
CSS:
.clearFloat {clear:both; height 1px; visibility: hidden}
HTML:
<hr class="clearFloat" />
Floats and Margins Demo.
http://alt-web.com/DEMOS/3-CSS-boxes.shtml
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb -
Floating 3 div tags side by side
Hello Dreamweavers.
Im trying ot float 3 div tags side by side. I dont have a problem floating 2. But when I add a 3dr DIV the 2nd DIVS margin is making me confused
how to get them floatin next to each other. Here is what I have so far.
Thank you.
#box_one {
background-color: #9C9;
width: 400px;
height: 400px;
float: left;
#box_two {
background-color: #99F;
height: 400px;
width: 400px;
float: right;
margin-right: 450px;
#box_three {
background-color: #06F;
height: 400px;
width: 400px;
margin-left: 1000px;
float: right;
<body>
<div id="box_one">Content for id "box_one</div>
<div id="box_two">Content for id "box_two</div>
<div id="box_three">Content for id "box_three" Goes Here</div>
</body>
</html>No need to get complex, just float all of the <divs> left and give 'box_two' and 'box_three' a margin-left: 50px; (see below)
#box_one {
float: left;
background-color: #9C9;
width: 400px;
height: 400px;
#box_two {
float: left;
background-color: #99F;
height: 400px;
width: 400px;
margin-left: 50px;
#box_three {
float: left;
background-color: #06F;
height: 400px;
width: 400px;
margin-left: 50px; -
Divs being removed from parent div when a float style is applied
Divs being removed from parent div when a float style is applied
Hi All,
I hope someone is able to help me with the below issue.
I apologise if the questions I have been asking lately are really basic, I’m just teaching myself web design.
I really do appreciate the help you guys offer, so a big thank you in advance.
I am confused as to why I am not getting my desired effect for the below code. I am creating a website for someone and have structured the website in the following way:
<body>
<div id="wrap">
<div id="title"></div><!-- end #title -->
<div id="shopping_cart"></div><!-- end #shopping_cart -->
<div id="content_wrap">
<h2 class="header">Header goes here</span></h2>
<div id="nav_bar">
<table>table goes here</table>
</div><!-- end #nav_bar -->
<div id="side_bar">
<h1>text here</h1>
<table>table goes here</table>
</div><!-- end #side_bar -->
<div id="content">
<p>text here</p>
<div id="content_image"></div>
</div><!-- end #content -->
<div id="footer">
<div id="logo"></div>
<div id="flags"></div>
<div id="v_wd"></div>
</div><!-- end #footer -->
</div><!-- end #content_wrap -->
</div><!-- end #wrap -->
</body>
Now I don't know if I am structuring my website the right way this is just the way that makes sense to me. It might not even be the source code that’s the issue and may be the CSS so I have also pasted that in below.
Now the problems I am having are as follows:
I want to have my whole site wrapped in one big div #wrap so I can centre the whole site. Within that div I want all my other divs (which some have divs inside those as well).
To start #title seems to fit inside #wrap without a problem but #shopping_cart gets push outside of #wrap even though it is inside the opening and closing #wrap tag.
My next div #content_wrap, it seems to be inside #wrap however the margin-top I have applied to #content_wrap pushes it down from #title not #shopping_cart even though #content_wrap is below #shopping_cart not #title.
The second problems seem to be with the divs that are or supposed to be inside #content_wrap.
h2 .header seems to fit inside #content_wrap without any problems. Now it gets really confusing, for me anyway. Any div I put below h2 .header which is inside #content_wrap doesn’t seem to actually go inside #content_wrap or #wrap they get pushed below #wrap even though in the source code they are inside the opening and closing div tags.
Also #side_bar and #content together equal 860px which is the width of their surrounding div #content_wrap so they should fit perfectly side by side. This I know ties into a previous discussion I raised in discussion (http://forums.adobe.com/message/4501038#4501038). I have taken Murry’s advice on board from this discussion and tried floating just #side bar to the left and left enough margin for #content to clear, I also tried floating both to the left. Nothing worked.
As I have been writing this I’ve gone through my code, all the above issues only occur if I float a div. If I float a div for some reason it removes that div from any div surrounding it and pushes it below every single div. I don’t know how to position my divs in the exact place I want without floating them but if I float they get moved out of their parent div and therefore aren’t in the position I want them in either.
If you are able to help me resolve this issue it will help me with all future projects. I really do appreciate any help you can give.
Kind Regards
Elliot
CSS
I have marked out where I would float a particular div */style*/ which I know would cancel that style. Therefore the problems I am having are with divs #shopping_cart, #side_bar and #content.
body {
background:url(images/body_bg.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;}
#wrap {
height:auto;
width:895px;
margin:0 auto;}
#title {
Background-image:url(images/title.png);
height:67px;
width:895px;
margin-top:50px;
margin-left:auto;
margin-right:auto;}
#shopping_cart {
background: url(images/shopping_cart.jpg);
height:46px;
width:142px;
margin-top:15px;
margin-right:25px;
/*float:right;*/}
#content_wrap {
background:url(images/content_bg.png) repeat;
border:2px solid #666;
height: auto;
width:862px;
margin-top:15px;
margin-left:auto;
margin-right:auto;}
#nav_bar {
width:809px;
height:59px;
margin-left:26px;}
#side_bar {
height:auto;
width:285px;
margin-top:20px;
border-right:1px solid #666;
/*float:left;*/}
#content {
height:auto;
width:575px;
margin-top:20px;
/*float:left;*/}
#content_image {
background-image:url(images/couple.jpg);
height:184px;
width:271px;
margin:0 auto;}
#footer {
background-color:#0F0;
width:860px;
height:200px;}
#kejo_logo {
background-image:url(images/kejo.png);
height:100px;
width:227px;}
#flags {}
#viscari_wd {}
#copyright {}
#pp_tu {}
.header {
color: #FFF;
font-size:44px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
margin-left:10px;}
.header_small {
color: #FFF;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 25px;
margin-left:10px;}
#content_wrap #side_bar h1 {
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
color: #4b4a4a;
font-size:20px;
padding-left:15px;}
#content_wrap #content p {
color: #484747;
text-align:center;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:20px;
padding-right:15px;}Hi guys,
Thanks for your help but still having a few problems;
In design view the code you advised I should add seems to have placed #shopping_cart back into #wrap under #title and above #content_wrap but hasn't when previewed in browser as there is no margin between #content_wrap & #shopping_cart.
#side_bar and #content now seem to sit side by side each other fine in design view and in the browser, however #footer which is in #content_wrap but under #side_bar and #content is behind #side_bar and #content. How do I get #footer to position under #side_bar and #content?
I have added a green background to #footer to make it stand out. I have also added two images one of the site in design view and one previewed in the browser so you can see the difference. I've also pasted the amended code.
Again thanks for your continued help and advice.
<body>
<div id="wrap">
<div id="title"></div><!-- end #title -->
<div id="shopping_cart"></div><!-- end #shopping_cart -->
<div id="content_wrap">
<h2 class="header">Header goes here</span></h2>
<div id="nav_bar">
<table>table goes here</table>
</div><!-- end #nav_bar -->
<div id="side_bar">
<h1>text here</h1>
<table>table goes here</table>
</div><!-- end #side_bar -->
<div id="content">
<p>text here</p>
<div id="content_image"></div>
</div><!-- end #content -->
<div id="footer">
<div id="logo"></div>
<div id="flags"></div>
<div id="v_wd"></div>
</div><!-- end #footer -->
</div><!-- end #content_wrap -->
</div><!-- end #wrap -->
</body>
CSS
body {
background:url(images/body_bg.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;}
#wrap {
width:895px;
margin:0 auto;
overflow:hidden;}
#title {
background:url(images/title.png);
height:67px;
width:895px;
margin-top:50px;
margin-left:auto;
margin-right:auto;}
#shopping_cart {
background: url(images/shopping_cart.jpg);
height:46px;
width:142px;
margin-top:15px;
margin-right:25px;
float:right;}
#content_wrap {
background:url(images/content_bg.png) repeat;
border:2px solid #666;
width:862px;
margin-top:15px;
margin-left:auto;
margin-right:auto;
overflow: hidden;
clear: both;}
#nav_bar {
width:809px;
height:59px;
margin-left:26px;}
#side_bar {
height:auto;
width:285px;
margin-top:20px;
border-right:1px solid #666;
float:left;}
#content {
height:auto;
width:575px;
margin-top:20px;
float:right;}
#content_image {
background-image:url(images/couple.jpg);
height:184px;
width:271px;
margin:0 auto;}
#footer {
background-color:#0F0;
width:860px;
height:200px;}
#kejo_logo {
background-image:url(images/kejo.png);
height:100px;
width:227px;}
#flags {}
#viscari_wd {}
#copyright {}
#pp_tu {}
.header {
color: #FFF;
font-size:44px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
margin-left:10px;}
.header_small {
color: #FFF;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 25px;
margin-left:10px;}
#content_wrap #side_bar h1 {
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
color: #4b4a4a;
font-size:20px;
padding-left:15px;}
#content_wrap #content p {
color: #484747;
text-align:center;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:20px;
padding-right:15px;} -
Help needed with Template Footer displacing with addition of a float..
I have a template for a web page and I am a little stuck now with an issue related to floating an image (left) to get the text to wrap around. As I do so, the footer at the bottom displaces and I cannot work out why?
Any help greatly appeciated. I cannot seem to attach a file so you can see it. the domain is http://www.nataliemariemakeup.co.uk. This will be the 'Bridal' page.
This is how the problem appears when I float the image left...
The Facebook and Twitter images are where they should be, but the footer has shifted right! Any help appreciated.
The code is as follows....
<!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"><!-- InstanceBegin template="/Templates/IndexTemplate.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- InstanceEndEditable -->
<link rel="stylesheet" title="Disabled for Preview-in-Browser: oneColFixCtrHdr.css" type="text/css" />
<style type="text/css">
body {
margin: 0;
padding: 0;
color: #666;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
line-height: 1.4;
background-color: #989898;
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
padding: 0;
margin: 0;
h1, h2, h3, h4, h5, h6, p {
margin-top: 0; /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
padding-right: 15px;
padding-left: 15px;
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
border: none;
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
color: #42413C; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
text-decoration: none;
a:visited {
color: #6E6C64;
text-decoration: none;
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
/* ~~ this fixed width container surrounds the other divs ~~ */
.container {
width: 960px;
margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
background-color: #FFF;
/* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
.header {
background-color: #FFF;
/* ~~ This is the layout information. ~~
1) Padding is only placed on the top and/or bottom of the div. The elements within this div have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
.content {
background-color: #FFF;
padding-top: 50px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
/* ~~ The footer ~~ */
.footer {
color: #666;
background-color: #666;
padding-top: 0px;
padding-right: 0;
padding-left: 0;
margin: 0px;
padding-bottom: 0px;
height: 110px;
position: relative;
FaceBookTwitter {
background-color: #999;
/* ~~ miscellaneous float/clear classes ~~ */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
float: left;
margin-right: 8px;
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
</style>
<style type="text/css">
.container .content table tr th {
background-color: #999;
top: 0px;
padding: 0px;
margin: 0px;
clear: 0;
</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link rel="stylesheet" title="Disabled for Preview-in-Browser: SpryAssets/SpryMenuBarHorizontal.css" type="text/css" />
<style type="text/css">
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 7.5em;
float: left;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 6em;
position: absolute;
left: -1000em;
text-align: left;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 10em;
text-align: left;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: -5% 0 0 95%;
text-align: left;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
left: auto;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border: 1px solid #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #CCC;
padding: 0.5em 0.75em;
color: #666;
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
font-style: normal;
border-top-style: none;
text-align: center;
border-right-width: thin;
border-left-width: thin;
border-right-style: solid;
border-bottom-style: none;
border-left-style: solid;
border-top-color: #CCC;
border-right-color: #666;
border-bottom-color: #999;
border-left-color: #666;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
background-color: #666;
color: #FFF;
text-align: center;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
background-color: #666;
color: #FFF;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
background-image: url(file:///Macintosh HD/Users/edwardclark/Documents/Natalie Marie Makeup Website/SpryAssets/SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
background-image: url(file:///Macintosh HD/Users/edwardclark/Documents/Natalie Marie Makeup Website/SpryAssets/SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
text-align: left;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
background-image: url(file:///Macintosh HD/Users/edwardclark/Documents/Natalie Marie Makeup Website/SpryAssets/SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
text-align: left;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
background-image: url(file:///Macintosh HD/Users/edwardclark/Documents/Natalie Marie Makeup Website/SpryAssets/SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF;
a:hover {
text-decoration: none;
a:active {
text-decoration: none;
</style>
<!-- InstanceBeginEditable name="head" -->
<style type="text/css">
.container .content p img {
padding-top: 5px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 0px;
float: left;
</style>
<!-- InstanceEndEditable -->
</head>
<body>
<div class="container">
<div class="header"><!-- end .header --><img src="New-Header.jpg" width="960" height="180" alt="Natalie Marie Logo" longdesc="file:///Macintosh HD/Users/edwardclark/Documents/Natalie Marie Makeup Website/New-Header.jpg" />
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="index.html" class="MenuBarHorizontal">HOME</a> </li>
<li><a href="About Me.html">ABOUT ME</a></li>
<li><a href="Bridal.html">BRIDAL</a></li>
<li><a href="Occasion.html" class="MenuBarItemSubmenu">OCCASION</a>
<ul>
<li><a href="#">NIGHT OUT</a></li>
<li><a href="#">PARTY MAKEUP</a></li>
<li><a href="#">HEN NIGHTS</a></li>
</ul>
</li>
<li><a href="Fashion.html">FASHION</a></li>
<li><a href="Lessons.html">LESSONS</a></li>
<li><a href="Reviews.html">REVIEWS</a></li>
<li><a href="Contact.html">CONTACT</a></li>
</ul>
</div>
<div class="content">
<p>
<Marquee>
Examples of my work: TAKE THAT • ID MAGAZINE • BATMAN LIVE WORLD TOUR • THE BAFTAS • LONDON FASHION WEEK • THE CORRS • THE TELEGRAPH MAGAZINE • HARPERS • MUSIC VIDEOS • VOGUE MAGAZINE • BRITISH FEATURE FILMS • Plus extensive Bridal and Photoshoot work •
</Marquee>
</p>
<!-- InstanceBeginEditable name="Main Body" -->
<p><img src="Bridal-Kit-Pic.jpg" width="283" height="426" alt="Bridal Kit Picture" />On your wedding day it is important that you look and feel your best and having the perfect make-up will give you the confidence for this. Having perfect wedding makeup is also key for perfect photographs, which are so important as those will be your treasured memories of your day. As a recent bride myself I totally understand how you will be feeling at this point and I strongly advise you to make lots of cut outs from all of those expensive bridal magazines to give a visual of your ideas. We will create a look which is long lasting and enhances your natural beauty. During your trial we will work together in depth to create the perfect look for you.<br />
</p>
<p>What expect on the day:<br />
- Skin care analysis and tips on skin care routine.<br />
- Talking through the wedding and theme of the day.<br />
- Discussing ideas for your wedding makeup, your likes and dislikes.<br />
- Spending time creating a look perfect for you.<br />
- Digital photographs of the makeup for referencing.<br />
</p>
<p>After your trial I create a face chart and write detailed notes about the products we have used to in order to recreate the look perfectly on the day. On your wedding day itself I stay until the very end making sure you look perfect for your ceremony. You will also receive your chosen lip brush free, for use throughout the rest of the day.<br />
</p>
<p>Bridal Make Up (On the day including trial) £150.00<br />
Bridal Trial £60.00<br />
Make up on the day for Bridesmaids/Mother of the Bride/Groom £40.00<br />
Additional Trials £35.00<br />
</p>
<p>Package prices can be arranged for large bridal parties.</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<!-- InstanceEndEditable -->
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p><img src="facebook_LOGO.jpg" width="50" height="50" alt="Facebook logo" /> <img src="Twitter Logo_GREY.jpg" width="50" height="50" alt="Twitter Logo" /> </p>
</div>
<div class="footer">
<table border="0" align="center" cellpadding="5">
<tr>
<td height="101"><img src="Chanel-Logo-Grey.jpg" width="81" height="62" alt="Chanel Logo" longdesc="Chanel-Logo-Grey.jpg" /></td>
<td><img src="Bobby-Brown-Logo.jpg" width="174" height="37" alt="Bobbi Brown Logo" longdesc="Bobby-Brown-Logo.jpg" /></td>
<td><img src="MAC-Logo.jpg" width="105" height="61" alt="MAC Logo" longdesc="MAC-Logo.jpg" /></td>
<td><img src="Dior-Logo.jpg" width="105" height="82" alt="Dior Logo" longdesc="Dior-Logo.jpg" /></td>
<td><img src="NARS-Logo.jpg" width="118" height="47" alt="NARS Logo" longdesc="NARS-Logo.jpg" /></td>
<td><img src="MakeUpForeverLogo.jpg" width="151" height="49" alt="Makeup Forever Logo" longdesc="MakeUpForeverLogo.jpg" /></td>
</tr>
</table>
<p align="center"><!-- end .footer --></p>
<p align="center">© Copyright Natalie Marie Makeup 2011</p>
<p align="center"> </p>
</div>
<!-- end .container --></div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
<!-- InstanceEnd --></html>Unfortunately it didn't sort out the problem. The footer has been displaced to the right and I don't see why it should, when I added a 'float' property to the picture to enable the text to wrap around.
Can someone please advise?
It seems if I change the padding px numbers it moves the images within the footer around. How do I ensure that these are fixed in place? I have created a template, which may have the problem in.
Am I missing something?
The code from the footer section of the template:
</div>
<div class="footer">
<table border="0" align="center" cellpadding="5">
<tr>
<td height="101"><img src="../Chanel-Logo-Grey.jpg" width="81" height="62" alt="Chanel Logo" longdesc="Chanel-Logo-Grey.jpg" /></td>
<td><img src="../Bobby-Brown-Logo.jpg" width="174" height="37" alt="Bobbi Brown Logo" longdesc="Bobby-Brown-Logo.jpg" /></td>
<td><img src="../MAC-Logo.jpg" width="105" height="61" alt="MAC Logo" longdesc="MAC-Logo.jpg" /></td>
<td><img src="../Dior-Logo.jpg" width="105" height="82" alt="Dior Logo" longdesc="Dior-Logo.jpg" /></td>
<td><img src="../NARS-Logo.jpg" width="118" height="47" alt="NARS Logo" longdesc="NARS-Logo.jpg" /></td>
<td><img src="../MakeUpForeverLogo.jpg" width="151" height="49" alt="Makeup Forever Logo" longdesc="MakeUpForeverLogo.jpg" /></td>
</tr>
</table>
<p align="center"><!-- end .footer --></p>
<p align="center">© Copyright Natalie Marie Makeup 2011</p>
<p align="center"> </p>
</div> -
Float problems in Dreamweaver CS3
I am having problems creating a 2-column layout to display my main page content alongside a sidebar containing a simple payment signup form.
I have set up DIVs for each... no problem. I have applied a left float property to the sidebar, but I can't get the main content to appear to the right of the sidebar - it's still beginning where the sidebar ends.
Is there something fundamental I am doing wrong?The live link is http://www.sharpeacademy.co.uk/summerschoolnew.html
Code for the page is as follows:
<!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>Sharpe Academy - Summer School 2009 - Singing, Acting, Dance, Fitness, Stage Combat</title>
<link href="css/oneColFixCtrHdr.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
</head>
<body class="oneColFixCtrHdr">
<div id="containerSummerSchool">
<div id="header"><img src="images/header.png" alt="Welcome to Sharpe Academy" width="1000" height="200" />
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="index.html">HOME</a> </li>
<li><a href="#" class="MenuBarItemSubmenu">ABOUT US</a>
<ul>
<li><a href="history.html">Brief History</a></li>
<li><a href="mission.html">Our Mission</a></li>
<li><a href="venue.html">Venue</a></li>
<li><a href="staff.html">Staff</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">CLASSES</a>
<ul>
<li><a href="academyactors.html">Acting</a></li>
<li><a href="starlighters.html">Musical Theatre</a></li>
<li><a href="fees.html">Fees</a></li>
</ul>
</li>
<li><a href="summerschool.html">SUMMER SCHOOL</a> </li>
<li><a href="contact.html">CONTACT US</a></li>
</ul>
</div>
<p> </p>
<div id="leftSidebar">
<div id="PayPalContainer">
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" name="PayPal" target="_blank" id="PayPal">
<input type="hidden" name="cmd" value="_s-xclick" />
<input type="hidden" name="hosted_button_id" value="6106695" />
<table>
<tr>
<td><input type="hidden" name="on0" value="Select which week" />
Select which week</td>
</tr>
<tr>
<td><select name="PayPalWeek" id="PayPalWeek">
<option value="13th - 17th July - Rotherham">13th - 17th July - Rotherham </option>
<option value="20th - 24th July - Rotherham">20th - 24th July - Rotherham </option>
<option value="3rd - 7th August - Harrow">3rd - 7th August - Harrow </option>
</select>
</td>
</tr>
<tr>
<td><input type="hidden" name="on1" value="Enter your childs name" />
Enter your childs name</td>
</tr>
<tr>
<td><input type="text" name="PayPalName" maxlength="60" id="PayPalName" /></td>
</tr>
<tr>
<td><input type="hidden" name="on2" value="Enter your childs age" />
Enter your childs age</td>
</tr>
<tr>
<td><input type="text" name="PayPalAge" maxlength="60" id="PayPalAge" /></td>
</tr>
</table>
<input type="image" src="https://www.paypal.com/en_GB/i/btn/btn_paynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online." />
<img alt="PayPal payment form" border="0" src="https://www.paypal.com/en_GB/i/scr/pixel.gif" width="1" height="1" />
</form>
</div>
</div>
<div id="summerSchoolContent">
<div class="oneColFixCtrHdr" id="textHeader">
<p><img src="images/summerSchoolType.png" alt="Welcome to Sharpe Academy" width="538" height="40" /> </p>
</div>
<h5>When is Summer School?</h5>
<p> Monday 13th – Friday 17th July – 9am-4pm - Rotherham, South Yorkshire</p>
<p> Monday 20th – Friday 24th July – 9am-4pm - Rotherham, South Yorkshire</p>
<p> Monday 3rd – Friday 7th August – 9am-4pm - Harrow, Greater London</p>
<h5> Who can attend?</h5>
<p> Anyone aged 6 to 16 who lives in the local area can attend summer school. We are always keen to see new faces. You don’t need any experience in any of the subjects as we will teach from the very beginning.</p>
<h5>Can my child come to more than one week of Summer School?</h5>
<p> Children in Rotherham may come to one or both Rotherham weeks as we will be teaching different materials both weeks. We are only doing one week in Harrow this year.</p>
<h5>Who will be teaching at Summer School 2009?</h5>
<p> Our teachers come from a variety of backgrounds. Their pictures and names can be seen on the left hand side. We have West-End performers who will be joining us to do workshops in shows including The Lion King, Chitty Chitty Bang Bang, Cats, Fiddler on the Roof, We Will Rock You and Les Miserables. We are also welcoming teachers from some of the most prestigious performing arts colleges in London including Mountview, Guildford School of Acting and Sylvia Young Stage School.</p>
<h5>Are Teachers CRB Checked?</h5>
<p> Yes, all teachers who teach at Sharpe Academy are CRB police checked. We also have a first aid trained member of staff on site at all times.</p>
<h5>How do I book? </h5>
<p> We have several ways for you to book. You can pay online by debit or credit card by clicking the PAY NOW button above which takes you through to a secure checkout through Paypal. Once payment has been received we will post you out a full registration pack to be completed. Alternatively you may wish to pay by cheque. Please download our booking form leaflet and send this along with your summer school fee to the address on the leaflet.</p>
<h5>What subjects will children learn?</h5>
<p> FITNESS SINGING MUSICAL THEATRE ACTING for the Stage </p>
<p> ACTING for Television & Film MIME JAZZ TAP BALLET </p>
<p> STAGE COMBAT AUDITION TECHNIQUE END OF WEEK SHOWCASE FOR PARENTS</p>
<h5> Where is the Rotherham Summer School being held?</h5>
<p>Rudston Prep School, 59/63 Broom Road, Rotherham, South Yorkshire S60 2SW </p>
<h5>Where is the Harrow Summer School being held?</h5>
<p>Harrow High School, Gayton Road, Harrow, Greater London HA1 2JG.</p>
<h5>How much is Summer School?</h5>
<p> Online booking: £105.00 per child for the full week – Includes a Summer School t-shirt</p>
<p> Standard booking: £120.00 per child for the full week.</p>
<h5> What do the children need to wear?</h5>
<p> Comfortable clothing must be worn (no jeans). Footwear should be trainers, dance shoes or indoor pumps.</p>
<p> Summer School T-shirts will be on sale for £10.00, or FREE if you book online.</p>
<h5> What are the T-shirt Sizes?</h5>
<div class="tshirtSizes">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<th scope="row">Order Size:</th>
<td>5–6</td>
<td>7–8</td>
<td>9–11</td>
<td>12–13</td>
<td>14–15</td>
<td>Adult S</td>
<td>Adult M</td>
<td>Adult L</td>
</tr>
<tr>
<th scope="row">Height <span class="plainType">(cm)</span>:</th>
<td>116</td>
<td>128</td>
<td>140</td>
<td>152</td>
<td>164</td>
<td>–</td>
<td>–</td>
<td>–</td>
</tr>
<tr>
<th scope="row">Chest <span class="plainType">(inches)</span>:</th>
<td>26/28</td>
<td>30</td>
<td>32</td>
<td>34</td>
<td>36</td>
<td>35/37</td>
<td>38/40</td>
<td>41/43</td>
</tr>
</table>
</div>
</div>
<div class="push"></div>
<!-- end #container --></div>
<div id="footer">
<div class="oneColFixCtrHdr" id="copyright">
<p>
<!-- end #footer -->
© Copyright Sharpe Academy 2009. All rights reserved. Daniel Sharpe trading as Sharpe Academy.</p>
</div>
<div class="oneColFixCtrHdr" id="links">
<p>| <a href="summerschool.html">Home</a> | <a href="starlighters.html">Musical Theatre</a> | <a href="academyactors.html">Acting for Stage & Screen</a><a href="http://www.shapeacademy.co.uk/" target="_blank"></a> | <a href="contact.html">Contact Us</a> |</p>
</div>
</div>
<!-- Start of StatCounter Code -->
<script type="text/javascript">
var sc_project=4366318;
var sc_invisible=1;
var sc_partition=55;
var sc_click_stat=1;
var sc_security="12b1dd37";
</script>
<script type="text/javascript"
src="http://www.statcounter.com/counter/counter.js"></script><noscript><div
class="statcounter"><a title="web analytics"
href="http://www.statcounter.com/" target="_blank"><img
class="statcounter"
src="http://c.statcounter.com/4366318/0/12b1dd37/1/"
alt="web analytics" ></a></div></noscript>
<!-- End of StatCounter Code -->
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-9304732-1");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html> -
I just upgraded to CS4. In dreamweaver I am trying to build a
site that I designed in Photoshop to Dreamweaver using all Div
Tags. I can get the container to center, but when I place other
divs on top, they wont stay where I put them. I have taken absolute
positioning off, but then they fly off position totally. How to get
around this? I have tried relative, fixed and inherit, all with the
same result. I just cant figure it out. Can anyone help me?Most of which are erroneous guesses.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"Ian Edwards" <[email protected]>
wrote in message
news:ggb7c1$qtg$[email protected]..
> Hi
>
> it would he if you uploaded the code so we can see it.
If you do that then
> no doubt you will be deluged with solutions.
> cheers
>
> Ian
> "martcol" <[email protected]> wrote in
message
> news:ggavg8$gf7$[email protected]..
>>
quote:
Originally posted by:
[email protected]
>> ....when I place other divs on top, they wont stay
where I put them. I
>> have
>> taken absolute positioning off, but then they fly
off position
>> totally.
>>
>> Do the< div> tags sit under each other rather
than if it is what you
>> want, sit
>> side-by-side? Or do they actually, "fly off
position?" Have you thought
>> about
>> the "float" property?
>>
>> Sometimes, leaving off a single closing tag in my
code can have
>> catastrophic
>> results for positioning - have you checked if your
HTML validates.
>> Often, that
>> can be a useful way of checking if your code is the
problem.
>>
>> Martin
>>
> -
Horizontal center align multiple divs
I have a container div (#div1), which contains 5 child divs (#div2, #div3, #div4, #div5, #div6) contained inside it.
The code is something like this:
<div id="div1">
<div id="div2">Content2</div>
<div id="div3">Content3</div>
<div id="div4">Content4</div>
<div id="div5">Content5</div>
<div id="div6">Content6</div>
</div>
The Content2,3,4,5,6 are all of different length.
I want to align the 5 child divs (#div2, #div3, #div4, #div5, #div6) horizontally in one row inside the container #div1, such that the vacant space inside #div1 gets uniformly distributed between the child divs and the child divs become uniformly aligned in the "center".
The main code for all child divs is (id no is the only thing changed to 3,4,5,6 etc)
#div2{
width: 23%;
position: relative;
margin:0px auto;
white-space:normal;
*display: inline;
_display: inline;
*margin: 0 2px 0 2px;
display:INLINE-block;
float:none;
The main code for container #div1 is
#div1{
margin:0px auto;
width:98%;
text-align:center;
vertical-align:top;
white-space:nowrap;
position:relative;
display:block;
float:none;
However the above code only centers the child div on localhost in IE and Chrome Browser. However on the remote production server it aligns all child divs in one row only in Chrome browser. In IE9, it aligns all the child divs in one single column below one another instead of in one row as shown when hosted on localhost.
If we change float to left or right for child div, no centering takes place and instead all the child divs align to one side. If the display property of child div is changed to block, the centering fails even on localhost. If the display is changed to inline, the div width becomes 100% automatically and it occupies the complete with of container.
Can some one advise on how to ensure uniform horizontal alignment of all child divs in one row on localhost as well as actual remote site server on IE (>=IE6, all other browsers also). I would prefer if display:inline-block is also avoided (display:block or inline is preferred) as it may not be supported in earlier browsers.when margin-left:2%, the suggested code is making the div before gap d dropoff to next row.
Each descendent div will have an effective width of 18% + 2% = 20%. There are 5 such divs. 20% x 5 = 100%. Thus 100% of the space available in div1 will be filled - no more no less. Bear in mind that the container div is set at a percent width as well, meaning that the resulting number may not produce even results when 18% and 2% are caclulated, i.e., there will be a rounding error. Also bear in mind that the left-most div in my example will also have the margin applied. You can eliminate that by a bit more CSS trickery (this applies the margin only to divs that are not the first child of div#div1) -
<style type="text/css">
#div1 div {
width: 18%;
margin-left:2%;
float:left;
#div1 div:first-child {
margin-left:0;
#div1 {
margin:0px auto;
width:95%;
background-color:#CCC;
overflow:hidden;
</style>
That method, however, will leave some variable gap to the right of the last div because of the rounding error and the fact that you are now only using up 18% + 20% + 20% +20% + 20% = 98% of the total space.
Be aware that you will need to invoke Live mode to see this render properly in DW.
This approach is simply a variant of the approach shown on css-tricks (which will also fail depending on the width of the containing element. I suggest you NOT use a containing element that is percent sized and set a fixed width for it. That will alow you to specify your interior spacing with no rounding error.
Maybe you are looking for
-
Corrupted time machine backup and Migration tool
Thanks in advance to anyone that is able to help. Sorry for the long read. Recently I replaced my hard drive because it was slowing down and had a very large number of bad sectors. After replacing the HD with a new one I tried to use migration assist
-
Is my PHP + Oracle9i + Instant client setup ok ?
Hello I have to developp a script in PHP for windows, using an Oracle 9i database. Here's my setup : Windows 2003 Server R2 (all patches applied) PHP 5.2.0 Oracle 9i 9.2.0.1.1 Instant client 10g 10.2.0.2-20060508 Oracle9i was installed in C:\oracle\
-
Download data from Icloud to iphone 4
I need to download my back up from icloud to my iphone 4 after I did a restore to new
-
Flashing videos (or stop motion/strobe videos) make me physically ill. They affect my eyesight and make me dizzy and nauseous. More and more web sites today are doing this, here is an example: http://sports.yahoo.com/blogs/golf-devil-ball-golf/phil-m
-
Hi Friends, To implement search capabilities in my oracle database, iam trying to install and configure intermedia. While doing this i came across a few issues: 1. In Our current setup we wish to use Oracle intermedia. All we need is to be able to cr