CSS Float Confusion
This may seem like an incredibly stupid question but I think I
may just be overthinking things and confusing myself.
In my head, I've always had a rule about floats - if you float something, every element below it in the same parent container will jump the gap if there's room. That room would be determined by the width you give the top element.
If I want to have two columns fixed (#first & #second), I've always thought that if I give widths to both and then float the first one left, everything below it (the second div) would jump the gap if there was space. But in order to get the second div to jump up, I either have to delete its width (defeating the purpose of fixed width) or also tell it to float left.
Maybe I'm dreaming, but I thought I'd used this succussfully in the past to get two columns:
#first {width:300px; float:left}
#second {width:300px}
But now I have to delete the second's width or add float left to the second div to get it to work. Can anyone tell me what I'm missing in not understanding why the code wouldn't work? How would I rephrase my above "rule in my head" to explain it to someone else?
To make your code work properly, you'd need to do this -
#first {width:300px; float:left}
#second {width:300px; margin-left:300px;}
Without adding that margin, the second div will act as if the first div were removed from the flow, and in fact that's exactly what floating does. This causes the div#second to slide beneath div#first since it's not really there. By adding the margin, you force div#second to fall to the right of div#first, yet still be on the same horizontal line because of the float.
Alternatively, if you did this -
#first {width:300px; float:left}
#second {width:300px:float:left;}
you will accomplish the same purpose but for different reasons. In this case, because both elements are floated, they will line up horizontally like little soldiers without having to worry about wrapping.
Either way works, but circumstances may require you use one or the other. For example, to float something you should also give it a width. It may be that you don't want to do that, or can't do that for other reasons.
Similar Messages
-
Rating Widget: CSS Float question
I've successfully modified the Rating widget with our own rating graphics (smaller star's) but one issue I cannot figure out is how to get rid of what looks like a margin or padding around the ratingButtons... actually, everything within the ratingContainer itself. Everything works fine, just trying to tweak it's apperance on screen in relationship to other elements above and below the widget.
In SpryRating.css, the ratingContainer is floated left as well as the ratingButton(s) by default. I didn't change that. I did however change the width and height of the .ratingButton classes to match the new width and heigh of the graphic elements.
I think this is really more of a CSS/Float issue, but I haven't been smart enough to figure it out over the past few days while trying to research.
The end result should make the ratingContainer the same height as the ratingButton(s). I've already tried specific values for the height of the ratingContainer as well as 'auto'.
Any help would be welcome and appreciated! Thanks!
-JLjasonLampitt wrote:
Really?
So, I'm either completely misconstruing your reply (which I admit is possible) but I'm more inclined to take it at face value.
I am sorry, I fail to see what was ambigious in my reply. I am merely stating the facts and I am sorry that you managed to see otherwise.
As a contributor to this forum and having no connection to Adobe other than to use their products, I use my spare time to help others with THEIR problems.
In doing so, we ask that person to assist us so that we can experience the problem first hand which in turn will be indusive to an objective answer.
In your case we have not been able to reconstruct the problem, thus we have not been able to help. This is of no concern to us, but it does not help you.
Have a good day! -
Hi All, 10 years since I've been on here (in the days of tables) I have, I'm sure a very basic css float problem in the footer and hopefully someone could take the time to review it for me. I have checked everything but can't find the problem. Thanks in advance;
example of problem here http://davidbrown.ipower.com/template/template.htm
<!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>Our Jewelry Retail Secrets - Thank You</title>
<link href="../stylesheet/style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.H1_black {color: #000000}
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 25px;
font-weight: normal;
color: #000000;
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
.headlinetxt_colour {color: #FF6600}
.style1 {color: #ff6600}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="wrapperfix">
<div id="toporange_bg">login</div>
</div>
<div id="wrapperfix_top_grey">
<div id="top_grey_content_wrapper">
<div id="big_logo"></div>
<div id="welcome_user">Welcome "username here"</div>
</div>
</div>
</div>
<div id="main_content">
<p>
<!--main body content goes here -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel felis velit. Proin a nisl diam, id hendrerit lectus. Nunc eget tortor arcu. Mauris fringilla felis eget mi facilisis vel auctor est lacinia. Sed sit amet dui nibh, in varius metus. Duis malesuada euismod tortor eget lacinia. Donec pretium rutrum nunc, sagittis condimentum elit aliquam in. In eu mauris dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p> Nam vel felis velit. Proin a nisl diam, id hendrerit lectus. Nunc eget tortor arcu. Mauris fringilla felis eget mi facilisis vel auctor est lacinia. Sed sit amet dui nibh, in varius metus. Duis malesuada euismod tortor eget lacinia. Donec pretium rutrum nunc, sagittis condimentum elit aliquam in. In eu mauris dui. </p>
</div>
<div id="footer_container">
<div id="footer">
<div id="footer_left">Footer Left</div>
<div id="footer_centre">Footer Centre</div>
<div id="footer_right">Footer Right</div></div>
</div>
</body>
</html>
#footer_container {
background-color: #333333;
width: 100%;
top: 0px;
margin: 0px;
padding: 0px;
#footer {
background-color: #666666;
min-width: 1000px;
margin-right: auto;
margin-left: auto;
padding: 0px;
width: 1000px;
height: 150px;
overflow: hidden;
clear: both;
margin-top: 0px;
margin-bottom: 0px;
position: relative;
#footer_left {
float: left;
width: 33%;
margin: 0px;
padding: 0px;
height: 150px;
#footer_centre {
width: 33%;
height: 150px;
margin: 0px;
padding: 0px;
float: left;
#footer_right {
float: left;
width: 33%;
height: 150px;
margin: 0px;
padding: 0px;I still don't see the #footer_left rule in the CSS in the online example at
http://davidbrown.ipower.com/template/template.htm -
Spry Accordion Menu Tab Link css - totally confused
Thanks folks from an l-plater but I've totally confused myself trying to work this out and I'm hoping some fresh eyes will see the answer clear as day. I've created a spry accordion menu with links in the actual panel tabs. Menu and links all working fine - problem is in css styling, particularly panel tab link open and hover states which should be blue text over green background, same as non-link panel tabs. You'll see from code that I've tried a few styles but can't get this to work. I'm thinking I've totally overdone it and some styles are overriding others and solution is a simple deletion of some unnecessary or conflicting styles.
Thanks so much in advance for your help - I just can't see for looking any more though I'm sure it can't be hard.
<div id="sidebar1">
<div id="Accordion1" class="Accordion">
<div class="AccordionPanel">
<div class="AccordionPanelTab"><a href="Index.html" onclick="window.location = this.href">Home</a></div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Photo Gallery</div>
<div class="AccordionPanelContent">
<ul>
<li><a href="PhotoGallery.html">Gallery 1</a></li>
</ul>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Unit Newsletters</div>
<div class="AccordionPanelContent">
<ul>
<li><a href="Newsletter.html">February 2010</a></li>
</ul>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"><a href="Sponsors.html" onclick="window.location = this.href">Sponsors</a></div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"><a href="Merchandise.html" onclick="window.location = this.href">Merchandise</a></div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"><a href="Links.html" onclick="window.location = this.href">Links</a></div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"><a href="Events.html" onclick="window.location = this.href">Events</a></div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Forms</div>
<div class="AccordionPanelContent">
<ul>
<li><a href="">Joining Instructions</a></li>
<li><a href="">Enrolment</a></li>
<li><a href="">Next of Kin</a></li>
<li><a href="">Volunteer Blue Card</a></li>
</ul>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"><a href="Contact.html" onclick="window.location = this.href">Contact</a></div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"><a href="LogIn.html" onclick="window.location = this.href">Log In</a></div>
<div class="AccordionPanelContent">
<ul>
<li><a href="WhatsOn.html">Whats On</a></li>
<li><a href="PSG.html">Parent Support Group</a></li>
</ul>
</div>
</div>
</div>
</div>
.AccordionPanel {
margin: 0px;
padding: 0px;
.AccordionPanelTab {
background-color: #036;
border-bottom: 1px #93b747 solid;
margin: 0px;
padding-left: 10px;
padding-top: 2px;
padding-bottom: 2px;
font-size: 12px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
text-decoration: none;
.AccordionPanelTabOpen {
color: #036;
background-color: #93b747;
display: block;
text-decoration: none;
.AccordionPanelTabHover {
color: #036;
background-color: #93b747;
text-decoration: none;
border-bottom: 1px solid #036;
display: block;
.AccordionPanelTab a {
color: #93b747;
margin: 0px;
font-size: 12px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
text-decoration: none;
display: block;
.AccordionPanelTab a.open {
font-color: #036;
color: #036;
background-color: #93b747;
text-decoration: none;
display: block;
.AccordionPanelTab a.active {
color: #036;
background-color: #93b747;
display: block;
text-decoration: none;
.AccordionPanelTab a.hover {
color: #036;
background-color: #93b747;
font-weight: bold;
text-decoration: none;
display: block;
.AccordionPanelTab a.close {
color: #93b747;
background-color: #036;
text-decoration: none;
display: block;
.AccordionPanelContent {
margin: 0px;
padding-left: 10px;
padding-top: 2px;
padding-bottom: 12px;
background: #fff;
font-size: 12px;
color: #036;
font-weight: 500;
.AccordionPanelContent ul li {
margin-left: -40px;
padding-top: 2px;
padding-bottom: 2px;
background: #fff;
font-size: 12px;
color: #036;
font-weight: 500;
text-decoration: none;
list-style-type:none;
list-style:none;
.AccordionPanelContent ul li a:link {
color: #036;
text-decoration: none;
list-style-type:none;
list-style:none;
.AccordionPanelContent ul li a:hover {
color: #036;
font-weight: bold;
text-decoration: none;
.AccordionPanelContent ul li a:visited {
color: #036;
text-decoration: none;
.AccordionPanelOpen .AccordionPanelTab {
color: #036;
background: #93b747;
border-bottom: 1px solid #036;
.AccordionPanelOpen .AccordionPanelTab.a {
color: #036;
background: #93b747;
border-bottom: 1px solid #036;
.AccordionPanelOpen .AccordionPanelTabHover {
color: #036;
font-weight: bold;
.AccordionPanelOpen.a .AccordionPanelTabHover.a {
color: #036;
font-weight: 600;
.AccordionFocused .AccordionPanelTab {
color: #036;
font-weight: 600;
a.AccordionFocused .AccordionPanelTab {
color: #036;
font-weight: 600;
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
color: #036;
font-weight: 600;
a.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
color: #036;
font-weight: 600;Yes Beth, you're right and I've corrected my css - I think - problem with AccordionPanelTab link open and hover states still happening so css still wrong. I've uploaded site so you can see what's happening (www.11acu.org). All tab states should be as per Photo Gallery, Newsletters and Forms. Hover state in tab links seem okay until mouse moves away from "a href" block - rest of tab area not working so its like the two styles, ie "AccordionPanelTab" and "AccordionPanelTab a:hover" are both working at the same time but I only want the latter to work. Now I've probably got you confused as well! lol Apologies! Recreated css for tab links below. Html same as in original post. Any help much appreciated.
.AccordionPanelTab {
color: #93b747;
background-color: #036;
border-bottom: solid 1px #93b747;
margin: 0px;
padding-left: 10px;
padding-top: 2px;
padding-bottom: 2px;
font-size: 12px;
text-decoration: none;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
.AccordionPanelTab a {
color: #93b747;
background-color: #036;
margin: 0px;
padding-left: -10px;
padding-top: -2px;
padding-bottom: -2px;
font-size: 12px;
text-decoration: none;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
display: block;
.AccordionPanelTab a:link {
color: #93b747;
background-color: #036;
margin: 0px;
padding-left: -10px;
padding-top: -2px;
padding-bottom: -2px;
font-size: 12px;
text-decoration: none;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
display: block;
.AccordionPanelTab a:hover {
color: #036;
background-color: #93b747;
margin: 0px;
padding-left: -10px;
padding-top: -2px;
padding-bottom: -2px;
font-size: 12px;
text-decoration: none;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
display: block;
.AccordionPanelTab a:active {
color: #036;
background-color: #93b747;
margin: 0px;
padding-left: -10px;
padding-top: -2px;
padding-bottom: -2px;
font-size: 12px;
text-decoration: none;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
display: block;
.AccordionPanelOpen .AccordionPanelTab {
color: #036;
background-color: #93b747;
border-bottom: solid 1px #036;
text-decoration: none;
.AccordionPanelTabHover {
color: #036;
background-color: #93b747;
text-decoration: none;
border-bottom: solid 1px #036;
.AccordionPanelOpen .AccordionPanelTabHover {
color: #036;
background-color: #93b747;
text-decoration: none;
font-weight: bold;
.AccordionFocused .AccordionPanelTab {
color: #93b747;
background-color: #036;
text-decoration: none;
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
color: #036;
background-color: #93b747;
border-bottom: solid 1px #036;
text-decoration: none; -
I'm just becoming comfortable with using CSS. At least, I
thought I was. I put together a test page and it worked on IE 7.
Then, I downloaded Firefox and Safari to check compatability on
other browsers.
I have a centered page with a top navigation bar, content
area, and a footer (bottomNavBar). Inside the content area I have
two sections, a left section and a right section. In the left there
should be text, some sort of welcome text. In the right some sort
of Flash intro video the user can play when they choose.
The problem: I got the float to work in IE 7 (Sometimes it
wouldn't. It seems tempermental.). However, the floats won't work
on the other 2 browsers. In the other 2 it puts the first div
listed above the second instead of side by side like in IE 7.
Here is the code:To make your contentIndexFlashIntro & contentIndexWelcome
divs sit
side-by-side you have to assign each a width. The combined
total of those
widths must be <=800px.
Walt
"JasonTheAdobeFan" <[email protected]> wrote
in message
news:[email protected]...
> I'm just becoming comfortable with using CSS. At least,
I thought I was. I
> put
> together a test page and it worked on IE 7. Then, I
downloaded Firefox and
> Safari to check compatability on other browsers.
>
> I have a centered page with a top navigation bar,
content area, and a
> footer
> (bottomNavBar). Inside the content area I have two
sections, a left
> section and
> a right section. In the left there should be text, some
sort of welcome
> text.
> In the right some sort of Flash intro video the user can
play when they
> choose.
>
> The problem: I got the float to work in IE 7 (Sometimes
it wouldn't. It
> seems
> tempermental.). However, the floats won't work on the
other 2 browsers. In
> the
> other 2 it puts the first div listed above the second
instead of side by
> side
> like in IE 7.
>
> Here is the code:
>
>
> ***First is the HTML***
>
> <body>
> <div class="header">
> <img src="Logo001.png" />
> </div>
> <div class="container">
> <div class="topNavBar">
> <ul class="topNavBarUL">
> <li class="topNavBarLI"><a
class="topNavBarLinksCurrent"
> href="index.htm">Home</a></li>
> <li class="topNavBarLI"><a
class="topNavBarLinks"
> href="page2.htm">Link2</a></li>
> <li class="topNavBarLI"><a
class="topNavBarLinks"
> href="page3.htm">Link3</a></li>
> <li class="topNavBarLI"><a
class="topNavBarLinks"
> href="page4.htm">Link4</a></li>
> </ul>
> </div>
> <div class="content">
> <div class="contentIndexFlashIntro">
> <script type="text/javascript">
> AC_FL_RunContent(
> 'codebase','
http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#
>
version=9,0,28,0','width','350','height','350','title','IntroVideo','src','Intro
> Video002','quality','high','pluginspage','
http://www.adobe.com/shockwave/downloa
>
d/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','IntroVideo002'
> //end
> AC code
> </script><noscript><object
> classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
> codebase="
http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#ve
> rsion=9,0,28,0" width="350" height="350"
title="IntroVideo">
> <param name="movie" value="IntroVideo002.swf" />
> <param name="quality" value="high" />
> <embed src="IntroVideo002.swf" quality="high"
> pluginspage="
http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Versio
> n=ShockwaveFlash" type="application/x-shockwave-flash"
width="350"
> height="350"></embed>
> </object></noscript>
> </div>
> <div class="contentIndexWelcome">
>
<!--<center><h2>Welcome</h2></center>
> <hr/>-->
> <p class="smallText">Paragraph 1</p>
> <p class="smallText">Paragraph 2</p>
> <hr/>
> <ul><u class="smallText">Unordered
List</u>
> <li><span class="smallText">Item
1</span></li>
> <li><span class="smallText">Item
2</span></li>
> <li><span class="smallText">Item
3</span></li>
> <li><span class="smallText">Item
4</span></li>
> <li><span class="smallText">Item
5</span></li>
> <li><span class="smallText">Item
6</span></li>
> </ul>
> <hr/>
> <p class="smallText">Concluding
Paragraph</p><br />
> </div>
> </div>
> <div class="bottomNavBar">
> <p>© Copyright 2008</p>
> </div>
> </div>
> </body>
>
> *********************************
> ***Next is the external CSS.***
>
> body {
> font-family: Arial, Helvetica, sans-serif;
> background-color: #999999;
> margin: 0px;
> }
>
> .header {
> background-color: #FFFFFF;
> width: 100%;
> margin: 0px;
> padding: 0px 0px 0px 0px;
> top: 0px;
> }
>
> .container {
> background-color: #FFFFFF;
> width: 800px;
> margin-left: auto;
> margin-right: auto;
> margin-bottom: 0px;
> margin-top: 0px;
> }
>
> /* top navigation bar class
> ** I prefer to have a nav bar to the top rather than the
left
> */
> .topNavBar {
> width: 800px;
> height: 22px;
> background-color: #0080EE;
> border: 0px solid #FFFFFF; /* I turned off the pixel
width because I
> didn't
> ** want a border right now. But I left the rest in case
> ** I wanted to change it back to 1px.
> */
> }
>
> /* topNavBar link properties
> ** The idea is to have each link highlight when cursor
comes over any part
> ** of the section, not just the words. Then goes back to
normal when
> cursor
> ** leaves. The current page should have its own link
highlighted always.
> */
> ul.topNavBarUL {
> height: 17px;
> float: left;
> width: 100%;
> padding: 0;
> margin: 0;
> list-style-type: none;
> }
>
> li.topNavBarLI {
> display: inline;
> }
>
> a.topNavBarLinks:link, a.topNavBarLinks:active,
a.topNavBarLinks:visited {
> float: left;
> text-decoration: none;
> color: #FFFFFF;
> background-color: #0080EE;
> padding: 0.15em 0.6em;
> border-right: 1px solid #FFFFFF;
> }
>
> a.topNavBarLinks:hover {
> color: #FFFFFF;
> background-color: #FF9900;
> text-decoration: none;
> }
>
> a.topNavBarLinksCurrent, a.topNavBarLinksCurrent:active,
> a.topNavBarLinksCurrent:visited,
a.topNavBarLinksCurrent:hover {
> float: left;
> text-decoration: none;
> color: #FFFFFF;
> background-color: #00FF33;
> padding: 0.15em 0.6em;
> border-right: 1px solid #FFFFFF;
> }
>
> /* content class
> ** This is the part of the page that the content will go
in.
> ** It should have the full width of the container class
and
> ** stretch in height based on the content with a minimum
> ** height of 500px.
> */
> .content {
> width: 800px;
> min-height: 400px;
> background-color: #FFFFFF;
> font-family: Arial, Helvetica, sans-serif;
> color: #000000;
> }
>
> /* content links
> ** The links in the content area will just be the
regular links.
> ** Navigation links will all be given special classes to
define them.
> */
> a:link, a:active, a:visited {
> color: #0080EE;
> text-decoration: none;
> }
>
> a:hover {
> color: #FF9900;
> text-decoration: underline;
> }
>
> /* content headings, hr
> */
> h1, h2, h3, h4, h5, h6 {
> font-family: Arial, Helvetica, sans-serif;
> color: #00FF33;
> margin-bottom: 2px;
> }
>
> hr {
> color: #0080EE;
> }
>
> p {
> text-indent: 20px;
> margin-top: 4px;
> }
>
> ul {
> margin-top: 4px;
> }
>
> li {
> list-style: square;
> color: #00FF33;
> }
>
> .contentIndexFlashIntro {
> padding-top: 2px;
> padding-right: 2px;
> float: right;
> }
>
> .contentIndexWelcome {
> float: left;
> text-align: justify;
> padding-top: 4px;
> padding-right: 10px;
> padding-bottom: 4px;
> padding-left: 4px;
> }
> -
CSS Float Drop in IE8 but not Compatibility Mode
I'm testing code for my home page across different browsers, and encountered the common IE float drop problem. This does not occur in Firefox, Chrome, Opera, or IE8 in Compatibility Mode; but does occur in IE8 standard mode. It's a bit confusing, since I usually encounter this problem in Compatibility Mode.
I have tried using clear:none; as I thought the content was clearing the float:left of a large flash image on the left side of the window, but it didn't solve the problem. I have 3 image buttons whose combined heights equate that of the flash image (all 622px), and these are all in a column div floating to the right. All of these are flush margin:0 and padding:0, border:none. The flash image has it's own class stating margin:0, padding:0, border:none as well. These divs are fixed pixel widths and heights. I tried placing them in a larger container div with fixed width and height, which didn't solve the problem. Again, this only occurs in IE8 Compatibility Mode.
This is the code below:
div id="container">
embed src="index.swf" allowscriptaccess="always" allowfullscreen="true" height="622" width="509" align="left" class="flashhome"> /embed>
div id="homecontright">
a href="services.html?panel=5">
img src="button1.gif" align="top" border="0" alt="b1" class="imageright"/> /a>
a href="smt.html">
img src="button2.gif" align="top" border="0" alt="b2" class="imageright"/> /a>
a href="jobs.html">
img src="button3" align="top" border="0" alt="b3" class="imageright"/> /a>
/div>
div class="floatfix"> /div>
div id="foot" align="center">
contact info footer
/div>
/div>
Here is the style information from my separate stylesheet
#homecontright { margin:0; padding:0; border:none; width:493px; height:622px; overflow:visible; float:right; display:block; }
.imageright {margin-left: auto; margin-right: 0px; margin-top: 0px; margin-bottom: 0px; display: block; float: right }
.flashhome { width:509px; height:622px; margin:0; padding:0; float:left; border:none; }
div#container { margin-left:auto; margin-right:auto; margin-bottom:0; width:1002px; background-color:#A8CBE9; }
div#foot { background-color:#003366; border-color:#a8cbe9; border-width:thin; border-style:solid; font-size:10px; width:996px; padding:0.2em; margin-left:auto; margin-right:auto; text-align:center; font-family:Arial, Helvetica, sans-serif; font-weight:bold; color:#FFFFFF; height:10px; }
.floatfix { clear:both; }
I've tried removing all the floats, even, especially the ones in the nested divs/class elements; but this didn't do a thing. This leads me to wonder if this really is a float drop problem or am I missing something?
EDIT: I fail at posting code so I've removed the front bracket from all tags. Also, added a diagram to show what it's supposed to look like and what is happening in IE 8 Compatibility. The margins do not exist, they are there so you can see individual elementsI tried adjusting the images on the right -10px and had the same result. Those images were actually created with margins within the image, so everything should be flush.
I noticed, however, that even in browsers where everything aligns correctly, there seems to be a 2-3px jog between the flash image and the buttons on the right. That strange link to the bottom right of the flash image is still appearing as well, somehow having to do with the top banner image when right clicked. I tried changing the URL of that banner and the link changed as well, confirming my suspicion that they're linked. I attempted to contain that image in a fixed width div with no results. This link does not appear in other browsers, nor does it appear on any other pages that I used that code on.
Code for my banner:
<...a href="index.html"><img src="index/accuweb_c3homebannerR1a.jpg" alt="banner" border="0" class="banner"/><.../a> -
ALI 6.5 | CSS folders confusion| Detailed question
Hi All,
i am using ALI 6.5 portal env deployed on WL10.0. I am pretty much new to this ALI Portal. I am very much confused with the css folders and files residing under PT_HOME folder.
Can anyone please explain about these folders and files. Please find my questions below.
a))
In 'PT_HOME\ptimages\tools\cssmill\css' folder i can see css files with the following naming convention.
d_mainstyle##-**.css
mainstyle##-**.css
mainstyle-**.css
What is the significance of these file types.
b))
We have css files in the following locations
PT_HOME\ptimages\imageserver\plumtree\common\public\css
PT_HOME\ptimages\imageserver\plumtree\portal\private\css
The first folder has copied files from CSS mill and pretty understandable. The second folder is having only one file 'mainstyle.css'. What is the significance of these CSS files and In which scenarios's styles from these files will be used.
Thanks in advance,
Gowtham Jits all quite simple really...
many years ago, long before the dinosaurs, the plumtree people developed the CSSMILL tool to generate stylesheets so you could basically have different colors for different areas of your portal. (Unfortunately, they didn't use any of the "C" in CSS mill, resulting in huge onerous stylesheets) These stylesheets generated by the cssmill are supposed to be copied over to PT_HOME\ptimages\imageserver\plumtree\common\public\css after you make updates. I think in practice, many people skip this process and just edit the few stylesheets that they need directly.
Fast forward to the present day, when the BEA (formerly plumtree) people are creating adaptive layouts. They have to add the styles for the new adaptive layouts and sexy new look of the 6.5 portal into the existing stylesheet. Instead of using the CSS mill, they put the new styles in its own stylesheet, but decided to name it so it is confusingly similar sounding to the existing stylesheets. This is PT_HOME\ptimages\imageserver\plumtree\portal\private\css\mainstyle.css.
as far as your question here:
d_mainstyle##-**.css
mainstyle##-**.css
mainstyle-**.css
if i understand it correctly.... the mainstyle-**.css are never actually used...they may have been used in the past, but nowadays teh only stylesheets that are used are mainstyle##-**.css. The d_ is for 508 compatability mode.
http://edocs.bea.com/alui/devdoc/docs60/Customizing_the_Portal_UI/Modifying_Portal_Style_Sheets/plumtreedevdoc_customizing_cssmill_intro.htm -
I would like to create a "floating table" (for lack of a
better description)
Where as There would be a block element say <p
id="thisblock">This block would have some text, images, all
formatted and wrapped in a border - thanks to #thisblock {...} in
css</p>
now in that box, i would like to put a list that would split
down 2 columns, left one will be aligned right, right aligned left
ie:
This block would have some text, images, all formatted and
wrapped in a border
________XXXXXXXXXXXXXXXX_____XXXXXXXXXXXXXXXXXXXXX
__ XXXXXXXXXXXXXXXXXXXXXX____XXXXXXXXXXXXXXXXXXXXXXXX
_________ XXXXXXXXXXXXXXX____XXXXXXXXXXXXXXXXXXXXXXX
then some more text down here
well you get the idea. I tried using floats, but of course
the "then some more text" ends up buried under the list. I tried
clear: both, but that didn't help. im new to css and any help would
be appreciated!
ThanksWhy not use a table within the floating element?
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"m0piqsutjjqv4du" <[email protected]> wrote
in message
news:ejakns$338$[email protected]..
>I would like to create a "floating table" (for lack of a
better
>description)
>
> Where as There would be a block element say <p
id="thisblock">This block
> would
> have some text, images, all formatted and wrapped in a
border - thanks to
> #thisblock {...} in css</p>
>
> now in that box, i would like to put a list that would
split down 2
> columns,
> left one will be aligned right, right aligned left ie:
>
> This block would have some text, images, all formatted
and wrapped in a
> border
> ________XXXXXXXXXXXXXXXX_____XXXXXXXXXXXXXXXXXXXXX
> __ XXXXXXXXXXXXXXXXXXXXXX____XXXXXXXXXXXXXXXXXXXXXXXX
> _________ XXXXXXXXXXXXXXX____XXXXXXXXXXXXXXXXXXXXXXX
> then some more text down here
>
> well you get the idea. I tried using floats, but of
course the "then some
> more
> text" ends up buried under the list. I tried clear:
both, but that didn't
> help.
> im new to css and any help would be appreciated!
>
> Thanks
> -
Hi I am having problems with a page http://beermattonline.co.uk/manuscript_doctor/fees_submissions1.html half way down after the fees sub heading I can't get the next line to appear underneath it instead of to the right. Any suggestions? Here is my CSS.
Thanks in advance, Matt.
.banner {
.line {
margin-top: 5px;
margin-bottom: 5px;
.small_line {
margin-top: 5px;
margin-bottom: 5px;
.long_line {
margin-top: 50px;
margin-bottom: 5px;
margin-left:55px;
marging-right:55px;
.footer {
font-size: small;
text-align: center;
.content {
width: 710px ;
margin-left: auto ;
margin-right: auto ;
background-color:#fff8e8;
border-style:solid;
border-width:0px;
height: 1000px;
.sub_heading {
float:right;
border-style:solid;
border-width:2px;
margin-top:20px;
border-color:#473d33;
width:530px;
padding:5px;
border-color:#ffedc7;
background-color:#fff2d6;
.sub_sub_heading {
float:left;
border-style:solid;
border-width:2px;
margin-top:20px;
border-color:#473d33;
width:250px;
padding:5px;
border-color:#ffedc7;
background-color:#fff2d6;
.text_centre {
float:right;
border-style:solid;
border-width:0px;
margin-top:5px;
border-color:#473d33;
position: relative;
width:543px;
background-color:#fff8e8;
.links {
border-style:solid;
border-width:0px;
margin-top:4px;
margin-bottom:4px;
border-color:#473d33;
background-color:#fff8e8;
font-size: small;
text-align:center;
A:link {text-decoration: none; color: #26221e; }
A:visited {text-decoration: none; color: #26221e; }
A:active {text-decoration: none; color: #ffffff; }
A:hover {text-decoration: underline; color: #ff7d3e; }
.float_left {
float:left;
width: 140px;
border-style:solid;
border-width:2px;
margin-top:20px;
margin-right:10px;
margin-bottom:20px;
padding: 5px;
border-color:#ffedc7;
background-color:#fff2d6;
body {
font-family: Georgia, "Lucida Sans Unicode", lucida, Verdana, sans-serif;
bont-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
background-color:#fff8e8;
letter-spacing: 1px;
color: #4c443c;
h1 { color: #26221e; margin-bottom:0px; margin-top: 5px;}
h2 { color: #26221e; margin-bottom:0px; margin-top: 5px;}
h3 { color: #26221e; margin-bottom:0px; margin-top: 5px;}
h4 { color: #26221e; margin-bottom:0px; margin-top: 5px;}
h5 { color: #26221e; margin-bottom:0px; margin-top: 5px;}
h6 { color: #26221e; margin-bottom:0px; margin-top: 5px;}If you change the next to last style definition in your CSS file "manuscriptdoctor.css" from
h5 { color: #26221e; margin-bottom:0px; margin-top: 5px; }
to:
h5 { color: #26221e; margin-bottom:0px; margin-top: 5px; clear: both; }
everything should be fine. -
I am new to CSS and Dreamweaver. I have created a CSS page
that is text only. However, I wish to have the CSS page deliver a
standard page with a header division, navigation bar division, left
bar division and footer division. I want every new page that I
create to have those divisions with all the links in them so I can
just concentrate on adding the body text that will change from page
to page. I thought that the CSS page would do all that, but I
cannot get it to work. Is there a way to get these divisions to
automatically come up on a new page that i might create?
Vic
I am using Windows Xp and Dreamweaver CS3.> I thought that the CSS page would do all that, but I
cannot get
> it to work. Is there a way to get these divisions to
automatically come up
> on a
> new page that i might create?
You are confusing CSS with DW Templates and perhaps
Server-side includes.
CSS will have the ability to place every page element on any
page that
contains, or links to that CSS, but CSS does not have the
ability to create
such pages from nothing.
So, the scheme would be, you create a page using the CSS
required to style
everything properly, and then you either save that page as a
DW Template, or
you cut out the important bits and save them as server-side
includes.
If you used Templates, then you would spawn a new page from
the Template,
add the unique content, and save the page. Repeat this
process for each
page in the site.
If you used server-side includes, then you would save your
parent page that
has assembled the includes to deliver the layout you want,
with some generic
filename. With that generic page open, you would add your
page-specific
content, and save it with that page's name. Then replace the
page-specific
content with different content, and save it with the new
page's name.
Repeat that process for all the pages in the site.
Get it? CSS doesn't create the pages, however if you create a
page with the
elements in it that are referenced by your CSS Selectors, it
will style that
page as you wish.
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
==================
"PainReliefDiet" <[email protected]> wrote
in message
news:[email protected]...
>I am new to CSS and Dreamweaver. I have created a CSS
page that is text
>only.
> However, I wish to have the CSS page deliver a standard
page with a header
> division, navigation bar division, left bar division and
footer division.
> I
> want every new page that I create to have those
divisions with all the
> links in
> them so I can just concentrate on adding the body text
that will change
> from
> page to page. I thought that the CSS page would do all
that, but I cannot
> get
> it to work. Is there a way to get these divisions to
automatically come up
> on a
> new page that i might create?
> Vic
> -
I'm learning CSS layout. As an exercise, I've been creating
divs and changing the rules. Before I hit Apply, I try to predict
what will happen. If It doesn't happen the way I think it will, I
want to know what it is that I'm not understanding.
The problem is that Display View will not always accurately
reflect the changes I make. In the following example (I've posted
the code, but I'm not sure what it will look like), I've got two
15% wide static boxes. If I float both of them left, they line up
side by side: blue box on left, green box on right. If I change
green box to float: none, the green box moves over under the blue
box.
It was making me crazy! I read the float rule over and over
trying to figure out what it was that I didn't understand. The
green box is NOT supposed to change position. I finally checked it
in IE and, lo and behold, the boxes were acting like they should.
I tried refresh, I tried exiting and reloading the file.
Still looks wrong in Design View.
If your Design View looks ok, change the green box to float:
left and then back to float: none.
Is there any way to get DW 8 to have Design View accurately
reflect the code?
Thanks,
DennyAHi Denny,
Dreamweaver rendering is not perfect, but in this case IE
gets the
rendering wrong and DW is correct. Open your page in Firefox
and you
will see that it also renders like DW.
According to the CSS2 spec: "Since a float is not in the
flow,
non-positioned block boxes created before and after the float
box flow
vertically".
http://www.w3.org/TR/REC-CSS2/visuren.html#floats
Hope this helps,
Randy
> The problem is that Display View will not always
accurately reflect the
> changes I make. In the following example (I've posted
the code, but I'm not
> sure what it will look like), I've got two 15% wide
static boxes. If I float
> both of them left, they line up side by side: blue box
on left, green box on
> right. If I change green box to float: none, the green
box moves over under the
> blue box.
>
> It was making me crazy! I read the float rule over and
over trying to figure
> out what it was that I didn't understand. The green box
is NOT supposed to
> change position. I finally checked it in IE and, lo and
behold, the boxes were
> acting like they should. -
I'm having trouble with my 2 column layout... The text in my
side panel is wrapping badly in IE, but perfectly OK in
Firefox/Safari. Image widths are unaffected.
I've got a layout that needs to fit to a repeating background
(Y tiling) structure. My layout is a wrapper, banner, container for
the main & side panels & a footer. I'm sure this is
something simple, but I'm not seeing what the trouble is so would
appreciate an expert eye please!
Here's the
link to my page & my css (I've left out some of the
absolute elements inside the banner):Can anyone help please?
-
I have a layout that I need help with please. The bright green panel is going to have a Flash file inserted but I need it to sit inside the detailsWrapper div, which needs to stretch to allow this to happen. The content is being generated through php modules and the details will vary in length, so I'm having difficulty styling this. I'm sure it's something obvious but I need help please!
Here's the link: http://www.designermagic.co.uk/hobarts/reapitDetails.php?clearcache=true&pagevars=1-bedroo m-property-for-sale-in-London-N22-hobrps-ALE090002Your CSS code could use some tidying up. It's kind of a mess. See details below.
http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Fwww. designermagic.co.uk%2Fhobarts%2FreapitDetails.php%3Fclearcache%3Dtrue%26pagevars%3D1-bedro om-property-for-sale-in-London-N22-hobrps-ALE090002
These statements are redundant.
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
margin: 0;
padding: 0;
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
Try changing the above code to just this. * = the universal selector.
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
outline-style:none; /**outline is not on by default so unsure why you need this**/
More on CSS Shorthand
http://www.dustindiaz.com/css-shorthand/
And you have HTML code errors but the symbols in your document are blocking the validator from giving results.
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.designermagic.co.uk%2Fhobarts %2FreapitDetails.php%3Fclearcache%3Dtrue%26pagevars%3D1-bedroom-property-for-sale-in-Londo n-N22-hobrps-ALE090002
After you fix the code errors, post back with a URL to the new page.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com -
I always thought that setting a float property resulted in non-floated objects acting as if the floated object was not there
however look at this code
<div style="width:100px; height:100px; background-color:#03C;"></div>
<div style="width:100px; height:100px; background-color:#F36;"></div>
<div style="width:100px; height:100px; background-color:#F36; float:left;"></div>
<div style="width:100px; height:100px; background-color:#F36; float:left;"></div>
some divs are floated some are not
if i place the non floated ones on top the floated ones appear bellow where they would if there was no floating at all.
but if i place the floated ones on top the non floated ones position themselves where the floated ones are as if the floated ones do not exist.
so why is it that floated/non floated elements ignore each other if the non-floated element comes first but not if its the other way arroundwhen applying clear which block do i apply it to?
if i apply it to the final block before the block which i intend to change the behavior of will it changhe the behavior of the block that i applied it to
if i apply it to the first block that should ignore the float then what happens if this block itself must also be floated in order to effect the behavior of blocks which come after it.
is there any reason why float/clear cannot be unused and simply use display:block and display:inline instead?
frankly the confusion caused by css float/clear, espcially when combined with different display properties really annoys me
Basic css, mysql and javascript did not cause me this sort of headache, basic AS3 did but only because i tried to run before i could walk.
css is far more basic than any of these technologies and yet it causes me more grief than any of them. -
Confused about CSS or HTML....
Okay... I really don't know much about this stuff, so I'm sorry if this is a dumb question. I'm trying to add drop down menus to my website. When a company (dynamicdrives.com) includes codes for a specific menu that I can edit, should I use the CSS one or HTML one? In iweb, I am clicking on adding an HTML snippet and then putting in the code. So, from those, is there one that will work better in iWeb? Is there even a difference? Do I need both? Is there one that will be compatible with Firefox, IE, and more? I am having trouble getting menus to look good on IE. Thanks!
Content = HTML. Style = CSS. To achieve a 2-column layout, you need both HTML and CSS.
1) Organize your HTML content in a logical manner from top to bottom of page.
2) Style your content with CSS floats and margins to create columns.
See following links for demos and tutorials:
2-col layout
http://alt-web.com/TEMPLATES/2-col-fixed-layout.shtml
basic grid -
http://alt-web.com/DEMOS/3-CSS-boxes.shtml
wrapping text around images -
http://alt-web.com/DEMOS/CSS2-Captions-on-floated-images.shtml
Happy 2010!
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com
Maybe you are looking for
-
I have recentley purchased a new imac. I have been trying to load my Photoshop v10 CS3 on to it, since i got it, however, once the I enter the CD, the Software shows up with all the relevant information to install! BUT the "SETUP" icon shows as a bla
-
Creating extra star on PDF output (Customer Rating)
Hi all, I am trying to develop a report for customer payment rating and creating start as a rating like one star, two star ... fine star. I am developing this report according to user guide and getting one extra star like six star for 5. I am using t
-
We have a Cdaq9172 unit connected via USB to the PC running Labview V8.5. Currently connected via a 5 m USB extension cable to PC. Problem. The daq unit looses the connection to the PC at random intervals. To fix we need to remove USB cable and
-
hello i had to restore my computer . i need help reinstalling my backed up files for new ituns player ..
-
Crystal Reports Server XI Login SSO Advice
Post Author: IanAitch CA Forum: Authentication Hi, hoping someone on here can help with a login issue I currently have. I am using CR Server XI for demonstration purposes (not in a real world implementation), and have successfully set up report acces