free

News

collapse

User Info

 
 
Welcome, Guest. Please login or register.
Did you miss your activation email?

* Recent Posts

NOTICE OF PARKING ENFORCEMENT CHANGES by Huntsman
[June 19, 2025, 05:22:50 pm]


Re: Stopping by by Sinister
[June 08, 2025, 01:58:04 pm]


Re: Stopping by by Ehks
[June 04, 2025, 12:25:17 am]


Re: Rest in peace by Stefanrsb
[June 02, 2025, 03:38:02 am]


Re: [SA:MP]House of Sforza | The Elite Power | Estd. 2006 | LS - LV by Stefanrsb
[June 02, 2025, 03:09:22 am]


Re: The Soprano Family | Royal Loyalty by Stefanrsb
[June 02, 2025, 03:00:31 am]


Re: The Gvardia Family || San Fierro's Main Power || Best criminal group of 09/10/11 by Stefanrsb
[June 02, 2025, 02:47:01 am]


Re: BALLAS | In memory of INFERNO 9 and NBA by Stefanrsb
[June 02, 2025, 02:31:29 am]


Re: Count to 1,000,000. by Stefanrsb
[June 02, 2025, 02:15:04 am]


Re: Stopping by by Traser
[June 01, 2025, 10:23:13 pm]


Re: Stopping by by Old Catzu
[May 18, 2025, 07:27:06 pm]


Re: Stopping by by TheRock
[May 18, 2025, 06:44:49 am]

* Who's Online

  • Dot Guests: 361
  • Dot Hidden: 0
  • Dot Users: 0

There aren't any users online.

* Birthday Calender

July 2025
Sun Mon Tue Wed Thu Fri Sat
1 2 3 4 5
6 7 8 9 [10] 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31

My experience with css/xhtml and webbdesign in overall [Ubuntu 9.10]

Gird3r · 742

0 Members and 1 Guest are viewing this topic.

Offline Gird3rTopic starter

  • Veteran
  • ***
    • Posts: 1365
    With us since: 14/11/2006
    YearsYearsYearsYearsYearsYearsYearsYearsYearsYearsYearsYearsYearsYearsYearsYearsYearsYearsYears
For those interested in webbdesign and wants to hear someones opinion in todays making of websites. Then hear my opinion.
 The webbbrowser I'm making for is Firefox (Firefail in my opinion).

The website is made according to the w3c standards.

xhtml - "Please take away my time trying to figure out something simple"

Xhtml is the language that you can just pick up and start doing something in? Right?

Fuck no. prepare to link your documents to the oh so almighty (insert cuss word here) w3c shit standards.
Prepare to waste untold hours to try to link a external css document and do anything "productive".
 And that leads me to the language I hate the most in computer terms.

Css - 3 days (yes you read right). 3 painfull days trying to get a background image to show up on your website.?

Comon.  I tried all the different ways I could think off using css for this:

Code: [Select]
body {background-image:url('test/test.jpg')}
Code: [Select]
body {background-image: url('test/test.jpg')}
Code: [Select]
body {background-image:url ('test/test.jpg')}
Code: [Select]
body {background-image: url ('test/test.jpg')}
Code: [Select]
body {background-image:url('test/test.jpg');}
Code: [Select]
body {background-image: url(test/test.jpg)}
etc etc

Did they work?

To my amusement. It did work in the html document. Did it work in an external css? No.

Can I link external css even when I type the code right and in the right place? No.
Can I use <p>lol</p> to get some simple text to show up? You guess it.. no!

Will this code work?

text
{
font-size: 12px;
}

No.

nonononon.

I have only had bad experiences with css and xhtml. Clearly. The languages was made to make the average guys web design needs as painfull as possible.

The ones who designed css should be shot for making such a shitty language.
And w3c can go burn in hell.


Why does web design have to be such a painfull task? Why the hell does the code never do what I want and why is css the most shitty language ever created?

Seriously. I have seen websites using exactly the same codes as I'm trying to use. And for them, it works like a charm.  :mad:

So, what experiences has you had with these goddamn awful languages?


Life has been a fucking hell recently, including accepting what has happened to me in the past. Dunno if life will ever get better but at the least I'm still hanging on. Lol.


Offline Void

  • Hero
  • ****
    • Posts: 7417
  • The Lost MC
  • With us since: 22/05/2007
    YearsYearsYearsYearsYearsYearsYearsYearsYearsYearsYearsYearsYearsYearsYearsYearsYearsYears
If you want to put a background image on your HTML website ( I have stumbled upon this )

The code to add a background image is;

<body background="images/plainbgrnd.jpg">

As you see, the background command is inside the body tag. You will need to point the image to reflect the folder on your server where your files are located.

