|
CSS - Hrmm... I'm Lost, Good Luck.
Please refer to the web site: h*t*t*p://alturl.com/yhba
Please look at the web site mentioned above and pay close attention to the "|" dividing the menu links (About, Events, Teams, Shop). Problem: This "|" should not appear at the end of the menu (after the "Shop" link). However it seems that it is showing up in the Windows Firefox & Safari but not in Firefox when being run under the Apple operating system. Please see if it is visible for you and if so, pleassee suggest how I may go about fixing the issue. HTML: Code: <div id="navigation"> <a href="/about" class="navigation-about">About</a> <a href="/events" class="navigation-events">Events</a> <a href="/teams" class="navigation-teams">Teams</a> <a href="/shop" class="navigation-shop last">Shop</a> </div> CSS: Code:
#navigation {
background:url(../_images/menu_bg.png) repeat-x;
height:68px;
width:100%;
padding:10px 0 10px 0;
margin:0 0 20px 0;
}
/*#navigation a { color:#666; padding: 0 10px 0 10px; text-decoration:none; }*/
.navigation-about, .navigation-events, .navigation-teams, .navigation-shop {
float: left;
display: block;
padding: 0 0 0 12px;
font-size: 105%;
}
#navigation a.last{
background-image: url();
}
#navigation-logo {
display:block;
float:left;
margin:3px 0 0 10px;
padding-right:25px;
}
#navigation a, #navigation a:visited {
display:block;
text-decoration:none;
color:#666;
padding:0 10px 0 10px;
background-image:url(../_images/nav_divider.png);
background-repeat:no-repeat;
background-position:right;
font-weight:bold;
}
Thank you! Similar TutorialsHi I have been busy for a while with this one, but I am lost here. This is what I would have to accomplish. A footer divided in three parts, left - middle - right Left part has a few icons acting as buttons, have this working! Size is static at 50px width and needed height is 23px Middle part will have a horizontal list of links centered at the middle of the window, depending of the page#.html there could be 5 till 8 links be there. Those links are two or three words width. The right part contains two input fields, also working. width 110 px. Small!? yes but both need only to contain three and five characters. Also working, except that Firefox does a little strange with the field height. But that could be me ( of course its me ), and is for later. My main problem is to get the middle part always between the left and the right part, but at the same time the content centered from the window, and when the window get smaller that the two or three words of the links are wrapping down, and not that the most right link wraps under most left link. Also that the complete footer will grow in height as necessarily. I hope that I am clear with what I try. I did search and try but then again, I am lost. Also I did have golive 1.something and did buy golive CS. It looks like that the preview is garbage, you can't trust it. None of the browsers shows what golive shows. I have more complaints, but would like to know how other people feels about this app. Any way here is what I got so far. Code: ;
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>untitled 2</title>
<style type="text/css" media="screen">
<!--
.colleft { background-color: green; vertical-align: middle; position: fixed; left: 0; bottom: 0; width: 50px; height: inherit; z-index: 2; margin-right: auto; margin-bottom: inherit; margin-left: 0; padding: inherit; }
.colmid{ background-color: orange; vertical-align: middle; position: fixed; left: 50px; right: 110px; bottom: 0; z-index: 2; margin-bottom: inherit; margin-left: auto; padding: inherit; }
.colright { background-color: fuchsia; vertical-align: bottom; position: fixed; right: 0; bottom: 0; width: 110px; height: inherit; z-index: 2; margin-right: 0; margin-bottom: 0; padding-right: 3px; padding-left: 3px; }
.footer { font-size: 12px; line-height: 95%; vertical-align: middle; position: fixed; left: 0; bottom: 0; width: 100%; height: 23px; z-index: 2; max-height: 40px; padding-right: 3px; padding-left: 3px; border-top: 3px ridge orange; display: block; }
.form { font-size: 11px; background-color: blue; position: fixed; right: 0; bottom: 0; width: 110px; height: 24px; z-index: 3; margin-bottom: 0; padding-right: 5px; padding-bottom: 0; border-color: yellow; }
.inputFld { font-size: 10px; background-color: yellow; position: fixed; right: 22px; bottom: 2px; width: 60px; height: 17px; z-index: 3; min-height: 18px; max-height: 16px; }
a { color: blue; font-size: 11px; font-weight: bold; line-height: 95%; text-align: center; width: auto; height: auto; z-index: 3; margin-top: auto; margin-bottom: auto; padding-right: 4px; padding-left: 4px; border: solid 1px olive; display: inline-table; }
table.main { position: relative; left: 0; right: 110px; bottom: 0; width: auto; height: 23px; z-index: 3; min-height: inherit; max-height: inherit; margin-right: auto; margin-left: auto; padding-right: 0; padding-left: 0; border: dashed 1px black; border-collapse: separate; border-spacing: 2px; }
tbody#tBody { width: auto; height: 23px; overflow:auto; border: dotted 1px blue; }
#tBody td { text-align: center; vertical-align: top; width: auto; height: auto; min-height: 23px; max-height: 40px; border: solid 1px red; }
--></style>
</head>
<body>
<div class="footer">
<div class="colleft">
<span class="threecol1">x1 x2 x3</span>
</div>
<div class="colmid">
<table class="main" cellspacing="0" cellpadding="0" >
<tbody id="tBody"> <tr>
<td> <a href="http://forums.devshed.com/" style="margin-left: 4px; margin-right: 4px; "> forums com</a></td>
<td><a style="margin-left: 4px; margin-right: 4px; " href="http://forums.devshed.com/">forums devshed com</a></td>
<td><a style="margin-left: 4px; margin-right: 4px; " href="http://forums.devshed.com/">devshed com</a></td>
<td><a style="margin-left: 4px; margin-right: 4px; " href="http://forums.devshed.com/">forums devshed com</a></td>
<td><a style="margin-left: 4px; margin-right: 4px; " href="http://forums.devshed.com/">forums devshed com</a></td>
<td><a style="margin-left: 4px; margin-right: 4px; " href="http://forums.devshed.com/">forums devshed com</a></td>
</tr></tbody>
</table>
</div>
<div class="colright">
<a style="margin-left: 4px; margin-right: 4px; " href="http://forums.devshed.com/">forums devshed com</a>
<form class="form" action="(EmptyReference!)" method="get" name="FormName">
<input class="inputFld" type="text" name="textfieldName" value="peek" size="4">
</form>
</div>
</div>
</body>
</html>
I have used some colors to show, myself where I am, so forgive me that, please. I think that the picture of the code will tell what I would like to create. BTW, My main goal was to use no table code and only f.e lists, but came and the same end. Hope that someone can help me. Thank you Good Day all, I've tried a few different hacks/fixes now to fix my PNG problem in IE6 but none seem to have any effect. I'm starting to wonder if this is fixable. Can anyone provide some insight as to what the problem could be? I seem to be ok in all browsers except IE6... 029c92a.netsolhost.com/brushes.html Best, Colin Does anyone have any idea what could be happening to my main menu - it dissappears in Safari! Hobo http://energetic.bluekazoo.eu/ Hi all. Hope someone can help. The above site has a strange quirk with there being a 20px gap to the right of the image which try as I might, I cannot seem to resolve. Been looking at it so long now that I reckon I can't see the wood for the trees. All help would be gratefully appreciated. Mark. Hi, I am quite familiar with css - have a few books on the subject but always struggle when trying to work with a design of my own. I guess where I struggle is in what to do first ... how do I work ... my work flow. I always seem to get part of it right but then as I go further ... I find that my next step might undo my previous ... so I end up with a maze or positioning problems etc. I struggle with getting everything positioned properly ... not sure why. I was hoping someone could start me off in the right direction ... you a what to do first series of steps ... or maybe a workflow from someone more exprienced in the design area of things - I'm more of a backend kinda guy. Really anything would help ... Thanks hey guys, I got a interesting situation here. I'm building this site... http://www.peelautoradio.com/source/start.php The problem is, I've attempted to pickup the style sheets from an external file (site.css). Everything works fine, however, if you click on a link (that isn't complete) or refresh the page too many times - the styles are lost. here's the css tags. (I'm using include "site.css" in my php now). Code:
<style>
body { margin: 0px;
font-family: Verdana,sans-serif;
color: #333333;
line-height: 1.166;
margin: 0px;
padding: 0px;
background: #FFFFFF;
}
#topcell {
position: relative;
top: 0px;
left: 0px;
margin: 10px;
width: 750px;
height: 250px;
background-color: transparent;
overflow: auto;
vertical-align: justify;
}
#botcell {
position: relative;
margin: 10px;
top: 0px;
left: 0px;
width: 700px;
height: 250px;
background-color: transparent;
overflow: auto;
vertical-align: justify;
}
#topMenuLinks {
position: relative;
top: 2px;
left: 5px;
width: 548px;
height: 20px;
margin: 0px;
padding: 3px 9px 2px 2px;
}
#topMenuLinks a:link, #menuLinks a:visited {
display: inline;
color: #DCE8FF;
border-left: 4px solid #97163D;
border-right: 1px solid #CB8A9E;
font-size: 10pt;
font-weight: bold;
padding: 3px 20px 3px 10px;
background-color: transparent;
text-decoration: none;
}
#topMenuLinks a:hover {
display: inline;
color: #DCE8FF;
border-left: 4px solid #FFDBE7;
border-right: 1px solid #FFFFFF;
font-size: 10pt;
font-weight: bold;
padding: 3px 20px 3px 10px;
background-color: #EC7A9D;
text-decoration: none;
}
#botMenuLinks {
position: relative;
top: 2px;
left: 170px;
width: 548px;
height: 20px;
margin: 0px;
padding: 3px 9px 2px 2px;
}
#botMenuLinks a:link, #menuLinks a:visited {
display: inline;
color: #DCE8FF;
border-left: 4px solid #97163D;
border-right: 1px solid #CB8A9E;
font-size: 10pt;
font-weight: bold;
padding: 3px 20px 3px 10px;
background-color: transparent;
text-decoration: none;
}
#botMenuLinks a:hover {
display: inline;
color: #DCE8FF;
border-left: 4px solid #FFDBE7;
border-right: 1px solid #FFFFFF;
font-size: 10pt;
font-weight: bold;
padding: 3px 20px 3px 10px;
background-color: #EC7A9D;
text-decoration: none;
}
</style>
Any ideas? Sometimes, what seems really easy, gets lost in a pile of similar code and confuses me. All I'm trying to do is to increase the width ofsome drop down menus, and I just can't find the code that determines it. Here's the page with the yellow (#fcc613) drop downs and here is the CSS Appreciate any help on this. Thanks I have built two sites using a copy of the style sheet from site1 to build the site2. The stylesheets are basically the same accept for a few images and colors. I named each file with unique filenames. I am developing these on a new hosting account and have not yet transferred the dns so my urls are http://myip/~site1, ...site2. While viewing site 1... if I go to site 2, it acts as if it cannot see the stylesheet. If I close my browser and reopen site 2, everything is fine. However now when I try to go to site 1 the same thing happens. Is this because they are both coming from the same ip address or something??? That's all I can figure. Thanks for any help! I moved internal css to an external file and then linked the page to that file and lost my hand cursor on links. How do i get it back. Right now the arrow cursor remains when links are rolled over. Can be viewed at. kopertone.com/newsite/index1.html Also, in fire fox, I want dotted lines under my text links when rolled over, but not image links; how do I remove the dotted lines under my image links? Thanks! APPEARS TO BE HASLAYOUT ISSUE IMAGE WITHIN ANCHOR NOT CLICKABLE. Hi Guys looking for a spot of help please. IE is driving me up the wall. Ive wrote a jQuery script for scrolling a list horizontally upon user clicking left or right. The list has anchors within it which are blocks which I want to be clickable with an image inside (fine in FF etc) but in IE the image within the anchor loses its ability to be clicked the rest if fine apart from I manually have to set the cursor to pointer to show the user its clickable still. Just when they click the item image within the anchor it does nothing. Here is a slim version of the HTML : Code:
<ul>
<li><a href="/page1.html"><span class="box_wrap"><span class="img"><img src="1.jpg" border="0" height="75" /></span><span>Item 1</span></span></a></li>
<li><a href="/page2.html"><span class="box_wrap"><span class="img"><img src="2.jpg" border="0" height="75" /></span><span>Item 2</span></span></a></li>
<li><a href="/page3.html"><span class="box_wrap"><span class="img"><img src="3.jpg" border="0" height="75" /></span><span>Item 3</span></span></a></li>
<li><a href="/page4.html"><span class="box_wrap"><span class="img"><img src="4.jpg" border="0" height="75" /></span><span>Item 4</span></span></a></li>
<li><a href="/page5.html"><span class="box_wrap"><span class="img"><img src="5.jpg" border="0" height="75" /></span><span>Item 5</span></span></a></li>
<li><a href="/page6.html"><span class="box_wrap"><span class="img"><img src="6.jpg" border="0" height="75" /></span><span>Item 6</span></span></a></li>
<li><a href="/page7.html"><span class="box_wrap"><span class="img"><img src="7.jpg" border="0" height="75" /></span><span>Item 7</span></span></a></li>
<li><a href="/page8.html"><span class="box_wrap"><span class="img"><img src="8.jpg" border="0" height="75" /></span><span>Item 8</span></span></a></li>
<li><a href="/page9.html"><span class="box_wrap"><span class="img"><img src="9.jpg" border="0" height="75" /></span><span>Item 9</span></span></a></li>
<li><a href="/page10.html"><span class="box_wrap"><span class="img"><img src="10.jpg" border="0" height="75" /></span><span>Item 10</span></span></a></li>
<li><a href="/page11.html"><span class="box_wrap"><span class="img"><img src="11.jpg" border="0" height="75" /></span><span>Item 11</span></span></a></li>
<li><a href="/page12.html"><span class="box_wrap"><span class="img"><img src="12.jpg" border="0" height="75" /></span><span>Item 12</span></span></a></li>
<li><a href="/page13.html"><span class="box_wrap"><span class="img"><img src="13.jpg" border="0" height="75" /></span><span>Item 13</span></span></a></li>
<li><a href="/page14.html"><span class="box_wrap"><span class="img"><img src="14.jpg" border="0" height="75" /></span><span>Item 14</span></span></a></li>
</ul>
CSS Code: Code:
ul {
width: 9999px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:0;
position: absolute;
top: 0;
}
ul li {
display:block;
list-style:none;
margin:0;
padding:0;
border:0;
text-align:center;
float:left;
width:118px;
height:133px;
}
ul li a{
display:block;
border-right:1px solid #e2f5fe;
outline:none;
text-decoration:none;
background:#FFF;
padding:3px 2px 3px 2px;
line-height:15px;
}
ul li a:hover{
background:#e2f5fe;
color:#fe0084;
}
ul li span.box_wrap {
display:block;
background:#FFF;
height:127px;
}
ul li span.box_wrap span{
padding:0px 3px;
font-size:12px;
}
ul li span.img {
padding:2px 0px 2px 0px;
display:block;
}
Just when you try to click any of the images within the boxes its not clickable. Really stumped. Any help or pointers would be greatly appreciated. Thanks in advance! Hello, This one doesn't look good on FF 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" />
<title>Untitled Document</title>
<style type="text/css">
#layer {
position:relative;
font-size:10px;
top:3px;
width:100%;
}
#layer ul {
float:left;
list-style-type:none;
height:12px
}
#layer li {
display:inline;
height:12px
}
#layer a {
text-decoration:none;
border:1px 1px solid #990000;
color:#990000;
background-color:#CCCCCC;
padding:20px;
height:12px
}
</style>
</head>
<body>
<div id="layer"><ul><li><a href="#">sample link</a></li></ul></div>
</body>
</html>
Hello, This one looks good on IE7/FF but not with IE6 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" />
<title>Untitled Document</title>
<style type="text/css">
#picture {
position:relative;
float:left;
left:6px;
color:#ff0000;
top:15px;
}
.name_txt {
position:relative;
margin-bottom:4px;
float:left;
font-size:10px;
width:235px
}
</style>
</head>
<body>
<div id="picture">
<p class="name_txt" style="float:left; width:100%"><img src="Blue hills.jpg" alt="" width="112" height="85"/></p>
<p class="name_txt" style="float:left; width:100%"><img src="Sunset.jpg" alt="" width="112" height="85"/></p>
</div>
</body>
</html>
I've mucked up my css a bit. Works great in IE but not in FireFox. Submenus are not under their main menu item. and I can't seem to get it centered. Here is the site. Causeway Lighitng And here is the css (it the nav2 portion that controls the top menu) Code: #nav, #nav ul {
margin: auto; /* centres the nav */
padding: 0;
list-style: none; /* removes the bullets */
width: 100%;
}
#nav2, #nav2 ul {
margin: auto; /* centres the nav */
padding: 0;
list-style: none; /* removes the bullets */
width: 135px;
}
#nav li, #nav {
margin:0;
padding:0;
}
#nav2 li, #nav2 {
margin:auto;
padding:0;
}
#nav ul li {
position: relative;
width:130px;
line-height:14px;
padding:0;
margin:0;
}
#nav li ul {
position: absolute;
margin-left:134px;
margin-top:-24px;
display: none;
}
#nav li ul li {
position:relative;
float:none; /* stops the submenus from being horizontal */
}
/* Styles for Menu Items */
#nav li a {
display: block;
text-decoration: none; /* removes the underline */
color: #777;
background: #fff; /* necessary to fix an IE6 Bug */
padding: 0px;
border: 1px solid #ccc;
}
#nav2 li a {
display: block;
text-decoration: none;
/* removes the underline */
color: #777;
background: #FFCC00;
/* necessary to fix an IE6 Bug */
padding: 0px;
border: 1px solid #ccc;
text-align : center;
}
/* Fix IE. Hide from IE Mac \*/
* html #nav li, * html #nav2 li { float: left; height: 1%; }
* html #nav li a, * html #nav2 li a {
height: 1%;
margin-left : auto;
}
/* End */
#nav li a:hover, #nav2 li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */
#nav li ul li a, #nav2 li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
#nav li:hover ul, #nav li.sfhover ul,
#nav2 li:hover ul, #nav2 li.sfhover ul { display: block; } /* The magic */
#nav2, #nav2 ul {
width: 100%;
}
#nav2 li {
float:left; /* makes the main nav horizontal */
width:80px; /* Width of Menu Items */
margin:0;
}
#nav2 li ul {
position: absolute; /* positions and sets width of submenus */
display: none;
float:left;
margin:0;
}
#nav2 li ul li {
position:relative;
float:none; /* stops the submenus from being horizontal */
}
/* Styles for Menu Items */
Viewing this page in Firefox: http://moneyextra.thehelpgroup.co.uk/compare/creditcards/ProductDetails.php?index=79 - it looks fine, but when you view it in IE 6, it is really messed up Does anyone know whats causing that to happen and how I would fix it Thanks alot I'm having a lot of trouble getting a couple of final things to work on this CSS template design I'm doing for one of our stores. http://www.thescriptstation.com/catalog/index.php?tplDir=CSS-fluid-1 (the ?tplDir=CSS-fluid-1 is necessary to see the developing template instead of the live one) It's all looking pretty much how I want it, with a couple of exceptions, and I'd love some help with what I'm doing wrong here. Issue 1 Links in the top green bar and bottom green bar on the page - earlier I had them looking fine in FF (using margins, positions, and padding), but looked in IE and it was a big mess. So I backed up and worked on it in IE, and now its looking OK there, but in FF, I'm losing the links after the first one - it seems like they are displaying underneath one another, which is below the size of the containing style. Issue 2 In the same areas, For the life of me I can't find a way to vertically align those links inside those areas. They just go to the top no matter what I've tried. If anyone could look over the styles and see what I've done I'd be forever grateful: http://www.thescriptstation.com/catalog/templates/CSS-fluid-1/stylesheet.css http://www.thescriptstation.com/catalog/templates/CSS-fluid-1/main_layout.css Many Thanks I need to link to differnt style sheets to a page and i need it so it will use one if the user has IE and a differnt one if the user is using anything else that works properly. Is this posable and if it is please tell me how? and if theres a way of doing it that uses php i would like to use that method. thanks I have been reading alot about how much trouble we get into with IE when trying to center a div. I had a lot of trouble with it and mainly just wanted to have a fixed width site (760px or so) with a thin border all the way around it. Is the following code a good way to accomplish this? Code: <head>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
}
div {
border: 1px solid #666666;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<table width="770" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><div></div></td>
</tr>
</table>
</body>
I am planning on having this as my index page and just using an "include" for the different header/body/footer elements. Would love some advice/opinions. Ok, firstly, here is the link: www.mstrgaming.com/stars Now, if you look at the website in FF, then in IE, you'll notice that the absolutely poistioned #topbar (the horizontal bar right at the top) goes over the top of the floated logo & menu (whereas it doesn't in FF, which is the desired look). I'd welcome any suggestions as to why it does this, and more importantly how to prevent it. Also, the floated logo & menu is spaced away from the left side of the page, whereas in firefox, it isn't. I welcome any suggestions! The website is reletively simple so I don't think you should have any concerns with the code, but if you do by all means let me know . Thanks! Edit - how odd, I edited the title of this thread because I missed a word, and it won't change, oh well Hi, Here is the site I am working on: http://www.pizzaz-lingerie.com/launch.php It looks perfect in IE 7 and FF, but in IE 6 its a mess and I don't know what the problem is. I'm pulling my hair out over this one. -CJ Hey, Myspace allows users to customize their profiles with CSS, and what i've done is cover my profile with a blank DIV overlay. How can I include a flash component in my DIV? I'm trying to include this little flipbook device onto my profile sothink.com/tutorials/viewtopic.php?t=61 The flipbook you'll see is obviously not hosted by the forums (...I think,) it is hosted elsewhere and the user just included it in her bulletin post. What code allows you to do that? And would it be possible to include such a code onn my DIV overlay? Thanks, |
|||||||