|
CSS - A Problem With An Easy Fix
I just implemented a full CSS layout at my website, lab7.org.
This is the first full CSS & XHTML layout I've ever done, so there are a few problems I don' t know how to fix. I can already see that this problem will have an easy fix, I just can't be the one to do it. My content div (#rightcolumn) overlaps the "wrapper" (#behind-itall). Can anyone tell me how to fix this? If you have EditCSS for Firefox, I would also appreciate a .css file so that I may look at it. Edit: I just now realized that it only does this in Firefox. It displays fine in IE. Similar Tutorialshey guys, Im kinda gathering this is an easy question regarding CSS so please be patient lol (im new to css) im in the middle of building my site (http://www.featherdesigns.co.uk) This is work in progress so ignore the scrolling bars etc if you use IE.... lol if you visit this page you will see it basically has a white div (id = container) which contains all the content. all the elements inside i have put in their own div's and used the float command etc to position. i want the white box to extend or contract depending on the content inside. the sidebar on the left is ideally the minimum height but if the content goes over this height i want it to extend. if i take out the height variable in the css it shrinks but the content still appears (now just on the background and not in the white box) Any ideas how i can get this to work how i want... is there an attribute i havent used thanks ever so much for your time ( i know this is an essay ) a good example is on the landing page for the site. the bottom navigation bar has come up (in IE) but the white box hasnt! thanks guys ed All I'm looking for is something like: <div class="field">Name</div> <div class="result">Jeremy</div> Where the size of the left div is set and the right div can extend to the right of the page, but not drop underneath. I had: .field{ float:left; width:150px; } result{ float:left; } Which works fine until there's a really long name on the right. In cases like this, I still want that div to stay over to the right, but instead it drops down. So I want: Name: .... Here's a really long name. Here's a really long name. .............. Here's a really long name. Here's a really long name. .............. Here's a really long name. But I'm getting: Name: Here's a really long name. Here's a really long name. Here's a really long name. Here's a really long name.Here's a really long name. The right "column" breaks down to the line below. Of course this is easy to solve using tables. Any suggestions for Divs? I located an archived thread from your forum http://forums.devshed.com/archive/t-10617/css-mouse-over and I am looking for an easy turorial on how to creat these mouse over links. Any assistance would be greatly appreciated. I have set my 'a' tag as follows PHP Code: a { display:block; width: 100px; padding: 5px; border-style: solid; border-color: #B1B1AA; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-width: 1px; } a:hover { width: 100px; background-color: #CCCCCC; border: 1px; border-style: solid; border-color: #B1B1AA; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-width: 1px; } a:link { color: #000000; } a:visited { color: #000000; } here's the problem. I only want a certain menu to have this style and I want all the rest of my links to be another way but right now, all my links are like how I have above. Can someone tell me how I can assign different link styles to different links? I don't want them all the same. thanks I have the hardest time w/ selectors and inheritance (esp nested div's and selectors). Can someone tell me if I have the following code, how do I select it in the css? ---html--- Code:
<body>
<div id="wrapper">
<div id="container">
<div id="banner">
</div><!-- END BANNER -->
<div id="navbar">
<ul>
<li><a href="index.html"><span>Home</span></a></li>
<li><a href="index.html"><span>Boats</span></a></li>
<li><a href="index.html"><span>Cars</span></a></li>
<li><a href="index.html"><span>RV's</span></a></li>
<li><a href="index.html"><span>Aircraft</span></a></li>
<li><a href="index.html"><span>Contact</span></a></li>
</ul>
</div><!--END NAVBAR -->
</div><!-- END CONTAINER -->
</div><!-- END WRAPPER -->
</body>
---css--- THIS DOESN'T WORK Code:
navbar span
{
display: none;
}
navbar ul
{
list-style: none;
display: block;
position: relative;
}
I guess when do I use # and when do I use . and when do I use them together? A good link that uses NESTED selectors would help because most examples don't include that. This may be a dumb questions as I think I already know the answer to it. Is there any way to protect your css page from others. I would like to protect my websites against those who want to just copy them. Ofcourse these are live websites and do not need to be penalized by Google in any way if it is possible. I haven't heard or seen anything on this but I knew you guys would know for sure. Thank You! Hi, I have created a horizontal navigation before with no problem, yet I am now having trouble. Here's the site: http://www.caillouette.com/Catering/ I have the Div named "indentmenu" and the <ul class="toolbar"> Here's the style sheet: http://www.caillouette.com/Catering/style2.css and here's the navigation: http://www.caillouette.com/Catering/header_nav.inc what am i doing wrong? thanks in advance. Hi from Athens,Greece! Glad to be here and hope i can help u as much as u help others and me of course. I have a problem that i think its common enough to give me a quick reply. I m using a separate ie css for a Joomla template, in that template suckerfish is used for the top drop down menu. When i open my forum as wrapped, under the top menu i also have the main menu for the forum. So if i click to the top drop down menu it appears like its obstructed by the forum main menu and its deosnt function well. I m gonna attach 2 pics, the first one is from opera and the other one its from IE the ie_css code its like this div#horiz-menu { PHP Code: } div#nav { position: absolute; top: 98px; left: 12px; } #nav ul ul a.daddy { width: 166px; } #access a { cursor: hand; } Ok, this is a problem I've never bothered fixing but I'm sure it's something simple. On virtually every horizontal CSS rollover menu I've ever built, IE7 always leaves a tiny artifact of the rollover background color on click. Here's my latest example(I'm using IE8's compat mode, but I've checked this in IE7 itself before): http://tinyurl.com/y6uf4zd CSS and XHTML are both valid. Here's the code I always use (but customize for the project): Code:
#navbar{
position:absolute;
top:162px;
left:47px;
width:448px;
height:26px;
color:white;
font-size:.75em;
}
#navbar ul{
margin:0;
padding:0;
color:#FFFFFF;
white-space:nowrap;
}
#navbar li{
list-style-type:none;
display:inline;
}
#navbar li a{
display:block;
float:left;
margin-left:8px;
text-decoration:none;
padding:.4em .75em;
color:#FFFFFF;
}
#navbar li a:hover{
background-color:#CCCCCC;
}
#navbar a:link, #navbar a:visited{
color: #FFFFFF;
text-decoration: none;
}
Go ahead and click a menu item in FF, and then click one in IE7. It never fails. IE7 always leaves a piece of the hover background-color to the right of the LI element. If you highlight the navbar, they go away... but it's very annoying. Lemme know where I n00bed. Thanks all. For my paragraph elements I want the text-indent: property to apply to every new line..... Instead of just the first line... How is this done? thank ye. Is it ok to nest a div tag inside a table? It appears to work correctly. Thanks! I am trying to get my container to be 100% the height of the browser window but have so far been unsuccessful, and I am not sure what I am doing wrong. Thanks for any help. 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=iso-8859-1" />
<title>TEST</title>
<style type="text/css" media="all">
body {
margin: 0;
padding: 0;
color: #333;
font: 13px Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
background: #EEEEEE;
text-align: center;
}
a {
color: #434C3E;
}
a:hover {
color: #F15925;
}
#container {
margin: 0 auto;
width: 724px;
height:100%;
position: relative;
background: #fff;
padding: 0 10px 0 10px;
text-align: left;
}
* html #container {
width: 744px;
w\idth: 724px;
}
#logo {
position: absolute;
top: 20px;
left: 70px;
width:94px;
height:147px;
background-image:url(../images/logo.gif);
}
h3 {
color:#555555;
}
#top {
height: 145px;
margin-left:240px;
}
#container #intro #quickSummary .p1 {
font-size: 11px;
height: 171px;
margin: 0;
width: 724px;
color: #fff;
font: 12px/150% Trebuchet MS;
}
#container #intro #quickSummary .p1 span {
padding: 30px 530px 0 30px;
display: block;
margin: 0;
font: 12px/150% Trebuchet MS;
}
#text {
margin: 20px 20px 0 243px;
}
#text p {
line-height: 150%;
margin: 10px 0 10px 0;
}
#footer {
color: #fff;
height: 48px;
text-align: right;
padding: 0 10px 0 0;
line-height: 26px;
font-size: 11px;
}
#footer a {
color: #fff;
text-decoration: none;
}
#footer a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div id="container">
<div id="intro">
<div id="logo"></div>
<div id="top"></div>
<div id="text">
<h3>Heading number one</h3>
<p class="p1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam arcu purus, sodales volutpat, eleifend ac, semper ut, dolor. Curabitur porttitor suscipit ligula. Sed vehicula mauris non sapien suscipit luctus. Fusce luctus pulvinar lectus. Aenean mi. Pellentesque rutrum nibh ut diam. Mauris porta, lectus sit amet ultricies lobortis, metus mauris semper orci, porta tincidunt neque dui ac magna.</p>
<p class="p2">Curabitur nunc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum eu purus ac nisl vestibulum ultrices. Pellentesque lacus. Suspendisse quam risus, hendrerit sit amet, gravida non, dapibus quis, ante.</p>
</div>
</div>
<div id="text">
<h3>Heading Number Two</h3>
<p class="p1">Etiam nec metus vestibulum lacus facilisis consectetuer. Cras sed odio. Sed et purus a pede condimentum fermentum. In hac habitasse platea dictumst. Integer ornare nisl eu sem.</p>
<p class="p2">Nam laoreet, eros non cursus varius, nisi enim pharetra nisi, ut fringilla nisl turpis a diam. Proin ac elit ut nibh nonummy ultrices. Phasellus felis quam, consectetuer in, bibendum et, dictum id, mi. Nunc quis eros id metus auctor volutpat. Nunc diam odio, vehicula a, accumsan a, semper quis, mauris. Ut mauris enim, ultricies sed, viverra non, porta vitae, dui.</p>
<div>
<h3>Heading Number Three</h3>
<p class="p1">Curabitur nunc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum eu purus ac nisl vestibulum ultrices. Pellentesque lacus. Suspendisse quam risus, hendrerit sit amet, gravida non, dapibus quis, ante.</p>
</div>
</div>
<div id="footer">Foo</div>
</div><!--end container-->
</body>
</html>
I am completely new to CSS. I usually use A LOT OF tables in my designs, and want to switch to CSS now. Anyways, I am trying to put 2 divs next to each other. here is what I have http://www.findagoodhost.com/2/ I'd like to make them as if I put a table with 1 row, 2 columns, but with CSS positioning. Any help would be apreciated. Thanks I have a seemingly easy requirement to place a comment bubble next to a title in a list of articles that would contain the number of comments it's received. I tried to put an div with the bubble as a background with centered text to put the number of comments in. The only say I seem to be able to do it it either disregards my sizing of the div so the bubble isn't visible, or I set the display to block which puts it on a new line which isn't what I want. My code seems straight forward?: 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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body, p, td, div {
font-family:Arial, Helvetica, sans-serif;
font-size:12px
}
div.article {
clear:both;
padding-bottom:60px;
}
div.article img{
float:left;
padding:0px 10px 10px 0px;
}
div.article .articleTitle{
font-size:16px;
font-weight:bold;
color:#36F;
}
div.article .articleDate{
font-size:10px;
font-weight:bold;
color:#666;
}
div.commentBubble{
background-image: url(comment_bubble.gif);
background-repeat: no-repeat;
text-align: center;
display:inline;
color: #666;
font-weight: bold;
font-size: 12px;
width: 32px;
height: 30px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
</style>
</head>
<body>
<div class="article">
<img src="shake.jpg" width="89" height="89" alt="shake" />
<span class="articleTitle">Title of story 1<div class="commentBubble">45</div><br /></span>
<span class="articleDate">July 11, 2011<br /></span>
Lorem ipsum text.Lorem ipsum text.Lorem ipsum text.Lorem ipsum text.Lorem ipsum text.Lorem ipsum
text.Lorem ipsum text.Lorem ipsum text.Lorem ipsum text.Lorem ipsum text.Lorem ipsum text.Lorem
ipsum text.Lorem ipsum text.Lorem ipsum text.Lorem ipsum text.Lorem ipsum text.Lorem ipsum text.
Lorem ipsum text.Lorem ipsum text.Lorem ipsum text.Lorem ipsum text.Lorem ipsum text.
</div>
</body>
</html>
A mock up of what I want is simply: URL but I get: URL and a copy of the code to play with is: http://www.kamunga.com/bubble/commentBubble.zip Any help or hints would be greatly appreciated!! I give up. *falls over* So.. I'm dabbling in CSS. I have a general idea of how it's used and all that good stuff... I'm just having some massive issues with some of the coding. Issues that I should not be having. I'm attempting to change the color of links, visited, active, hover and otherwise. But here's where it gets strange. I get the links to change color. But... they won't all change. My code was initially more complex, but with this problem I've hacked it down to this incase there was some non working bit of text somewhere that was making something not parse properly... Code:
A:link { color:#2A2C8B; }
A:visited { color:#1D1D2D; }
A:active { color:white; }
A:hover { color:#7A7CBB; }
In this example, visited, active and hover work beautifully. Link, on the other hand, is the same old boring color as usual. So in a fit of desperation, i alter my coding as follows: Code:
A:visited { color:#1D1D2D; }
A:link { color:#2A2C8B; }
A:active { color:white; }
A:hover { color:#7A7CBB; }
now the visited link does not work, and the bottom three do. Why? why? *cry* here's the entierity of my style sheet, if anybody wants it. Code: <style type="text/css">
A:link { color:#2A2C8B; }
A:active { color:white; }
A:visited { color:#1D1D2D; }
A:hover { color:#7A7CBB; }
body {
Font-variant: Arial;
color: #111128;
font-size: small;
background: #6C5165;
background-image: url(swirlstar2.jpg);
background-repeat: repeat;
background-attachment: fixed;
margin-left: 10%; margin-right: 10%;
h1 { margin-left: -8%; }
h2,h3,h4,h5,h6 { margin-left: -4%; }
}
</style>
I am aware that there may well be an error or five in the body section... but I honestly havn't done alot of work there yet. my main concern is getting the links to work properly. And yes, I've tried snipping out the body tags and like leaving the link stuff there and it doesn't work. I've checked this in both Firefox and IE. My editor is notepad. Help? It's really appreciated... thank you. Hey, I think i just need someone else to look at this for me. I've been coding all day and would probably be able to figure this out if I just went to bed and did it tomorrow. If you roll over an image that's alson an anchor at www.deeperdevotion.com/wp, you'll find that it places a background-color or underline or both on it. The thing is, I can't find the code in my CSS that's causing me the trouble. my css is located at www.deeperdevotion.com/wp/wp-content/themes/dd/styles/101106.css Thanks. Hello. I am new at css and web design so if these are easy problems please excuse. First of all, the website url http://www.onlinecasinoboss.com In Firefox, the unordered lists <ul> in the left column do not display correctly. The left margin is way too big. I'm not sure why, please look at the page in IE to see what I want it to look like. And in Internet Explorer, the spacing between my top image, header bar, and main page is screwy. There should be no space between the header image and header bar (the flags are in this area). Also there should only be 2px spacing between the header and the main page, however it appears there is atleast 24px there. Again please refer to the page in FF to see what I want it to look like. I like css, and have decided to pursue my first design in css based off of the many professional designers reconmendations and reviews. But I must say it is a major headache to deal with cross-browser/platform display problems. And what professional designer wants to rely on 'css-hacks' when producing a product for a major vender. Just beginner bitching. Thanks for the help! Hello everyone, I am hoping I could get some help on this. I'm the new Marketing guy at this company. One of my duties is to fix an issue with our website which was built by the last guy to sit in this chair. I may not know how to build a proper webpage, but this guy knew exactly how not to do it and ran with just that. So, the issue lies within this example page: tinyurl.com/rediculouswebsite The footer ends up under-lapping the table when viewed in IE (when not in compatibility mode) and Firefox. I know this is a ridiculously constructed site, I just need to fix this one problem and be done with web development forever. High fives and scotch from my boss very well may ensue. Thank you all very much. |
|||||||