|
CSS - Can Somebody Please Show Me How To...
...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! Similar TutorialsHow 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 */
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!! 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; }
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? 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? 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. 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? 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>
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? 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 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. 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? I have a layout made up of divs, and held together by another div. That holder div is supposed to have a background image, but it wont show on every browser that I've tried, except IE7. Here's the id: #holder { background-image: url(/files/images/CSS/header.png); width: 750px; margin-left:auto; margin-right:auto; margin-bottom: 10px; margin-top: 10px; } Backgrounds show on other divs, so why not this one? Hi I want to show database information with php for different items using <div> tags in manner that each run of the loop display three div in a row (horizontally) and then start a new row if more data is available, each div should show a thin border around it. for this I have written the following code PHP Code: while($row=mysql_fetch_array($res)( { ?> <div text-align: center; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;> <?php echo "item id: " . $var . "<br>"; echo "price: " . $var . "<br>"; echo "dealer: " . $var . "<br>"; ?> </div> <?php } //end loop ?> but it displays each row in a new line. please visit this http://www.dev411.com/typo/themes/?pp=8;pg=5 just to see an example of what I am talking about. I wonder if anyone could help in this? thanks Hi I know we can not show th tags with css as such th{display:none} but is there any way to filter out which <th tags not to show? rather than not displaying any? maybe only the ones with id='not show' is this possible? Thanks My css code Code: #menu {width:172px; padding: 0; font-family: Verdana, Arial, sans-serif; font-size: 13px; background-color: #FFFFFF; color: #333;}
#menu ul {border: 1px black solid; list-style: none; padding: 0; margin: 0 0 1 0; background-color: #d1d1d1;}
#menu li .menu_box {background-image: url('./images/menu_fill.gif'); margin-left: 200px;}
#menu li {border: none; margin: 0;}
#menu li a {display: block; padding: 5px 5px 5px 0.5em; background-color: #FFFFFF; text-decoration: none; width: 100%;}
My html code Code: <div id='menu'>
<ul>
<li class='menu_box'><img src='./images/menu_news.gif' alt='' /></li>
<li><a href='{$url}'>+ Home</a></li>
<li><a href='{$url}about.php'>+ About Nascar Interior</a></li>
</ul>
<ul>
<li class='menu_box'><img src='./images/menu_services.gif' alt='' /></li>
<li><a href='{$url}portfolio.php'>+ Portfolio</a></li>
<li><a href='{$url}enquiry.php'>+ Enquiry</a></li>
</ul>
</div>
For some reason I can't get menu_fill.gif to fill the <li> with the class menu_box. Is there something wrong with my code? Hey On some of my pages i use the following code to show some images in the body of my page : PHP Code: <div class="container"> <p><img src="../images/schools/leadership.jpg" width="100" height="100" class="leftimage" /><a href="centre.php?centerName=Ellel Scotland">Ellel Scotland</a> was established in 2000. It now operates from Blairmore House and has a particular emphasis on prayer.</p> </div> Now the css code for .container is Code: .container{
width:99%;
float:right;
}
and .leftimage Code: .leftimage{
float: left;
margin-right: 10px;
margin-bottom:10px;
border: 1px solid #000000;
clear:left;
When I test my page in FireFox it works fine. But when i test it in IE, any of my text that is not in a .container div disappears. It is on the page because you can highlight it with the mouse and then it shows until you highlight something else that is in a container tag. And then it disapears again. It is the most random thing i have ever seen. I cat figure out why. Has anyone come across this and can anyone help? Below is a little more code for a bigger picture and the text sais what shows and what does not! PHP Code: <div id="content"> <div class="container"> <p><img src="../images/homepage/regional_9_week.jpg" height="" class="leftimage" /></p> </div> <h1>This Disapears</h1> <p>This text and the image above disapears</p> <p>This also disapears</p> <div class="container"> <p><img src="../images/schools/shortcourses.jpg" width="100" height="100" class="leftimage" />This text does show up and so does the image to the left</p> <p>This shows up<a href="listing.php">click here.</a> </p> </div> </div> |
|||||||