(My image source resides in an image folder, then it's the image name, in this case plainbgrnd.jpg.) Homestead people need to have the source as "files/plainbgrnd.jpg" or if you place your images with everytning else you can simply put the image name.

Taking the html code from the first tutorial and substituting a background image for the plain white background, our code would now look like this;

<html>

<head>
<title>Tanya's HTML Tutorial</title>
</head>

<body background="images/plainbgrnd.jpg">
<p align="center">font size="5">WELCOME TO MY WEBSITE</font></p>
<p align="left"> Type in text here, blah blah blah. We are making a website.</p>
<p align="center">
<img src="http://www.hypergurl.com/images/hypermouse.gif" width="100" height="66" border="0" alt="hypergurl webhosting" ></p>
</body>
</html>

The bold is supposed to be your picture,I think...Width and Height adjust by yourself


IV:MP - 95.141.36.204:9999


Offline smey

  • Regular
  • **
    • Posts: 1002
    With us since: 04/06/2008
    YearsYearsYearsYearsYearsYearsYearsYearsYearsYearsYearsYearsYearsYearsYearsYearsYears
Fantastic thread!

I once had to make a project for school. The project was redoing an existing site, fully complaint to W3C. That wasn't a problem, but getting it right in both Firefox, IE and Opera was the worst thing ever.

Css is actually a nice thing, it makes you possible to style a website, without touching the HTML code.

*Security Block*


Offline 9r2e5i3k

  • Mexsiek / Grzexican
  • Orc
  • *****
    • Posts: 5374
  • Communist.
  • With us since: 01/01/2007
    YearsYearsYearsYearsYearsYearsYearsYearsYearsYearsYearsYearsYearsYearsYearsYearsYearsYears
    • Grz's Page
Don't be afraid of using tutorials or guides when making the page.

When I'm playing around with (X)HTML/CSS, I almost always have a guide open. I'd give you the link, but it's in Polish only  :roll:

Anyways, for a working background:

Code: (index.htm) [Select]
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<p>Hello, Gird3r!</p>
</body>
</html>

Code: (style.css) [Select]
body {
background-image : url(bgtile.jpg) ;
}

p {
font-family : "Segoe UI" , "Verdana" ;
font-size : 8pt ;
}
Both files validated. Made in <5 mins (including time for making the .jpg tile).

Files in the folder:
./index.htm
./style.css
./bgtile.jpg



Code: [Select]
body {background-image:url('test/test.jpg')}
Code: [Select]
body {background-image: url('test/test.jpg')}
Code: [Select]
body {background-image:url ('test/test.jpg')}
Code: [Select]
body {background-image: url ('test/test.jpg')}
Code: [Select]
body {background-image:url('test/test.jpg');}
Code: [Select]
body {background-image: url(test/test.jpg)}
Should be:
Code: [Select]
body { background-image : url ( test/test.jpg ) ; } or
Code: [Select]
body {background-image:url(test/test.jpg);}
Spaces aren't necessary, but keep things more readable.  ;)


Will this code work?

text
{
font-size: 12px;
}
No, because there isn't a (X)HTML tag called <text>
To apply to the whole document, use:
body { font-size : 12px ; }


The ones who designed css should be shot for making such a shitty language.
I actually like CSS, haven't had any major problems with it.


Play for fun and friendship, not for stats or achievements.
If you do not want to roleplay, log off. Remember that "do not force RP" does NOT mean you can refuse to interact with other players.


Offline Mikro

  • SA:MP Bad-Ass
  • Hero
  • ****
    • Posts: 2090
  • [WS]Mikro
  • With us since: 17/08/2009
    YearsYearsYearsYearsYearsYearsYearsYearsYearsYearsYearsYearsYearsYearsYearsYears
  • SA:MP: [WS]Mikro
The ones who designed css should be shot for making such a shitty language.
:mad: CSS is the best thing ever! It's very structured and works in almost all cases. The only problem is that Internet Explorer not parses the CSS code on the way that is defined in the standard.

And the background image? It's as simple as hell...

Code: (style.css) [Select]
body
{
  background: url('background.jpg');
}
No need to use "background-image". This works fine and you can also add some more configurations to the background line. Such things as "repeat", "color", "scroll or fixed":

Code: (style.css) [Select]
body
{
  background: url('background.jpg') repeat #777777;
}

In most cases the css codes works with and without spaces. With ' or without them.

Make sure you linked the right css file on the right way.

Good luck,
Mikro


Ex. Argonath Weekly Express leader ■  Ex. FBI C. Division Chief (SA:MP) ■  Ex. FBI Director (SA:MP)
Ex. Argonath Government Radio Developer | Tune in! ■  [WS] Member ■  Ex. SA:MP Lead Developer


Offline Yihka

  • The guy you dont know.
  • Veteran
  • ***
    • Posts: 1002
  • Lets rule ze world!
  • With us since: 12/05/2007
    YearsYearsYearsYearsYearsYearsYearsYearsYearsYearsYearsYearsYearsYearsYearsYearsYearsYears
I am just wondering...

So I made this HTML with CSS site,
but it seems to not center everything, so in CSS I used the width and height px thingies to make it exactly right. I wonder, how to I centralize and make all the thingies move then you make it smaller/bigger?

Currently if you make the website smaller, you get those horizontal and vertical thingies to move the screen with....



My code:

Quote from: index.html
<!--Weeee My Index. xD-->
<html>
<head>
<link HREF="styles.CSS" rel="stylesheet" type="text/css" media="screen" />
       <body bgcolor="#000077">
         <div id="header">
     <p align="center"><br><br><br><br><br><br><br><br><br><br><font color="black"></font></p><br>
     </div>
<div id="page">
<br>
     </div>
     </div>
            <div id="whitebarleft">
          <div id="whitebarright">
     </div>
     </div>
     <div id="buttonlayerthing">
     <div id="buttonlayer2">
          <div id="buttonhome"><p align="center"><p align="center"><br><a HREF="index.html">Home</a></p><br></p>
        </div>
        <div id="button"><p align="center"><p align="center"><br><a HREF="aboutme.html">About me</a></p><br></p>
     </div>
             <div id="button"><p align="center"><p align="center"><br><a HREF="nomanji.html">Nomanji</a></p><br></p>
     </div>
             <div id="button"><p align="center"><p align="center"><br><a HREF="furcadia.html">Furcadia</a></p><br></p>
     </div>
                  <div id="button"><p align="center"><p align="center"><br><a HREF="blackcoats.html">Black Coats</a></p><br></p>
     </div>
                  <div id="button"><p align="center"><p align="center"><br><a HREF="shq.html">SHQ</a></p><br></p>
     </div>
                  <div id="button"><p align="center"><p align="center"><br><a HREF="contact.html">Contact</a></p><br></p>
     </div>
                  <div id="button"><p align="center"><br><a HREF="links.html">Links</a></p>
     </div>
     </div>
     </div>
     <div id="textlayer"><br>
          <p align="center"><b>Welcome to my homepage. It's still under construction as you can see.</B><br>
     <br>
     <u>I LOVE NOMANJI SHE IS THE AWESOMEST GIRL I HAVE EVER MET <3</u><br>
     <br>
     <br>
     <br>
     If I was able to kill everoyone by staring in their eyes there would be only one person I couldnt kill. That person is Nomanji.<br>
     Because if I only try to look her way I get blinded by her beautifull body. <3<br>
     </p>
     </div>
     <div id="footer"><br><p align="center"><Font color="black"><i>&copy;Copyrighted by Yihka (Aka. Sidney Prins.)</i></font></p>
     </div>
     </body>
</head>
     </html>

Quote from: styles.css
body {
   margin: 0;
   padding: 0;
   text-align: justify;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
        color: FFF;
}

#page {
   width: 1048px;
        height: 900px;
   margin: 0px 10px 10px 100px;
   background: #333333;
        border: 1px;
}

