|
CSS - Random Div Css Problem
I have divs within Divs to make background colour different to suit the template am making.
Code: /* Document : default Created on : 18-Oct-2011, 10:25:09 Author : abeattie Description: Purpose of the stylesheet follows. */ /* TODO customize this sample style Syntax recommendation http://www.w3.org/TR/REC-CSS2/ */ a { text-decoration: none; color:white; } root { display: block; } html { background-color: black; } #container { width: 800px; background: black; margin: 3em auto; } #header { overflow: hidden; height: 100% /* IE6 hack */ } #header img { margin-top: 2px; float: left; } #header ul#nav { float:right; font-size: 16px; position: relative; margin-top: 20px; } #nav li { display: inline; padding-right:27px; } #nav li a:hover{ color: white; text-decoration: underline; } #WhatsNew{ background: white; } #WhatsNewtitle{ color: white; margin-bottom: -30px; } #pictureinfo img { float:left; border: 2.5px solid black; margin-top: 5px; margin-left: 5px; margin-right: 5px; } #pictext { margin-top: -19px; float: right; width: 350px; height: 228px; } div.buttons { margin-top: 37px; color: white; -moz-border-radius: 10px; -webkit-border-radius: 10px; padding: 2.5px; margin-left: 115px; width: 70px; background: black; position: relative; }
that above is the css and below is the html. my problem is that one of my divs what is inside another div seems to be spilling out. http://imageshack.us/photo/my-images/811/unledtm.jpg/ as you can see the recent posts is taking up both the image and the text next to the image but that div is meant to be below and i have tryed everything i can think of. here is html. Code: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="default.css" type="text/css"> <title></title> </head> <body> <div id="container"> <div id="header"> <img src="images/logo.png" alt="Black & White" /> <ul id="nav"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact</a></li> </ul> </div> <!-- end header--> <div id ="WhatsNewtitle"><h1>What's New</h1></div> <div id="WhatsNew"> <div id="pictureinfo"> <img src="images/whatsnew.png" alt="Estore"/> </img> <div id="pictext"> <p> <h2>Project Title</h2> Lorem ipsum dolor sit amet, consectetur adipiscing elit. usce ligula sem, aliquam eget tincidunt vitae, rutrum sed ligula. Maecenas iaculis volutpat sem, a luctus odio commodo in. Cras sollicitudin nisl vel leo vulputate in dictum purus aliquet. Sed sed justo odio, sit amet sollicitudin enim. Vestibulum ante ipsum primis in <div class="buttons"><a href="#"> Prev </a>|<a href="#"> Next</a></div> </p> </div> </div> </div> <div class="recent posts"> <h2>Recent Posts</h2> <div class="post"> <h2>Post Title</h2> <div class="postinfo"> <ul> <li><a href="#">Author</a></li> <li><a href="#">Date</a></li> <li><a href="#">Category</a></li> <li><a href="#">Tags</a></li> <li><a href="#">Comment Count</a></li> </ul> <h2> 5 </h2> <img src="images/whatsnew.png" alt="Estore" /> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ligula sem, aliquam eget tincidunt vitae, rutrum sed ligula. Maecenas iaculis volutpat sem, a luctus odio commodo in. Cras sollicitudin nisl vel leo vulputate in dictum purus aliquet. Sed sed justo odio, sit amet sollicitudin enim. </p> </div> <!-- end post info --> </div><!-- end post --> </div> <!-- end recent posts --> </div> <!-- end container--> </body> </html> i hope i have explained enough for someone to help but if not am sorry. thnaks in advanced beattie Similar TutorialsYou would need to look in Internet Explorer (probably on windows) for the bug to show up. I've posted in css, because I assume it's something to do with css, but I guess it could be something else. The stylesheet for the page can be found here... http://estore.e-av.co.uk/stylesheet.css I realise there are various other errors on these pages still, but hey, it's a work in progress. It's really weird, if you click around through the pages, about 50% of the time, a white block seems to get drawn over the left and right hand menus (actually, I'm assuming it's over everything, but behind the main content). It follows no pattern, and if you move your cursor over it, it will redraw. It's so weird, and if it was any other browser, I would ignore it - but it's i.e. on windows, the most heavily used browser out there, so I've got to fix it somehow. Has anyone come across this before and managed to fix it?? Anyone got any ideas at all?? Any advice at all would be very much appreciated. Thanks in advance... Hi, I own a Web Hosting company, though despite my knowledge of CSS coding, I cannot for the life of me find out what CSS script is causing a problem on my site. If you visit my site, dim-wit.com, you'll see that there is a horizontal bar at the bottom of the page. I can't get rid of it. If you can help, any suggestions would be welcome. Thanks in advance. Hello all! I wasn't sure where to post this since I don't know where my problem lies, in css or php. In a nut shell, when displaying values from mysql database in a css div, the data is displayed correctly 9 times out of 10, but there is always that one time it is messed up. Thank you for your help. Let me know if you need to take a look at my code (it is pretty lengthy to be posted on here). I am trying to position the background image of a td with a random x value. I was trying to call a js randomizing function, had no luck. Is there any way to do this? Heres what I have, I need that -125px value to be random. .bg2 { background: url(testbg1.jpg) repeat -125px 0px; } If you go to the following http://curley-construction.com/cc/ in IE6, you'll notice a break in the footer. I cannot for the life of me figure out why its being added in IE6, but not IE7 or FF.... I"ll post the HTML: 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" xml:lang="en" lang="en"> <head> <title>Small Business Credit Cards</title> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <link rel="stylesheet" href="layout.css" type="text/css" /> <!--[if lte IE 6]> <script type="text/javascript" src="supersleight-min.js"></script> <![endif]--> </head> <body> <div id="pagewidth"> <div id="header"></div> <div id="wrapper" class="clearfix"> <div id="belowHeader"></div> <div id="maincol"> <div id="maincolInner">Main Content Column </div> </div> <div id="leftcol"> <div id="leftcolInner">Left Column</div> </div> </div> <div id="footer"> <div class="top"></div> <div class="content"></div> <div class="bottom"></div> </div> </div> </body> </html> ..and the CSS from layout.css Code: * { margin:0; padding:0; border:0;} html, body{ margin:0; padding:0; text-align:center; background: #E2EBF0 url(images/BG.jpg) repeat-x top; } #pagewidth{ width:1036px; text-align:left; margin-left:auto; margin-right:auto; } #wrapper{ background: url(images/pageBG.png) repeat-y; } #header{ position:relative; height:131px; background: url(images/header.png); width:100%; } #belowHeader{ background: url(images/headerBtm.jpg) left no-repeat; height: 36px; width: 297px; margin-left: 17px; } #leftcol{ width:166px; float:left; position:relative; padding-left: 17px; } #leftcolInner{ background-color: #000; } #maincol{ float: right; display:inline; position: relative; width:835px; padding-right:18px; } #maincolInner{ background-color: #555; } #footer{ clear:both; } #footer .top{ background:url(images/footerTop.png) no-repeat; width:1036px; height:13px; } #footer .content{ background:url(images/footerBG.png) repeat-y; padding:0; margin:0; width:1036px; /*padding: 20px;*/ } #footer .bottom{ width: 1036px; background:url(images/footerBtm.png) no-repeat; height:41px; } /* *** Float containers fix: http://www.csscreator.com/attributes/containedfloat.php *** */ .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix{display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix{height: 1%;} .clearfix{display: block;} /* End hide from IE-mac */ /*printer styles*/ @media print{ /*hide the left column when printing*/ #leftcol{display:none;} #twocols, #maincol{width:100%; float:none;} }
Any clue on this? Thanks in advance! for reference the two pages a 1) www.yahn.org/default.php 2) www.yahn.org/register.php ok both pages have 4 divs - div.main which has 3 divs inside of it. div.mainnav div.maininfo div.rightnav. the css for the divs is this Code:
div.main
{
clear: both;
font-family: verdana;
display: block;
}
div.maininfo
{
width: 60%;
display: block;
float: left;
margin-left: 2px;
}
div.rightnav
{
display: block;
float: right;
width: 18%;
}
div.mainnav
{
display: block;
float: left;
width: 20%;
font-size: 10px;
}
if you add up the widths its only 98%. yet on one page the div.rightnav gets dropped down and on the main page it doesn't. can anyone tell me how to fix this or why it is happening? I've been designing a template for my phpBB install to make it integrate with my site better, and what I have so far I like, but I noticed one small problem. I'm not sure if it's a bug in mozilla or what the cause is, but at random times my Author details column will take up 100% of the screen with, when it's defined via css to only take up 12%. A simple reload is all that is required to fix it, but it can be quite annoying when it happens. The problem only seems to happen on the post view, which is available he http://kicken.mine.nu:8008/forums/viewtopic.php?t=4 It seems I have more luck getting it to happen if I start clicking around between the Home page and the post view, or from the index to a post view. I havn't had access to any browser other than mozilla to check things in either, so I'm not sure what results will show in other browsers. I am experiencing some random CSS layout issues. When I VPN into my work and view the website the layout will sometimes break. However when I refresh the page this will fix it most of the time for that page only. If I browse to another page and come back to the original page, it is broken again. This only happens when I am not on the internal network. When I am on the internal network the entire site looks fine and works like it is suppose to. Anyone know of any neat tricks to solve this kind of problem? It is mainly the CSS background-images that are being placed 10 or so pixels from where they belong. In both FF and IE, my site http://niosis.awardspace.com/polend.html doesn't display right. Look at the link below to see exactly how it is supposed to look. Here is how it is supposed to look: http://niosis.awardspace.com/tempsliced.html but of course that uses tables so I'm fixing it, and as you could see in the previous link having problems doing so. and if you think it looks bad in Firefox, just open up internet explorer and take a look at it. ewww.... Anyways, thanks in advance to anyone who can help me. The XHTML Validates strictly. How can I randomize text size on a website? Like the ones done with the "tags" found on many wordpress blogs? Nothing too crazy, I just want to display words randomly and have some of the text bigger than others. Separately, they both work perfectly. The css-script for a beating heart does what it should do: feature a beating heart (or rather, image of a heart). The random background cycling script chooses a new background every 10 seconds. However, put together, they still work, only every 10 seconds, the screen blinks black (the background cycler does not feature a transition on its own), both the background and the heart (and everything else on screen) blink out of existence for a split-second and then everything is back again. I've managed to determine, despite knowing absolutely nothing about CSS and JS except for what little I've learned today through tinkering with the scripts, that if I remove the variable "infinite", the heart will beat only once after each transition and the blinking glitch will not occur, so it has something to do with that. <b>What I want is this:</b> A heartbeat animation that's infinite with a background that cycles through a set number of backgrounds every X seconds without any kind of transitions or blinking effects. The heartbeat CSS-script: Code: }
.heartbeat {
width: 50px;
-webkit-animation: beat 1.0s ease-out infinite normal;
}
@-webkit-keyframes beat {
0% {
-webkit-transform: scale(1.0) rotate(0deg);
}
65% {
-webkit-transform: scale(1.1) rotate(0deg);
}
75% {
-webkit-transform: scale(.9) rotate(0deg);
}
100% {
-webkit-transform: scale(1.0) rotate(0deg);
}
}
The background cycler (html-file): Code:
<?xml version="1.0" encoding="UTF-16"?><html><head>
<script src="configuration.js"></script>
<script type="text/javascript">
document.write('<style type="text/css">body{background: black url('+WALLPATH+((Math.floor(Math.random()*WPNUM))+1)+'.'+IMGTYPE+');}</style>');
setTimeout("window.location.reload(false)",CHANGELENGTH*60*1000);
</script>
</head></html>
The background cycler (js-file): Code: var WPNUM = 2; var WALLPATH = "Wallpapers/"; var IMGTYPE = "png"; var CHANGELENGTH = 0.1; I've just been given the assignment to write a script that given a set of form elements by the user it will create a page with those form elements displayed and a submit button on the bottom. The form elements the user defines can be text fields, text areas, dropdown boxes, option groups, and checkboxes. The user also gives me a title for each form element. He can give me these form elements in any order and I need to display them in that order on the page. My question is, how do I arrange these form elements so they always look good together and I don't have funny gaps or unprofessional looking design? It would be easy if it was just text fields and area, but then I have to throw in option groups and checkboxes that can be any number in a row. Does anyone have some good form organization rules that could help me? Thanks!! Hey, I think i just need someone else to look at this for me. I've been coding all day and would probably be able to figure this out if I just went to bed and did it tomorrow. If you roll over an image that's alson an anchor at www.deeperdevotion.com/wp, you'll find that it places a background-color or underline or both on it. The thing is, I can't find the code in my CSS that's causing me the trouble. my css is located at www.deeperdevotion.com/wp/wp-content/themes/dd/styles/101106.css Thanks. Hello everyone, I am hoping I could get some help on this. I'm the new Marketing guy at this company. One of my duties is to fix an issue with our website which was built by the last guy to sit in this chair. I may not know how to build a proper webpage, but this guy knew exactly how not to do it and ran with just that. So, the issue lies within this example page: tinyurl.com/rediculouswebsite The footer ends up under-lapping the table when viewed in IE (when not in compatibility mode) and Firefox. I know this is a ridiculously constructed site, I just need to fix this one problem and be done with web development forever. High fives and scotch from my boss very well may ensue. Thank you all very much. Hello. I am new at css and web design so if these are easy problems please excuse. First of all, the website url http://www.onlinecasinoboss.com In Firefox, the unordered lists <ul> in the left column do not display correctly. The left margin is way too big. I'm not sure why, please look at the page in IE to see what I want it to look like. And in Internet Explorer, the spacing between my top image, header bar, and main page is screwy. There should be no space between the header image and header bar (the flags are in this area). Also there should only be 2px spacing between the header and the main page, however it appears there is atleast 24px there. Again please refer to the page in FF to see what I want it to look like. I like css, and have decided to pursue my first design in css based off of the many professional designers reconmendations and reviews. But I must say it is a major headache to deal with cross-browser/platform display problems. And what professional designer wants to rely on 'css-hacks' when producing a product for a major vender. Just beginner bitching. Thanks for the help! I have created a nav bar with css using the widely distributed '<ul>' coding. The problem I am having I think is with the anchor tags. The look of the nav bar is fine but depending on the float position the anchor tag immediately next to it won't follow the css. Here is the css.. body { margin:0; padding:0; } div.container { text-align:center; } div.center { margin-top:20px; margin-left:auto; margin-right:auto; width:800; text-align:left; } div.left { float:left; width:100; height:500; background-color:#007700; } div.right { float:right; width:130; height:500; background-color:#e8e8e8; font-size:10pt; } div.header { clear:both; width:40%; } div.footer { clear:both; margin:0; width:100%; } ul { float:left; width:100%; padding:0; margin:0; list-style-type:none; } a.topmenu { float:right; width:5em; height:2em; text-decoration:none; color:#005500; background-color:#e8e8e8; padding:0.2em 0.6em; border-right:1px solid #005500; } a.topmenu:hover { background-color:#005500; color:#e8e8e8; } a.topmenu:visited { float:right; width:5em; text-decoration:none; color:#005500; background-color:#e8e8e8; padding:0.2em 0.6em; border-right:1px solid #005500; } li { display:inline; } a.leftmenu { color:#ffffff; text-decoration:none; } a.leftmenu:hover { color:black; } a.leftmenu:visited { color:#ffffff; text-decoration:none; } and here is the html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <link rel="stylesheet" type="text/css" href="newstyle.css"/> </head> <body> <div class='container'> <div class='center'> <img src="fdat_logo_short.jpg" width=250 /> <ul> <li><a class='topmenu' href="contact.php">Contact Us</a></li> <li><a class='topmenu' href="about.php">About Us</a></li> <li><a class='topmenu' href="services.php">Services</a></li> <li><a class='topmenu' href="news.php">News</a></li> <li><a class='topmenu' href="home.php">Home</a></li> </ul> </div> </div> </body> </html> I am sorry, I can't show the page as an example as it is a clients website. Basically the problem is the box model (I think). In IE the background file loads fine, but in FF it doesn't. It is a box inside a box, inside a box. I have tried body #divname html # divname html > divname and all other selector variants I can think of to no avail. I was wondering if this is a known problem. I thought it might be z-indexing but div's inside the affected div are picking up their background images. Hello all, Apologies to be asking for help on my first post, but I've scoured the internet looking for what is probably a quick fix but without the terminology I'm losing hours - time to ask for help! my site is englas.pl and in forefox it's fine. In ie8 it seems to be fine as well, the problem is with ie 6&7. The CSS validates according to the w3c site. (Sorry, can't add urls as i'm a new user) ie6&7 'cuts' off the bottom section of text where the container meets menu-bottom-bkg. At least this is what is visibly the case when you look at the webpage. The custom div look like this: #container { background: #FFF url(../images/bkg_container.png) repeat-y; min-height: 100%; width: 1190px; margin: 0 auto; padding: 0 14px 0 14px; } #header { background: url(../images/bkg_header.png); height: 127px; width: 1160px; margin: 0; padding: 15px 0 0 30px; } #menu-top-bkg { background: url(../images/bkg_menu_top.png) no-repeat left top; height: 128px; width: 1190px; margin: 0 0 -128px 0; } #wrapper { overflow: auto; background: url(../images/bkg_menu.png) repeat-y left; min-height: 500px; width: 1190px; margin: 0; padding: 0; } #menu { float: left; background: none; min-height: 370px; width: 159px; margin: 0; padding: 110px 0 0 0; } #content { float: right; background: url(../images/bkg_content.png) no-repeat right top; min-height: 400px; width: 763px; margin: 0 0 0 25px; padding: 15px 243px 10px 0; } #menu-bottom-bkg { background: url(../images/bkg_menu_bottom.png) no-repeat; height: 141px; width: 1190px; margin: -111px 0 0 0; } #footer { background: url(../images/bkg_footer.png); height: 100px; width: 1190px; margin: 0; padding: 16px 0 0 0; } I've gone through the html and i can't find any evidence of it being this, so i'm hoping that the css work above doesn't comply with something in the ie6&7 coding spec. I've read the guidelines to posting, so I've edited the post as much as possible to be helper friendly! Many thanks to all, doodlebug I have two problems, 1. One page of my website centers nicely in everything but but IE, trying to fix. Can't figure out what to do. 2. I attempted to use Firebug to see if I could figure out why this one page does not center vs all the others but it escapes me. Then I realized I was using Firebug in Firefox, how would it know there was a problem in IE. I am a new member of this forum so I can't post a URL for you to look at. I have two pages that are giving me problems, only in IE of course. On the first, http://www.jaypaulstudio.com/galler...ure/summer.html or even http://www.jaypaulstudio.com/galler...eachdancer.html I think the difference in margins causes the problem, but the scroll bar extends outside of the bounds of the page (the blue part). The second, http://www.jaypaulstudio.com/galler...ture/budda.html is different; I cannot make the page contents left align without breaking everything else in the content. My style sheet is he http://www.jaypaulstudio.com/main.css Any solutions or suggestions would be much appreciated. Even a good site on how to hack css for IE... Sarah |
|||||||