Hallo alle zusammen,
ich habe ein kleines Problem bzw. ein großes für mich 
ich soll für einen guten freund eine kleine Homepage erstellen nun fehlen mir leider noch die kenntisse. Nun mein Problem ich komme nicht ganz klar bzw. ich verstehe nicht wie und was ich verändern muss wenn ich sachen anders als wie in der vorlage vorgsehen positionieren möche. (Weiter unten genauer geschildert)
Er Gab mir volgende "vorlagen" :
images -ordner
style.css
index.html
Hier noch mal die beiden vorgefertigten codes
style.css code
* {
margin: 0px;
padding: 0px;
}
body {
padding-top: 0px;
background-color: #01111d;
color: #FFF;
font-family: verdana, arial, sans-serif;
text-align: left;
letter-spacing: 1px;
}
a {color: #FFF;font-size: 14px;}
a:hover {color: #01a9c0;}
.more{float: left;}
.clear{clear:both;}
p{ margin: 20px 0px 20px 0px;line-height: 16px;font-size: 14px;}
#container {
margin: 0px auto;
width:873px;
}
#menu {
background-image:url(images/menu.gif);
width:862px;
height:90px;
position:relative;
}
#menu li{
position:absolute;
top:50px;
list-style-type: none;
}
#m01 {left:160px;}
#m02 {left:305px;}
#m03 {left:450px;}
#m04 {left:590px;}
#m05 {left:730px;}
#menu a{
font-family: verdana, arial, sans-serif;
font-size: 12px;
font-weight:bolder;
color:#FFFFFF;
text-decoration:none;
text-transform: uppercase;
}
#menu a:hover {color: #01a9c0;}
#header {
background-image:url(images/header.gif);
background-repeat:repeat-y;
width:873px;
}
#logo {
width:240px;
height:46px;
margin: 0px 0px 0px 80px;
float:left;
display:inline;
}
#paul {
background-image:url(images/paul.jpg);
width:498px;
height:405px;
float:right;
margin-right:40px;
display:inline;
}
#platzhalter {
background-image:url(images/platzhalter_bild.jpg);
width:498px;
height:405px;
float:right;
margin-right:40px;
display:inline;
}
#welcome {
width:210px;
margin: 25px 0px 0px 100px;
float:left;
display:inline;
}
#aboutme {
width:210px;
margin: 25px 0px 0px 100px;
float:left;
display:inline;
}
#kontakt {
width:210px;
margin: 25px 0px 0px 100px;
float:left;
display:inline;
}
#welcome h2{
margin: 0px 0px 20px 0px;
}
#welcome p{
width:200px;
}
#welcome img{
border: solid 3px #FFFFFF;
}
#middle {
background-image:url(images/middle.gif);
width:873px;
height:21px;
}
#middle2 {
background-image:url(images/middle2.gif);
width:873px;
height:22px;
}
#content {
background-image:url(images/content.gif);
width:873px;
}
#left {
float:left;
width:435px;
margin: 0px 0px 0px 85px;
display:inline;
}
#right {
float:right;
width:258px;
height:auto;
margin: 0px 62px 20px 0px;
display:inline;
}
#right a img{
margin: 8px 8px 8px 0px;
border: none 0px #FFFFFF;
}
#footer {
background-image:url(images/footer.gif);
background-repeat:no-repeat;
width:873px;
}
#footer p{
height:58px;
width:873px;
text-align:center;
margin: 0px 0px 0px 0px;
padding: 30px 0px 0px 0px;
font-size:11px;
}
#footer a{
font-size:11px;
}index.html code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Night club template</title>
<link rel="stylesheet" href="style.css" type="text/css" charset="utf-8" />
</head>
<body>
<div id="container">
<div id="menu">
<ul>
<li id="m01"><a href="http://www.freewebsitetemplates.com">Home</a></li>
<li id="m02"><a href="http://www.freewebsitetemplates.com">Photos</a></li>
<li id="m03"><a href="http://www.freewebsitetemplates.com">Parties</a></li>
<li id="m04"><a href="http://www.freewebsitetemplates.com">Booking</a></li>
<li id="m05"><a href="http://www.freewebsitetemplates.com">Contact</a></li>
</ul>
</div>
<div id="header">
<div id="logo">
<a href="http://www.freewebsitetemplates.com"><img src="images/logo.gif" alt="logo" border="0" /></a>
</div>
<div id="dj"></div>
<div id="welcome">
<h2>Welcome</h2>
<img src="images/welcome.gif" alt="photo 1" />
<p>We add new <a href="http://www.freewebsitetemplates.com">free website templates</a> frequently.</p>
<p>You can remove any link to our websites from this template you're free to use the template without linking back to us.</p>
<a class="more" href="http://www.freewebsitetemplates.com">more</a>
</div>
<div class="clear"></div>
</div>
<div id="middle"></div>
<div id="middle2"></div>
<div id="content">
<div id="left">
<h2>News events</h2>
<p>This is just a place holder so you can see how the site would look like.</p>
<p>The template is designed by <a href="http://www.freewebsitetemplates.com">free website templates</a> for you for free you can replace all the text by your own text.</p>
<p>Even more websites all about website templates on <a href="http://www.justwebtemplates.com">Just Web Templates</a>.</p>
<p>If you're looking for beautiful and professionally made templates you can find them at <a href="http://www.templatebeauty.com">Template Beauty</a>.</p>
</div>
<div id="right">
<h2>Photos</h2>
<a href="http://www.freewebsitetemplates.com"><img src="images/photo.jpg" alt="photo 1" /></a>
<a href="http://www.freewebsitetemplates.com"><img src="images/photo.jpg" alt="photo 2" /></a>
<a href="http://www.freewebsitetemplates.com"><img src="images/photo.jpg" alt="photo 3" /></a>
<a href="http://www.freewebsitetemplates.com"><img src="images/photo.jpg" alt="photo 4" /></a>
<br /><br />
<a class="more" href="http://www.freewebsitetemplates.com">more photos</a>
</div>
<div class="clear"></div>
</div>
<div id="footer">
<p>Copyright © Website name all rights reserved. | <a href="http://www.freewebsitetemplates.com/termsofuse">Terms of use</a><p>
</div>
</div>
</body>
</html>Die Vorlage sieht nun so aus
http://imgbox.de/users/Berlin16/nightclubjpg.jpg
Nach dem ich an den codes ein wenig gebatselt habe ist das entstanden:
http://lion1605.de
images (ordner)
style.css code
about me.html
gallerie.html
kontakt.html
Vom Aufbau her stimmt es erstmal soweit.
Nun mein Problem wie kann ich zum beispiel auf "About Me" das bild an erster stelle nehmen und den Text an zweiter stelle (Bild Links Text rechts daneben)? Sobald ich den DIV für das Bild rausnehme rutscht der text automatisch nach rechts. Füge ich das Bild wieder ein ist die schrift links und das bild wieder rechts. Denke das is nur ein kleiner teil der geändert werden muss aber mit css. kenne ich mich leider noch nicht wie gewollt aus.
Hier noch mal meine veränderte css datei (roten teil ahbe ich hinzugefügt für die einzelnen html seiten und bilder):
* {
margin: 0px;
padding: 0px;
}
body {
padding-top: 0px;
background-color: #01111d;
color: #FFF;
font-family: verdana, arial, sans-serif;
text-align: left;
letter-spacing: 1px;
}
a {color: #FFF;font-size: 14px;}
a:hover {color: #01a9c0;}
.more{float: left;}
.clear{clear:both;}
p{ margin: 20px 0px 20px 0px;line-height: 16px;font-size: 14px;}
#container {
margin: 0px auto;
width:873px;
}
#menu {
background-image:url(images/menu.gif);
width:862px;
height:90px;
position:relative;
}
#menu li{
position:absolute;
top:50px;
list-style-type: none;
}
#m01 {left:160px;}
#m02 {left:305px;}
#m03 {left:450px;}
#m04 {left:590px;}
#m05 {left:730px;}
#menu a{
font-family: verdana, arial, sans-serif;
font-size: 12px;
font-weight:bolder;
color:#FFFFFF;
text-decoration:none;
text-transform: uppercase;
}
#menu a:hover {color: #01a9c0;}
#header {
background-image:url(images/header.gif);
background-repeat:repeat-y;
width:873px;
}
#logo {
width:240px;
height:46px;
margin: 0px 0px 0px 80px;
float:left;
display:inline;
}
[COLOR='Red']#paul {
background-image:url(images/paul.jpg);
width:498px;
height:405px;
float:right;
margin-right:40px;
display:inline;
}
#platzhalter {
background-image:url(images/platzhalter_bild.jpg);
width:498px;
height:405px;
float:right;
margin-right:40px;
display:inline;
}
#welcome {
width:210px;
margin: 25px 0px 0px 100px;
float:left;
display:inline;
}
#aboutme {
width:210px;
margin: 25px 0px 0px 100px;
float:left;
display:inline;
}
#kontakt {
width:210px;
margin: 25px 0px 0px 100px;
float:left;
display:inline;
}[/COLOR]
#welcome h2{
margin: 0px 0px 20px 0px;
}
#welcome p{
width:200px;
}
#welcome img{
border: solid 3px #FFFFFF;
}
#middle {
background-image:url(images/middle.gif);
width:873px;
height:21px;
}
#middle2 {
background-image:url(images/middle2.gif);
width:873px;
height:22px;
}
#content {
background-image:url(images/content.gif);
width:873px;
}
#left {
float:left;
width:435px;
margin: 0px 0px 0px 85px;
display:inline;
}
#right {
float:right;
width:258px;
height:auto;
margin: 0px 62px 20px 0px;
display:inline;
}
#right a img{
margin: 8px 8px 8px 0px;
border: none 0px #FFFFFF;
}
#footer {
background-image:url(images/footer.gif);
background-repeat:no-repeat;
width:873px;
}
#footer p{
height:58px;
width:873px;
text-align:center;
margin: 0px 0px 0px 0px;
padding: 30px 0px 0px 0px;
font-size:11px;
}
#footer a{
font-size:11px;Ich denke mal den Beiträg hätte man auch 3/4 kleiner schreiben können aber naja ;). Ich danke schonmal im vorraus für eure Hilfe.
Für Rechtschreibfehler muss ich mich Entschuldigen sie liegt mir nicht so recht.
P.S. ist erst mal nicht so wichtig aber wenn wir schonmal dabei sind hätt ich doch noch zwei kleine Fragen ...
weis jemand oder kann mir bitte jemand eine kleine shoutbox programieren?
nen einfaches Textfeld ohne Smilies und sowas wo user einfach ne nachricht hinterlassen können?
Lieben Gruß und einen Schönen Abend noch.
Editt
Habe einen Punkt ganz vergessen undzwar wie kann ich die "Textcontainer" erweitern? in die Länge erweitern sie sich automatisch aber nicht in die breite 
