|
CSS - Beginner Question About Html+css
I'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? Similar TutorialsHi, beginner question. How do I achive this Code: <TABLE BORDER="1" CELLPADDING="5"> in my CSS? Thank you for your help? I'm having a problem with my links becoming deactive within some nested elements. I followed some instruction on creating rounded corner boxes via a tutorial by Andy Budd. Anyway, it all works great except when I wrap link tags around a few pieces of copy. I'm a bit of a beginner still so maybe this is a simple fix but I've spent over a days worth of time now trying to figure it out on my own and can't seem to get it. Just to clear this up, the links work everywhere on the page outside of the "box" element I'll list below and I've double and triple checked that the link within the "box" element is written correctly and it is. The CSS even finds the link and styles it correctly, however, the mouse function seems to be disabled. Does this all make sense? Below is the CSS, any help would be greatly appreciated... This is the code that creates the box and it works correctly... Code: .box {
width:831px;
background:url(../imgs/box-spacer.gif) repeat-y;
}
.box h1 {
background:url(../imgs/box-top.gif) no-repeat left top;
padding-top:40px;
font-weight: normal;
}
.box .last {
background:url(../imgs/box-bottom.gif) no-repeat left bottom;
padding-bottom:60px;
}
.box h1, .box p {
padding-left:60px;
padding-right:60px;
}
And this is the code I used to test that the page is seeing it as a link... Code: .box h1 a:link {
color:#00CCFF;
}
.box h1 a:hover {
color: #FF0066;
}
It changes the color correctly but the hover doesn't work and if you click, it doesn't link you anywhere. Again, the link is written correctly on the page. Can anyone help please? I appreciate it. 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. 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 So here is my current code: Code: body {
color: gold;
background-color: black;
}
#main {
align: center;
}
#header {
width: 600px;
height: 150px;
border: 1px solid;
background-image: url('http://localhost/web/css/images/header.jpg');
}
#links {
width: 600px;
}
#links ul {
vertical-align: center;
}
#links ul li {
padding-left: 10%;
display: inline;
}
#content {
border: 1px solid;
text-align: center;
width: 600px;
}
As the title said, I am a complete beginner to CSS, so any criticism on my code is always welcome. The HTML to go along with this: Code: <html> <head> <title>Test Corp Site</title> <link rel="stylesheet" type="text/css" href="corp.css" /> </head> <body> <div align="center"> <div id="header"></div> <div id="links"> <ul> <li>Home</li> <li>Link 2</li> <li>Link 3</li> <li>Link 4</li> </ul> <div id="content"> <h1>Testing</h1> <p>This is just a test to see if I can actually design the corp website!</p> </div> </div> </body> </html> Screenshot That's essentially what it creates. My question is this: If you look at where the supposable links are supposed to go, you'll see that they are slightly crooked, more off to the right. Well I want them to be exactly centered. As you can see the div layer is defined as being only 600px wide, so I want the links to be centered inside that 600px box and retain their padding at the same time. I have tried using things like vertical-align but I can't seem to get it to center correctly. What am I doing wrong? Hello, I just started trying to learn about css and html layouts by following this tutorial he hxxp://www . subcide.com/tutorials/csslayout/page2.aspx This is my webpage: (link removed as issued is resolved) but I'm having issues making the navigation look correct (not repeat and be about 50 px down) Can someone give me a little hand. ? cheers. ps....errrr...I see nothing that I am doing wrong in the forum rules about the urls...... Hello all, this is my first post! I hope I will be able to learn and contribute. first off, im a programmer, and I want to start making web sites! My websites will be simple, so what I am looking for is: ***important note: I am only looking for a simple 3 column + header + footer layout. The most versatile layout - whether it is pure css, or minimal tables - the layout that will work with the maximum possible amount browsers new and old, the most or at least most popular resolutions, whether it is liquid or fixed. A resource or means by which I can test layouts on the available platforms, e.g, IE, mozzila, opera, mac etc. - is there a site you can submit your code to and do this? Thankyou very much for your time, TheLove - youll get some of it! I've been working in CSS, man, is it tiresome for a beginner! After much trail and error, I've come up with my first CSS page. Where I'm stuck, is in the area where all the text is. When I put more text into that page, none of the surrounding styles/boxes[?] adjust to the text format (also shown in a link below), and I can't seem to figure out how to center the entire page itself. Sorry, for the stupid questions, I'm a total novice, and can barely understand most of the CSS postings in this forum. Text extending instead of expanding layout: http://rafia.info/css/layers.bad.htm Thanks sincerely, rups27 Well, I've started diving into CSS and I'm pretty intimidated by it. A lot of it seems to go counter the intuition that I could rely on as long as I worked with tables in a WYSIWYG editor, lol... I'm trying to do something with CSS that looks darn simple, but I just can't get it to work! I can't post hyperlinks, it seems. So you'll have to paste this URL of an explanatory picture into the address line yourself img262.imageshack.us/img262/1278/layoutro9.jpg Basically what I need is a two-column design: - column on the left is fixed-width and contains some seperate containers lined up vertically; these should resize (vertically) when content requires - column on the right is supposed to be the widest and also contains seperate containers lined up vertically; initially, the middle one of them is a picture that is resized to fit the browser window. Now it comes: I use javascript to expand the image to full-size when the user clicks it. What I want is that the column on the left is completely unaffected by this, that the picture expands to the RIGHT (going beyond browser window and can be viewed entirely by scrolling with the scrollbars), and that the container below the picture moves down with it and doesn't move below the left column. I've been trying a couple of things but always end up with issues, most probably because I haven't given it enough time. But I'm getting frustrated quickly because this looks SO simple!! Just to be clear: all I need is a CSS layout that arranges the 7 or 8 "boxes" correctly for this purpose. I would be very thankful if someone could show some working code. JoH Hi all, Does anyone have any good suggestions for a CSS book? I'd like to buy an all in one, that will teach me CSS. Thanks for any help Nevermind: solved hi there, i am new to css and creating a gallery. What i want to do is create a medium size pop up when you rollover the thumbnail and have a full size image displayed when the thumbnail is clicked. I have to use lightbox javascript to display full size images, which works ok, but the problem has come trying to get both this and the roll over to work. At the moment i have both elements working, although it produces two thumbnail images. How can i use this code whilst making only one thumbnail appear? <a href="images/cramps/full size/c1.jpg" rel="lightbox" title="Here is the image caption"> <img src="images/cramps/thumbnails/ct1.jpg" border="0" /> </a> <a class="thumbnail" href="#thumb"> <img src="images/cramps/thumbnails/ct1.jpg" border="0" /> <span><img src="images/cramps/medium size/cm1.jpg" /><br /> </span></a> sorry if this is vague, i will answer any questions the best i can, all help appreciated! 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? 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 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 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 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- |
|||||||