|
CSS - Css + Html Question!
Are the HTML tags, <style></style>, in the CSS file? Why do you have two separate body sectors in your CSS? Just put them into one.
Similar TutorialsI'm an HTML+CSS beginner and I'm creating a website from a template. The style sheet of the website defines stuff like headers as suited to the general look and feel off the website. Good. But the website allows me to post articles and the articles (which are written with an HTML editor so they use standard HTML elements) pick up those styles and they look terrible. I think the easiest solution is for me to create some new styles in my CSS specifically for articles. Then, when I post a new article, I would add something to the article's HTML instructing it to use those new article styles instead of the general styles. So, I tried adding this to my CSS file: #article h1 { color:#ffffff; } And I surrounded the HTML of my article with this: <div class="article"> ....the article's HTML </div> But this didn't have any effect on how the <h1> within the article is displayed. What am I doing wrong? Hello All, I've had great luck with this site helping out in the past. My main question I want to ask today is just to see if others think that I have layed out this page as efficiently, and as easy to work with cross-platform as I can. Because I'm having problems with IE on XP looking good with it, whereas it looks good on Mac. If you have suggestions of how to lay things out differently, I'd really appreciate it. Here's the site: http://www.genius-creative.com/index2.html Here's the attached CSS: http://www.genius-creative.com/geniusall.css Thanks a million! -Brandon 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 would like to make a html 'button' tag of 'submit' type look and behave like a html hyperlink. (For those who would be curious, the reason is that I want to pass a variable to the target script, using the post method rather than appending a name-value pair to the hyperlink url, while keeping a conventional presentation. In the end, it should make the passed variable less visible for the end user, except of course if they look at the source code and look for a hidden input). I considered to use the CSS2 system colors codes, but I did not find a code for hyperlink, and anyway, system colors will be deprecated in CSS3, so it is no good idea if I want to make my pages portable in the far future. I tried to use the appearance property from CSS3, but it does not seem to be wel implemented yet in current browsers. For now, I just styled my html button, removing border, and setting the background and foreground colors to something similar to an hyperlink, but then I have no guarantee that this will match the actual look & feel in the end user's browser. Any hint or suggestion ? 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 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? 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 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. 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>
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'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 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- 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? I'm putting together a study guide and was wondering, What is Cascading about Cascading style sheets? I have a simple layout done all in CSS. The code is below. With the right boxes that are there, is there a way to make them stretch based on the content that's in them? Right now I'm using absolute positioning but if the content stretches the top box, then as you can see it stretches it into the next box. I tried changing it from absolute to relative and floating it to the right but the box just disappears then. Also, is there another way to achieve the look I want (simple 3 column layout) by using CSS just in a different manner? I'd like it to adapt to any resolution that a user may have and I'm not quite sure how to do that. Any help you can provide would be greatly appreciated. Thanks! Code: <html>
<head>
<title></title>
<style type="text/css">
.BODY{
background-color: #FFFFFF;
color: #000000;
}
.left{
position: absolute;
left: 10px;
width: 150px;
border: 1px solid;
height: 100%;
background-color: #EFEFEF;
color: #000000;
}
.center{
margin-left: 159px;
margin-right: 400px;
border: 1px dashed;
height: 25px;
background-color: #EFEFEF;
}
.right{
position: absolute;
right: 10px;
top: 85px;
width: 150px;
height: 100px;
border: 1px solid;
}
.right2{
position: absolute;
right: 10px;
top: 195px;
width: 150px;
height: 100px;
border: 1px solid;
}
.banner{
border: 1px solid;
height: 50px;
width: 100%;
}
.nav{
border: 1px solid;
height: 15px;
width: 100%;
background-color: black;
</style>
<div class="banner">Banner</div>
<div class="nav"></div>
<div class="left">
Nav
</div>
<div class="center">Center contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter contentCenter content</div>
<p><div class="center">test</div></p>
<div class="right">
<b>Featured Article:</b>
<br />
<i><small>Featured article link goes here...</small></i>
<br /><br />
<b>Recent Articles:</b>
<br />
<i><small>Recent article links go here...
</div>
<div class="right2">
Test 2
</div>
Relatively new to CSS, never done anything sans tables. Yes, it all looks fubared right now, but as this is sort of a learning experience, I'd like to tackle one thing at a time. Positioning is...I'm not getting it. Right now, the big thing is getting the "content" div to line up at the top. I've tried various combinations, and the one that works best so far (in Firefox and Safari, at least, IE is totally awful) is what I've got (relative, 25% in from the left) -- at least I get the thing lined up where I want it on the right. But I can't seem to get it to scoot up to the top. I played with the top margin, but that didn't do anything either. The page is he http://www.describe.org/homework/esdcar/ (scroll down to see the problem) The css is he http://www.describe.org/homework/esdcar/esdcar.css And eventually, hopefully, it should look like this: http://www.describe.org/homework/esdcar_home.jpg Yes, there's lots more to fix (the navigation, the announcements box, and so on) and I will be back with more questions, but I think if I can at least get this one fixed I can try fixing the other things on my own before giving up and seeking help again. I'm trying to make a simple style sheet that will work with firefox, I can get one to work in Internet Explorer but not in firefox. I have split up the stylesheet and tried to import it through php but when it came up, things like repeating-x or y factors didn't show up. I need some help and heres an example of my style rather simple. Code:
BODY
{
font-size: small;
margin: 5px;
color: black;
font-family: Courier New;
background-color: #f1f1f1;
}
.lcolumnt
{
background-position: right top;
background: white url(images/css_bg_lcoumn.gif) no-repeat;
font-size: small;
}
.lcum
{
background-position: right center;
background: white url(images/bg_lcoumn.gif) repeat-y;
}
TABLE
{
font-size: 11.5px;
COLOR: #000000;
font-family: Courier New;
}
INPUT
{
border-right: #a4a4a4 1px solid;
border-top: #a4a4a4 1px solid;
font-size: x-small;
border-left: #a4a4a4 1px solid;
color: #585858;
border-bottom: #a4a4a4 1px solid;
font-family: Courier New;
background-color: #f4f4f4;
}
.contentheader
{
background-position: left center;
background: url(images/main_content_header.gif) no-repeat;
}
.mctop
{
background-position: left top;
background: url(images/mc_bg_top.gif) repeat-y;
}
.mcbg
{
background-position: 0% 50%;
background: url(images/mc_main_bg.gif) repeat-y;
}
A:link
{
font-size: small;
COLOR: black;
font-family: 'Courier New';
text-decoration: none;
}
A:visited
{
font-size: small;
COLOR: gray;
font-family: 'Courier New';
text-decoration: none;
}
A:hover
{
font-weight: bold;
text-decoration: underline;
}
I've got two pages, one created using tables for layout, and one using css . With the text columns in the tables layout, as you can see, no matter how much text you put in either column, the grey-background container will be pushed down. However, with the text columns in the css layout, I had to float the right column to the right in order to display the two columns together, and therefore, if you have more text in the right floated column, adding more or less text does not push down the height of the grey-background container. Can anyone tell me how I can fix this while allowing for random amounts of text to be displayed in either column, in the layout? |
|||||||