|
CSS - Text Disappears Behind News Floating Box?
Hi Guys,
Thanks to some incredible pointing me in the right direction yesterday, i have finally got to my 3-col layout that I want. The only issue is now my news box will let content role behind it, but really i want it to push down as with the footer bar! Can anyone point me in the right direction please? Stylesheet below and output at www.generating-sets.com/index.new2.php PHP Code: html {height:100%;} body { margin:0; padding:0; height:100%; background-image:url(bgs.gif); background-position:top right; background-repeat:repeat-y; background-color:#ffffff; font-family: Times, "Times New Roman", serif; } #wrap { background-image:url(bg.gif); background-position:top left; background-repeat:repeat-y; min-height:100%; } * html #wrap {height:100%} #header { background-image:url(label2.gif); background-position:right; background-repeat:no-repeat; background-color: #000066; border-bottom: 2px #ffffff solid; color: #ffffff; margin:0; padding:0; height:80px; } p {margin:5px; padding:0;} h1 { position:relative; line-height:80px; margin:0; padding-left:20px; } #left { float:left; width:150px; color: #ffffff; text-align:center; background-color: #000066; } #main { position:relative; margin-left:200px; } #right { float:right; width:10px; text-align:center; color: #ffffff; background-color: #000066; } #content { padding:5px; margin-right:200px; text-align:left; } #clearfooter { clear:both; height:80px; overflow:hidden; } #footer { height:40px; background-color: #000066; border-top: 2px #ffffff solid; margin:0; padding:0; margin-top:-0px; color: #ffffff; text-align:center; } div#newsbar {padding: 1%; text-align: center; height:150px; background-color: #000066; color: #ffffff; margin-left: +150px; margin-right: +10px; margin-top: -190px; border: 2px #ffffff solid; width: auto;} code { font-size:0.8em; border:1px solid navy; background-color:white; color:#333333; padding:10px; display:block; width:80%; margin:10px auto; overflow:auto; } There must be a reason why it works like it does, but i don't know!! Charlie Similar TutorialsI have a page with content on the left and a menu with "latest" news sitting directly under it. When the pages get longer, when you scroll down there is whitespace there. So I want the "latest news" section to follow the page, however, when I set the position to fixed the news overlaps the menu.. only to be made worse by the fact that I use jquery's accordion plug-in. I'm a new member so I can't directly post a link..but freezerburned dot org /tikigaq.com/old.php I'm out of ideas. Thanks for the help. ont his page : http://www.sahasraadhipura.org/News/news.html viewing it with internet explorer the text disappears and then reappears when scrolling, refreshing the page does not help. Anyone know whats going on ? Using mozilla it works fine. Sorry forgot to say this problem started whein i added some<hr> horisontal rulers I have a 4 column div layout using floats. When I resize the browser the text in the columns goes outside of the div, and over everything below it. Is there any way to insure that as the browser is resized the text will stay inside it's div? Here's an example of my code: CSS: Code:
div#middle {
line-height: 130%;
text-align: left;
margin-left: auto;
margin-right: auto;
min-width: 800px;
}
div#featured {
background-color: #666;
color: #333;
border-right: 1px solid gray;
width: 30%;
float: left;
padding: 1em;
font-size: 14px;
}
div#snippets {
background-color: #444;
color: #333;
width: 20%;
float: left;
padding: 2em;
font-size: 12px;
}
div#tools {
color: #333;
background-color: grey;
width: 150px;
float: left;
padding: 1em;
}
div#ads {
background-color: #444;
color: #333;
width: 100px;
float: left;
padding: 1em;
}
HTML: Code: <div id="middle" class="minmax"> <!-- Main Articles --> <div id="featured" class="vsize"> <h1>Featured Header</h1> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p> </div> <!-- Short Articles --> <div id="snippets" class="vsize"> <h1>Snippets Header</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p> </div> <!-- Search, other tools, event calendar --> <div id="tools" class="vsize">Tools</div> <!-- Ads --> <div id="ads" class="vsize">Ads</div> </div> Following on from an earlier thread I've split one problem off into the code below which can also be found at http://alphaworks.co.uk/test/float.htm The problem should be obvious from the text but just to confirm I want the left boundary of the text to be straight and not to flow back under the image as it is currently doing. I can do that with a margin-left:110px on the .description class but I'd rather have a solution which didn't depend on knowing the width of the image as this may well vary. Is there a way to do this? Thanks, Geoff Code: <html>
<head>
<style type="text/css">
.image
{
border : solid black 1px;
margin : 5px;
padding : 5px;
float : left;
}
.description
{
}
</style>
</head>
<div class="image">
<img src="" width="100" height="100"/>
</div>
<div class="description">
This should be to the right of the image and should not flow underneath the image.
This should be to the right of the image and should not flow underneath the image.
This should be to the right of the image and should not flow underneath the image.
This should be to the right of the image and should not flow underneath the image.
This should be to the right of the image and should not flow underneath the image.
This should be to the right of the image and should not flow underneath the image.
This should be to the right of the image and should not flow underneath the image.
This should be to the right of the image and should not flow underneath the image.
This should be to the right of the image and should not flow underneath the image.
This should be to the right of the image and should not flow underneath the image.
This should be to the right of the image and should not flow underneath the image.
This should be to the right of the image and should not flow underneath the image.
This should be to the right of the image and should not flow underneath the image.
This should be to the right of the image and should not flow underneath the image.
This should be to the right of the image and should not flow underneath the image.
This should be to the right of the image and should not flow underneath the image.
This should be to the right of the image and should not flow underneath the image.
This should be to the right of the image and should not flow underneath the image.
This should be to the right of the image and should not flow underneath the image.
This should be to the right of the image and should not flow underneath the image.
This should be to the right of the image and should not flow underneath the image.
</div>
</html>
Hi, Okay my boss wants me to do this: Have a rectangualr div that has another div in it that is smaller and is in the (vertically and horizontally) center. No probs, but the one in the middle has to have text floating around it, thats above left right and bottom. Me thinks this is impossible! Does anyone have any idea??? Cheers, See the image at http://i187.photobucket.com/albums/x205/vitainf/IEhelp.png - having trouble to get it showing the image with the bbcodes :S As you can see the menu to the right, which is known as '.sidebar' in the css followed below, is sort of pushing the main content, which is known as .content in the css below, down. Anyone has any idea how to fix this? Style Sheets Code: body
{
text-align: center;
background: #800000;
color: #fff;
}
* {
padding: 0;
margin: 0;
}
div#container
{
margin-left: auto;
margin-right: auto;
width: 700px;
text-align: left;
}
#spacer {
height: 50px;
}
#header {
height: 100px;
width: 100%;
background: url(ctfiles/logo.png) no-repeat top center #000;
}
#container {
background: #fff;
padding: 10px;
}
#main {
background: #000;
color: #fff;
width: 700px;
}
.sidebar {
float: right;
text-align: right;
background: #000;
color: #fff;
width: 30%;
padding-left: 8px
padding-right: 12px
}
.content {
color: #fff;
background: #000;
width: 70%;
margin-left: 2px;
margin-right: 2px
}
HTML/Template/PHP w/e Note: It's a template for the MODx CMS, which explains some of the calls like [(site_name)]. The lorum ipsum is in the [*content*] call, the menu in the [[wayfinder...]] one. PHP Code: <!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> <title>[(site_name)] | [*pagetitle*]</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" href="[(base_url)]chinatown.css" type="text/css" media="screen" /> <base href="[(site_url)]" /> <!--[if lte IE 6]> <style type="text/css" media="screen, tv, projection"> body { behavior: url(assets/js/csshover.htc); } /* hover:anything support */ #content { margin-left: 22px; } /* to avoid the BMH */ a, a:link { border-bottom-style: solid } /* becuase IE just doesn't dot */ </style> <script type="text/javascript" src="assets/js/sleight.js"></script> <![endif]--> </head> <body> <div id="page"> <div id="spacer"> </div> <div id="container"> <div id="header"> </div> <div id="main"> <div class="sidebar"> [[Wayfinder? &startId=`0`]] </div> <div class="content"> <h4>[*longtitle*]</h4> [*#content*] </div> </div> <div id="footer"> [(site_name)] is powered by <a href="http://modxcms.com/" title="Powered by MODx"><strong>MOD</strong>x Content Management System</a> <br /><a href="[~11~]" title="Link to our Blog RSS Feeds">Blog Entries (RSS)</a><br /> MySQL: [^qt^], [^q^] request(s), PHP: [^p^], total: [^t^], document retrieved from [^s^]. </div> </div> </div> </body> </html> I am a bit lost as to how to accomplish the following: I have two divs of unequal width, let's say 300 and 100 for example. I need to float both of these divs to the right and have them stacked on top of each other. That's easy enough on it's own, but I need text to wrap around them properly. ie if the wide one is on top the text should flow to it's left edge, then flow underneath it it the narrow divs left edge, then underneath the narrow one. I tried doing this with relaitve positioning, but have had no luck. If I simply float them both to the right, they line up side by side as expected. If I wrap them both in one container div, the text will flow to the left edge of the wide div but obviously not wrap underneath it to the left edge of the narrow div. Any ideas? Trying to achieve this: I'm having trouble figuring out how to float the right ad space correctly. This is what i've got so far: http://gatehouse.graffetto.com/floating_divs.html Code: Code: <html>
<head>
<style type="text/css">
.mainDiv {margin: 0; border: 1px solid black; padding: 10px; width: 600px; float: left;}
.image {height: 100px; width: 100px; background-color: red; float: left;}
.rightAd {float: right; background-color: blue; height: 250px; width: 300px; clear:right; margin-top: 300px;}
</style>
</head>
<body>
<div class="mainDiv">
<div class="image">test</div>
<div class="rightAd">test</div>
<div class="textDiv">
Text content
</div>
</div>
</body>
</html>
I know this is simple i just can't figure it out for some reason.. thanks for any help. given the following structu #container { width:775px; margin:0px auto; background-color:#fff; border-left:2px solid #424242; border-right:2px solid #424242; border-bottom:2px solid #424242; border-top:2px solid #424242; background-image:url(cont_bg.jpg); background-repeat:repeat-y; } #nav { padding:0px; height:100px; background-color:#4E7395; background-image:url(nav.jpg); background-repeat:no-repeat; background-position:top left; } #masthead { padding:0px; height:200px; background-image:url(header.jpg); background-repeat:no-repeat; background-position:top left; background-color:#E6E6E6; border-bottom:4px solid #4e7395; } #leftnav { float: left; width: 375px; margin-left:0px; padding:0px; background-color:transparent; } #rightnav { clear:right; float: right; width:392px; margin-right:0px; padding:0px; background-color:transparent; } Would it be possible to put text paragraphs side by side inside the rightnav <div> Floating the text in that manner, it would appear that there were two mini-columns, instead of just the one. Is that possible? thanks a million jon Hi, the background of the top navigation (it's a drop down menu) disappears when I make the google custom search box float left. I need it to float left because I want it to be on the same line as the top navigation menu. The id of the div that should show the bg is #topNavContainer. Page: http://hopewwamericorps.org/index.php Style: PHP Code: #topNavContainer { background: #000000 url(../images/topNavBg.gif) repeat-x scroll; } #topNav { height: 40px; width: 760px; margin: 0px auto; text-align: left; padding: 0px 0px 0px 100px; color: #bcd5df; float:left; } #siteSearch { padding-top: 10px; width: 300px; float: left; display: block; } HTML: PHP Code: <div id="topNavContainer"> <div id="topNav"> <ul class="sf-menu"> -**REMOVED FOR POST**- </ul> </div> <div id="siteSearch"> <form action="http://hopewwamericorps.org/page.php?Page=Search_Results"> <input type="hidden" name="cx" value="018067663729731490355:_3djw8ivavo" /> <input type="hidden" name="cof" value="FORID:10" /> <input type="hidden" name="ie" value="UTF-8" /> <input type="hidden" name="Page" value="Search_Results" /> <input type="text" name="q" size="31" /> <input type="submit" name="sa" value="Search" /> </form> <script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&lang=en"></script> </div> </div> Thank you for your help! Please ask me to clarify if needed, thanks. Ok i have a problem with css in IE7(figures!)... Dont know if i need a hack for it or i just suck at css but when i load my page in firefox everything is perfect but when i load it in IE7 there is nothing! I figured out it is because of im using a clear and if i dont use the clear it shows up but of course it doesnt look right. html4strict Code: Original - html4strict Code <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <link href="css/main.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <div id="main"> <div id="header"> <div class="logo"> <img src="images/Logo beta2.jpg" alt="Logo" /> </div> <div class="top-section"> </div> <div class="top-border"> </div> </div> </div> </div> </body> </html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <link href="css/main.css" rel="stylesheet" type="text/css" /> </head> <body> CSS: css Code: Original - css Code @charset "utf-8"; #container { height: auto; width: auto; padding: 10px; visibility: visible; overflow: auto; } * html #container { height: 1%; } #main { position: relative; } #header { height: auto; width: auto; position: relative; } .top-border { height: 10px; width: 900px; position: relative; background-image: url(css-images/t-border.jpg); background-repeat: no-repeat; clear: left; } .logo { float: left; position: relative; } .top-section { float: left; height: 120px; width: 600px; position: relative; } @charset "utf-8"; The right hand border for some of my table cells (Class "item_body") disappears, but they have almost identical coding to the cells the work properly. My CSS that pertains to the borders: Code:
td.item_body {background-color: #e7e7e7; border-left: 1px solid #c6c6c6; border-right: 1px solid #c6c6c6; border-bottom: 1px solid #c6c6c6; margin: 5px 5px 5px 5px}
And the code for the table with the cell that doesn't work: Code: <table cellspacing='0' cellpadding='0' border='0' valign='middle' width='100%'> <tr height='22px'> <td class='item_title' width='100%'><p class='title'> Search Roster </p></td> </tr> <tr> <td class='item_body' width='100%'><p class='item_body'> Use this form to search for any Bronco Virtual Airlines pilot. You may use as many or as little fields as you would like. For best results, try to enter all the information you know. <form action="index.php" method='get'> <input type='hidden' name='page' value='roster' /> <input type='hidden' name='act' value='shw' /> <table cellspacing='0' cellpadding='2' border='0' width='100%'> <tr><td width=50%><p class='item_body'>Full Name:</p></td> <td><p class='item_body'><input type='input' name="name" /></p></td></tr> <tr><td><p class='item_body'>Pilot ID</p></td> <td><p class='item_body'><input type='input' name="pilotid" /></p></td></tr> <tr><td><p class='item_body'>Pilot Base:</p></td> <td><p class='item_body'><select name="base"> <option selected='selected' value='' />Any Base <option value='kboi' />KBOI <option value='kgtf' />KGTF <option value='ksea' />KSEA <option value='kslc' />KSLC </select></p></td></tr> </table><br /><p class='item_body_center'><input type='hidden' name='orderby' value='last' /><input type='submit' value="Search"></form> </p></td> </tr> </table> I am having a problem.. The site am working on looks great in FF but in IE breaks when you click on a the link to view a larger picture and then mouse off the link. The padding on the bottom of the body (#main) disappears. i have a Javascript that switches the image out for another one. i am not sure if this is the problem. can someone please take a look i have been racking my brain on this for days. http://www.avallo.com/test/fatcatweb/phototest.shtml (Problem occurs when thumbnail is clicked and then moused off in IE 5.5 and IE 6) i have a border on the #main div so you can see what i am talking about. * Update * it isnt the javascript. here is the css and html. Code:
#main {
border:#333 dotted 1px;
float:right;
display:inline;
position:relative;
width: 610px;
padding-bottom:30px;
background:url(images/body-top.gif) no-repeat;
}
#mainbody {
margin: 30px 20px 20px 15px;
}
a.thumb {
float:left;
margin: 0 5px 5px 0;
padding: 2px;
border: #fff 2px solid;
}
a.thumb:hover {border: #895FA5 2px solid;}
<div id="mainbody">
<h1>Photo Portfolio</h1>
<p>Fat Cat Art Studio is proud to provide our clients with images of their business, area, or workers. This portfolio is a SMALL representation of recent photos.</p>
<div class="photos">
<h2>The Shore Photos</h2>
<div class="floatR" id="change1"><img src="images/photos/photo-01.jpg" alt="Enlargment" width="350" height="245" border="0" /></div>
<p>Taking a stroll on the shore leads to inspiration and some unique perspectives.</p>
<a class="thumb" href="javascript:change('change1','photo-01',350,245)"><img src="images/photos/photo-01x.jpg" alt="Thumb" width="75" height="75" border="0" /></a>
<a class="thumb" href="javascript:change('change1','photo-02',350,263)"><img src="images/photos/photo-02x.jpg" alt="Thumb" width="75" height="75" border="0" /></a>
<a class="thumb" href="javascript:change('change1','photo-03',350,264)"><img src="images/photos/photo-03x.jpg" alt="Thumb" width="75" height="75" border="0" /></a>
</div>
</div>
thanks, weston Ok, 'guys' I've hit a snag. I'm trying to redesign my website and am using blueprint css framework for the first time in my life. I've tested the layout in FF3.6, Google Chrome v8.0, Safari for Windows v5.03, IE8, and IE8 in compatibility mode [to emulate IE7]. It works great in ALL browsers I tested except emulated IE7. In this mode, the menu completely disappears except for a separate div that holds the left nav image. I have validated the html and my customized css file and have gotten rid of all errors found...but, still cannot get the nav menu to show up in emulated IE7 mode. So, I'm hoping Kravvitz or some other CSS god will come to my rescue. the short link to my dev page is http://drw65.servehttp.com/ this is a url redirect link that will redirect to my personal webspace from my ISP. thanks for reading. Im doing a project Located Here *** not work safe *** 96.0.176.55/login.php Please look at the css and html If you hover over with the mouse on the top navigation were you see Gallery you will notice there is a drop down menu with three separate choices or images... The problem is when you move the mouse down to the second or third image the dropdown disappears. Can someone please help? Thanks I have a basic div: Code: <div id="box1"></div> The CSS for the div: Code: #box1 {
position: relative;
width: 75%;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 100px;
background-color: #FFFFFF;
*background: none;
z-index: 1;
left: 50px;
top: 50px;
background-image: url(images/1px_trans75percent.png);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1px_trans75percent.png', sizingMethod=scale, enabled=true);
background-repeat: repeat;
border: 1px solid #FFFFFF;
}
The transparent background flashes and disappears when the page is loaded in IE6. Any ideas on how to get it to appear and stay appeared would be much appreciated... thanks! I have a wrapper div with a height of 600px and a width of 900px Inside it there are 2 divs The first is floated left with the below style Code:
#left{
height : 100%;
width : 600px;
overflow:hidden;
float : left;
}
The second one is not floated, so that it can occupy the rest of the space and the style is Code:
#right{
height : 100%;
overflow : auto;
margin-left : 600px;
}
The above design is meant to create a 2 column layout with a fixed height. The html I used is Code:
<div class="wrapper">
<div id="left">
<img id="main-image" src="/some/image"/>
</div>
<div id="right"></div>
<br clear="left"/>
</div>
The thing is that Opera (v 10.01) and Safari (v. 4.0.3) do not display the right div. When I remove the overflow:auto, however they do. I cannot figure out why. Any help appreciated Thanks |
|||||||