#header {
   width: 1048px;
        height: 200px;
   margin: 0px 0px 0px 100px;
   background: url(images/headerimage01.png) no-repeat left top;
        border: 2px;
}

#whitebarleft {
   margin: -1110px 00px 00px 90px;
        width: 10px;
        height: 1100px;
   background: #FFF;
        border: 2px;
}

#whitebarright {
   width: 10px;
        height: 1100px;
   margin: -325px 0px 0px 1050px;
   background: #FFF;
        border: 2px;
}

#buttonlayerthing {
   width: 262px;
        height: 900px;
   margin: -912px 0px 0px 100px;
   background: #444444;
        border: 2px;
}

#buttonlayer2 {
   width: 200px;
        height: 900px;
   margin: 0px auto;
   background: #111111;
        border: 2px;
}

#buttonhome {
   width: 170px;
        height: 60px;
   margin: 0px auto;
   background: #000000;
        border: 2px;
}

#button {
   width: 170px;
        height: 60px;
   margin: 25px 0px 0px 15px;
   background: #000000;
        border: 2px;
}

#textlayer {
   width: 778px;
        height: 900px;
   margin: -900px 0px 0px 362px;
   background: #333333;
        border: 2px;
}

#footer {
   width: 1060px;
        height: 50px;
   margin: -12px 0px 0px 90px;
   background: #fff;
        border: 2px;
}

backgroundred {
   margin: 0px 2000px 2000px 0px;
   padding: 0;
   background: #770000;
}

