Style.css Problem (Anfänger)

Lion1605

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

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

Alles anzeigen

index.html code

HTML

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

Alles anzeigen

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):

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

Alles anzeigen

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

chris90night

Zitat von Lion1605

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.

Hi,

ohne in den Code zu schauen und mich näher damit zu befassen, würde ich einfach sagen, dass die Box ein "float:right;" besitzt. Also einfach der Box mit dem Text ein "float:left;" verpassen, danach wieder clearen und schon müsste es passen.
Ansonsten schau dir einfach mal CSS an... Es gibt doch soooo viele gute Tutorials im Internet - lernen musst du das schon selber

Zitat von Lion1605

Ich denke mal den Beiträg hätte man auch 3/4 kleiner schreiben können aber naja ;).

Jo... warum machst du es dann nicht?

Zitat von Lion1605

P.S. ist erst mal nicht so wichtig aber wenn wir schonmal dabei sind hätt ich doch noch zwei kleine Fragen ...

Eigentlich ja nur eine...

Such mal im Internet nach Shoutboxen. Entweder du findest Codeschnipsel oder auch was Fertiges.
Merke: Wenn du so in einem Thread fragst, wird dir keiner mit "Ja" antworten.

Zitat von Lion1605

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

In die Breite erweitern sie sich ebenfalls automatisch (sofern es sich um ein Blockelement handelt). Wenn das nicht so ist, liegts einfach daran, dass eine feste Breite angegeben wurde.

MfG

Tags