|
CSS - Beginners Css Question
Hi,
i'm very new to web design and learning as i go so apologies if this is a stupid question The website for the Red Hot Chili Peppers has a cool effect where the background color of the page changes when you hover over the navigation links Is it possible to achieve this with CSS? I have been experimenting with transitions but they don't seem to be able to do this thanks in advance for any help Similar TutorialsI'm having a difficult time trying to set up a certain layout using css & div tags. I am not capable yet to create post containing a url. However, I've created in my linked css sheet, #header, #sideinfo, #maincontent, & #footer. I attempted using the position:absolute; and figure out in %'s how to lay each div out (max %=100) some elements work fine, while others do not work. This is probably a severe noob question, but I appreciate any help on this as it will be used as building blocks for the next steps to come. Thank You again. How can I fit the following into a CSS file (external stylesheet)? Code:
<div id=Canterbury style="position:absolute; width: 200px; height: 52px; z-index: 1; visibility: hidden"><table
border="0" cellspacing="0" cellpadding="0"><tr><td bgcolor="#FFB928"><!-- border colour --><table border=0
cellpadding=1 cellspacing=1>
<tr id="Canterbury1" bgcolor="#FFD784"><td><a class=menu href="#" onMouseOut="menuOut('rollimg2'),setBgColor(
'Canterbury1','#FFD784')" onMouseOver="menuOver('rollimg2'),setBgColor('Canterbury1','#990000')" target=
_top><img src="rp.gif" border="0"> BBC Radio Kent</a></td></tr>
<tr id="Canterbury2" bgcolor="#FFD784"><td><a class=menu href="mms://ms1.capitalinteractive.co.uk/invicta_low"
onMouseOut="
menuOut('rollimg2'),setBgColor('Canterbury2','#FFD784')" onMouseOver="menuOver('rollimg2'),setBgColor(
'Canterbury2','#990000')" target=_top><img src="wmp.gif" border="0"> Invicta FM</a></td></tr>
</table></td></tr></table></div>
I have a few other placenames as well, as you can see from www.radiofeeds.co.uk/maptest/csstest.html, but there are a few ids where I'd like to exclude these settings from. I know I can set the whole of the Canterbury block with: div#Canterbury,div#<any other placeneames> { position:absolute; width: 200px; height: 52px; z-index: 1; visibility: hidden } But how can I also have the border colour (<td bgcolor="#FFB928">), bgcolor, onMouseOut and onMouseOver properties put into the CSS file? Please can I have the code for the CSS file and for the replacement code that goes back into the page. I'd like this to be efficient as possible. Hi all, I have been teaching myself CSS for a website I am making, which has all been running smoothly until an issue today. Basically the issue is with a .class DIV nested inside a #id DIV.. Code:
<div id="wrap">
......
<p>...</p>
.......
<div class="info_box">
........
<p>.....</p>
......
</div>
.......
</div>
Using CSS, i set the font color (among other things) for <p> to be different in the "wrap" id and "info_box" class.... and I was shocked to find that the styling I had written for the class was ignored, and it was using all the styling specified for the ID. After searching, I found that this is because of specificity, in which the #id has a higher specificity. Although I now know the cause, i am not sure what I should do? I would like to be able to keep "info_box" as a .class, because I would use it more than once on a page. The only solution I can think of is to make the "wrap" a .class, but this does not seem logical, as I only use it once. Please Help! Greetings all, Firstly, I am just now starting to use CSS instead of tabled layouts. I must say I am impressed by the power of CSS, but am still learning the ins-and-outs of it. I was wondering if there are any good references/books you'd suggest purchasing or looking at online? Now for my specific question. For my simple page project I am using to learn CSS, I have a <div> that denotes the header. This is supposed to simply have a small .jpg image on the left and some text on the right, like this: ___________________________ |[ i m a g e ]....................text | However, it comes out looking like this: ___________________________ |[ i m a g e ]..........................| |.....................................text| I suspect it is due to the align: right of the text, but am not sure how to correct it. Relevant snippets of code: testpage.html Code: ... <div class=header> <img src="image.jpg"><h1>TEXT</h1> </div> ... style.css Code:
...
#header{
background-color: #FFF;
border: 2px solid #666666;
width: 860px;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
margin-bottom: 0;
}
#header h1{
text-align: right;
margin-right: 20px;
font-style: italic;
letter-spacing: 3px;
}
Thanks for any advice. Hi, I have three <div> Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<div id="container" style="width:500px;height:700px;background-color:green;">
<div id="one" style="float:left;width:100px;background-color:#ff9900; ">one<br>one<br>one<br>one<br>one<br>one<br>one<br></div>
<div id="three" style="float:right;width:100px;background-color:red;">three </div>
<div id="two" style="float:left;width:70%;background-color:#ff9988;">two jdfk hnldncf ddhf sd ohdnfc kbldhcv ohsvnskd hvjnsdhv hviopsdhv kbhopvd v onksdnv oln;sdmnv m;mv mnml;vm vm;klf kdfl'gl;v 'fg 'kdf'kvb'l ;'lfk</div>
</div>
</BODY>
</HTML>
I noticed when I increased the % width of my <div two> it goes below my <div three> I was under the impression it should just stay at the same level and text should wrap around my div three? But I guess that's not the case. Am I doing the something wrong or is this the expected behavior? Anyone know why the <div>'s aren't displaying correctly in FF? View with IE if you want to see how it should look. http://www.cooperworkskilns.com CSS: http://www.cooperworkskilns.com/styles/layout.css Hi, I have the below css style that I am mostly using my pages, I have a standart anchor style. Anyway I want to attach "the other one" link with another style without touching the current style. How can I do this? Does CSS has a nested thing like c++? Thank you, Cem Code:
<html>
<head>
<style type="text/css">
<!--
a:link {font-family:verdana,helvetica; font-weight: bold; font-size:11px; color: #0069b7; text-decoration: none;}
a:active {font-family:verdana,helvetica; font-weight: bold; font-size:11px; color: #0069b7; text-decoration: none;}
a:visited {font-family:verdana,helvetica; font-weight: bold; font-size:11px; color: #0069b7; text-decoration: none;}
a:hover {font-family:verdana,helvetica; font-weight: bold; font-size:11px; color: #000000; text-decoration: none;}
-->
</style>
</head>
<body>
<a href="http://url">First one</a><br>
<a href="http://url2">The other one</a><br>
</body>
</html>
I'm not sure is this question relating to css or javascript. Pls help. thanks alot Q1: What are the ways you can deal with x-browser issues? What are the pros and cons of each? Thanks, Gary I am currently working on a site: www.wirelessguy.net I am trying to get it so that when links are clicked, the pages load in the middle white section. I don't have the links made yet, but I've been messing with it with text only. I made the site template in a php file, then I include that file on all my pages that I create. How can I get pages to load in the middle section of the site? i am having a small issue with font size in browsers. i am using smarty template engine to create websites, i have originally created the html pages using css after slicing in photoshop. the pages look similar with respect to font sizes in all browsers when i integrate this html page into smarty i am using a copy of a template in smarty to create a website, so this copy also has a css file, i have commented most of the code in this css file which is in the smarty folder and i have used my css code which i initially created. the problem i am facing is with firefox only and all other browsers work fine only in firefox the text for h1, h2, p, ul li, a... etc are all appearing 1px smaller in size when compared to all other browsers i have tried using !important and inline styles however only firefox is displaying the text in the entire page 1px smaller compared to all other browsers which is not consistant. i have the following in the css file * { margin: 0; padding: 0; border: 0; } body { background: #ffffff; font: normal 12px Arial, Helvetica, sans-serif; margin: 0; padding: 0; } please advice. any help will be greatly appreciated. thanks. how can i center a div in the center of a page, but within that div align every thing to the right. It seems simple but I can't get it to fly. OK .. I have 5 layers surrounding each one of my menu links .. the layer over-laps another layer with the main content in. Now if you look here you will see what i mean .... http://www.geocities.com/jezman2002/index.html You can see four of the layers but the top one i need to be black AFTER it crosses the line !!!! Do u see what i mean I just wondered if there was any easy way to do this ??? -Thanks- If you would be so kind as to visit www.footbagfreaks.com, you will see a sample site using css. On the main navigation, I am curious about something. What establishes the height of each nav element? They are all uniform. What I would like to do is this, which I hope I can explain. I would like to have a set dimension for each nav element, lets us just say each to be 30px high, by 150px wide. I would like to specify the area, 30 x 150 have a rectangular trans. gif as its background and the initial color of the bg would be the same as the trans. gif. On a mouseover, the bg color would change, and thus would show the the new color through the portion of the trans gif which is transparent. Basically, the same effect as on the logo on the top left of the page. If someone can help me with this, I'd appreciate it so much. Hi everyone. I was wondering if it was possible to create a link from already existing text on a page by reworking the styles in the cssstylesheet file? I'm currently editing around a shopping cart for a client but i was wondering if I could take a bit of a shortcut using css instead. Thanks for your time. Pablo If I have a link that I want to display in the center of a module that no matter what size a user chooses it stays centered..IE. via user config a user can make it 100px or 400px.. [module width] The question is how can I center a link and no matter what the user picks for a width as stated above the link stays centered? Hi... I was just wondering.. when u have something like: margin:5px 10px which side does the 5px and 10px apply to? thanks in advance Hi im a relative newbie and am having a really annoying and stupid problem. I have a 3 column layout but the 3rd column "rightcolumn" for some reason is in the 2nd column "middlecolumn". It would seem like there's a missing </div> but i can't figure it out. any help would be awesome source: kdpatton.com/test.htm I'm building a simple gallery site for my old man, who wants a place to upload his artwork. I've made all the slices in ImageReady for the images around the edge of the screen, and customised the code so that they fit to any resolution. I'm having a problem with the DIV tag that I would like to contain the main section of the site. I would like it to fit the gap in the middle - whatever size that may be - so it can scroll if necessary later on. As it is though, it just wraps around whatever content I put there. Here's the stylesheet code for that particular DIV: Code:
#vg-09 {
position:absolute;
margin-top:183px;
margin-left:49px;
margin-right:56px;
margin-bottom:97px;
background-image: url(images/vg_09.gif);
}
I thought those margins would make it meet the surrounding images, but it doesnt work. I've also tried setting the height and width to 100%, but then it extends beyond the size of the screen and looks ugly after scrolling. Here's the Page: http://vic.retina-designs.com Does anyone know how I can get that DIV layer to sit flush against all the surrounding images? Thanks for any help! EDIT: Added the link Can either someone direct me to a webpage or help me out in figuring out what to do when one css style interferes with another? I have a couple different style sheets and when I load them together in one page one style is taking over another one. Thanks. I Need a div to be placed absolutely at 225left, 0right, 0top. In Firefox this works great the border I have around it seems to work just fine. The problem is IE. It doesnt seem to want to go all the way across. I think the problem might be the position of my div. I have an outer layout file that has the header in it with the logo and whatnot for the site but sub sections of the site need their own logo to go Centered betwwen the right edge of the main site logo and the right of the screen. Since the sub sections have no idea about the outer layout I need them to absoutely position their own div. Here Is the code i'm trying to use. Code: <style type="text/css">
.logo{
position:absolute;
top:0px;
left:225px;
right:0px;
margin:0px;
padding:0px;
border:1px solid black;
align:center;
}
</style>
<div class="logo">
<div align="center" style="width:100%;">
<img src="images/showlogo.gif">
</div>
</div>
In firefox you see a border starting a 225 from the left and stretching 100% of the rest of the screen. In IE its about 225 from either edge of the screen I'm probably doing something stupid but I dont see it. |
|||||||