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

Gird3r · **on:** January 04, 2010, 05:39:24 pm

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.

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

Void · **Reply #1 on:** January 04, 2010, 07:07:17 pm

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

smey · **Reply #2 on:** January 04, 2010, 07:19:11 pm

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.

9r2e5i3k · **Reply #3 on:** January 05, 2010, 01:35:07 am

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

Quote from: Gird3r on January 04, 2010, 05:39:24 pm

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.

Quote from: Gird3r on January 04, 2010, 05:39:24 pm

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 ; }

Quote from: Gird3r on January 04, 2010, 05:39:24 pm

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.

Mikro · **Reply #4 on:** January 05, 2010, 04:21:47 pm

Quote from: Gird3r on January 04, 2010, 05:39:24 pm

The ones who designed css should be shot for making such a shitty language.

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

Yihka · **Reply #5 on:** January 05, 2010, 10:57:54 pm

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

<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>©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?

9r2e5i3k · **Reply #6 on:** January 06, 2010, 12:48:27 am

- 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.

Yihka · **Reply #7 on:** January 06, 2010, 03:22:54 pm

Quote from: 9r2e5i3k on January 06, 2010, 12:48:27 am

- 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...

Mikro · **Reply #8 on:** January 06, 2010, 05:03:21 pm

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

Good luck,
Mikro

Official Websites	Roleplay Services	Official Clans	Community Gaming	Partner Websites	Social Media Services
Argonath RPG Wiki	Argonath RPG Police Department	Rock Stars Clan	Facebook Community	Azellus Games	Facebook Group Page
Argonath Club	Argonath RPG Fire Department	Team MTA	Steam Community	Venture Code	LinkedIn Group Page
	Federal Bureau Of Investigation	White Shadows	Social Club Community	YouTube Channel
	Citizenship & Migration Board	Argonath Veterans
	Emergency Medical Services	The Crimson Legacy
	Argonath RPG Armed Forces

News

User Info

Recent Posts

Who's Online

Birthday Calender

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

Gird3r

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

Void

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

smey

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

9r2e5i3k

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

Mikro

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

Yihka

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

9r2e5i3k

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

Yihka

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

Mikro

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