|
CSS - Nested Div Floating Question
I am building a page that uses PHP and does a MySQL select to display content on the page. The page uses nested divs. I had not realised this at my design phase, but items that it displays below the side-menu do not display properly. I have tried using float:left but it doesn't seem to do the trick. Here is the page and code in question (view in internet explorer only):
http://tweedledee.dyc.edu/~tpx/test/tpx7c/index.php PHP Code: <div id="NewsOuter"> <div id="NewsTitle"><a href="viewArticle.php?id=4">News Test</a></div> <div id="NewsInner"><img src="http://tweedledee.dyc.edu/~tpx/test/tpx7c/images/site/notavail100.jpg" align="left">this is the news and stuff</div> The above is the generated code for each item it pulls from the database. This should be a sufficient model to base it on. Here is the CSS code. Content is the name of the Div that the News sections and the menu sit inside. I left out the menu CSS, please inform me if it is also needed. PHP Code: #content { background:#eee; width:750px; border:1px solid #000; text-align:left; } #Content #NewsOuter { display: block; float: left; height: 162px; width: 602px; } #NewsTitle { font-family: Arial, Helvetica, sans-serif; text-decoration: none; float:left; } #NewsTitle a { display: block; border:1px solid; background: #FFFFFF; color: #000000; height:20px; font-weight: bold; text-align:left; text-decoration: none; padding: 1px 10px; } #NewsTitle a:hover { color: #999999; text-decoration: none; } #NewsInner { display: block; float: left; width: 600px; height: 102px; font-family: Arial; font-size: 10px; font-style: normal; margin-top: 0px; vertical-align: top; } #NewsBottom { display: block; float: left; width: 600px; height: 20px; padding: 1px 10px; Font-Family: Arial; Font-Size: 9px; } Any idea what I can do to #NewsTitle to make it always align to the left? It SHOULD appear as it does next to the menu. Unfortunately the menu is also in a div so there is no hard edge along its left border for the div to stop. And yes, I am attempting to build a CMS from the ground up. No pre-built CMS that I have tried meet my requirements. Boy is it hard/fun! Similar TutorialsHello all. I've got a layout with three columns. The first column contains the navigation and the second two are variable content. All the columns can be any length, and consist of any number of divs; each div is a bordered block of variable-sized content. The problem is if I want to float an image around some text in the second or third column. Since the image is floating, its container doesn't extend fully, and the image overlaps the border and the block below it. However, if I put a "clear: both" spacer within the block, then the container clears elements in the left or right columns, and extends way too far down! What I really need is a way to just clear a single level of nesting, but "clear" seems to be pretty much all or nothing. I've also tried the pseudoclass :after trick to extend the box, but that didn't appear to do any good. It just added the content inside the border of each block, but doesn't enclose the image at all. I hope somebody has suggestions - I actually haven't found anything about this problem, but perhaps I'm just looking for the wrong terms. It seems like a fairly fundamental thing to do... Thanks! Hi All, I'm fairly new to CSS and have what is probably a basic question. I'm trying to format a class and having issue. Please look at my html and the css code below: Code: div class="node"> <div class="taxonomy"></div> <div class="content"> <p>Photo Gallery Body Here</p> <div class="field field-type-filefield field-field-image"> <div class="field-items"> <div class="field-item odd"> <a href="/sites/default/files/imagecache/Full/IMG_0275_0.JPG" rel="lightbox[field_image][Pic 1<br /><br /><a href="/node/48" id="node_link_text" class="active">View Image Details</a> - <a href="/sites/default/files/IMG_0275_0.JPG" target="_blank" id="download_link_text">Download Original</a>]"><img src="/sites/default/files/imagecache/Thumbnail/IMG_0275_0.JPG" alt="Pic 1" title="Pic 1" width="125" height="125" /></a> </div> </div> </div> </div> </div> </div> </div> Code: .node .field .field-type-filefield .field-field-image .field-items .field-item .odd
{
border: 1px solid #fff;
width: 125px;
height: 125px;
margin-top: 35px;
margin-right: 28px;
float: left;
}
The only way I can format the "field-item odd" class but naming the css class .odd. However, this effects other parts of the site. How do I target this specific class properly? Thanks! I'm having a problem with my links becoming deactive within some nested elements. I followed some instruction on creating rounded corner boxes via a tutorial by Andy Budd. Anyway, it all works great except when I wrap link tags around a few pieces of copy. I'm a bit of a beginner still so maybe this is a simple fix but I've spent over a days worth of time now trying to figure it out on my own and can't seem to get it. Just to clear this up, the links work everywhere on the page outside of the "box" element I'll list below and I've double and triple checked that the link within the "box" element is written correctly and it is. The CSS even finds the link and styles it correctly, however, the mouse function seems to be disabled. Does this all make sense? Below is the CSS, any help would be greatly appreciated... This is the code that creates the box and it works correctly... Code: .box {
width:831px;
background:url(../imgs/box-spacer.gif) repeat-y;
}
.box h1 {
background:url(../imgs/box-top.gif) no-repeat left top;
padding-top:40px;
font-weight: normal;
}
.box .last {
background:url(../imgs/box-bottom.gif) no-repeat left bottom;
padding-bottom:60px;
}
.box h1, .box p {
padding-left:60px;
padding-right:60px;
}
And this is the code I used to test that the page is seeing it as a link... Code: .box h1 a:link {
color:#00CCFF;
}
.box h1 a:hover {
color: #FF0066;
}
It changes the color correctly but the hover doesn't work and if you click, it doesn't link you anywhere. Again, the link is written correctly on the page. Can anyone help please? I appreciate it. 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, 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;
}
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? 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 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 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 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> 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 All: This is my first post to this forum. Any and all assistance is greatly appreciated! I am having an issue with some floating div's. I'm sure it's as easy as moving the div to a different parent but, I'm having trouble figuring this one out. My site is pretty simple. Most of the div's are floating left. I have one div that is floating right. I want the right div to stretch or contract to the full height of the content. Most of my content fits into a 740px height. There are a few that are more (up to 1500px). So, I want to put 1500px worth of images in the right column but only show as much as needed to fit the content area (most of the time only 740px). Right now, the full height of the right div is showing. I would post a link but, I'm new to the forum and it isn't allowed. If there is a way around this, I am happy to provide a link. Thanks in advance for any responses! Jeff Please view the attached image. I want it as; left arrow - gallery - right content all on same line. css Code:
#content #gallery { float:left; width:100%; }
#content #gallery .list { float:left; border: 1px solid black; background-color: #dfdfdf; }
#content #gallery .list li img, #content #gallery .list li p { width: 200px; height: 150px; margin: 10px; }
#content #gallery a.galleryprev, #content #gallery a.gallerynext { display: block; float: left; width: 28px; height: 150px; text-decoration: none; background: url("http://www.gmarwaha.com/image/imageNavLeft.gif") left 60px no-repeat; }
#content #gallery a.gallerynext { background: url("http://www.gmarwaha.com/image/imageNavRight.gif") right 60px no-repeat; }
#content #gallery a.gallerynext:hover { background-image: url("http://www.gmarwaha.com/image/imageNavRightHover.gif"); }
#content #gallery a.galleryprev:hover { background-image: url("http://www.gmarwaha.com/image/imageNavLeftHover.gif"); }
#content #gallery a:hover, #content #gallery a:active { border: none; outline: none; }
html Code:
<div id="gallery">
<a href="#" class="galleryprev"> </a>
<div class="list">
<ul>
<li><img src="http://www.gmarwaha.com/jquery/jcarousellite/image/1.jpg" alt="" width="200" height="150" /></li>
<li><img src="http://www.gmarwaha.com/jquery/jcarousellite/image/2.jpg" alt="" width="200" height="150" /></li>
<li><img src="http://www.gmarwaha.com/jquery/jcarousellite/image/3.jpg" alt="" width="200" height="150" /></li>
<li><img src="http://www.gmarwaha.com/jquery/jcarousellite/image/4.jpg" alt="" width="200" height="150" /></li>
<li><img src="http://www.gmarwaha.com/jquery/jcarousellite/image/5.jpg" alt="" width="200" height="150" /></li>
<li><img src="http://www.gmarwaha.com/jquery/jcarousellite/image/6.jpg" alt="" width="200" height="150" /></li>
<li><img src="http://www.gmarwaha.com/jquery/jcarousellite/image/7.jpg" alt="" width="200" height="150" /></li>
<li><img src="http://www.gmarwaha.com/jquery/jcarousellite/image/8.jpg" alt="" width="200" height="150" /></li>
</ul>
</div>
<a href="#" class="gallerynext"> </a>
</div>
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 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. Please look at this page in FF http://www.roadhousecamper.com/camper.asp?rv=17 Notice div with the red background and the thumbnails? It should float to the right of the large image but is does not. It does though in IE7? Thanks for any help. T The image below is how I want my website to look (div-wise, that is). It looks like this on all platforms and on all browsers except IE 5.0 and 6.0: IE 5.0 and 6.0 render the following: I have included my html + css code below. I have tried to make #sidenav float:left instead of float:right. This makes no difference for browsers but IE 5.0 and 6.0, which then again render the page wrong. Also decreasing the width of #sidenav (i.e. to 20px) doesn't help; the result is the same. Could somebody please help me fixing this There must be at least one css guru out there today All help is greatly appreciated! Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
#main {
background-color: red;
text-align: center;
}
#wrapper {
text-align: left;
margin: 0 auto;
width: 300px;
}
#content {
background: yellow;
width: 200px;
float: left;
margin-left:50px;
}
#logo {
background-color: lime;
}
#mainnav {
background-color: pink;
}
#subnav {
background-color: navy;
}
#text {
background-color: orange;
}
#sidenav {
background-color: blue;
width: 50px;
float: right;
padding-top: 50px;
}
#footery {
clear:both;
background-color: #fff;
}
#footer {
background-color: pink;
margin: 0 auto;
width: 200px;
}
#logo, #mainnav, #subnav, #footer {
min-height: 30px;
}
</style>
</head>
<body>
<div id="main">
<div id="wrapper">
<div id="content">
<div id="logo"><br><br></div>
<div id="mainnav"><br><br></div>
<div id="subnav"><br><br></div>
<div id="text"><br><br><br></div>
</div>
<div id="sidenav">text</div>
</div>
<div id="footery">
<div id="footer"><br><br></div>
</div>
</div>
</body>
</html>
I use form field hints on my sign up page. I am trying to float it to right with the codes below but its not happening. .hint { float:right; display: none; position:absolute; width: 150px; border: 1px solid #aaaaaa; background: #d7d7d7; } www.pearl.ru/isdunyasi/signup.asp I 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. I saw this appealing menu from a css contest page and i've studied the code over and over again but i can't seem to get the same effect as this person has done. He has created a menu that just floats while the screen is able to scroll up and down. the site is : http://contest.prestontalk.com/index/FluidFixed/0/4/1/ if anyone knows how this effect is done, let me know. thanks! |
|||||||