PDA

View Full Version : Some Problems with html and css



plattenumdesign
Dec 26th, 2008, 06:20 AM
first of heres my website.
www.plattenumdesigns.net23.net(working on gettin a domain)

i need to know how to position the text everytime i trie it doesnt move at all it just stays in the same place.

second, how do i make my site look the same in each browser? because whenever i place like google ads where i want them in FF they dont appear the same in IE8


thanks
-PlattenumDesigns

Excavator
Dec 26th, 2008, 06:27 AM
Hello platttenumdesign and Merry Christmas,

The best way to get it to render the same in all browsers is to use both a DocType and valid code.
Your site is missing the doctype, does not validate and uses tables. It's good you came here before you got much further!

To start with, have a look at all the links in my sig below.

plattenumdesign
Dec 26th, 2008, 06:31 AM
thanks but now how do i place my text to where i want it?
because it doesnt move whenever i try to

Excavator
Dec 26th, 2008, 06:56 AM
Have a look at this. Just copy/paste the whole thing into a new .html document.

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
background: #000;
text-align:center;
font: 12px "Comic Sans MS";
color: #fff;
}
* {
margin: 0;
padding: 0;
border: none;
}
#wrap {
width: 800px;
background: #000;
margin: 0 auto;
}
/******styles horizontal menu ********/
#menu_h {
height: 55px;;
}
#menu_h ul {
list-style-type: none;
width: 800px;
}
#menu_h li a{
float: left;
height: 55px;
}
#menu_h li a:hover {
float: left;
}
a.button2 {
background-image: url(http://www.plattenumdesigns.net23.net/template_02.gif);
width: 106px;
}
a.button2:hover{
background-image: url(http://www.plattenumdesigns.net23.net/template_02.gif);
background-position: 0 -3px;
}
a.button3 {
background-image: url(http://www.plattenumdesigns.net23.net/template_03.gif);
width: 107px;
}
a.button3:hover{
background-image: url(http://www.plattenumdesigns.net23.net/template_03.gif);
background-position: 0 -3px;
}
a.button4 {
background-image: url(http://www.plattenumdesigns.net23.net/template_04.gif);
width: 133px;
}
a.button4:hover{
background-image: url(http://www.plattenumdesigns.net23.net/template_04.gif);
background-position: 0 -3px;
}
a.button5 {
background-image: url(http://www.plattenumdesigns.net23.net/template_05.gif);
width: 133px;
}
a.button5:hover{
background-image: url(http://www.plattenumdesigns.net23.net/template_05.gif);
background-position: 0 -3px;
}
a.button6 {
background-image: url(http://www.plattenumdesigns.net23.net/template_06.gif);
width: 158px;
}
a.button6:hover{
background-image: url(http://www.plattenumdesigns.net23.net/template_06.gif);
background-position: 0 -3px;
}
a.button7 {
background-image: url(http://www.plattenumdesigns.net23.net/template_07.gif);
width: 163px;
}
a.button7:hover{
background-image: url(http://www.plattenumdesigns.net23.net/template_07.gif);
background-position: 0 -3px;
}
#footer {
height: 30px;
line-height: 30px;
text-align: center;
}
</style>
</head>
<body>
<div id="wrap">
<img src="http://www.plattenumdesigns.net23.net/template_01.gif" width="800" height="66" alt="plattenumdesign logo" />
<div id="menu_h">
<ul>
<li><a href="http://nopeople.com/design/index.html" class="button2"></a></li>
<li><a href="http://nopeople.com/design/index.html" class="button3"></a></li>
<li><a href="http://nopeople.com/design/index.html" class="button4"></a></li>
<li><a href="http://nopeople.com/design/index.html" class="button5"></a></li>
<li><a href="http://nopeople.com/design/index.html" class="button6"></a></li>
<li><a href="http://nopeople.com/design/index.html" class="button7"></a></li>
</ul>
<!--end menu_h--></div>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<div id="footer">
<p>ALL RIGHTS RESERVED|PlatenumDesigns</p>
<!--end footer--></div>
<!--end wrap--></div>
</body>
</html>



When you goto adding text then, maybe a good tutorial would help. Have a look at this one. (http://www.westciv.com/style_master/academy/hands_on_tutorial/index.html)



...

Excavator
Dec 26th, 2008, 07:05 AM
I edited my last post to add some text in it for you.

plattenumdesign
Dec 26th, 2008, 07:05 AM
can i use that?

if i put my info into it?

Excavator
Dec 26th, 2008, 07:08 AM
Sure no problem - I wrote it for you.

Lots more examples and tips here if you like - http://nopeople.com/design/CSS%20tips/index.html
Help yourself to anything you can use.

plattenumdesign
Dec 26th, 2008, 07:10 AM
dude seriously youve been a MEGA help ive been tryin to get this right for forever now thanks alot i appreciate it.

angelina12
Dec 27th, 2008, 09:43 AM
Really i am very thanksfull to Excavator.