#nomanji01 {
   width: 320px;
        height: 240px;
   margin: -850px 0px 0px 600px;
   background: url(images/nomanji02.png) no-repeat left top;
        border: 2px;
}

#yihka01 {
   width: 320px;
        height: 240px;
   margin: -850px 0px 0px 600px;
   background: url(images/yihka01.png) no-repeat left top;
        border: 2px;
}

What do I have to add?


Ex-Corleone member, Ex-Dachi, Lost ballas and SHQ leader. Ex-Asukai family member Ex-Argo Millionair Lotto host.
~Became a member of this community on 12 May, 2007.~


Offline 9r2e5i3k

  • Mexsiek / Grzexican
  • Orc
  • *****
    • Posts: 5374
  • Communist.
  • With us since: 01/01/2007
    YearsYearsYearsYearsYearsYearsYearsYearsYearsYearsYearsYearsYearsYearsYearsYearsYearsYears
    • Grz's Page
- If you're using CSS, why use formatting in the HTML code? Especially when it's repeated.
(eg. <p align="center">)

- Don't use multiple <br>'s, use a margin instead

- You closed <head> right under <body>. No idea how can that work, it shouldn't.

- You're using margins to place the elements, so no wonder you have the scroll bars. Use aligning and floating instead. For the elements that should get smaller when the window is resized, use percentages for margins instead of fixed values.


I'd rebuild the page (html + css) from scratch, unless you really want to fix everything.


Play for fun and friendship, not for stats or achievements.
If you do not want to roleplay, log off. Remember that "do not force RP" does NOT mean you can refuse to interact with other players.


Offline Yihka

  • The guy you dont know.
  • Veteran
  • ***
    • Posts: 1002
  • Lets rule ze world!
  • With us since: 12/05/2007
    YearsYearsYearsYearsYearsYearsYearsYearsYearsYearsYearsYearsYearsYearsYearsYearsYearsYears
- If you're using CSS, why use formatting in the HTML code? Especially when it's repeated.
(eg. <p align="center">)

- Don't use multiple <br>'s, use a margin instead

- You closed <head> right under <body>. No idea how can that work, it shouldn't.

- You're using margins to place the elements, so no wonder you have the scroll bars. Use aligning and floating instead. For the elements that should get smaller when the window is resized, use percentages for margins instead of fixed values.


I'd rebuild the page (html + css) from scratch, unless you really want to fix everything.

Ah... Well if you feel like to remaking it from scratch, that would be appreciated!
But thanks for the information! This really answered pretty much everything I have ever questioned about css


But I am not putting the <p align="center"> in the CSS so I am able to put the text left, right and center with just one CSS layer since the CSS thing will only use one of the three and in HTML you can write them all 3 into the CSS layer if you wish to ..  ;)

Well atleast I think CSS isnt able to do the same job...

Btw closing the head after the body works because I also opened the head before the body I think...


Ex-Corleone member, Ex-Dachi, Lost ballas and SHQ leader. Ex-Asukai family member Ex-Argo Millionair Lotto host.
~Became a member of this community on 12 May, 2007.~


Offline Mikro

  • SA:MP Bad-Ass
  • Hero
  • ****
    • Posts: 2090
  • [WS]Mikro
  • With us since: 17/08/2009
    YearsYearsYearsYearsYearsYearsYearsYearsYearsYearsYearsYearsYearsYearsYearsYears
  • SA:MP: [WS]Mikro
The standard format in CSS for centering the whole page is:
Code: [Select]
margin: [margin-top-bottom] auto;
The (part of the) page which you want to center, must got a fixed width (and must be display:block;).This is not for centering text. For centering text you use:
Code: [Select]
text-align: center;
The tag where the text is in, must be a display:block; element.

With the usage of the standard CSS for centering the page is something wrong. Internet Explorer doesn't support it. With Internet Explorer you have to use "text-align: center;" to center the contents and make it to left again in the child content.

A good code to center a page is:
Code: (style.css) [Select]
body
{
  text-align: center;
}

#main
{
  display: block;
  width: 800px;

  margin: 5px auto;
  text-align: left;
}

Code: (index.htm) [Select]
<html>
<head>

//link to the css file, title and other things that must be in the head

</head>
<body>
  <div id="main">
    //the contents of the page must be here
  </div>
</body>
</html>

Ofcourse you can add a lot of more things  :D

Good luck,
Mikro



Ex. Argonath Weekly Express leader ■  Ex. FBI C. Division Chief (SA:MP) ■  Ex. FBI Director (SA:MP)
Ex. Argonath Government Radio Developer | Tune in! ■  [WS] Member ■  Ex. SA:MP Lead Developer


 


free
SimplePortal 2.3.7 © 2008-2025, SimplePortal