|
CSS - Help, Newbie Stumped About Fixing Menu Stuff
Similar TutorialsMy first real web page using CSS completely.. In this example, I have a page where my content is going beyond the footer.... I'm actually looking for the footer (blue line) and the right (light blue) area to move or expand as the content is added. In looking at my code will I need to rework the entire thing? Or make a simple adjustment. (I'm hoping its not a complete rework) Any help would be great. http://mcpherson-racing.com/dave/de...ny/company2.htm Also, this is a secondary page form the main page. How can I impliment specific CSS atributes only on this page without it effecting the main page? Hello everyone, I have a fairly basic CSS question to ask, but since I'm new to CSS, I'm a bit stumped. If you check out my Blog (at http://goblinsatemyblog.com), on the sidebar you'll see that the menu hovers are colored green. However, on a few of the widgets displayed, rolling over the menu truncates the link down a few pixels, which doesn't look that great. I applied "display: block" tags and a background color to the widgets to create the rollover, but some still work properly and others don't. What do I need to do to keep the rollover links from acting up? Here's the code pertaining to the two CSS files in the theme. Code: .custom li.widget li a:hover, .custom li.linkcat li a:hover { display: block; padding: 0 0 0 0.3em; color: #fff; background: #009933; }
Code: #rss { width: 20em; height: 190px; margin: 0 0 1.0em 0; background: url('images/rss.png') 50% 0 no-repeat; text-align: center; }
#rss a { display: block; width: 202px; height: 184px; margin: 0 auto; }
ul.sidebar_list { list-style: none; }
ul.sidebar_list li.widget, ul.sidebar_list li.linkcat { width: 16.6667em; margin: 0 0 2.8em 0; font-size: 1.2em; line-height: 1.6667em; float: left; border-bottom: 2px solid #009933; }
li.widget p { margin: 0 0 1.66667em 0; }
li.widget ul, li.linkcat ul { list-style: none; margin: 0 0 0.8333em 0; }
li.widget li, li.linkcat li { padding: 0 1.0em 0 1.16667em; background: url('images/bullet.gif') 0 0.4167em no-repeat; }
li.widget li a:hover, li.linkcat li a:hover { color: #575757; }
I picked out the part of the CSS files that I think are relevant, but I can past the entire code if requested. Thank you in advance! On my website lakelandedc.com the Side bar is very weird in the way tat if you go down from one topic to the other it snaps back and you lose your place for what you tried to click on. how can i fix this menu or make a new one that will b more user friendly? Hey everyone! I'm brand spankin' new to the forum, but hopefully I'll become a regular fixture here! I have a real estate agent client that I am doing SEO for, but my duties have expanded (a little outside my expertise) into the website itself. I can't post hyperlinks (which precludes me pasting code here) so this should be an interesting task of explaining my problem! Currently, there is a vertical navigation bar on the left side of the page that is simply an < ul > of hyperlinks. So, for example, if the list item was "Brooklyn", it would return a search of the MLS listings for the city of Brooklyn. The client wants these hyperlinks to instead go to pop-out menus. So, the tab would still say "Brooklyn", but there would be two popout items "Brooklyn Brownstones" and "Brooklyn Apartments" for example. The original tab would no longer hyperlink to search results, but the pop outs would link to results for their specific parameters. The current template is using <ul class="navSec"> to accomplish the nav bar. I cannot write code (aside from HTML) from scratch. I can, however tweak and edit existing code in .css, .php, .js etc. If there is any way you can help me, I'd appreciate it. Since I can't link the site, I can tell you it is Maui Just Listed (all one word) with the dot and then the com. Eileen Hi guys! I have good HTML knowledge, and I am learning CSS for the first time, no matter how much I read about position relative, absolute, fixed blah blah blah floats, clear, whitespace I am really struggling to get my head around it. I can position my header and side menu and main content easily as they sit side by side, The problem is I have a list with 4 bullet points, I want that to run horizontally which again I can do... but I want it to run horizontally over the main content part only and have 200px of "white space" to the side No matter what I try it all starts to mess up and wraps around the other parts. Idealy I'd like this 4 bullet point list to be a drop down horizontal menu, but if I can at least get it in the right place for now then that would be a start! Hope this makes sense, I also made a mockup in mspaint of what I mean but can't link it I also can't link my webpage to show you what I got so far as the forum wont me allow to link as a new user Thanks in advance! I have a problem that I cannot seem to resolve no matter how hard I try. - Click Here - As you can see, this page renders well in firefox but breaks horribly in IE. Try mousing over the links in the top right corner of the page and the layout really breaks! If anyone has some free time could you take a look at this page and see if any solution springs to mind? CSS: Code: body{
margin:0;
font-size:small;
text-align:center;
background-color:#c60;
border-top:3px solid #666;
font:Arial, Helvetica, sans-serif;
background-image:url(../images/background.png);
background-attachment:fixed;
background-position:bottom left;
background-repeat:repeat-x;
#content{
margin:2% 0% 2% 17.2%;
background-color:#9cf;
border:solid #0af;
border-width:2px 1px;
background-image:url(../images/bits.gif);
background-position:top right;
background-repeat:repeat-y;
}
#content h2{
color:#000;
background-color:#fdb;
border:1px solid #c60;
padding:2px;
width:100px;
margin:5px auto -12px auto;
font-weight:bold;
font-size:12px;
text-align:center;
position:relative;
}
#table_wrapper{margin:5px;}
#main_table{
background-color:#fff;
border:1px solid #999;
border-width:2px 1px;
text-align:center;
margin:0 auto;
width:100%
}
#main_table thead tr th{
height:20px;
}
#main_table tbody tr td {
font-family:"lucida grande", verdana, sans-serif;
font-size:8pt;
padding:3px 8px;
border-right:1px solid #d9d9d9;
}
#main_table tbody tr.selected td {
background-color:#fdb;
border-left: 1px solid #d9d9d9;
}
#wrapper{
border-style:solid;
border-color:#666;
border-width:5px 1px;
width:94%;
margin:25px auto 50px auto;
text-align:left;
padding:1%;
background-color:#fff;
}
#header{
height:60px;
padding-top:8px;
border-bottom:3px solid #0af;
background-image:url(../images/banner.gif);
background-position:bottom left;
background-repeat:no-repeat;
}
#nav{
height:60px;
float:right;
font-size:11px;
background-image:url(../images/notebook.gif);
background-position:right;
background-repeat:no-repeat;
}
#nav ul, #nav li{
display:inline;
margin:0 25px 0 0;
}
#nav a{color:#000}
#nav a:visited{color:#666;}
#nav a:hover{color:#c60; border-bottom:1px dashed #c60;}
#leftcol{
float:left;
width:16.5%;
margin:2% 0;
border:solid #0af;
border-width:2px 1px;
background-color:#9cf;
background-image:url(../images/bits.gif);
background-position:top right;
background-repeat:repeat-y;
}
#leftcol h2{
color:#000;
background-color:#fdb;
border:1px solid #c60;
width:50%;
margin:5px auto 0 auto;
font-weight:bold;
font-size:12px;
text-align:center;
padding:2px;
width:30px;
margin:5px auto -12px auto;
position:relative;
}
#info{
border:solid #999;
border-width:2px 1px;
background-color:#fff;
margin:5px;
padding:0;
}
#info p{margin:10px 5px 5px 5px;}
#footer{
color:#999;
clear:both;
width:100%;
font-size:11px;
text-align:center;
border-top:3px solid #0af;
}
I've got a list item with a link, an image, and a span of text and I am trying to boost the text up in that box so that it is reasonably close to vertically centered. Code: <li><a href="productpage.php" class="bigimgcap"> <img src="../images/products30.gif" alt="Software logo" /> <span>Product Name</span></a> <ul> <li>Product Feature 1 </li> <li>Product Feature 2</li> </ul> </li> my css wasn't helping, probably have inherited properties issues all over this one eh? Code:
.bigimgcap {
font-size:1.1em;
font-weight:bold; color: #000080; /*replaced SteelBlue*/
margin: 10px 0;
padding:0;
}
.bigimgcap span {
padding:0;
margin: 0 0 15px 15px;
}
I have a container, header,left-side vertical navbar, content, and a footer. Everything works fine except when the content div is very wide. When this happens the header and footer are only as wide as the screen and not as wide as the content div. Here's my CSS. Code:
#container {
width:100%;
background: #fffce0 url(images/narrowtrick.gif) repeat-y;/*this colour will be left column colour */
margin:0px;
padding:0px;
text-align:left;
}
#header {
height:145px;
width:100%;
background-image: url(images/topbackground2.jpg);
text-align:center;
margin:0px;
padding:0px;}
#navbar{
float:left;
width:122px;
margin:0px;
padding:0px;}
#content {
background:#fffce0;/* background colour of right column */
margin-left:122px;/*this is the space for the left column */
padding:0px;
}
#footer {
clear: both;
border-top:1px solid red;
border-bottom:1px solid red;
background-image: url(images/gradientsmaller2.gif);
font: 10pt;
background-color: #ccffcc;
width: 100%;
text-align: right;
margin:0px;
padding:0px;
}
I can't figure this one out! Code: <div id=container> <div id=header> </div> <div id=navbar> </div> <div id=content> </div> <div id=footer> </div> </div> the content div is dynamic so it could be very wide. It's my fault for not checking IE after every change but somehow a div stopped stretching and I can't find the problem. Works great in FF but not in IE 6 or 7. Here's the problem page It just doesn't make sense to me. Am I missing a hack maybe? I'm trying to create a (I think) simple page for an art gallery's artists. You can visit artizansc.com/dev/artists/artists.htm. I have created classes in my css for the artists' pictures (biopic), names (H2) and bio (biotext). I have also created a class called biowrapper to wrap each person's info. As you can see, the pictures are not lining up. It seems this should be simple and frankly, I'm feeling stupid. I'm new with CSS, but this shouldn't be rocket science! Can anyone please help me? pretty please will someone help me the three buttons witch are fixed position will not load the link . please help! ocixx.com/Untitled-1.html hey guys here is my page now that how my boss wants it to look Code: <h1>Illinois Soybean Association Site Map</h1> <ul id="siteMap"> <h2><a href="/about/">ABOUT</a></h2> <li><a href="/about/research/">Research</a></li> <p><a href="/about/research/committee/">Illinois Soybean Association Research Committee</a></p> <p><a href="/about/research/managed-research-areas/">Managed Research Areas</a></p> <p><a href="/about/research/reports/">Research Reports</a></p> <p><a href="/about/research/specialty-contracts/">Specialty Contracts</a></p> <li><a href="/about/legislature/">Legislature</a></li> <li><a href="/about/international-marketing/">International Marketing</a></li> <li><a href="/about/programs/">Programs</a></li> <p><a href="/about/programs/soybean-quality/">The Soybean Quality Rewards Program</a></p> <p><a href="/about/programs/rust-watchers/">Rust Watchers</a></p> <p><a href="/about/programs/soyleaders/">SoyLeaders</a></p> <p><a href="/about/programs/speakers-bureau/">Speakers Bureau</a></p> <h2><a href="/membership/">MEMBERSHIP</a></h2> <li><a href="/membership/soy-connect/">SoyConnect</a></li> <li><a href="/membership/application/">Membership Application</a></li> <h2><a href="/soybean-uses/">SOYBEAN USES</a></h2> <li><a href="/soybean-uses/soy-foods/">Soyfoods</a></li> <li><a href="/soybean-uses/biodiesel/">Biodiesel</a></li> <p><a href="/soybean-uses/biodiesel/retailers/">Retailers</a></p> <p><a href="/soybean-uses/biodiesel/suppliers/">Suppliers</a></p> <p><a href="/soybean-uses/biodiesel/clean-school-bus-program/">Clean School Bus Program</a></p> <p><a href="/soybean-uses/biodiesel/tax-incentives/">Tax Incentives</a></p> <li><a href="/soybean-uses/livestock-feed/">Livestock Feed</a></li> <li><a href="/soybean-uses/new-uses/">New Uses</a></li> <h2><a href="/education/">EDUCATION</a></h2> <h2><a href="/soy-news/">SOY NEWS</a></h2> <h2><a href="/resources/">RESOURCES</a></h2> <h2><a href="/directors/">DIRECTORS</a></h2> <h2><a href="/contact/">CONTACT</a></h2>/ what he wants me to do and i have no idea how to do this is each of hte h2's inside the id have a color assigned to them without modifying that page since they are inside the id i guess it can be done somehow and then each of the paragraph's need to have padding left on them of 20px and made smaller and have bullets in them and thats what he wnats done with no changes to the form at all i just gave just in the css Im trying to create a page with a side bar, (http://xidus.ath.cx/blog/moot) with this style sheet Code:
.centery {
position: absolute;
background: #ffffff;
}
.right {
position: absolute;
right: 20px;
top: 49px;
width: 200px;
background: #ffffff;
border: 1px solid #000000;
}
And i use this code to create the two tables Code: <div class="centery"> blahblah blah[really lots of text]</div> <div clas="right">blahblahblah</div> But if there is too much writing in the center one it will go under the right box, or if the window is resized the text goes under the right box :P Is there some way to prevent this? Thanks IE is at it once again.... it is doing VERY odd things.... On the following page, when you roll over the title/type/date and description sections for the related article, it changes backgrounds... this is done mostly with CSS and the smallest amount of javascript (only onmouseover/mouseout is used). It works great elsewhere, but not in IE... any suggestions at what it may be?? THE LINK http://www.dudley.nhs.uk/ In FF it all works fine but sometimes in I.E. left menus disappear and the right menu overlapping the text on the page isn't unknown. Although this is resolved by refreshing the page, it is happening quite regularly and is causing some confusion. What do I need to add to my CSS to sort this toothache of a problem out? Thanks Within the LEGEND tag, how would I position the radio buttons to the far right? I thought something like the following would work, but wasn't sucessful. .radios {text-align: right;} Thanks Code: <fieldset> <legend> Some Text <select><option value="1">One</option><option value="2">Two</option></select> <span class="radios"> <input type="radio" name="r" id="r" value="1">one <input type="radio" name="r" id="r" value="2">two </span> </legend> <table> <tr><td>bla</td><td>bla</td></tr> <tr><td>bla</td><td>bla</td></tr> <tr><td>bla</td><td>bla</td></tr> </table> </fieldset> Hello, I have a cool jquery rollover script. But I have a problem with the CSS. The CSS for the script has an IMG tag to line the images up correctly. However, when I add the the script and it's CSS to my website, the IMG tag tells ALL images on website to go to the top left corner, and not stay where I originally placed them. Is there a way to modify the IMG tag in the script's CSS so that it only applies to the images in the script and not to affect the other images on my webpage? Here is my code: Code:
<html>
<head>
<title>Untitled</title>
<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
<script type="text/javascript">
$(function() {
$('.blocks').hover(function() {
$(this).children('.front').stop().animate({ "top" : '300px'}, 700);
}, function() {
$(this).children('.front').stop().animate({ "top" : '0'}, 400);
});
});
</script>
<style type="text/css">
#three {
width: 850px;
text-align: center;
margin: auto;
}
.blocks {
width: 250px;
height: 140px;
position: relative;
overflow: hidden;
float: left;
padding: 0 1em;
}
img {
position: absolute;
top: 0; left: 0;
}
</style>
</head>
<body>
<div id="three">
<a href="http://www.google.com" class="blocks">
<img src="http://www.loriandersondesigns.com/jquery_8%202/back.jpg" alt="image" border="0"/>
<img src="http://www.loriandersondesigns.com/jquery_8%202/front.jpg" alt="image" class="front" border="0"/></a>
</div>
<p><a href="http://www.google.com" class="blocks">
<img src="http://www.loriandersondesigns.com/jquery_8%202/back.jpg" alt="image" border="0"/>
<img src="http://www.loriandersondesigns.com/jquery_8%202/front.jpg" alt="image" class="front" border="0"/> </a>
<a href="http://www.google.com" class="blocks">
<img src="http://www.loriandersondesigns.com/jquery_8%202/back.jpg" alt="image" border="0"/>
<img src="http://www.loriandersondesigns.com/jquery_8%202/front.jpg" alt="image" class="front" border="0"/></a>
</div>
</div>
</body>
</html>
Thanks for listening! Ok, I have been working now for 2 days on a new testsite. Its far from done but I need someone with a fresh look to help me fix and optimize some things * The top menu is supposed to be white -->.vise in the css, but is not....I am missing something. * The bullets in the two right boxes dont appear in FF but do appear correctly in IE ?! Anything else ya see, let me know. I am very apreciate for help URL = http://www.serbia-today.com/test/testindex.php Hi There, I have deisgned a site using css layouts and have built it. It looks exactly how I want it to in Firefox and other browsers that have proper CSS support. I am unsure what I need to do to 'fix' the ie bugs. Can anyone give me any pointers? the test page is he http://www.storesprite.org/layouts/ Thanks |
|||||||