|
CSS - Defining Tags Within A Division For Seperate Formatting
Ok what i have been asked to do is set up a webpage with three divisions ( i think), in a column structure. Title at top then seperate divisions? for each of my books which will be getting added.
Now the books should be contained as the book title, author, publisher etc with an image to the right of all this information. However the author, title and publisher have all different formats, the author should be bold, the title in italics etc etc. I am finding it difficult to know what tag to use to split up this information. Just now i have created a <div> section labelled book1 for the first book. How do you go about splitting up the txt within this division tag as i will be writing a CSS sheet to manipulate the author, title and publisher with all different formats. Thanks Similar TutorialsI know this is in the archives. I thought I understood how to do this but I can't seem to get it to work correctly. As always it's ie that won't render it correctly. I have one division inside another. The outer division will center but the nested division will not. I've set html and body to text-align:center , I've added the text-align:center to the body tag and then the division to text-align: left . It's just not working. Here's the example code: Code:
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type='text/css'>
HTML { align-text:center;}
body { align-text:center;}
#wrapper { margin: 50px auto; text-align: left; height:124px; width: 250px; }
.upper { margin: 15px auto; width: 50%;}
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000" style="text-align:center">
<DIV id="wrapper">
<DIV class="upper">Just some text. Just some text. Just some text. Just some text. Just some text. Just some text.</div>
Text to show the area.
</div>
</body>
</html>
Help Also, why is it necessary to have the text-align=center definition in both the embedded sheet and the in-line. after just getting my site fixed up, I have encountered a small problem with the divs, where the middle div (the main content) just ignores the right div (where im going to put adds). I was hoping someone could take a quick look at it and tell me how i could fix this small problem. http://funnyguys99.tripod.com/index.htm There are better details of the errors on my page, if you didn't quite get the problem. I have a division on my web page. I've set the width to 800 and the height to 100. Inside of the division I have 3 nested divisions The first holds a logo and is positioned absolutely within the wrapping division so that it appears on the left side. The division has a background image and the word "HTML" that is centered both vertically and horizontally within the nested division. The second nested division is positioned so that the text within it appears in the upper right of the wrapper. The third nested division is positioned so that the text displays in the lower right hand. The problem is that in IE I am getting alot of white space between the bottom of the wrapper and the bottom of the third nested division. This does not happen in firefox. Can anyone tell me what is hapening here. Im trying to figure out the best way to do this. Im running Wordpress with a CSS themed template, but Im running into a problem. Im posting little examples of menus/layouts that require a different CSS file to display correctly. I tried just adding the new bits to the main CSS file, but there is some overlap of some part and it changes it from whatd it look like on a page of its own. How can I post something into a page but still have its own style? I know how to center a division horizontily in a page with this: Code: #division {
width:800px;
left:50%;
margin-left:-400px;
}
Now I havent been able to center it both horizontilly and vertically, in a fashion that will resize the division based on the resolution. In other words I do not want to use absolute left or right locations. Any help would be appreciated, thanks! Hi, these forums have being a godsend to me so far, providing really useful information on my road to becoming a webdesigner, I wondered if someone could help me with a CSS problem I am having. I want to have a green background behind some text, however, I want the background to just be behind the text not to extend all the way across the screen. I think that the best way to do this is to have a division that I set the length of using CSS and include the text in there, my code so far is as follows: <style type="text/css"> body {background-color:} h1 {background-color: #00ff00} p {background-color:} h2 {background-color: transparent} div.block {style=width:300px} </style> <div style="width: 300px"} <p><h1>THIS TEST</h1></p> </div> <div class="block"> <p><h1>THIS TEST</h1></p> </div> For some reason the div is not tallying with the div.block in the style sheet, if I specify the width of the division in the actual html tag within the body its working fine, can anyone spot what I might be doing wrong. I will give some time back at this forum helping others when I am finished on my current project in exhange for the time people have given up for me. Thanks I've got my normal navigation links styled using the standard a:link, a:hover etc etc. I want to include an image on one of my pages which links to a download, because the style applies to all 'a hrefs' the properties for my text links are assigned to the image (for instance a border is given). Is there a way to assign a different class to the image hyperlinks? Cheers. i have a layout like so: Image here the reason for the main block was to see if i could set the footer to the bottom of the main block so that it would stay below the content column, ive added a border to the main block to see where it is, and it only seems to go around the header and footer, ignoring the middle columns. You can view the site here, the big border at the top is the border around the main part I'm trying to tile a background image horizontally with a vertically tiled background image centered on the page. Being new to css and not particularly fluent in html (although more so than css), I have no idea how to go about doing this or if it is even possible. I do have both images working separately though. Help would be appreciated. -alexa I've read up, and have always used a bit of CSS. I'm redoing my site, and noticed something different between Mozilla and IE. Personally, I'd ditch IE, but 98% of my viewers use it, so I can't. Basically, in IE, the following works: Code:
P
{
color: black;
font-size: 10pt;
font-family:tahoma;
}
myown
{
color: blue;
font-size: 10pt;
font-family: Tahoma;
}
<myown>This is my text</myown>
When I run it in IE though, it basically ignores the self-defined tag, and requires me to use a pre-defined keyword. I don't want to use "P", b/c it carries the html<P> tag characteristics... a new line in this case. Thanks. Is it possible to define the size of a DIV, by distance to the edges? Hi, I have been a CSS/XHTML developer for about 6 months now and I just came accross a problem that I have had difficulty solving... I have spent about a week on this problem, and still no luck... I kind of restarted too with no luck... I am thinking this may be a bug... But it works fine in IE... In firefox, the content division background does not continue, instead a footer background is moved up... This is so weird, I dont know how this can be possible... This has been extremely frustrating... If anyone can help, that would be great! Thanks a lot! Hey all, So i have two files my html file: Code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<a href="#">this is a test</a>
</body>
</html>
And my css file: Code:
a:link {color:#000000;text-decoration:none;}
a:visited {color:#000000;text-decoration:none;}
a:hover {color:#CC0000;text-decoration:underline;}
a:active {color:#000000;text-decoration:none;}
except that the styles don't work on the links. If i put the styles in <style> tags in the html head it works, but in a seperate file they don't, can someone help me? thanks! - legit Edit, whoops sorry, I had the wrong name for my css file Hello I have defined the following rules for anchors: Code:
a:link {
color: green;
text-decoration: none;
text-transform: none;
list-style-type: disc;
font-family: Arial;
font-size: 12px;
}
a:hover {
color: blue;
text-decoration: underline;
text-transform: none;
list-style-type: disc;
font-family: Arial;
font-size: 12px;
}
a:visited {
color: orange;
text-decoration: none;
text-transform: none;
list-style-type: disc;
font-family: Arial;
font-size: 12px;
}
a:active {
color: red;
text-decoration: none;
text-transform: none;
list-style-type: disc;
font-family: Arial;
font-size: 12px;
}
I have 2 links in the site: Code: <a href="1.html">1</a> <a href="javascript: void test();">Test</a> The first link obeys the rules defined above The second link doesn't obey the hover rule for some reason. My only guess is that triggering JavaScript code from links may cause this problem. I am testing this on IE6 On Mozilla and Opera both links work fine I would appreciate any help very simple. this may sound strange, but i figured css would be the easiest solution. i simply have one of 2 characters that will display in each TD of a table. either Y or N. is there anyway to specify the color of the background, or TD, depending on the character within? if its Y, make it red, and if its N, make it blue. that all. any ideas??? Hi to all, & this is my question: say I have a css class such as: .classA1 { color: RED; font-weight: bold; font-size: 11px } Now I want to define other classes, that vary only in the font color, while everything else remains unchanged, for example: .classA2 = { color: GREEN; rest same as A1 } .classA3 = { color: BLUE; rest same as A1 } .classA4 = { color: YELLOW; rest same as A1 } How do I go about it, so I avoid having to repeat every time the same attributes? I know there is a way of defining a main class & then the variations (like for elements - a - a:hover - a:visited etc..) but I'm not sure how you do this... Thanks a lot for your help, Luca how do you define the the color of a hyperlink before it has been clicked and after it has been clicked? Thanks. I have some CSS for forms as seen below. (depreciated version) Code:
<div class="item">
<div class="text">Your Name:</div>
<div class="field"><input type="text" /></div>
</div>
...
form .text {
float: left;
width: 75px;
}
form .field {
float: left;
}
Some forms I'd like to be wider than others, though. Is it possible to define the width of .text using inline styles (eg: <form style="*">) rather than create a new class for each width I want to use? Need some help defining a border around my index page. It shows up and works fine in IE but when I switch to FF/Netsxcape the page border is short of the content. Here is my page: [Not an actual business...just a learning project] My Home Page Here is My CSS file: My CSS File Now I ran both my HTML and CSS through the W3C Validators and all comes back perfect. (I know there is some small "clean-up" issues in my code, but I don't think it's relevant to this border issue...Maybe it is?) Anywhooo, when this page is displayed in FF or Netscape the bottom 1/3 of page content runs below my border...but shows up fine in IE. If there is a better way, (than defining the whole <BODY> as a <DIV> element) please enlighten me! Thanks for helping me learn...(in advance) PWD |
|||||||