Zitat von
Pia
Außerdem habe ich noch keine richtige vorstellung wie die Seite genau aus sehen soll, da muß ja dann das Script auch zu passen vom aussehen.
Das passt dann schon, wenn du auch mit CSS arbeitest.
Da du ja nicht weisst was CSS ist, das heisst Cascading StyleSheet und wie der Name schon sagt kann man das Aussehen festlegen, also der Style.
Das könnte dann in einer komplizierten Seite ungefähr so aussehen:
Code:
* {
margin:0;
padding:0;
}
body {
background:#ffffff url('images/bg.png') repeat-x scroll top left;
margin:0 auto;
text-align:center;
padding:0;
padding-top:30px;
font-family:Arial, Helvetica, sans-serif;
}
/* wrapper */
div#wrap {
width:90%;
margin:0 auto;
padding:0 10px;
}
/* header & nav */
div.header {
margin:0 auto;
text-align:left;
}
div.title {
float:left;
width:25%;
text-align:left;
}
div.nav {
width:75%;
float:right;
padding:30px 0 0 0;
margin:0;
}
div.nav ul {
list-style:none;
float:right;
padding:0 0 0 50px;
margin:-10px 0 0 50px;
}
div.nav ul li {
display:inline;
float:left;
text-align:left;
}
div.nav ul li a, div.nav ul li a:visited, div.nav ul li a:hover {
float:left;
margin:0 20px;
text-decoration:none;
color:#ffffff;
font-weight:normal;
font-size:0.9em;
font-family:Arial, Helvetica, sans-serif;
padding:0;
border-bottom:1px solid #fff;
text-align:left;
}
/* headers */
h1, h2 {
text-align:left;
color:#fff;
text-align:left;
}
h1 {
font-size:3em;
padding-left:10px;
text-align:left;
}
h1 a, h1 a:hover, h1 a:visited {
text-decoration:none;
color:#ffffff;
text-align:left;
}
h2 {
padding:0 0 10px 10px;
font-size:0.9em;
font-family:Georgia, "Times New Roman", Times, serif;
text-align:left;
}
h3 {
font-size:1.5em;
font-family:'Lucida Sans Unicode','Lucida Grande',verdana,sans-serif;
font-weight:normal;
color:#333333;
text-align:left;
}
h4 {
color:#7F0000;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:1.4em;
font-weight:normal;
padding:5px;
background-color:#e6e6e6;
border-bottom:1px solid #cccccc;
text-align:left;
}
/* element defaults */
p {
margin-bottom:20px;
line-height:1.7em;
font-size:0.95em;
color:#333333;
text-align:left;
}
ul {
padding:0 0 20px 35px;
}
code {
border:1px solid #7D0000;
border-left-width:10px;
display:block;
padding:10px;
margin:10px 0;
text-align:left;
}
/* default forms */
form {}
form input, form textarea {
border:2px solid #dddddd;
padding:5px;
color:#666666;
font-family:Arial, Helvetica, sans-serif;
font-size:1.0em;
text-align:left;
}
form input.formbutton {
background:#8D0000 url('images/button.png') repeat-x scroll top left;
color:#ffffff;
font-size:0.9em;
border:1px solid #5E0000;
font-weight:bold;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align:left;
}
/* default tables */
table {
width:100%;
margin-bottom:10px;
text-align:left;
}
table tr th, table tr td {
padding:5px 10px;
text-align:left;
}
table tr th {
background:#8D0000 url('images/button.png') repeat-x scroll top left;
color:#ffffff;
text-align:left;
}
table tr td {
border-bottom:1px solid #dddddd;
text-align:left;
}
/* default links */
a:link {
color:#700000;
text-align:left;
text-decoration:underline;
}
a:visited {
color:#AE0000;
text-align:left;
}
a:hover {
color:blue;
text-align:left;
}
/* centeral page */
div.pagewrapper {
margin:0 auto;
background-image:url('images/wrap-bg-right.png');
background-repeat:repeat-y;
background-position:top right;
text-align:left;
}
div.innerpagewrapper {
background-image:url('images/wrap-bg-left.png');
background-repeat:repeat-y;
background-position:top left;
min-height:400px;
text-align:left;
}
div.page {
margin:0 10px;
background-color:#ffffff;
padding:10px 10px;
text-align:left;
}
div.page ul {
list-style-image:url('images/bullet.png');
font-size:0.95em;
}
div.page ul li {
padding:3px 0;
text-align:left;
}
/* content */
div.content {
width:65%;
min-height:400px;
float:left;
text-align:left;
}
div.content li a:link {
color:#700000;
text-align:left;
}
div.content li a:visited {
color:#AE0000;
text-align:left;
}
div.content li a:hover {
color:blue;
text-align:left;
}
/* sidebar */
div.sidebar {
width:30%;
height:400px;
float:right;
text-align:left;
overflow:auto;
}
div.sidebar ul {
list-style:none;
list-style-image:none;
padding:10px 10px 25px 10px;
text-align:left;
}
div.sidebar ul li {
padding:7px 0;
text-align:left;
}
div.sidebar ul li a:link {
font-family:Georgia, "Times New Roman", Times, serif;
color:#700000;
text-decoration:underline;
font-size:1.1em;
text-align:left;
}
div.sidebar ul li a:visited {
color:#AE0000;
text-align:left;
}
div.sidebar ul li a:hover {
color:blue;
text-align:left;
}
/* footer */
div.footer {
clear:both;
margin-top:10px;
border-top:1px solid #dddddd;
text-align:center;
}
div.footer p {
text-align:center;
color:#999999;
font-size:0.7em;
font-family:"Trebuchet MS", Verdana, Arial;
text-align:center;
}
div.footer p a {
color:#999999;
text-align:center;
}
/* search form */
form.searchform {
padding-top:10px;
text-align:left;
}
/* misc classes */
*:focus {
outline:none;
}
.clear {
clear:both;
}
Hier kannst du auch diverses lernen:
HTML / CSS --> SELFHTML 8.1.2 (HTML-Dateien selbst erstellen)
PHP --> PHP-Kurs.com - PHP lernen und MySQL Tutorial mit vielen Beispielen
Ich hoffe, dass ich helfen konnte.