|
CSS - Float Affecting Unrelated Div?
After months of scrutinizing different layouts for http://what-is-what.com, I've pretty much settled on modifying a layout that I found at this address:
http://www.positioniseverything.net...example/borders I'm having a problem with arranging the header without using tables. The site logo should be on the far left side, and to the right of it a search form. When I float the logo left, the content of the page left aligns itself with the right edge of the logo. My test code (displaying this problem) can be found he http://what-is-what.com/tests/june2007-leftalign.html How can I have the float not affect the rest of the page? I'm currently going through these tutorials to learn more about floats: http://www.brainjar.com/css/positioning/ http://www.westciv.com/style_master...yout/index.html I'm led to believe that I must use "clear", but I'm not sure where. Similar Tutorialssubject isn't too good anyhow.. i have 4 cells __ __ |1 | |2 | --- --- __ __ |3| |4 | --- --- 2 and 4 are said to float right, such that 1 and 3 define the height of the page.. but.. when the contents of 2 go LONGER than the contents of 1, number 4 doesn't float right properly.. instead this happens __ __ |1 | |2 | --- | | --- | | |4| --- --- __ |3| --- do you see that? 4 tries to float right, but since it's called underneath 1, and 2 is extended, floating right relative to the page doesn't make it ACTUALLY float right any thoughts that will render this properly? (namely that cells 1 and 3 will inherit the height of 2 and 4 somehow?) A thousand apologies -- this is a very poorly worded and general question, because I've learned through scavenging and don't know the jargon, and the answer might not even lie in CSS... but the problem is really driving me to distraction. Is it possible in CSS to define a hover effect such that upon hovering over one element, a different element is affected? For example, I know you can add something like this: #example a:hover{ color: #000000; } in order to change the color of any links in the example div upon hovering. But can you change properties of links in any other divs? If so, then how? And if not, then is there a different language which can effect this change? Again, a thousand apologies for the amateurishness and outsider-wording of this question. I will be happy to clarify on request to the extent of my ability. I have a demo page setup. It renders exactly how I want it in Firefox, in regards to position, same for Chrome. With IE, if the page has a .html extension, it also renders correctly. But when I switch it to the .cfm extension, it shifts over to the left. Correct http://66.201.102.200/design/demo.html Incorrect http://66.201.102.200/design/demo.cfm I've looked around, and I'm just not sure what could be breaking it. Any ideas? Nevermind! I figured it out. With Coldfusion, I didn't have it setup to suppress white space. The application.cfm file had all kinds of white space, and when it was included dumped about 100 lines of white space in the rendered file. Once I cleaned that up, it worked. I currently making a website to learn about web design and I have made a javascript selection menu which displays perfectly when the code is on a page on its own: http://www.ukhomefurniture.co.uk/test/mouseovertest.php However, when I implant the same code on the full page on which I want it to appear it goes haywire with large gaps all over place, I have managed to get it down to a small gap between the top menu and splash image. A colleague I work with suggests it may be down to the PHP affecting. Can anyone advise how I can fix it so the gap is removed: http://www.ukhomefurniture.co.uk/test/indextest.php Below is a sample of my CSS page, I'm having an issue with the floats that are commented out, they are affecting my th even though I haven't actually classed anything in my html... Any ideas? <code> /* CSS Document */ body { margin: 0; padding: 0; background-color: #000; color: white; font-family: "Lucida Grande"; font-size: x-small; } table.outer { border:1px solid #fff; width: 178px; } /*.left { float: left; } .right { float: right; }*/ table { clear: right; width: 700px; line-height: 1.4em; border-collapse: collapse; border: 1px solid #000; color: white; background: #000; font-family: "Lucida Grande"; font-size: x-small; }</code> i have two p tags one after the other.. <p>text</p> <p>text</p> and I did: Code:
#head p {
float:left;
margin-top:2%;
font-style:oblique;
font-size:150%;
color:green;
}
#head p+p {
float:right;
font-size:75%;
color:red;
}
the problem is that if i do margin-top:4% to the first p; this also changes that in the adjacent p? is this correct? Here is some code I've started for a project. It is for IE 5+ and uses filters. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Untitled</title> </head> <body id="bodyid" bgcolor="f3f3f7" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0" scroll="no"> <script language="JavaScript1.1"> function resizePage(){ windowHeight = (document.getElementById('bodyid').clientHeight - 60); document.getElementById("bottomTable").style.height = windowHeight ; } </script> <style type="text/css"> .tddrop { filter: progid:DXImageTransform.Microsoft.dropShadow(Color=DDDDDD,offX=3,offY=3,positive=true); border: solid #c0c0c0 1px; background-color: #ffffff; } .spacer{width:15px} </style> <table border="0" bgcolor="#34487E" style="width=100%" cellpadding="0" cellspacing="0" > <tr valign="top"> <td style="height:50" valign="middle" > <!--- Top bar including left image ---> <table border="0" cellpadding="0" cellspacing="0" style="width:100%;height:100%" > <tr> <td> <!---- image here... ----> </td> <td style="width:100%;filter:progid:DXImageTransform.Microsoft.Gradient (GradientType=1, StartColorStr='#34487E', EndColorStr='#C5D1E1')"></td> </tr> </table> </td> </tr> <tr><td style="height:1" bgcolor="#7c7c94"></td></tr> <tr> <td style="height:10;filter:progid:DXImageTransform.Microsoft.Gradient (GradientType=0, StartColorStr='#f3f4fa', EndColorStr='#9997b5')"> </td> </tr> <tr><td style="height:1" bgcolor="#7c7c94"></td></tr> </table> <table id="bottomTable" border="0" style="width:100%;height:300" cellpadding="0" cellspacing="12" > <tr> <td class="tddrop" style="width:180;"> </td> <td class="tddrop"> </td> </tr> <script>resizePage();</script> </body> </html> Notice that between the two colums, the <td>'s are not lining up at the bottom. If you remove the shadow filter they line up fine. Anyone have an idea why this might be so? Thanks I have an index.php page which has a <link> to style.css. The style is applied just fine to content in index.php, but if index.php includes content from other php files using include(); statements, this included output ignores the stylesheet. I have tried putting a <link> to the stylesheet in the included php files, but this does nothing. Can anyone help? Thanks! Code: <link rel="stylesheet" type="text/css" href="style.css" /> Hi everyone, So I've been coding for years and had drawn away for the design/css part, so I need some refreshing. I've tried the greater than / less than "operators" between selectors in my css declaration but to no avail. Basically what I want to do is example: Code: <form><!-- really doing this basic just to show the point -->
<fieldset>
<!-- inputs here -->
</fieldset>
<fieldset>
<fieldset><!-- ### nested fieldset inside fieldset, don't want to affect these child selectors -->
<!-- input bla -->
</fieldset>
</fieldset>
</form>
So as you can see in my brief exampl above, there's two parent selectors and one child inside the second one. I only want to change the properties of the parent ones, so that a fieldset INSIDE a fieldset doesn't get affected, and I was hoping anyone here might be able to shed some light on how to achieve this. Many thanks Hi There - Am converting another design from tables, working with a CMS (Drupal) and an existing CSS / table combination that I didn't write and have no choice about. Think of the header as having three sections. The top section has logo on the left, search box on the right. Rounded corners. I'm cool with that section. Then there's a space. Created a div for the space. Love the space. Problems with the space in IE. Will go into it later. Then there's the next section. Rounded corners. Contains the entire page. On the left is a pulldown menu, about 1 cm from the top. On the right is a tabbed menu. This menu has flexible height. It needs to be right up against the bottom with the menu below it. Call this section the tabbed menu section. Third section. Immediately below that is a bar menu like the one Apple's got. Looks like a metal bar with divisions. Call this primary links. ---------- First, the space between. In IE, when you roll over the bar menu, the space disappears. Won't come back. Initially, in the second section, floated the pulldown menu left and the tabbed menu right. That worked fine, except that the tabbed menu had a width of 100% and pushed up the pulldown menu so the section was too wide. When I put it to 65%, all hell broke loose with the bar menu in the third section below it and bits of it snuck up into the second section. If I left it alone, and left the tabbed menu at 100%, when I checked over its container with firebug, it said that it was being affected by the primary links. I figured that out also because the background for that container was a really weird color that I finally found in the background of the navigation id and changed to white. Primary was overlapping it so I couldn't see it with firebug. So after fiddling with several clearing methods, I gave up and decided to try a table. Table worked fine, and the second section looks good except that there's a one pixel space between the tabbed menu and the bar menu. --------- It is my greatest wish right now to be able to float the pulldown to the left, the tabbed menu to the right and have the primary links stay below. I wish I could get the space to work and I wish for a clear understanding of it all so I can then figure out where to put the corners. Anyone who can enlighten me on this would have my undying gratitude. I've been working on this all day and the deadline's tomorrow. Code: <div id="top part" logo and searchbox </div> <div> that pesky space that disappears in IE when roll over primary links </div> <div id=navcontainer> dropdown and tabbed menu </div> <div id="navigation" class="menu> <!-- couldn't find the menu class in the css --> <div id="primary" class="clear-block"> contains barmenu - very fussy </div> </div> Here's the relevant CSS: Code:
div#navigation {
background: #fff url(../images/blue/menu-bg.png) 100% 100% repeat-x;
}
#primary {
line-height: 30px;
}
#primary ul {
padding:0;
margin:0;
list-style:none;
}
#primary li {
display:inline;
}
#primary a {
font-weight:bold;
display:block;
float:left;
padding:0px 14px 0px 14px;
margin: 0px 1px 0px 0px;
font-size: 95%;
}
#primary a {
background-position:0% 0px;
}
#primary a:hover {
text-decoration: none;
background-position:0% -42px;
}
#primary a.active {
background-position: 0% -84px;
}
#primary a {
background: url(../images/blue/menu-div.png) 100% 0 repeat-y;
color:#666666;
font-size: 120%;
font-family:Arial,Helvetica,sans-serif;
}
#primary a:hover {
color: 666666;
background: #B8B8B8;
}
#primary a.active {
color: 666666;
background: #B8B8B8;
}
Hi Folks, I've implemented a custom underline for all text links using background properties, but have found that my linked transparent PNG images are now affected with the underline as well. I've tried correcting this by applying background-image:none; to the affected PNGs -- I even used !important;. No luck. I also saw some mention of using the display:block; property to correct a similar problem. No luck. Suggestions? Thanks in advance! P.S. I was all set to post a link to a live example, but it seems new users can't post links? Hopefully the above description will suffice. I used a script from Dynamic Drive that allows the user to change font on demand (They can size up/down the font on the website). But I ran into problems in that this spilled over to increasing the fontsize of the links (only A but not not rollover). I would prefer that the links are not affected by this script. I would rather the links stay with the sizes I specified in the CSS. Please see the website here to understand what my problem is: nudipu.org.ug/nsites. My intension was to make it as perfect as it is on their sister site add.org.uk Can somebody advise me please? The script I used is located on http://www.dynamicdrive.com/dynamicindex9/textsizer.htm Thank you folks. please please somebody help me with this... i have given my links some effects with this code: Code: <style type="text/css">
<!--
a img {border: none; }
a:link { text-decoration: none; }
a:hover { text-decoration: none; border-bottom:3px double; color: #000000;}
a.head,
a.head:link { text-decoration: none; }
a.head:hover { text-decoration: none; }
//-->
</style>
it works fine on my links, but the class "head" doesn't seem to be effecting the link with that class....it still has the same hover effect as the other links. I have class="head" in the link tag of the element, but it still doesn't work. I want no effect on this link since it is an image and I don't want a double-underline on it. The only thing I can think of is that maybe the head image isnt being effected correctly because it is an include file, but I don't think that really matters. Thanks! This is my first try at css and i have been at it about a week on and off. I have tried to use examples from here and the o'reilly CSS cookbook. I want to create a two column row of pictures with a caption. I selected DIV as the tool (my css is below). The container DIV looks great. I want the div.float, however, to start a second row when a third picture is added and to continue thereafter with successive two column rows. Unfortunately, each of my rows contain only one picture. here is my css style sheet. A demonstration of the problem can be seen at: http://www.yourline-online.com/demo05/?How_to_create_pages Code: div.float {
float: left;
BORDER-RIGHT: #808080 2px solid;
PADDING-RIGHT: 2px;
BORDER-TOP: #808080 2px solid;
PADDING-LEFT: 2px;
FONT-WEIGHT: lighter;
FONT-SIZE: medium;
PADDING-BOTTOM: 20px;
MARGIN: 16px 2%;
BORDER-LEFT: #808080 2px solid;
COLOR: #000000;
PADDING-TOP: 2px;
BORDER-BOTTOM: #808080 2px solid;
HEIGHT: 200px;
WIDTH: 150px;
BACKGROUND-COLOR: #ffffff;
TEXT-DECORATION: none
}
div.float p {
text-align: center;
}
div.container {
border: 2px dashed #333;
background-color: #ffe;
}
div.spacer {
clear: both;
}
MY HTML is like this: Code: H1>How to create pages</H1> <P>The headings are used for splitting up the content file. An H1, H2 or H3 heading will dynamically split the document into new pages in the table of contents. An H4-heading is used as a heading within a page. See the following pages...<BR></P> <P></P> <DIV class=container> <DIV class=spacer></DIV> <DIV class=float><IMG height=100 alt="image 1" src="image1.gif" width=100> <P>caption 1</P></DIV> <DIV class=spacer></DIV> <DIV class=float><IMG height=100 alt="image 2" src="image2.gif" width=100> <P>caption 2</P></DIV> <DIV class=spacer> <DIV class=float><IMG height=100 alt="image 3" src="http://www.yourline-online.com/demo05/image3.gif" width=100> <P>caption 3</P></DIV> <DIV class=spacer></DIV></DIV></DIV> Hi all, I have a bit of an odd situation (prob not odd if you seen it before but I have no clue why its doing it!).... I have my webpage: http://www.houseofhawkins.com/index.html which works great in IE. the part in question is the menu tabs at the top. Within IE they keep the width I have given them.. In firefox they only go to the width of the text. They are links with the following CSS attached: div#Header #MenuSection a.MenuTab { PHP Code: filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#A8DBA8', startColorstr='#A4B7A4', gradientType='0'); font-weight: bold; text-align: center; font-size: 1.3em; background-color: #BCD6BC; border-style: solid; border-width: 1px; border-color: #A5BEA5 #BCD6BC #BCD6BC #A5BEA5; margin: 0 5px 0 2px; height: 1.5em; width: 140px; padding: 5px 1px 1px 1px; } div#Header #MenuSection { float:left; margin-top: 30px; } here is the HTML code for that part of the page. PHP Code: <div ID="MenuSection"> <a Class="SelectedMenuTab" Title="You are currently viewing the Home page">Home</a> <a Class="MenuTab" href="" title="Curriculum Vitae for Jonathan Hawkins, Author of House of Hawkins">CV</a> <a Class="MenuTab" href="http://houseofhawkins.com/projects/index.html" title="Portfolio of Work created by Jon Hawkins">Portfolio</a> <a Class="MenuTab" href="" title="Online Photo Gallery of Jon, friends and family">Photo Gallery</a> <a Class="MenuTab" href="http://houseofhawkins.com/games.html" title="Games created by House of Hawkins">Games</a> </div> <div style="clear:left"> </div> I just dont get why firefox wont be nice and give me the width I ask for... the oddest bit is if I put float:left into the menutab part they do work! I wish to understand why its like this... I have attached the CSS and the file if that helps anyone. Thanks for the help and advice. I've got two lines of text. Want the spacing the two lines to increase, so I set a line-height. When I do this, not only does it increase space between the two lines, it also increases spacing above the first line (and maybe below the second). How can I increase spacing between the two lines only, without increasing above and below? Thanks! Basically, following link: www.projectfinalfantasy.com Works fine in FF but IE, it piles the divs under eachother, whether the float tag is applied or not. Any help would be greatly appreciated. Cheers, Joe. I am trying to put a float to the right side of a layer and then have it go over the right side of the layer. But when I do this the part that is moved over is not visible in IE. I have included an example to make it easier to explain. The green layer should be partially outside the blue layer by 100px. I would appreciate any help getting this done. Thanks Code:
<style type="text/css">
.main
{
position: relative;
top: 100px;
width: 700px;
background-color: #5577cc;
height: 500px;
}
.floatright{
margin-right: -100px;
float: right;
width: 300px;
height: 300px;
background-color:#339900;
}
</style>
</head>
<body>
<div class = "main">
Main
<div class = "floatright">
Float
</div>
</div>
</body>
I always have trouble with floats. I'm just trying to get these two bulleted lists to display next to each other so that the page is shorter. It isn't exactly working. Close but not quite. Changing the left margin hasn't helped (even bumped it to 55, but it had no effect.) <span style="float:left;"><h4>New Listings</h4> <p>Be prepared with:</p> <ul> <li>Sales Price</li> <li>Property particulars</li> <li>Company</li> <li>Address</li> <li>Your name</li> <li>Phone number</li> </ul></span> <span style="margin-left: 15em;"><h4>Price and Property Changes</h4> <p>Please state:</p> <ul> <li>Price change or any changes</li> <li>Address</li> <li>Company</li> <li>Name</li> <li>Phone number</li> </ul></span> <span style="float:clear;"><h4>Buyer Wants</h4><span> <p>Describe your buyer's wants and needs. You will have 30 seconds to present your buyer wants.</p> Hi, this bug is driving me nuts. I don't know why it happens. All I know is that it is not even consistent. Here's a screenshot of the problem: http://www.argsoccertours.com/float-problem.jpg And here's the code for that part: Code: <p>The bus will take you to your hotel, where you can leave your luggage and take a shower.</p> <p>This day we suggest the Buenos Aires City Tour. Discover one of the most amazing cities in the world. Buenos Aires is a thoroughly modern city with more than 400 years of history. Visit Florida street, one of the most surprising pedestrian streets in South America. You don't want to miss Palermo Soho, the trendiest neighborhood in Argentina, where you will find tourists from all over the Globe;<img src="images/caption10.jpg" alt="Caminito" width="300" height="300" class="floatright" /> visit Puerto Madero, the preferred area for luxury offices and restaurants; and also check out San Isidro, the most exclusive neighborhood in Buenos Aires.</p> <p>You will also get to see Argentina's historic buildings, the <em>Casa Rosada</em> (which means "Pink House" and is the President's office), the <em>Obelisco</em> (a huge tower with a lot of history), and some of the oldest, yet best mantained museums and theaters in the world.</p> <p>Finish the day with a short visit to Recoleta, the neighborhood of choice for expats in Buenos Aires to have a good time and eat at the best restaurants.</p> <h2>Thursday, March 4 - <span class="redsubtitle">Practice + Palermo Soho + Recoleta</span></h2> <p>Your team will have a practice in the morning. A complimentary transfer will be available for you and your Tour Manager will help you with any arrangements that you need.<img src="images/caption11.jpg" alt="Rugby practice" class="floatright" /></p> <p>In the afternoon you can have <em>Tapas</em> -a Spanish typical dish- in Palermo Soho, a place that is so cool you will never forget it.</p> The CSS for floatright is: Code:
.floatright {
float: right;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
}
As you can see in the code, in both cases I insert the image the same way, but the first one looks OK and the second one doesn't. This happens on IE7 (not sure about other versions of IE), but for sure it doesn't happen on FF. Anybody has any clue on what could cause this? |
|||||||