|
CSS - Reference Question And Code Question
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. Similar TutorialsReally basic question. I've created a CSS text class. How do I reference it to apply to a text sample? I've been using this page as my guide: http://www.htmlgoodies.com/beyond/css/article.php/3470231 But they only reference commands such as <I class="name"> and <U class="name">. I don't want to add any Italics or Underlines, so how do I only reference the class? Hello, I am confused about the code: white-space: I understand: white-space:nonwrap. But confused about the difference in the following: white-space: pre white-space: pre-line white-space: pre-wrap Any feedback is appreciated. Hi, I have made myself some ugly css code (just got started so this is my first try) that gives me a floating sidebar on my right side. This sort of works for IE6 (that most of my friends use) and I don't even dare to think about the look of it in another browser... So I would greatly appreciate some advice regarding improvements of the following code... Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
<!--
@media screen {
html {overflow:hidden;}
body {height:100%; overflow:auto; margin:0; padding:0; color: white;
background-color: #333;}
#container {position:fixed; margin-top:30px; margin-right:auto;
margin-bottom:30px; margin-left:auto; width: 1000px;
padding:10px; background-color: black; border: 1px solid
white;}
#header {position:fixed; margin-top: 0px; margin-right: 99px;
margin-bottom: 10px; margin-left: 99px; height:60px;
padding:0px; background-color:red; border: 1px solid white;}
#sidebar {position:relative; width:178px; height:150px; left:10px;
top:0px; padding:5px; background-color:blue; border: 1px
solid white;}
#intro {float:left; margin-top: 0px; margin-right: 0px; margin-bottom:
0px; margin-left: 0px; height:150px; width:788px; padding:5px;
background-color:green; border: 1px solid white;}
#content {margin-top: 10px; margin-right: 200px; margin-bottom: 10px;
margin-left: 0px; padding:5px; background-color:green; border:
1px solid white;}
#navbar {margin-top: 0px; margin-right: 99px; margin-bottom: 0px;
margin-left: 99px; height:75px; padding:0px; background-color:
red; border: 1px solid white;}
}
//-->
</style>
</head>
<body>
<div id="container">
<div id="header">A NICE HEADER</div>
<div id="intro">A USEFUL AREA FOR SECTION INTRODUCTION </div>
<div id="sidebar">TEST1<br>TEST2<br>TEST3</div>
<div id="content"><b>lot's of nasty things...</b>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
</div>
<div id="navbar">MY GLORIOUS NAVIGATION BAR</div>
</div>
</body>
regards /twinkle 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? 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. 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, 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 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 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. 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? 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'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 im updating a site, and figure ill start from scratch just using nice tidy css. im keeping all the design elements (well for the most part), just updating the code.(its pretty cluncky and haphazard as it is) Its been hashed apart by different folks working on it. there is a design strip that's supposed to always sit on the left of the page, the menu bar and content is suposed to be centered but not cross over the design strip on the left. the design strip is styled in the body tag any help is appreciated william Hello, im just new in CSS I've been wondering how did facebook did the navigation bar there.. the address bar (or maybe bookmarks bar) is really close to facebook's navigation bar and the navigation follows as I scroll can you please explain to me how did they do that? I want to do it on my site too... thank you! I got the following... Line : 0 font-family: You are encouraged to offer a generic family as a last alternative here is the .css file any suggestions as how to make a font family non generic. Code:
<!--
body{
margin: 10px 10px;
font-family: "Arial",Times;
background-color: #FAEBD7;
}
form{
padding: 2px;
font-size: 10pt;
line-height: 12pt;
font-family: "Arial",Times;
}
input{
background-color: #FAEBD7;
border: solid 1px #000000;
}
div{
width: 700px;
padding: 10px;
background-color: #FAEBD7;
}
div#header{
height: 25px;
color: #8E2323;
font-size: 12pt;
font-weight: 600;
line-height: 14pt;
text-align: center;
letter-spacing: 2px;
font-variant: small-caps;
font-family: "Arial",Times;
}
a{
padding: 2px;
color: #8E2323;
font-size: 11pt;
line-height: 16pt;
text-decoration: none;
}
a.na{
color: #000000;
font-size: 11pt;
font-family: "Arial",Times;
}
td#navContainer{
padding: 5px;
color: #000000;
font-size: 11pt;
text-align: left;
line-height: 11pt;
font-variant: small-caps;
}
p#footer{
width: 565px;
padding: 5px;
font-size: 11pt;
font-variant: small-caps;
font-family: "Arial",Times;
}
td#footer{
width: 565px;
padding: 5px;
font-size: 11pt;
font-variant: small-caps;
font-family: "Arial",Times;
}
div#viewContainer{
width: 550px;
padding: 10px;
font-size: 11pt;
text-align: left;
font-family: "Arial", Times;
border-left: solid 1px #000000;
}
p#copyright{
width: 700px;
padding: 5px;
font-size: 8pt;
line-height: 10pt;
text-align: center;
font-variant: small-caps;
font-family: "Arial",Times;
}
//-->
I need to build web page like this. Is it possible to make it with divs. I believe it is, but I can't manage how. Can you please help me with my little problem? Thanks in advance! Hello, We are trying to create a navigation button using jquery, css. We got everything working but we cannot make the images line up on the same line, next to each other to form a single (looking) navigation bar. Code is below Any ideas / help would be great. Thank you, Scott -------------------------------------------- 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>
<script type="text/javascript" src="scripts/jquery.packed.js"></script>
<style type="text/css" media="screen">
* {margin:0;padding:0;list-style:none;}
body{font-family:"Trebuchet MS";font-size:13px;padding:2em;}
h1{font-size:28px;}
div{margin:0 0 2em 0;}
p, pre, ul, li{margin:0 0 1em 0;}
pre{padding:1em; border:solid 1px #ddd; background:#f8f8f8;}
/* BEGIN CSS */
.fadeThisFront {
position:relative;
display:block;
height: 38px;
width: 121px;
background:url(images/on-off-event-front.png) 0 0 no-repeat;
}
.hoverFront {
position: absolute;
top: 0;
left: 0;
display: none;
height: 38px;
width: 121px;
background:url(images/on-off-event-front.png) 0 -38px no-repeat;
}
.fadeThis {
position:relative;
display:block;
height: 38px;
width: 257px;
background:url(images/on-off-event.png) 0 0 no-repeat;
}
.hover {
position: absolute;
top: 0;
left: 0;
display: none;
height: 38px;
width: 257px;
background:url(images/on-off-event.png) 0 -38px no-repeat;
}
/* END CSS */
</style>
<script type="text/javascript">
$(document).ready(function() {
// find the div.fade elements and hook the hover event
$('.fadeThis').hover(function() {
// on hovering over find the element we want to fade *up*
var fade = $('> .hover', this);
// if the element is currently being animated (to fadeOut)...
if (fade.is(':animated')) {
// ...stop the current animation, and fade it to 1 from current position
fade.stop().fadeTo(500, 1);
} else {
fade.fadeIn(500);
}
}, function () {
var fade = $('> .hover', this);
if (fade.is(':animated')) {
fade.stop().fadeTo(500, 0);
} else {
fade.fadeOut(500);
}
});
// get rid of the text
$('.fadeThis > .hover').empty();
});
</script>
<script type="text/javascript">
$(document).ready(function() {
// find the div.fade elements and hook the hover event
$('.fadeThisFront').hover(function() {
// on hovering over find the element we want to fade *up*
var fade = $('> .hoverFront', this);
// if the element is currently being animated (to fadeOut)...
if (fade.is(':animated')) {
// ...stop the current animation, and fade it to 1 from current position
fade.stop().fadeTo(500, 1);
} else {
fade.fadeIn(500);
}
}, function () {
var fade = $('> .hoverFront', this);
if (fade.is(':animated')) {
fade.stop().fadeTo(500, 0);
} else {
fade.fadeOut(500);
}
});
// get rid of the text
$('.fadeThisFront > .hoverFront').empty();
});
</script>
</head>
<body>
<strong class="fadeThisFront"><span class="hoverFront">This text is hidden</span></strong>
<strong class="fadeThis"><img src="images/nav-divider.png" width="2" height="38" /><span class="hover">This text is hidden</span></strong>
</body>
</html>
|
|||||||