crmamx
-
Posts
417 -
Joined
-
Last visited
Posts posted by crmamx
-
-
Do you have it hosted somewhere so i can take a look?
No I don't, but the 2 files involved are pretty small...only 3 kb each.
Email?....
I had the same problem with spacing when I was doing the ? mark but I was able to use Firebug and figure it out. This one I just can't find.
-
I just thought of something funny...
I am trying to write a CSS tutorial and can't even get the damn thing to skip a line.
don't use so many breaks, nor use no breaking spaces, it's extremely redundant. Us margin or padding depending on your needs.
Keep in mind the css boxmodel
This is just sort of a test page and the long line of breaks is to push the content pane down being I don't have any data on the page.
I know! I know! the box model. I tried to see with Firebug why I could not get a space or get "br" to work there but with no luck.
As you know, I will get it eventually.
-
I can't get a space before "Chapter 2: CSS basics in the Menu. Tried Firebug but just can't find the problem.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" > <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-language" content="en" /> <title>CSS Tutorial 1</title> <style type="text/css"> #container { margin: 0 auto; width: 900px; background: #fff; } #header { background: #ccc; padding: 20px; } #header h1 { margin: 0; } /* ======================== Navigation ================================= */ div#menu a { color: #000; /* #000 the look of the links */ text-decoration: none; margin: 0px; } div#menu ul { list-style: none; /* Remove the bullets */ margin: 0; padding: 0; width:200px; /* Menu width */ } div#menu ul li { display: block; /* Make a menu item a block (height 100%, width 100%) */ font: bold 11px/16px arial, helvetica, sans-serif; height:100%; width:100%; background:#81A9FE; /* medium blue - first column*/ border-bottom:1px solid #fff; /* white */ position: relative; float:left; /* Make sure (in IE) there is no margin between the menu items */ } div#menu ul li a{ display:block; padding: 5px 8px; } div#menu ul li a:hover { color: #a00; background: #81A9FE; border-right:1px solid #fff; /* white */ border-left:1px solid #fff; /* white */ } /* ======================== End Navigation ================================= */ #content-container{ float: left; width: 900px; background: #fff url(/wp-content/uploads/layout-two-fixed-background.gif) repeat-y 100% 0; } #content{ clear: left; float: left; width: 560px; padding: 20px 0; margin: 0 0 0 30px; display: inline; } #content h2{ margin: 0; } #aside { float: right; width: 240px; padding: 20px 0; margin: 0 20px 0 0; display: inline; } #aside h3 { margin: 0; } #footer{ clear: left; background: #ccc; text-align: right; padding: 20px; height: 1%; } /* ================================ Next Lesson ======================== */ #box1 { background-color: #999999; width: 90px; height: 15px; border: 2px solid; padding: 5px; font-weight: bold; float: right; } #box2 { background-color: #999999; width: 110px; height: 15px; border: 2px solid; padding: 5px; font-weight: bold; } /* ================================ End Next Lesson ======================== */ </style> </head> <body> <div id="container"> <div id="header"> <h1>CSS tutorial for beginners</h1> </div> <div id="content-container"> <div id="content"> <!-- ========================= BEGIN NEW PAGE CONTENT ===================== --> <h2>Lesson 1: Introduction to tutorial</h2> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <!-- ========================= END NEW PAGE CONTENT ===================== --> <! -- =========================== Next/Previous Lessons===================== --> <div id="box1"> <a href="css_tutorial2.html">Next Lesson</a> </div> <div id="box2"> </div> </div> <! -- =========================== Menu ==================================== --> <div id="aside"> <div id="menu"> <h3>Chapter 1: Overview</h3> <br /> <ul> <li><a href="css_tutorial1.html">Lesson 1: Introduction to tutorial</a></li> <li><a href="css_tutorial2.html">Lesson 2: What is CSS?</a></li> <li><a href="css_tutorial3.html">Lesson 3: Basic requirements</a></li> <li><a href="css_tutorial4.html">Lesson 4: Benefits of CSS</a></li> <li><a href="css_tutorial5.html">Lesson 5: How CSS works</a></li> <li><a href="css_tutorial6.html">Lesson 6: Using a DOCTYPE</a></li> </ul> <br /> <h3>Chapter 2: CSS basics</h3> <br /> <ul> <li><a href="css_tutorial7.html">Lesson 7: Applying CSS to Html</a></li> <li><a href="css_tutorial8.html">Lesson 8: External CSS file</a></li> <li><a href="css_tutorial9.html">Lesson 9: Basic CSS syntax</a></li> <li><a href="css_tutorial10.html">Lesson 10: CSS rules</a></li> <li><a href="css_tutorial11.html">Lesson 11: CSS properties</a></li> </ul> </div> </div> <div id="footer"> <p>Copyright</p> </div> </div> </div> </body> </html> -
Enclose the HTML in <xmp> tags. You could also put the code in a textarea, I think that would work as well.
I like the simplest way which seems to be the <xmp> tag. Funny I've never seen it explained in any of the many tutorials I've read.
You probably guessed it Maq. I need it for my tutorial....
-
I just ignore IE. If they want to see it as written they can use a decent browser...
-
In my html program I want the browser to display the following code exactly as written.
Following is the html code your would use <html> <title>My Web Page</title> <head> </head> <body> <p> Hello World</p> </body> </html>
How do I do it? I don't have an "insert code" element as does phpF.
-
Here is a start. I would like to get the layout, format, colors, ect. right before I go any further.
I had planned on each Lesson being a separate page with navigation to the "next lesson" and "previous lesson" at the bottom. The Nav will link directly to each lesson listed.
If you would like some kind of background I really don't know what to use.
I am sure I don't have to say change .txt to .html to view.
Comments?
[attachment deleted by admin]
-
I do not see html as an allowed file type for attachments. Is it allowed?
-
I'd definitely suggest breaking that out into multiple tutorials
[*]What is CSS and why should I use it? (1-4)
[*]The basics of CSS (5-
[*]A real world example (9-end)
Yep. Kind of ideas I need.
I would add some mantra rules in it Like:
Css, is all about targeting elements by using selectors classes and id's
before you start of get a pen and pencil and shape your idea, before you start coding
In addition to King Philip Maybe add a 4th series of tutorials after the real world example, named efficiency or something. That could be more advanced, in order to remove redundancy, choose a font, choose some colors. (if you have time left of course)
If you require images that need to be drawn, and there are not too much of them, I am happy to provide them if you can give me a sketch.
Mantra rules. I will Google that....
Images. I was thinking about that and have "lifted" a couple from w3schools. Is this legit? I don't expect I will need many and will take you up on your offer.
Advanced css. I don't think I am qualified to do that except I could take the ? mark code we did and use that as an efficiency example. It is also a good example of how to use float and clear which was very difficult for me to learn.
-
Well, with that encouragement and high powered vets to critique it, Here is a starting outline:
1. Introduction to the tutorial:---now what should I call this? Lesson 1, Chapter 1..?
2. What is CSS
3. Basic requirements to learn and use it
4. Benefits of CSS
5. How does CSS work?
css example
html example
6. Applying CSS to a HTML document
Method 1: In-line (the attribute style)
Method 2: Internal (the tag style)
Method 3: External (link to a style sheet)
7. Creating the external css file and html file
8. Summary
9. Plan of attack: Redesign old, ugly, 1990's site, learn as we proceed
4 sections: header, menu, footer and content
Start with content, do easy stuff first, progress to harder (NOTE: one of my major mistakes was starting with index.php and trying to lay out the 4 panes on the page and figuring out what the hell was going on. I wasted a couple of weeks trying to understand it.)
Make a sketch of what you want in the header and footer. Any background images? If so list the name and location.Will you have a single menu or dropdown? List each menu item and what it links to. The content pane is where your site content will go. Draw it out. Where will the images go? Will you have headers? Will they be colored, centered, bold, larger than 100%. What about the text? Do you want margins? Where?
The more you can define before you start trying to code the better off you will be.
10. The basic css syntax:
Selector
Declaration
Property
Value
11. CSS rules
12. CSS properties
13. Let's start coding
I don't intend to recreate the whole site, but to include things that will show all aspects of css and especially those I had trouble with.
I will be looking for help especially on layout, colors,
So chime in guys.
-
I think it's a great idea. I often forget the basics of CSS and usually resort to, "if it works and looks good, then I'm done" mentality. Besides someone might have a better understanding from your perspective of a tutorial. Just curious, do you have a structure or a planned out way of organizing your tutorial? Like small individual examples? Maybe you could do a tutorial that leads into a small website.
What I have in mind is content to present, the order to present it and examples to show. Plus I do not plan to get into the really complicated stuff which I do not understand anyway, like overflow and push-pull.
But structure, layout, color, organization...in other words design are not my strong points. There I could use some help.
nightslyr
"Here's what I originally had. Here's how I changed it. Now, let's look at trying it from scratch for a new layout."
Yep, almost exactly what I am doing.
But now I have another idea. I will get you, Maq, giz, pikachu and cssF to collaborate on putting it together.
:D -
To you vets who have got me to where I am with my new web site:
I am writing a CSS tutorial. Sounds kind of dumb doesn't it considering that 3 months ago I did not even know what css was.
I am not a vet and never will be. I am just a css beginner who was able to learn enough css to rewrite my old, ugly, 1990's iframe site to one that I am now told is pretty good.
But, it was extremely difficult and took way too much time. Why? Because I went about it in the wrong way. And tho there are some pretty good tutorials on the net, none of them IMHO are geared to an absolute beginner like me. And they just do not approach the subject the way I would.
I do not intend to reinvent the wheel or duplicate what others have done. Waste of time. But what I am trying to do is present the basics of how to get started with learning css in a fashion that is much easier to learn. I am fresh off the boat and know where I hit roadblocks.
So, what do you think?
-
I really like what you have done with the site. We were talking about it recently, and I wish we had a version of your original site just for comparative purposes, because it makes for a great example of how much someone can learn and develope their skills in a short period.
The other thing that bothers me is the footer background color which seems to have no relationship to any other part of the site. I would suggest making it the same as the header color.
I realize you are still working on things here and there, but you've really done an incredible job. I think I can speak for a lot of the other vets here who contributed to your thread, when I say that your progression and results is what makes the effort we put into answering questions and trying to help people worthwhile and keeps us coming back.
Thanks for the comment. It makes me feel like all the frustration and hard work was worth it. Of course it would not have been possible without you and the other vets.
I left a version of the original site up and running but had some trouble with it being accessed. I was told that the priority order on the server was index.php, then index.html. But there were occasions when it seems my domain name brought up index.html instead of index.php.
Anyway, all the files are still there and I can put it back up for you and others to use as an example (of an ugly, 1990's Iframe site) if you like. How about some hints on the best way to do it.
Check my footer again. I had some problems with it but it is fixed now.
quickoldcar
If you go and watch a video, then try to view the menu, the slide out menu's are under the video.
Maybe can make the dropdowns slide out within the main menu.
Thanks, I will look into that. Hadn't noticed it before.
I like the video of the idiot's crashing their planes...
-
I probably missed it because it does not stand out like it use to and I think the location is different.
But NP, I will get back to using it.
-
I just noticed the solved button is showing back up on some of the posts but I cannot find it on any of mine.
-
-
No background picture there. It disappeared...
Always something.
-
if you are using php in the page then you could just try appending the current time to it using the time function
<link ... href="path/to/my.css?version=<?php echo time(); ?>">
this will ensure every upload is unique
On advice of counsel, I added this. I guess it is the same thing.
<link type="text/css" rel="stylesheet" href="css/custom.css?v=<?php echo microtime(); ?>" />
We'll see how it does because it is still driving me crazy.
-
AFAIK, tables should be used for tabular data only.
Of course. I left off the adjective. cssfreakie continues to drill that into my hard head....tabular data only!
But what about frames? Seems one of the major critiques about my old, 1990's site was that it was using frames.
-
.htaccess example (modify the list of file extensions to suite your needs) -
<IfModule mod_headers.c> # Force no caching for dynamic files <FilesMatch "\.(php|htm|html)$"> Header set Cache-Control "no-store, no-cache, must-revalidate, max-age=0" Header set Pragma "no-cache" </FilesMatch> </IfModule>
You guys are "insane."
Many thanks!
-
I see you took my advice. It shows a different side of your character than the first one you displayed. You were heading down the path of never getting any help from this forum.
I would hope that you would display this "new" steven green in your personal encounters in life also. You will surely go a lot farther if you do.
If you want to attack, attack facts, not personalities or personal traits.
And only use tables for displaying data....
-
What if I set my cache to 0? Isn't that the same as turning it off? What do I lose if I do that?
-
If it is password protected, then it should be fine to leave it... but it's ultimately up to you on how you want to get emails
Not via spam that is for sure...
It is on my list of to do's. -
What in particular is not refreshing? Is it php, javascript or css thats causing the issue?
Usually it is my css file.
I suggest a few add-ons that will really help with development:
I have Firebug. The other one are you referring to adding is it: Web Developer 1.1.9?
You should only put your code onto a live server once it is completely tested. You will waste a huge amount of your time, constantly uploading code just to see the result of each change.
You are right, I spend a lot of time changing, uploading and viewing the changes. But I don't have any other way to do it. I just don't want to install a server and the stuff I need to do it on my computer. This is my only site. If I was a developer, no question I would do it.
There are many ways of accomplishing this, but it should be done globally in a .htaccess file or similar so that you don't need to do it in your code.
Have no idea even what you are talking about. I will Goggle .htaccess and see what I come up with.
Can't skip a line
in CSS Help
Posted
I will try that although I used a clear:both and that seemed to fix it.