CSS - Very Nub Question (and Probs In Wrong Place :s )
Hi i am currently designing my first webby with out using frams and tables for the layout (using dreamweaver 2004mx) and i am now using layers and css for the layout but my problem is this:
i used to use an iframe to link things from my nav bar to load in. but now i am not using frames is there anyway to make content load inside a layer on the page or do i have to make separate pages for each link and expect it to load a new page each time? i know that usin css is alot faster than using frames but even when linking to seperate pages you get that little blink as the pages switch.... any help what so ever would be much appreciated thanks in advance N3cr0 Similar TutorialsCan anyone tell me why my popup menus are displaying with a 40 or 50 px wide gap between them and the top level menu on this page? The link Hover over "For Professionals" in the left hand navigation to see the problem. I am new to javascript. This is a menu created by DMAPI menu builder. I am not new to CSS. I suspect that this is a CSS problem. In Firebug I can see padding and margins but cannot find where they are being defined. I have tried to add margin: 0; and padding: 0; but they are getting overridden. Any help would be appreciated. When I view my Dreamweaver CS4 html page on Firefox, the AP elements I used on it are not viewing properly. They are getting bumped down a bit and thus misaligning with other elements on the page. Any suggestions? Thanks. friends i have table.. that table corner must be in the curve form.. i dont know to do.. plz send the links for my problem curve edge is my output.. for that related css link plz thanks in advance hey all, i have a image which is a link and i wanted to change the blue box around it to something more inkeeping with the site. So i did this css Code: a.greenToblack { color:#000000; font-size:13px; text-decoration:none; font-weight:600; font: Georgia; } a.greenToblack:link {color:#000000; font: Georgia;} a.greenToblack:visited {color:#000000; font: Georgia;} a.greenToblack:hover {background-color:#667138; color:#667138; font: Georgia;} and impletmented it as so Code: <a class="greenToblack" href="product.php?range_id=<?php print ($row->range_id) ?>"><img src="images/tmbnail/<?php print ( $row->tmbnail )?>" width="75" height="75" border="2"></a> it works perfectly in FF but not in IE..... any ideas why?? thanks RF Hello why wont this change the effects of my td Code: #tabs td.start { background:url("/pdp/images/style_images/default/section_on_left.gif") no-repeat left top; } #tabs td.start a { background:url("/pdp/images/style_images/default/section_on_right.gif") no-repeat right top; font-weight:bold; } #tabs td.start a:link { color:#fff; } #tabs td.start a:visited { color:#fff; } #tabs td.start a:hover { color:#64bfdb; text-decoration:underline; } #tabs td.start a:active { color:#64bfdb; } any help much appreciated Hi, I'm having problems with FireFox (or rather it's having problems with my coding). If you go to he http://jigsaw.w3.org/css-validator/...&usermedium=all It's all valid css but http://www.wnv2.com/v11.php shows up funny in FF but looks great in IE/Maxthon. View course for html, but the css code is in the validation link, Any help would be great! Thanks Hi all, I've always learned what I know (which isn't all that much, but wtf) from trying to fathom the source code of cool sites I visit and then attempting to implement those things I like into my own page. I recently visisted a very cool site that uses a CSS drop down menu. The only problem is it's got one level and I want more than that. I've attempted to tweak the code through trail and error and my basic basic understanding of CSS, but to no avail. When you roll over the top level menu, the secondary displays as it should but the 3rd also displays before you roll onto the link that should activate it. I'm sure I'm just missing somethign small but after working on this for a number of days, trying to figure it out, I appeal to you all for help! Thanks in advance for your support and suggestions! Here is the HTML code for the section (I edited it just so you can see what I'm looking for) <div id="navigation"> <ul id="nav"> <li class="nav"><a href="" onclick="return false">Novels</a> <ul class="subnavnovels"> <li class="subnav"><a href="" onclick="return false">Lawson Vampire Novels</a> <ul class="subsubnav"> <li class="subsubnav"><a href="fixer.html">The Fixer</a></li> <li class="subsubnav"><a href="invoker.html">The Invoker</a></li> <li class="subsubnav"><a href="des.html">The Destructor</a></li> <li class="subsubnav"><a href="syn.html">The Syndicate</a></li> </ul> </li> </ul> </li> And here's the CSS code for the nav section: /* NAVIGATIONAL ELEMENTS */ #nav {z-index:3;} #nav a {color:#FFF;text-decoration:none} #nav a:hover {color:#07B6D0;text-decoration:none} li.nav {margin-right:24px;} ul { /* all lists */ padding: 0; margin: 0; list-style: none; } li { /* all list items */ float: left; position: relative; } li ul { /* second-level lists */ display: none; position: absolute; top: 1em; left: 0; padding:3px 7px; border:1px solid #27444C; } li ul ul { /* third-level lists */ display: none; width: 100px; position: absolute; top: 0; left: 140; padding:3px 7px; border:1px solid #27444C; } li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */ top: auto; left: auto; } li:hover ul, li.over ul { /* lists nested under hovered list items */ display: block; clear:left; background:url(menubg.png); } .subnavnovels {width:140px;} .subnavshorts {width:140px;} .subnavnonfic {width:160px;} .subnavother {width:170px;} .subnavcommunity {width:170px;} .subnavabout {width:100px;} .subnavcontact {width:100px;} li.subnav {float:none;} li.subsubnav {display:inline;} Hi Folks, Anyone have any idea how I can solve this problem? I'll be most grateful. I'm trying to position a DIV element to the top-right of another fluid DIV? The blue-toned photo [please see screenshot] is going right outside of the white content area. What it should look like What it sadly does look like If I get this working, will I have problems with the body text in different pages? Say, if there's no photo, can I get the text to move up automatically? The photo is not within the flow so I have the text at a fixed position. Finally, the footer with [top-of-page arrow] seems detached when the browser is maximised. Hoping someone can help - I've been at this a week. John Please let me know if I need to post my questions more clear. I have read the "how to post css questions" but I don't seem to be getting any responses. BTW: if the site is working in IE for you please let me know. I appreciate your help. I'm new to CSS and this website. I have been working on a website that seems to be displaying properly in Chrome, FireFox, Opera and Safari. I am having problems getting it to display properly in Internet Explorer. To see the proper lay out look at it in Safari, Opera, FF or Chrome. the page is at : http://www.tmdessertworks.com/neotmtest/menutest.html Here is the CSS: Code: <style type="text/css"> <!-- body{ color: #e8d898; font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif; background-color: #111111; } td{ vertical-align:top; width: 194px; } td.menutitle{ width: 700px; } td.thumbnail{ width: 150px; text-align:right; } .navmenu1{ text-align:center; padding-left: 170px; background: url(sitegrax/menuback_1.jpg); } .menu1 { padding-left: 22px; padding-top: 6px; padding-bottom:6px; background: url(sitegrax/menuback_1.jpg); } .endcap { text-align:center; padding-left: 64px; background: url(sitegrax/menu_bottomcap.jpg); background-repeat:no-repeat; } .style { color: #FF6600; font-style: italic; } --> </style> I have validated my CSS and HTML and I have searched the forums but don't quite know what is happening to fix the problems: 1. Backgrounds not filling to 800px 2. Small spaces between <div> tags 3. Top navigation menu displaying vertical and not horizontal. Thank you for your help Hi. Three issues with this menu - I've been trying to get a horizontal hover/nested list to work where the submenus are displayed inline underneath the main menu. 1. I've got the arrangement fairly close in FF, but in IE the top level items are jumping around all over the place on hover. 2. The javascript came from alsacreations, and seems to work pretty easily, but the submenus fail to disappear on rollOut unless you are going to another of the menu items. Any ideas? 3. Do you think there is anyway of leaving the top level links in their "active/hover" state when the mouse has moved to the submenus? So the coloured background that appears on hover stays there whilst hovering over the submenus? I've isolated the xhtml, styles and script into a page (it's a rework of a current page and is pretty incomprehensible in-situ!) at http://www.prioritypie.f2s.com/KSAV6/menuTest.html. Cheers for any advice. And I forgot to ask what the issue is with IE and transparent borders - they seem to appear black and of variable width! Hi people I have been developing a new cms system www.spindogs.co.uk The pages work using an autostretch facility but for some reason Firefox,Safari and IE5 Mac wont stretch. The bacground stays a set length? I initially thought it was the DOCTYPE so messed around with that but it doesnt seem to be that either? Can anyone help me please!!!! The troubled site in question First, regarding the float issue. I did so well on this site earlier with the floats that I zipped right through it in about an hour. Looked great. After more updating and revision, I discover that in IE6, it looks great, but Net7, Fire1, and Opera 6, the floats (left and right column) are driving into the subcategory header above. I set the top margins for the floats to 85 pixels which makes it look ok in N/F/O, but lousy in IE. So I then used the * character for IE's setting. It looks fine. Question though, what am I missing and must I create the two settings for the different browsers? I'm not quite sure what changes I had made caused such a different affect. Secondly, when I open the site on IE, I get that stupid ActiveX message on top. What is causing this and how do I resolve it? That will be a problem and I guess is more of a priority to me than the floats. Thanks to all for your help. I love this board! Tim So I've tried to make my site www.thespinzone.com work for all browsers, but I'd settle for IE & Mozilla, however I have run into a big problem with IE (and it appears ONLY 7+) and Mozilla, all versions. First the IE problem is that it's adding a horizontal scroll bar on my main page, not the others, and I can only assume it has something to do with the RSS headlines positioning? screen shot 1 Now I'm having 2 problems with Mozilla: 1st: No matter how I try manipulate the CSS, the headlines won't float to the right, and they end up being squeezed next to my picture which is a waste of space and looks silly. Here is a screen shot of how it looks. Ideally I want the headlines to be on the right hand sight of the page, as far as it can be. I WANT the layout to look, MINUS the horizontal scroll bar like that first IE screen shot. 2nd: clicking or right clicking on any of the 'headline' items, moves that entire part underneath my picture and I have no idea why? In case it doesn't do that with your mozilla version, here's a screen shot The relevant CSS is on the index page so rather than me cut & paste it (unless that's preferred) then 'view source'..... I appreciate any and all help and advice. Thanks Hi, after having the problem with the div's in IE I got a new problem. I got a clock placed in my sidebar and under it there is some text. In FF it's placed right but in IE not again :S How can I fix this? Link: www.windmolentechnologie.tk Code: index.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE>Windmolentechnologie</TITLE> <LINK HREF="http://windmolentechnologie.webs.com/css/default.css" REL="stylesheet" TYPE="text/css" /> <style type="text/css"> .hiddenPic {display:none;} </style> <noscript></noscript><!-- --><script type="text/javascript" src="http://www.freewebs.com/p.js"></script><script type="text/javascript" src="http://windmolentechnologie.webs.com/js/nav1.js"></script> <script type="text/javascript" src="http://windmolentechnologie.webs.com/js/klok.js"></script> <script src="http://static.freewebs.getclicky.com/44044479.js" type="text/javascript"></script><noscript><img alt="Clicky" src="http://in.freewebs.getclicky.com/44044479-fwdb4.gif" /></noscript> </HEAD> <BODY> <div id="container"> <div id="nav"> <img src="http://windmolentechnologie.webs.com/images/Nav2.png" USEMAP="#nav" border="0" name="nav1"> <map name="nav"> <area shape="rect" coords="261,40,339,120" href="home.html" alt="Home" target="iframeinhoud" onMouseOver="imageChange('nav1','alt1')" onMouseOut="imageChange('nav1','alt0')" /> <area shape="rect" coords="341,40,419,120" href="inhoud.html" alt="Home" target="iframeinhoud" onMouseOver="imageChange('nav1','alt2')" onMouseOut="imageChange('nav1','alt0')" /> <area shape="rect" coords="421,40,499,120" href="logboek.html" alt="Home" target="iframeinhoud" onMouseOver="imageChange('nav1','alt3')" onMouseOut="imageChange('nav1','alt0')" /> <area shape="rect" coords="501,40,579,120" href="profielen.html" alt="Home" target="iframeinhoud" onMouseOver="imageChange('nav1','alt4')" onMouseOut="imageChange('nav1','alt0')" /> <area shape="rect" coords="581,40,659,120" href="bedrijven.html" alt="Home" target="iframeinhoud" onMouseOver="imageChange('nav1','alt5')" onMouseOut="imageChange('nav1','alt0')" /> </map> </div> <div id="banner"> </div> <div id="content"> <div id="new"> <table id="klok"> <td id="kloktd"> <img src="dg8.gif" name="hr1"><img src="dg8.gif" name="hr2"><img src="dgc.gif" name="c"><img src="dg8.gif" name="mn1"><img src="dg8.gif" name="mn2"><img src="dgc.gif" name="c"><img src="dg8.gif" name="se1"><img src="dg8.gif" name="se2"> </td></table> <p id="new1">Dit is een testlijntje</p> <p id="new2">lolololol</p> <p id="new2">what happens if this line is a little bit too long for the box?</p> <p id="new3">fredje pietje ludo</p> </div> <div id="inhoud"> <iframe name="iframeinhoud" src="home.html" frameborder="0" height="500" width="540" scrolling="no" allowtransparency="true"></iframe> </div> </div> <div id="footer"> </div> </div> <img src="http://windmolentechnologie.webs.com/images/InhoudHome.png" alt="InhoudHome" title="InhoudHome" height="500" width="540" class="hiddenPic"> <img src="http://windmolentechnologie.webs.com/images/InhoudLog.png" alt="InhoudLog" title="InhoudLog" height="500" width="540" class="hiddenPic"> </BODY> </HTML> Code: css (will make this shorter later) html { margin:0; padding:0; height: 100%; font-family:Tahoma,"Times New Roman",Georgia,Serif; font-size:14px; } body { background-color: #f2f3ed; margin: 0px; padding: 0px; height: 100%; z-index:0; position:relative; text-align: center; } #container { position:relative; height:auto !important; min-height:100%; width: 760px; margin:0 auto; } #nav { width:100%; height:160px; background: url(../images/Nav.png) no-repeat; } #banner { width:100%; height:101px; background: url(../images/Banner.png) no-repeat; } #content { width:100%; height:500px; background:transparent; } #new { background: #e6e8dc url(../images/New.png) no-repeat; width:220px; height:500px; float:left; text-align: left; } #inhoudhome { background: #e6e8dc url(../images/InhoudHome.png) no-repeat; width:540px; height:500px; float:left; text-align: left; } #inhoudlog { background: #e6e8dc url(../images/InhoudLog.png) no-repeat; width:540px; height:500px; float:left; text-align: left; } #inhoudprof { background: #e6e8dc url(../images/InhoudProf.png) no-repeat; width:540px; height:500px; float:left; text-align: left; } #footer { background: url(../images/Footer.png) no-repeat; height:50px; width:100%; position:relative; } p#inhoud1 { margin:35px 5px 0px; font-family:Tahoma,"Times New Roman",Georgia,Serif; font-size:14px; } p#inhoud2 { margin:0px 5px 0px; font-family:Tahoma,"Times New Roman",Georgia,Serif; font-size:14px; } p#inhoud3 { margin:0px 5px 10px; font-family:Tahoma,"Times New Roman",Georgia,Serif; font-size:14px; } p#new1 { margin:35px 5px 0px 25px; font-family:Tahoma,"Times New Roman",Georgia,Serif; font-size:14px; } p#new2 { margin:0px 5px 0px 25px; font-family:Tahoma,"Times New Roman",Georgia,Serif; font-size:14px; } p#new3 { margin:0px 5px 10px 25px; font-family:Tahoma,"Times New Roman",Georgia,Serif; font-size:14px; } table.tabellog { border-collapse: collapse; margin:37px 25px 10px 6px; width:510px; border-width: 1px; border-style: solid; } table.tableprof1 { border-collapse: collapse; margin:37px 25px 5px 6px; width:510px; border-width: 1px; border-style: solid; } table.tableprof2 { border-collapse: collapse; margin:5px 25px 5px 6px; width:510px; border-width: 1px; border-style: solid; } table.tableprof3 { border-collapse: collapse; margin:5px 25px 10px 6px; width:510px; border-width: 1px; border-style: solid; } td { padding:5px; border-width: 1px; border-style: solid; } td.datlog { text-align:center; font-weight:bold; width:90px; } td.omschlog { font-weight:bold; } td.tijdlog2, td.datlog2 { text-align:center; } td.tijdlog { text-align:center; width:100px; font-weight:bold; } td.kol1 { font-weight:bold; width:125px; } td.kol1foto { width:100px; height:125px; } table { border-color:#000; } table#klok { margin:64px 5px 0px 57px; border-width:0px; } td#kloktd { height:45px; border-width:0px; } Hi! I've got a problem thats driving me mad. i got two divs inside my Content-div. The Text-div and the Box-div at the moment they are arranged like this: data.fuskbugg.se/dipdip/thisishowitis.jpg In the Box-div i've inserted two pictures that i want vertical aligned and the Box-div should be to the right i want it to look like this data.fuskbugg.se/dipdip/howitshouldbe.jpg with the Text-div and the Box-div next to each other. NOT on top of each other PLEASE help me out / Dippah Is it possible to use CSS to place one image over the top of the other? For what I mean go he celticblues dot com/test/test.html I could do the same thing via photoshop, but I want to do it with CSS as I have several to do and I am not sure of the relative sizes yet and don't want to keep redoing the photoshop thing. Ed Hi Everyone, I've been trying for weeks now to get my footer to sit at the bottom of my screen. I've read all of the how-to articles regarding footers and tried what seems like everything! After some investigation with Firebug I've determined that my problem seems to be some of my "wrapper" divs. My container and pagewrapper divs should be encompassing everything on the screen but they are not. If you wouldn't mind taking a look for me, I would REALLY appreciate it. Right now I have the grey footer just chillin' in the middle of the page as you can see. www.RoundtopRiders.com/v2/ THANK YOU!!! Jason Hi, I have a problem with creating a CSS banner div. I can't seem to get the .centeredbox to the absolute top of the page, while keeping it centered with auto margin: Code: <html> <head> <title>Untitled Document</title> <style> .wrapperbox {text-align: center; } .centeredbox {width: 682px; margin: 0 auto 0 auto; text-align:left; background-color: #000000;BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 11px solid; BORDER-LEFT: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid;} </style> <div class="wrapperbox"></div> <div class="centeredbox"></div> </head> <body> </body> </html> With this code it keeps a little space between the div and the top of the page. I don't want that space . Does anyone have a solution? I would like to have a header on my page with my logo in the top left corner, and a cloud image going the rest of the way across the top. I set up the cloud image as a background, but wanted the logo to be clickable so it is set up in the html as an image. The problem is that I want the image to be fixed in the corner so that when the visitor scrolls, it stays at the top. It looks good in Firefox and in Chrome, but in IE it is a few pixels offset from the corner and I have no idea how to fix it. See what I mean he felixairservices.com Here is my css for the logo: Code: body { background:#6699BB url('sky.jpg') no-repeat top right fixed; background-size: 90% 228px contain; } img.logo { position:fixed; top:0px; left:0px; margin:0; padding:0; border-style:none; } And here is the html I am using to display it: Code: <a class="logo" href="index.html" border="0"><img class="logo" src="Logo.jpg" valign="top" align="left" border="0"></a><br> Any help would be appreciated. I'm just a simple AC contractor trying to build a decent web page for my business. Hi I would like to know where should I go to get an easy, small script so that I can use multi-level drop down menus in my website? I googled and came up with a supposed menu framework.. it looked easy but when I tried it, it didnt work.. |