General Support
2 kweb Mar 30, 2005 21:02
1 nando Mar 29, 2005 22:59
3 nando Mar 30, 2005 21:11
The thing is that I find CSS very difficult. I already have the design for the maind page in my head (it's really simple), but I just can't transform it in code. I tried using frontpage and it sucked! :(
4 graham Mar 30, 2005 21:32
Yes frontpage is possibly the worst editor in the world. Hopping over to http://www.w3schools.com and following their css tutorial will help you learn css pretty easily.
5 kweb Mar 30, 2005 21:38
Another good resource is the HTML Help page at http://www.htmlhelp.com/reference/css/.
I agree with Graham - stay away from FrontPage.
6 fern Mar 30, 2005 21:42
Try changing in test.php
class="myNews" for class="bPosts"
class="myTitles" for class="bTitle"
class="myText" for class="bText"
I suggest forget Frontpage and try dreamweaver.
7 nando Mar 30, 2005 21:58
fern wrote:
Try changing in test.php
class="myNews" for class="bPosts"
class="myTitles" for class="bTitle"
class="myText" for class="bText"I suggest forget Frontpage and try dreamweaver.
There was nothing like that to change in test.php. I made the above changes in _main.php and nothing happened.
8 fern Mar 30, 2005 22:09
Sorry, you are right the divs are in _main.php, which is included in test.php.
Try adding in the head section of test.php:
<link rel="stylesheet" href="blog/skins/custom/custom.css" type="text/css" />9 nando Mar 30, 2005 22:19
It's using the entire blog style, like the background and tables. I just need the font styles.
10 fern Mar 30, 2005 22:38
All the other *.css are imported with custom.css.
I see that you have an end tag for element "DIV" too many at the end
11 nando Mar 30, 2005 22:45
I guess I'll have to make another css file then... :-/
Thank you, btw.
12 nando Apr 01, 2005 02:19
Ok here it goes:
http://www.nando.myacen.com/teste4.php
This is a very raw attempt of what I want to do. Very simple as you can see. I still could not figure out how to use CSS, nor Dreamweaver, so unfortunately I'm stick with frontpage.
If I knew CSS, I would put the middle of the page (the picture plus the text), in a centered table with a black border.
What I also can't figure out, is how to use the same font style (only the font style) of the blog in this page.
After those 2 issues are solved, I'll still work a little bit more in the logos and everything else...
So I was wondering if any of you could help me in any way.
Thank you, you have been very helpful so far and I appreciate it! ;)
13 kweb Apr 01, 2005 02:57
Create a file called style.css (or whatever you want to call it).
In this fille, add the following line:
BODY, P, DIV { font-family:Verdana, Arial, Helvetica, sans-serif; }
Then, in your teste4.php page, add the following somewhere between the <head></head> tags:
<link rel="stylesheet" href="style.css">
Be sure to upload the file to the same directory as your page, or else adjust the path in the <link> tag just like you would any other link or image.
That will get your font set right, and give you a basic CSS file to start with. As you learn more, you can add to that file and remove some of the formatting (widths, borders, etc.) from your HTML.
14 nando Apr 01, 2005 12:43
15 kweb Apr 01, 2005 16:23
Your CSS file is not in the right location. I get a "404 Not Found" error when I try to access it.
16 fern Apr 01, 2005 18:43
Nando wrote:
If I knew CSS, I would put the middle of the page (the picture plus the text), in a centered table with a black border.
Well, here we go, change this in your teste4.php:
<body>
<p> </p>
<table width="720" border="0" align="center" cellpadding="0"
cellspacing="10"
bgcolor="#FFFFFF">
<tr>
...
for:
<body>
<table class="myTable" cellspacing="10" >
<tr>
...Now you need add this to your css file:
table.myTable {
position:relative;
top: 5%;
left: 15%;
width:70%;
padding:0;
background:#fff;
border: 1px solid #000;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
And see if what you get is what you want.
You'll need to adjust the percentages to your like.
Also ensure that your css file is in the same directory as your teste4.php file.
Good luck :)
17 nando Apr 01, 2005 22:34
isnt it suposed to be in the root directory?
18 fern Apr 01, 2005 22:42
Yes, acording to your code in teste4.php
<head>
<link rel="stylesheet" href="style.css">
</head>19 nando Apr 01, 2005 23:04
fern wrote:
Yes, acording to your code in teste4.php
<head> <link rel="stylesheet" href="style.css"> </head>
D'oh!!! I uploaded the file with another name!!! :oops:
20 nando Apr 01, 2005 23:05
fern wrote:
Nando wrote:
If I knew CSS, I would put the middle of the page (the picture plus the text), in a centered table with a black border.
Well, here we go, change this in your teste4.php:
<body> <p> </p> <table width="720" border="0" align="center" cellpadding="0" cellspacing="10" bgcolor="#FFFFFF"> <tr> ...
for:
<body> <table class="myTable" cellspacing="10" > <tr> ...Now you need add this to your css file:
table.myTable { position:relative; top: 5%; left: 15%; width:70%; padding:0; background:#fff; border: 1px solid #000; font-family:Verdana, Arial, Helvetica, sans-serif; }And see if what you get is what you want.
You'll need to adjust the percentages to your like.
Also ensure that your css file is in the same directory as your teste4.php file.Good luck :)
Wow! Seems perfect! I'll try that one now and let you know how it goes! :D
21 nando Apr 01, 2005 23:24
I guess it worked, but it wasn't quite exactly what I had in mind.
http://www.nando.myacen.com/teste4.php
That's more or less what I have in mind:
22 fern Apr 02, 2005 00:13
Put this in your teste4.php:
<table class="myTable" cellspacing="10">
<tbody><tr>
<td class="mainlogo" colspan="3" width="700"><h2 align="center">
<img src="teste4.php_files/mainlogo.jpg" border="0" height="70" width="342"></h2></td>
</tr>
<tr>
<td class="teste2" height="300" valign="top" width="237"><p>
<img src="teste4.php_files/teste2.jpg" align="left" border="0" height="300" width="119"></p>
</td>
<td class="blognews" height="300" valign="top" width="355">
<p></p><div class="myClass"> Now this in the css file:
table.myTable {
position:relative;
top: 5%;
left: 15%;
width:70%;
padding:0;
background:#fff;
border-collapse: collapse;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
td.mainlogo { }
td.teste2 {border: 1px solid #000;
border-right: 0px solid #000;
}
td.blognews {border: 1px solid #000;
border-left: 0px solid #000;
}
and see..
But as Graham said: Honestly try http://www.w3schools.com/ ;)
23 nando Apr 02, 2005 01:09
You guys are great! I appreciate everything you are doing for me. Thank you very much indeed!
I checked: http://www.w3schools.com/ . It seems a great site, but it will take a few days (maybe weeks) so I can learn any thing. :oops:
Btw, here is the result: http://www.nando.myacen.com/teste4.php
Somethings I still can't figure out:
1- Why isn't the picture glued to the table left border? There's a white space between them.
2- Why the table border brakes in the middle? I wanted it not to break...
3- The 2 pictures under the table were suposed to be one next to the other and not like they are now.
I believe there's a way of fixing it all, isn't there?
Yes, the easiest thing to do would be to create another CSS file for your home page, and specify the font there. The only catch to that is if you change your font on your blog, it will not automatically change on your home page - you'll have to edit both files.
A way around that would be to remove the font information from your blog CSS file, and add your other CSS file to both pages, enforcing the font on both pages from one place.