|
CSS - Floating A Div Onto Another Frame
I have a DIV element in a menu system that pops up when you hover over the parent menu. Everything in the menu works fine, however I need to embeed the navigation including the menu into a frame where the menu sits flush with the bottom of the frame it's in and when you mouse over the parent element the DIV that pops up is hidden by the frame below it. Like so:
--- frame 1 ------ <content> <menu> --- frame 2 ------ <main content> ... ... ------------------ Is there anyway with CSS to tell the DIV to float above the bottom frame? Similar TutorialsHi, Can someone help me with why the following header bar doesn't work in Firefox? It just shows the very top of the bar with the two other divs inside of it. Code:
<div class="cmsHeader">
<div style="float: left;">Page Name</div>
<div style="float: right;"><a href="" title='Add Page'><img src='images/icons/file_(add)_16x16.gif' border='0' alt='Add Page'></a></div>
</div>
.cmsHeader{
background: #809096;
padding: 5px;
width: 98%;
color: #FFFFFF;
}
.cmsHeader a{
color: #FFFFFF;
text-decoration: none;
}
.cmsHeader a:hover{
text-decoration: underline;
}
hi, i am a total newbie with css and trying to create a floating divider. an example can be seen at www.payjunction.com. does anyone know a tutorial on how to create one? thanks for the help in advance I currently have the following layout Code:
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
how do i go about making the same layout but using CSS. Each <td> is 50% wide Hi Everyone, I've been doing modest CSS for a while now and feel like I have a good grasp of it, and generally find a way of doing what I want. But, this has always bugged me and I need to understand what is going on... I think it's a question of Floating. This is in reference to http://www.arabellamusic.co.uk I want the blog posts to be on the left, and some other content on the right. How is the best way to go about doing this? You can check my source, but this was my thinking: Code: HTML
<div class='inner'>
<div class='left'>
BLOG PHP HERE
</div>
<div class='right'>
SOME OTHER STUFF HERE
</div>
</div>
And the CSS:
.inner { width:788px; }
.left { float:left; width:50%; }
.right { float:left; width:50%; }
If you grab my stylesheet and my source, you will see that I have a couple more things in there, but I don't think they could be affecting the rest (text-align etc...) So, am I doing this wrong? I have floated columns in other websites this way and it sometimes works, sometimes doesn't. Incidentally, once it would only work when I set 49% to each, I was assuming this was something to do with the box model I read about, but wasn't too sure. I will try not to play around with the site too much until I get a reply or two, but a few things may jump around as I try stuff! Thanks in advance... James I have 3 tables in a div. I have two of the tables one on top of the other. I wanted to place the third table to the left of the bottom table. So I placed the second table relative and left -50px. I placed the third with position absolute, top -70px and float right to achieve this layout. Is there a better way of doing this out of curiousity? Learning CSS and trying to emulate the following table: Code: |--------------------------------------| | Text 1 |----------------| | | Text 2 | Inner box text| | | Text 3 |----------------| | |--------------------------------------| I can get a nested div to work vertically but not horizontally. I'm trying: Code:
div#container { float: left }
div#title { float: right }
<div id="container">
hello<br>hello
<div id="title">
Text 1<br />
Text 2
</div>
</div>
Which is producing: Code: |--------------------------------------| | Hello | | Hello | | |----------------| | | | Text 1 | | | | Text 2 | | | |----------------| | |--------------------------------------| Perhaps a positioning thing which I don't understand yet? It's not homework so you don't have to do it for me, but rather you could just point to knowledge sources.... Tx! Hi I use DIV to display image thumbnails in a row from php loop. for each div containing image I have set the attribute float: left; so that multiple images can be displayed in parallel. Now the problem is that if I have a single image then there is no need to show it on the extreme left of the page but in the center, but the thumbnail is displayed on the extreme left, here is my code till now, PHP Code: echo "<div style=' text-align: center; border: solid 1px #993333; padding: 1px; margin: 2px; float: left; margin-left: 6%; '>"; echo "<div style=' text-align: center; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;'> <a href='/$path' rel=\"lightbox\"><img src='/print_resize_image.php?image=$path&type=$extension' width=200 height=150 border=0 ></a> </div></div>"; Hi again could someone help me figure out why my left and right box's on thid design are not inline with the content (middle) box thanks see attached pic to see what i mean. Code:
CSS CODE
body {
background:#ffffff;
color:#000000;
font:76% Verdana,Tahoma,Arial,sans-serif;
margin:0;
padding:0;
text-align:center;
}
/*** Main container ***/
#container {
background:#EAEAEA url() repeat-x;
color:#000000;
width:90%;
margin:5px;
min-width:770px;
padding:0;
}
/*** Content ***/
#content {
background-color:#EEEEEE;
border:1px solid #DEDEDE;
color:#000000;
padding:15px 20px 5px;
height:500px;
margin:5px;
}
/*** Main Banner ***/
#Banner {
background-color:#EEEEEE;
height:55px;
border:1px solid #DEDEDE;
padding:15px 20px 5px;
margin:5px;
}
/*** Left Side Navigation ***/
#SideNav {
width:15%;
float:left;
background-color:#EEEEEE;
border:1px solid #DEDEDE;
color:#000000;
min-width:200px;
padding:15px 20px 5px;
margin:3px;
}
/*** Right Side content ***/
#RightCon {
float:right;
width:15%;
background-color:#EEEEEE;
border:1px solid #DEDEDE;
color:#000000;
padding:15px 20px 5px;
min-width:200px;
margin:3px;
}
Thanks 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> Hi Guys, Am farely new to CSS and was workin on a wordpress site. when I started getting this error ... Now what I want is three DIVs to be placed side by side on the same background image ... so I instill a wrap ... I want them to look something like this ... http://img244.imageshack.us/img244/8750/wantga3.jpg Here is the code am using .... Code: /* bottom page
================================================= */
#bottom {
width: 1000px;
background: #95A566 url("images/bottom.gif") repeat-x top left;
}
#wrap {
padding-top: 3%;
padding-left: 0;
width: 1000px;
}
#wrap
a:hover {color: #000;}
#wrap ul {
margin-left: 0px;
list-style-type: none;
}
#wrap ul li {
background: url("images/li_bottom.gif") no-repeat;
padding-left: 25px;
background-position: 0 0.4em;
}
.tools {
padding-left: 25px;
background: url("images/leaf2.gif") no-repeat top left;
margin-top: 1.5em;
}
.left {
width: 25%;
float: left;
margin-left: 10%;
}
#bottomnav li a span {
display: none;
}
#bottomnav li a:hover span {
display: inline;
}
.center {
width: 25%;
float: left;
margin-left: 2.5%;
}
#bottomnav li a span {
display: none;
}
#bottomnav li a:hover span {
display: inline;
}
.right {
width: 25%;
float: left;
margin-left: 2.5%;
}
And the Implementation .... Code: <div id="bottom">
<div id="wrap">
<div class="left">
<h3 class="tools">Recent Posts</h3>
<ul>
<?php get_archives('postbypost', 10); ?>
</ul>
<h3 class="tools">Toolshed</h3>
<?php include (TEMPLATEPATH . "/bottomnav_menu.php"); ?>
<?php include (TEMPLATEPATH . "/searchform.php"); ?>
</div><!-- end left -->
<div class="center">
<h3 class="tools">Recent Posts</h3>
<ul>
<?php get_archives('postbypost', 10); ?>
</ul>
<h3 class="tools">Toolshed</h3>
<?php include (TEMPLATEPATH . "/bottomnav_menu.php"); ?>
<?php include (TEMPLATEPATH . "/searchform.php"); ?>
</div><!-- end center -->
<div class="right">
<h3 class="tools">Recent Comments</h3>
<p><?php mdv_recent_comments(8, 13, '', ' [...]<br />', true, 0); ?></p>
</div><!-- end right -->
Now ... this gives me a perfect view in FireFox .... http://img148.imageshack.us/img148/9121/firefoxej7.jpg But Internet Exploder messes up .... and pushes everything to the right ... http://img148.imageshack.us/img148/5365/ievs9.jpg Can you guys suggest approprate solutions for this Any help would be much appreciated.... Thanks, Abhi Hi, I'm trying to display text in a floating div in the middle of the page. The style is as follows: Code:
.mainContentAreaBackground {
position:absolute;
z-index:11;
top: 190px;
left: 230px;
width:70%;
height:72%;
}
#mainContentArea{
z-index:12;
position:absolute;
overflow:auto;
overflow-x:hidden;
width: 67%;
height: 68%;
top:205px;
left:246px;
text-align:left;
font-family:Tahoma;
font-size:10.0pt;
visibility:visible;
}
There are two anomalies which I think might be bugs in IE's implementation of CSS, and I was hoping someone might be able to give me some advice as to how to get around them. The first problem is that, when going to highlight text in the main content area, all objects on the page are selected, rather than just the intended text. The second anomaly is that, when using the mouse wheel to scroll down in the mainContentArea div when there's overflow, the cursor needs to be hovering over text. If it's hovering over any place with a "hole" in it, such as the space between paragraphs, then it will not scroll. Everything works fine in Firefox. You can see what I'm talking about he http://www.cs.mcgill.ca/~jbeard4/lepdev If anyone has any advice, please let me know. Thanks! -Jake I need some help with aligning a top of a div with another div. My web site is just a screw around hobby thing but here is the web address for it www.penguin.lhup.edu/~ewhite2 the two divs that I am focusing on are .link and #content here is the css code for them css Code: Original - css Code .link{ float: left; width: 115px; background-color: #000000; text-align: center; margin: 10px 0 0px 13px; clear: both; } #content{ margin: 10px 17px 4px 0; width: 625px; float: right; }
any help would be awesome and a head of time thank for all who take the time to read this post and for responding to it if you do. hey I am trying to get this sub menu floating on the rollover of a list item. Here's my HTML: Code: <body> <div id="banner"> </div> <div id="leftmenu"> <ul> <li>List 1</li> <li><a href="">List 2</a></li> <li><a href="">List 3</a> <ul> <li><a href="">List 3.1</a></li> <li><a href="">List 3.2</a></li> <li><a href="">List 3.3</a></li> <li><a href="">List 3.4</a></li> </ul> </li> <li><a href="">List 4</a></li> <li><a href="">List 5</a></li> <li><a href="">List 6</a></li> <li><a href="">List 7</a></li> <li><a href="">List 8</a></li> <li><a href="">List 9</a></li> </ul> </div> <div id="maincontent"> CONTENT </div> </body> and this CSS: Code:
#leftmenu {
position: absolute;
margin: 0px;
top: 120px;
left: 0px;
width: 147px;
height: 800px;
background-color: #cccc66;
font-size: 10px;
font-weight: bold;
}
ul {
padding: 0;
margin: 0;
list-style: none;
}
ul li {
color: #FFFFFF;
display: block;
background-color: #FF0000;
margin-bottom: 1px;
text-align: right;
font-weight: bold;
}
ul li a {
text-decoration: none;
color: #FFFFFF;
}
ul li a:hover {
color: #000000;
}
ul li ul {
display: none;
position: absolute;
top: 200px;
left: 100px;
}
#maincontent {
position: absolute;
z-index: 0;
left: 147px;
top: 120px;
height: 381px;
width: 100%;
padding-top: 10px;
padding-left: 10px;
margin-top: 0px;
margin-left: 0px;
background-color: #FFFFFF;
font-family: Arial;
font-size: 13px;
}
so yeah, I am struggling at this point, I have looked at a reference that someone gave me last time I brought up the issue, but can't get it working, if you can spot why, help would be appreciated, not having much luck, thinking maybe a syntax thing(?), not sure...HELP!! kr. I have a web page in which I have a table and within that table I have a sub table with two columns. I am using css and allow visitors to move the first column from right to left (they both are different sizes). I now have a need the text in column one be wrapped under column two (as you can do with pictures in say MS word). I can't write the text ahead of time at the bottom of column two as that column floats from left to right -- meaning that the text that should go underneath would be different each time. I assume it is not possible with tables to do such a thing, but thought to ask the experts to see if it is possible or there is another logical way of accomplishing it. I could simply call two different files based on the right-float and left-float and right text accordingly in both files, but to me that does not sound such a great idea. I'm having a weird situation. I've got a nested divs in a big box. Anyway, I've got one div floating an image on the left and another div with text on the right. Anyway, there's not much text, but under the img div there's a gap in IE7 but not in FF and I was wondering why. For some reason the margin-bottom: 5px; in the <h3> tag causes there to be the gap under the floating div holding the img. I'm wondering why this is happening in IE7 but not in Firefox. I created an example code to show what I mean and placed comments around the h3 tag that seems to be the cause. I put all the css in the html using style tags. I have a screenshot but it doesn't look like I can attach it. Code: <!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>test</title>
</head>
<body>
<!-- A big box to hold everything -->
<div style="border-style: solid;
border-color: #777777;
margin-top: 10px;
margin-bottom: 10px;
width: 400px;
padding: 0;">
<!-- the Image Div that holds the 100x100 pixel image and floats on the left in the big box -->
<div style="float: left;
width: 106px;
height: 106px;">
<img src="test.jpg" alt="Picture of Test Image"
style="display: block;
width: 100px;
height: 100px;
border-style: solid;
border-color: black;
border-width: 3px;
margin: 0;" />
</div>
<!-- This is the text Div that holds an H3 heading
Keep a 106px margin to prevent any later text from wrapping.
Neither Removing the margin nor the padding HERE solves the problem
only the margin-bottom in the h3 tag style seems to matter -->
<div style="margin-left: 106px;
padding-left: 10px;
margin-right: 0;
margin-bottom: 0;
margin-top:0;">
<h3 style="margin-top:5px;
margin-bottom: 5px;
border-style: solid;
margin-left: 0;
margin-right: 0;">Test</h3>
<!-- HERE'S THE QUESTION! why does the "margin-bottom: 5px;"
leave a gap 5px gap underneath the image in IE7 but not firefox.
Who's wrong? IE7 for putting the gap in or firefox for not floating things correctly?
The H3 should be WELL away from the bottom of the div with most font
sizes...Also oddly enough, enclosing the parent div of the h3 in a border
removes the gap under the image BUT a border around the h3 itself does NOT
Why the gap? -->
</div>
<!-- This div stops the floating -->
<div style="clear:both;
margin: 0;
margin-right: 0;
padding: 0;
width: 0;
height: 0;">
</div>
</div>
</body>
</html>
Hello, can anyone help me with this? I'm having trouble floating some divs and I can't find the problem. 1. navigation should be aligned with the bottom of the h1 logo 2. the content div should come next to the list of brands. The content div should overlap the black bg at the top. www. claeysconsult . be / misskado / index2.html Thanks in advance... I have recently created a design in which the main content and sidebar are both floated right, but I've been having a problem. For whatever reason, the main content has been floating slightly below my sidebar. Could anyone please look at the code and tell me how to fix it? Thanks a ton, go here to view my problematic design. I've had to write the address differently because "new user accounts are not permitted to create posts containing URLs." wendyhenrichs (dot) com (slash) pin. If you had trouble understanding my above message, here's the address with spaces in them (just remove the spaces in your address bar): http:// www . wendyhenrichs . com / pin Please just take a quick look. Thanks! I'm trying to float my navigation to the right side of the screen, but not messing up the order of the links. (left to right as in 1.2.3.4.5). The problem I'm having is the links go right, but so does the order of the links (they show right to left 5.4.3.2.1). Here's the CSS: Code:
ul#nav {
width: 890px;
font-size: 0.70em;
list-style: none;
padding: 0;
margin-top: 3em;
float: left;
clear: both;
}
ul#nav li {
background-color: #0776a0;
text-align: left;
float: right;
text-transform: uppercase;
border-right: 2px solid #279bd5;
display: block;
}
ul#nav li a, ul#nav li a:visited {
display: block;
padding: 0.4em 4em 0.4em 0.4em;
color: #FFF;
text-decoration: none;
}
ul#nav li a:hover {
color: #FFF;
background-color: #279bd5;
text-decoration: none;
}
ul#nav li a.current, ul#nav li a.current:visited, ul#nav li a.current:hover {
color: #FFF;
text-decoration: none;
}
And here's the html Code: <ul id="nav"> <li><a href="Home" title="Home">Home</a></li> <li><a href="Example" title="Example">Example</a></li> </ul> Will also post website with the example if asked. I'm Having problems getting my footer to stay below the content of my page. here's the link to my page. http://www.netgamegurus.com/ main page html Code:
<body>
<div class="container">
<div class="header">
<?php include_once("pages/header.php"); ?>
</div>
<div class="main_body">
<?php include_once("pages/index_body.php"); ?>
</div>
</div>
<div class="clearfooter">
</div>
<div class="footer">
<?php include_once("pages/footer.php"); ?>
</div>
</body>
</html>
main page CSS Code:
body {
background-color: #FFFFFF;
text-align:center;
}
body,html {
margin: 0 0 0 0;
padding: 0 0 0 0;
height: 100%;
width: 100%;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: none;
}
.container {
position:relative;
padding:0px;
margin:0px;
margin-bottom: -150px;
width:100%;
height:100%;
background-color:#666;
}
.header {
}
main_body {
}
.clearfooter {
clear:both;
height:150px;
}
.footer {
position:relative;
height:150px;
margin: -150px auto 0 auto;
}
index_body html Code:
<body>
<div class="left_col">
<?php include_once("left_col_index.php"); ?>
</div>
<div class="right_col">
<?php include_once("right_col_index.php"); ?>
</div>
</body>
</html>
index_body CSS Code:
.left_col {
position:absolute;
padding:0px;
margin:0px;
top:175px;
left:0px;
width:150px;
height:100%;
background-color:#00F;
}
.right_col {
position:absolute;
padding:0px;
margin:0px;
top:175px;
left:150px;
width:857px;
height:105%;
background-color:#0C3
}
I've looked up a ton of info on this on google, but nothing seems to help. Anybody got an idea on this? I need to center a div which contains two columns. Its important that the div encapsulates the content within. This is what I've done so far: CSS: Code: * {
margin: 0;
padding: 0;
}
#container {
float: left;
width: 960px;
border: 1px solid #000000;
}
.left {
float: left;
width: 650px;
}
.right {
float: left;
width: 250px;
}
HTML: Code: <div id="container"> <div class="left"> left content goes here </div> <div class="right"> right content goes here </div> </div> Question: Is it possible to center #container to the middle of the page? Using margin: 0 auto; doesnt work with floating divs. Its very important that #container has a border around .left and .right. Any help will be appreciated |
|||||||