|
CSS - Removing Top Border When Placing Flash Movie
Well the title pretty much says it. How can I remove the little border from the top of the flash movie player (see example here : http://www.aplistia.com/flashin.htm ) if you see carefully, you will see a natural separation of around 4 - 6 pixels tall. I want to completely put my flash file on top, no spaces. Ive tried a couple of things but I couldnt fix it. Thanks in advanced .
Similar TutorialsHi all, I have a problem with a site I am developing. I am using CSS and all was well until I placed a Flash Movie on the homepage. The general layout is as follows: Code: <div id="wrapper"> <div id="banner"></div> <div id="nav">links etc</div> <div id="content">Content text etc</div> <div id="flashMovie">Flash movie here</div> <div id="footer"></div> </div> The 'nav' div uses a ProjectSeven popmenu which works fine. It's Z-index is something like 2000. The dropdown menu hides behind the 'flashMovie' layer every time, but appears in front of the content layer??? I have tried messing with the z-index of the 'flashMovie' div but to no avail. I have tried absolute positioning, floats, everything I can think of but with no success. Any advice on what the problem could be would be greatly appreciated. I apologise for not having the actual site online, but Its under development on my other machine. Thanks in advance, Duncan I want to create a Flash movie that will stay locked to the bottom corner of the webpage, even when the user scrolls down. Is this an HTML question? Please advise... Hi, folks. I'm running into a pretty serious problem to which I'm really, really hoping someone will know a solution. We use a menu system on our site which is made up of layers. It provides for flyout-hierarchical menus, and up until now has caused me no grief. However, now that I've embedded a flash movie onto a particular page the layers that comprise the flyout menu items are hidden beneath the Flash movie. I've tried putting the object tag inside a div and setting the z-index of the div to 1 (and also to -1) but that didn't work. Can anyone take a look and let me know if they have any ideas? http://www.unbc.ca/test.html Cheers and TIA, Pablo I have a blog and I want to put my text inside a border/wrapper. So I've made the border and sliced it up into 3 parts: top middle and bottom. I want to place the text content within the middle of this graphic and so I figure I need to make the sliced images as a background using css and then type whatever I want over it. So I did this but dont know what Im doing wrong: Code:
<style type="text/css">
top {background: url('/images/t1.gif') ;}
middle {background: url('/images/t2.gif') ;}
bottom {background: url('/images/t3.gif') ;}
</style>
<div class="top" id="top"></div>
<div class="mid" id="mid">
<div class="content" id="content">Content Goes Here</div>
</div>
<div class="bottom" id="bottom"></div>
Any help is appreciated. JH Hey everyone, I am wondering if there is a way to get rid of the border that a:active has by default. Because I find that border annoying. I thought adding border: 0 would do the job, but doesn't appear to, anyone have any thoughts? I use the following CSS for my links, and use a border-bottom to give them a dashed underline... Code: a {
color: #AC4870;
border-bottom: 1px dashed #DDDDDD;
text-decoration: none;
}
a:hover {
color: #DDDDDD;
border-bottom: 1px dashed #AC4870;
text-decoration: none;
}
This underline also shows up under my images that are used as links. How would you write CSS that would remove this dashed border-bottom from my image links? Thanks ok so I have a menu done via CSS and initially I set up a left border on it so it shows up like this: | menu 1 | menu 2 | menu 3 Now with the help of JQuery I am trying to get rid of the | on the menu 1.. Jquery is applying the class to the correct a selector but the border is not being removed? if I change the css to "border: 1px solid black" it applies the border to the whole of menu 1 but the left border still stays WHITE? the css class is: .removeBorder { border:0; } the menu CSS is: Code:
ul.navigation-1 li a,
ul.navigation-1 li a:link,
ul.navigation-1 li a:visited
{ padding:4px 10px; display:block;text-decoration:none; border-left:1px solid #ffffff;color:#ffffff; width:100%; height:13px; }
If i remove the border-left attribute from here, the border goes away.. and via Jquery I am targetting the A.. so what is the problem? Just a FYI: html code: Code: <div id="left-menu"> <ul class="navigation-1"> <li><a class="removeBorder" href="">Products</a><ul class="navigation-2"><li><a href="">A-Z List</a></li><li><a href=""> Please look at this page http://www.tmhdesign3.com and this one http://www.tmhdesign3.com/real-estate-broker.asp The first one used a flash file, the second does not. On the first page I want the dropdown navigation to overlay on the flash but it does not. I played with z-index to no success... Hi. Have created some simple tabs using table cells. Active tab should have bottom-border color equal to page background-color. Non-active tabs should have bottom-border=black. Works fine in IE, but does not work very well in Firefox. If I remove the border-collapse:collapse on the table, then firefox also work... but I would like to be able to keep the 1px border between each table cell. So is there a way to make this work in both IE and Firefox... and hopefully most other browsers... See code below: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<style type="text/css">
a.menu_top:link {color: #000000; text-decoration: none;}
a.menu_top:visited {color: #000000; text-decoration: none;}
a.menu_top:hover {color: #000000; text-decoration: none;}
a.menu_top:active {color: #000000; text-decoration: none;}
td.menu_top_passive {
background-color: #777;
border-left: 1px #000000 solid;
border-right: 1px #000000 solid;
border-top: 1px #000000 solid;
border-bottom: 1px #000000 solid;
text-align: center;
cursor:pointer;
font-weight: bold;
padding: 5px 20px 5px 20px;
margin: 0;
}
td.menu_top_active {
background-color: #bbb;
border-left: 1px #000000 solid;
border-right: 1px #000000 solid;
border-top: 1px #000000 solid;
border-bottom: 1px #bbb solid;
text-align: center;
cursor:pointer;
font-weight: bold;
padding: 5px 20px 5px 20px;
margin: 0;
}
</style>
<script language="JavaScript">
function change(id, url) {
for (i=1; i<6; i++){
eval("document.getElementById("+i+").className='menu_top_passive'");
}
eval("document.getElementById("+id+").className='menu_top_active'");
}
</script>
</head>
<body style="margin:0; padding:0; background-color:#bbb;">
<br><br>
<center>
1. Load the page.<br>
2. Click Item 4.<br>
3. Click Item 2.<br><br>
Why is the bottom border of the menuelements (table cells) not getting correct in Firefox?<br>
None-active menuelements should have a border-bottom = black, active should have same bottom-border as page.<br>
Notice that I use border-collapse on the table in order to get the cell-border 1px thick between the menuitems.<br>
If I remove border-collapse, then there is no strange behaviour in Firefox.<br>
Any way to get this working in Firefox without breaking it in IE?
</center>
<br><br><br>
<table border="0" cellpadding="0" cellspacing="0" align="center" style="border-collapse:collapse;">
<tr>
<td id="1" nowrap class="menu_top_active" onClick="change('1');"><a href="javascript:;" class="menu_top">Item 1</a></td>
<td id="2" nowrap class="menu_top_passive" onClick="change('2');"><a href="javascript:;" class="menu_top">Item 2</a></td>
<td id="3" nowrap class="menu_top_passive" onClick="change('3');"><a href="javascript:;" class="menu_top">Item 3</a></td>
<td id="4" nowrap class="menu_top_passive" onClick="change('4');"><a href="javascript:;" class="menu_top">Item 4</a></td>
<td id="5" nowrap class="menu_top_passive" onClick="change('5');"><a href="javascript:;" class="menu_top">Item 5</a></td>
</tr>
</table>
</body>
</html>
I have a scrolling DIV and a button which when clicked gives the user the option to insert another such DIV below the existing one. How can I position a new DIV directly below another regardless of the length or height of the first DIV. How would margins play a role? How does one go about placing an image in a paragraph in CSS? I cannot seem to complete this. doug i want to place images: top right, middle right, bottom left, these images should float above any other images or content that is on the page, the must also stay in there positions when the browser is resized. I'm still new to css so can any body help me pls I know this is probably the most asked question here, but I've been playing with it for a while and ... Anyway, this is my page This is my CSS Code: body {font-family: Arial, Helvetica, sans-serif}
td {font-family: Arial, Helvetica, sans-serif}
th {font-family: Arial, Helvetica, sans-serif}
div.container {
width:750px;
margin:auto;
}
div.logo {
float:left;
text-align:center;
width:138px;
height:138px;
}
div.header {
height:65px;
border:1px solid blue;
line-height:50%
}
div.picbar {
height:65px;
border:1px solid red;
line-height:50%;
}
/* The following code creates the navigation items */
#navbar {
clear:left;
float:left;
width:auto;
padding:0;
vertical-align:middle;
}
#navbar li{
margin:2px; /*dictates the space between navbar items */
padding-right:0.5em;
width:120px;
float:left;
text-align:center;
}
#navcol {
clear:left;
float:left;
width: 125px;
padding: 0;
margin: 10px 0 0 0;
font-family: 'Trebuchet MS', 'Lucida Grande',
Verdana, Lucida, Geneva, Helvetica,
Arial, sans-serif;
color: #99CCFF;
}
#navcol ul, #navbar ul{
list-style:none;
margin:0; /* removes indent in IE and Opera */
padding:0; /* removes indent in Mozilla and Netscape 7 */
border:none;
list-style-type:none; /*turns off display of bullet */
}
#navcol li {
border-bottom:1px solid #003366;
margin:0; /*dictates the space between navbar items */
}
#navcol li a, #navbar li a {
display: block; /* enables the entire link box to be clickable */
padding: 5px 0 5px 5px;
border-left: 10px solid #003366;
border-right: 0px solid #508fc4;
background-color: #2175bc;
color: #fff;
text-decoration: none;
width: 100%
}
#navcol li a:hover, #navbar li a:hover {
border-left: 10px solid #99CCFF;
border-right: 0px solid #5ba3e0;
background-color: #2586d7;
color: #fff;
}
div.intro{
margin-left:145px;
position:relative;
padding-top:1px;
font-family:Verdana,Lucida;
font-size:12px;
line-height:150%;
}
div.google{
float:right;
margin-top:10px;
width:305px;
height:255px;
padding:0 0 5px 10px
}
div.footer {
margin-top:50px;
width:750px;
word-spacing:100px;
text-align:center;
float:center;
height:20px;
background-color:#1c64d1
}
div.copyright {
width:750px;
text-align:center;
float:center;
height:20px;
}
a.ft:link { color: white; text-decoration: none }
a.ft:active { color: red; text-decoration: none }
a.ft:visited { color: white; text-decoration: none }
a.ft:hover { color: yellow; text-decoration: underline }
h1.logo{padding:20px;margin:10px}
h2.header{color:blue;font-size:1.2em;padding:20px;margin:10px}
h3.title{font-family:arial;color:green;font:courier}
h4.ftlinks{padding:10px;font-size:12px;color:"dark blue"}
b.subtitle{font-variant:small-caps;font-size:12px;font-weight:bold;after-content:" - "}
What I want to do is have the navbar div be positioned in the center of the red box that I have defined as the picbar div...it should be under the "Funkyfoof - Smarter Spending..." Thanks for your time I'm a little puzzled by this weird display bug by IE7, this bug doesn't occur in IE6. It had to do with the DIV's CSS's border-style. If you set it to double then you notice some random bugs with it. Some of the time, the border is displayed without a problem. Some of the time, it is displayed with some gaps in the line as if it is not being drawn upon. Some of the other time, it is not displayed at all. I noticed if I switch from one tab to another then back, the border appeared as if nothing had happened. I also noticed that if I open the view source that overlapp the web browser then closed it, the border appeared as if nothing had happened. How do you fix that problem? Thanks... I have a larger 22" in screen when I designthe layout of my site. When I viewed it on a small 15" screen the back ground image is making the page scroll horizontially. Here are some sites that fit well on a small screen. What can I do to fix this? http://www.beakable.com/ http://www.gazelletouch.com/ http://www.gummisig.com/ My web site: http://markallen.us Sorry folks, css novice here. But i'm trying to get this div into the center of my browser. It works vertically, but each time I try to sort it out horizontally it goes all over the place - any thoughts on this? Code: <html>
<head>
<title></title>
<style>
.greenBorder {border: 1px solid green;}
.redBorder {border: 1px solid red;}
</style>
</head>
<body>
<div class="redBorder " style=" #position: absolute; _top: 50%;display: table-cell; vertical-align: middle; text-align:center;">
<div class="greenBorder" style=" #position: relative; #top: -50%; " >
stuff
</div>
</div>
</body>
</html>
what am I doing wrong? recommend any good css books? Well, it's been an extremely long night. I've been trying to get this bottom bar element working for at least a couple nights now, and I feel so very close. I've been trying to use footerStickAlt, which would allow me to put this baby down on the bottom of my page and would not overlap or screw up the scrolling when installed. However, as you might be able to tell from my website, http://www.brianmooremedia.com, it's not working too well. Here is my CSS: http://www.brianmooremedia.com/style.css If anybody can help me make this red bar stop and stay down once the window size has gotten smaller than it, please let me know! Thanks a ton, Brian Hello all.. trying to do something that should be pretty simple (I'm not the best CSS person). Instead of using a table am trying to use just CSS. I want to place a form button styled as a link and some text into a colored box but my css is not working. html is... <span class="yellowbox"> <form name="view constituent" method="post" action="constituents_viewm.php"> <input type=submit name=submit value=$lname, $fname" class="link_submit"> </form> <br /><br />text </span> and css is... .yellowbox { background-color:#fdffe3; margin:10px; padding:10px; border: 1px #000; font-size:13px; width:420px; height:100px; } .link_submit { color:#116500; font-size:17px; font-family:Calibri, Arial, Helvetica, sans-serif; background:none; border:none; display:block; text-decoration:underline; cursorointer; float:left; } any help will be greatly appreciated. Hey everyone I'm a beginner at CSS. I'm trying to place divisions exactly where I want, but when I attempt to overlap them it doesn't render the way I intend it to (inconsistent in different browsers as well.) Does anyone have any tips? 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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<?php
//variables
//title
$title_ = "Title";
?>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#myhr {
width: 90%;
}
body {
padding: 15px 0px 15px 0px;
margin-left:auto;
margin-right:auto;
margin-top:auto;
margin-bottom:auto;
width: 904px;
background-color:#CCCC66;
}
#container {
padding:
float: left;
width: 898px;
height: 900px;
background-color:#999999;
border: solid rgb(250,0,255);
border-width: 2px 2px 2px 2px
}
#link1{
margin: 0px 0px 0px 0px;
float: left;
width: 222px;
background-color:#CCCC66;
height: 25px;
border: solid rgb(250,0,255);
border-width: 2px 1px 2px 1px;
z-index:1;
}
#link2{
float: left;
height: 25px;
margin: 0px 0px 0px 0px;
width: 223px;
background-color:#CCCC66;
border: solid rgb(250,0,250);
border-width: 2px 1px 2px 1px;
z-index:1;
}
#link3{
float: left;
margin: 0px 0px 0px 0px;
height: 25px;
width: 223px;
background-color:#CCCC66;
border: solid rgb(250,0,250);
border-width: 2px 1px 2px 1px;
}
#link4{
float: left;
height: 25px;
width: 222px;
margin: 0px 0px 0px 0px;
background-color:#CCCC66;
border: solid rgb(250,0,250);
border-width: 2px 1px 2px 1px;
z-index:2;
}
#innerbox{
width:136px;
height:177px;
margin: 0px 0px 0px 68px;
z-index:0;
background: #CCCC66;
border: solid rgb(250,0,250);
border-width: 2px 2px 2px 2px;
}
#innerbox2{
width:136px;
height:177px;
margin: -182px 0px 0px 275px;
z-index:0;
background: #CCCC66;
border: solid rgb(250,0,250);
border-width: 2px 2px 2px 2px;
}
#innerbox3{
width:136px;
height:177px;
margin: -182px 0px 0px 482px;
z-index:0;
background: #CCCC66;
border: solid rgb(250,0,250);
border-width: 2px 2px 2px 2px;
}
#innerbox4{
width:136px;
height:177px;
margin: -260px 0px 0px 689px;
z-index:1;
background: #CCCC66;
border: solid rgb(250,0,250);
border-width: 2px 2px 2px 2px;
}
</style>
<title><? echo $title_; ?></title>
</head>
<body>
<div id="container"><br />
<h1 id="myh1" class="h1color_" align="center"><? echo $title_; ?></h1>
<div align="center">
<hr align="center" id="myhr" />
</div>
<br />
<div id="link1" style="background-color:#CCCC66"><p>link1</p></div>
<div id="link2">link2</div>
<div id="link3">link3</div>
<div id="link4">link4</div>
<!--<button onclick="positioning_width_other()">pos other</button>-->
<br />
<br />
<br />
<br />
<div id="innerbox"><p align="center">Box</p></div>
<div id="innerbox2"><p align="center">Box2</p></div>
<div id="innerbox3"><p align="center">Box3</p></div>
<div id="innerbox4"><p align="center">Box4</p></div>
</div>
</body>
</html>
|
|||||||