|
CSS - Second Button Won't Show Up?
Hey all,
Wondering why my second button doesn't sow up (presumably, neither would the 3rd or 4th, though I haven't tried yet on those). Code: http://www.whywaitwebs.com/clients/icc/jobd.php You can see the one button there, there should be a second as well... here is the relevant CSS: Code: #links {
padding-top:120px;
padding-left: 0;
background-repeat: no-repeat;
display: block;
font-size: 0;
line-height: 0;
height: 31px;
margin: 0;
overflow: hidden;
text-align: center;
text-decoration: none;
text-indent: -99999px;
width: 740px;
}
a.link1{
width:185px;
height:31px;
display:block;
background: url(links.jpg);
background-position: 0 0;
}
a.link1:hover{
background-position: 0 31px;
}
a.link2{
width:185px;
height:31px;
display:block;
background: url(links.jpg);
background-position: 0 0;
}
a.link2:hover{
background-position: 185px 31px;
}
Thanks very much in advance!! Similar Tutorialsi know that IE doesnt support the :hover being added to anything but links, is this the same with :active? was just wondering whether i could have a style change when the user clicks on a form button basically if i add a border around a button in FF i can click the button however the effect of "pressing" a button is lost.. IE mainatain this! is there a solution or will i have to live with it? ...center the menus under my sample header banner? Thank you so much in advance! Here is the page: http://www.toplinepublishing.com/thisisasamplepage.html and here is the css file: http://www.toplinepublishing.com/dropdown.css Thanks! ok there is this trick that i saw that you can get a div to "act" as an iframe, by that i mean have it with a scroll bar and all but not call the info from a diff page like an iframe, anyone know what im talking about? How can I fix to have scroll bar in IE? It does have scrollbar in FF. It's mostly the main div. Any help? CSS Code: Original - CSS Code div#logo { position: absolute; top: 10pt; left: 20pt; width: 150pt; height: 150pt; /*border-width: medium; border: blue 4px dashed;*/ } div#news { font-family: verdana, arial, helvetica, sans-serif; font-size:10pt; position: absolute; top: 160pt; left: 20pt; width:150pt; height: 200pt; /*border-width: medium; border: red 4px dashed;*/ } div#main { font-family: verdana, arial, helvetica, sans-serif; font-size:10pt; position: absolute; top: 160pt; left: 180pt; width: 500pt; /*border-width: medium; border: green 4px dashed;*/ } /* navigation BEGIN */ div#topBar { font-family: verdana, arial, helvetica, sans-serif; font-size:10pt; position: absolute; top: 10pt; left: 180pt; width:500pt; height: 150pt; /*border-width: medium; border: magenta 4px dashed;*/ } @media screen { div#topBar { position: fixed; } * html { overflow-y: hidden; } * html body { font-family: verdana, arial, helvetica, sans-serif; overflow-y: auto; height: 95%; padding: 0 0.05em 0 0.1em; /* top right bottom left*/ } * html div#topBar { position: absolute; } } /* navigation END */
http://invalidheart.org/test/about.html i can't get my black 1px border to show on the left and right side of my menu in IE, i can't put border-left 1px solid, etc. because they are blocks and it adds them in between too and messes it up.. it works in firefox but no ie, any ideas? I'm trying to get some simple css formatting to work and it works the way I want but not in explorer, it won't show my color/border/image anything attributes until I literally highlight the content via the mouse. And not always. Of course, it works fine in firefox and the css validates so.....please glance over it and see if you can find any errors. thanks! here's the url http://www.emotika.com/testing/test.htm here's the source 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">
<!--
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: .8em;
}
.arrows{
margin: 0px 0px 2px 5px;
}
.headingrule{
margin-right: 3em;
margin-left: 1em;
background-image: url(images/gradient.jpg);
background-repeat: repeat-x;
}
#maincontent{
margin-top: 1em;
margin-bottom: 1em;
margin-right: 200px;
}
.maincontentbox{
background-color: #F0F0F0;
border: 1px solid #CCCCCC;
margin-left: 3em;
margin-right: 3em;
margin-top: 1em;
margin-bottom: 1em;
padding: 4px 8px;
}
#rightcontent{
position: absolute;
width: 200px;
top: 1em;
right: 0px;
padding: 5px;
border: 1px solid #CCCCCC;
}
#footer{
background-color: #F0F0F0;
clear: both;
}
#wrapper {
position: relative;
width: 100%;
margin: 0px;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="maincontent">
<div class="headingrule">
<img class="arrows" src="images/arrows.gif">
WELCOME...
</div>
<div class="maincontentbox">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur eros purus, suscipit porttitor,
dictum vel, congue id, eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos hymenaeos. Nam dolor sapien, luctus ut, sollicitudin in, interdum in, mauris. Donec tempor.
Vivamus non dolor. Nam mollis, sem et ornare sollicitudin, felis eros imperdiet velit, et sollicitudin
metus arcu et lectus.
</p>
</div>
<div class="headingrule">
<img class="arrows" src="images/arrows.gif">
WEEKLY SPECIALS...
</div>
<div class="maincontentbox">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur eros purus, suscipit porttitor,
dictum vel, congue id, eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos hymenaeos. Nam dolor sapien, luctus ut, sollicitudin in, interdum in, mauris. Donec tempor.
Vivamus non dolor. Nam mollis, sem et ornare sollicitudin, felis eros imperdiet velit, et sollicitudin
metus arcu et lectus.
</p>
</div>
<!--End Main Content Div-->
</div>
<!-- Absolutely Positioned Right Div {{ Removed from Document Flow }} -->
<div id="rightcontent">
CONTACT INFO
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 2</a></li>
</ul>
<p> </p>
</div>
<!-- Footer Div Stretches Total Width -->
<div id="footer">
here's the footer
</div>
<!--End Wrapper Div -->
</div>
</body></html>
I'm pretty new to website design. I have a lot of programming experience (C++, Java, Python) but very little HTML/CSS experience. I'm learning Django right now and am having trouble with my presentation. I'm hoping someone here can help me. I'm not sure how many here know Django so I'll try and skip over as much of that as I can. I have a somewhat cookie-cutter CSS stylesheet I'm using so I can learn the environment. Below are snippets of my .html files and .css file. base.html Code:
<body>
<div id="header">
<div id="title">
<div id="innertitle">
{% block header %}{% endblock %}
</div>
</div>
</div>
index.html Code:
{% block header %}
<h1>Signal Auctions</h1>
{% endblock %}
main.css Code:
#header {
margin:0 auto;
}
#title {
padding:20px 20px;
margin:0 auto;
background:#333 url('images/titlebg.png') repeat-x scroll 50% 50%;
}
#innertitle {
width:90%;
margin:0 auto;
}
h1 {
font-size:3em;
padding-left:10px;
}
The problem is that I can't seem to get the image images/titlebg.png to display. I don't think it's an issue with pathing - I have other images in the same location that do display and I use the same method to call them. Any thoughts? Good Day, I am trying to figure out why my CSS Rollover images are not showing up in FireFox, but do in IE. Below are links to my pages and CSS, and if anyone can give me some suggestions, ideas I would be very grateful!!! Brook http://www.karmaimports.net/centercss.htm http://www.karmaimports.net/cssrollover.css what is should look like: http://www.karmaimports.net/center.htm Hey, The comments show different/incorrect for people who use Internet Explorer 7 to visit my website. Firefox, Chrome, Safari, and IE8+ etc all show the comments correctly. My website is: http://www.lilwaynehq.com/2011/05/2...tunes/#comments Here is an example of what it looks like in IE7: I need it to look like this: Does anyone know the problem and how I can fix it? I will also be using an IE7 specific style sheet to make it easier. Thanks. Hi, I am building a website application in which the site uses a common header+footer. The structure is basically Header Content Footer I constructed the header and footer, and it looks ok in IE, but not in Firefox/Chrome/Opera. Even with how it looks in IE, there are some things I want to change and add. I need help to take the current header and footer that I have, along with mock up images that I have, and change to site to my needs. Current site, as viewed in IE http://i15.photobucket.com/albums/a371/techboyjk/site%20project/details_template_ie.jpg Current site, as viewed in FireFox http://i15.photobucket.com/albums/a371/techboyjk/site%20project/details_template_ff.jpg Current site, as viewed in Opera http://i15.photobucket.com/albums/a371/techboyjk/site%20project/details_template_opera.jpg Google Adwords Pic Example http://i15.photobucket.com/albums/a371/techboyjk/site%20project/googlead_header.jpg Search Box example http://i15.photobucket.com/albums/a371/techboyjk/site%20project/searchbox.jpg Desired layout after changes (minus searchbox) http://i15.photobucket.com/albums/a371/techboyjk/site%20project/details_layout.jpg Changes 1. The search bar at the very top needs to be better aligned next to the logo. You can see, in the "ideal" mockup that I have provided, how the search bar is more closely aligned to the logo and doesn't push down the navigation bar so much. 2. Google Adwords Div - In the "ideal" mockup, you can see how I superimposed a Google Adword div block on the right side. The bottom, right hand side of the Div has an "ads by google" tab that needs to be flush against the navigation bar, so that it looks seamlessly connected. 3. Color Pallette - Once the CSS/design is brought up to spec, I will then create alternate color schemes that users can select. Right below the google Adword div, I want to have a color swatch that users can click to reload the CSS using differen colors. However, for this work, all I need is for the color swatches to be correctly aligned. I can turn them into the links that I need to make the changes. 4. Drop Down's. While I haven't decided what I want each menu to have, I would like to have a drop down menu system created for the navigation bar. A sample system that I can edit in the future would be just fine. Set it up so that when hovering over the "home" menu item, a drop down with three items appears, link 1, link 2, link 3. I can take it from there. 5. Search Box - The search box I have is functional, but I would like a nicer looking, more functional search box if possible. I don't have a lot of money, but if you think you can do any of the work above, send me a price. My feeling is, if you really know what you are doing, these should be easy fixes. Please let me know if you can help in any way. Just curious as to what i'm doing wrong here, its the #content block that isn't working. Any help that could be provided would be greatly appreciated. css Code: Original - css Code body { font-family: Verdana, Tahoma, Arial; color: #FFFFFF; font-size: 11px; } .bg { width: 100%; position: absolute; top: 0; left: 0; z-index: 5000; } #pagecontent { width: 800px; height: 600px; position: relative; z-index: 6000; margin: auto; } #content { width: 800px; background-color: #999999; } #latesttut { width: 381px; height: 150px; border: 3px solid #FFFFFF; float: left; padding-left: 5px; padding-right: 5px; } #latestblog { width: 381px; height: 150px; border: 3px solid #FFFFFF; float: right; padding-left: 5px; padding-right: 5px; } #seperator { width: 800px; height: 5px; float: left; } #latestnews { width: 784px; height: 213px; border: 3px solid #FFFFFF; padding-left: 5px; padding-right: 5px; float: left; } #footer { width: 800px; position: absolute; bottom: 0; } .nav { background-image: url('images/blank1pxl.jpg'); } a:link { text-decoration: none; color: #0066CC; font-size: 9px; } a:hover { text-decoration: underline; color: #0066CC; font-size: 9px; } a:visited { text-decoration: none; color: #0066CC; font-size: 9px; } a:active { text-decoration: none; color: #0066CC; font-size: 9px; }
Please look at www clean and creative dot com in any browser on a PC or MAC and you'll see the logo.png show up ... BUT once you jump on a pc and view the site in Internet Explorer, the logo just disappears? Its weird because none of the styling is messed up, just a missing logo.png? Can anyone help me out on this? I'm looking for a way to show / hide a DIV triggered buy mousing over / clicking on a tab. The action will not navigate away from the page, just show / hide the DIV. I found this script: http://www.dynamicdrive.com/dynamicindex1/ddtabmenu.htm But it seems like a lot of JS overhead. Is there a simpler way? I have a div that is inside an iframe on my facebook fan page. It uses the facebox function and works fine, however when it is shown, it is only on top of the iframe inside the fan page, how do I make it appear over the entire facebook fan page? Tim I am a total CSS newbie...but I am trying to make my page display properly in both IE and firefox... Right now IE is perfect, and firefox displays nothing in the center! http://www.charlotteweddingphotos.com Two CSS files: http://www.charlotteweddingphotos.c...resentation.css http://www.charlotteweddingphotos.c...-box-layout.css I searched the net, and people were talking about clearing, and this and that...let me know if you know what my problem is! Thanks so much in advance! I was wondering if anyone could explain how this works. http://alt-web.com/DEMOS/CSS-Disjoi...-Rollover.shtml What I am not understanding is the role of the: <div id="defaultImage"> <img src="DefaultImage.jpg" /></div> and the <div id="Relative"></div> what do they do and why are they needed? Or maybe you cold steer me in a direction. Thank you |
|||||||