ups sorry 
das ganze geht mit
overflow: scroll;um die scrollbalken bei zu langem text einzublenden und mit
overflow: hidden;wenn das, was aus dem element herausragt abgechnitten werden soll (ohen scrollbars) geht aber nur, wenn der text länger ist als das element (z.B. div). Wenns nicht reicht gibts sowieso keine scrollbars
LG
PS.: googlen hilft ;):http://de.selfhtml.org/css/eigenschaf…ng.htm#overflow
jo is eigentlich ganz gut, hab mal nen bisschen da gemacht, aber nicht viel
Also... dann fang ich mal ganz vorne an
Was ein div-Container ist weißt du denke ich.
Wenn ich dich recht verstehe, möchtest du einen div, in dem die ganze Seite drin ist. Also nimmst du davon einen und packst, sagen wir mal drei noch darein.
Ca. So:
_____________________________________
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
|_______|________________|__________|Wenn ich da falsch liege lass es mich bitte wissen.
Nehmen wir also an, der linke ist box1, der in der mitte box2 und der rechte box3.
Soweit klar?
Am besten du verfolgst die Schritte mit
So, dann machen wir diese drei divs erstmal:
<head>
<style type="text/css">
<!--
-->
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>Nun liegen die alle untereinander. Um sie nebeneinander zu bekommen, nehmen wir float. Das kommt in die CSS. Dazu benennen wir jetzt die drei divs auch mal im Code, per id. id erscheint in der CSS als #. Um das ganze besser erkennen zu können gebe ich jetzt mal jedem div eine Farbe. Jetzt bekommt noch jeder div ein float und fertig.:
<head>
<style type="text/css">
<!--
#box1 {
background-color: red;
float: left;
}
#box2 {
background-color: blue;
float: left;
}
#box3 {
background-color: yellow;
float: left;
}
-->
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
</body>In der Browservorschau sieht man jetzt nix, da die divs ja noch keine Höhe haben. Also Höhe rein (und Breite auch), um das ganze zu verdeutlichen.:
<head>
<style type="text/css">
<!--
#box1 {
background-color: red;
float: left;
height: 10px;
width: 200px;
}
#box2 {
background-color: blue;
float: left;
height: 10px;
width: 200px;
}
#box3 {
background-color: yellow;
float: left;
height: 10px;
width: 200px;
}
-->
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
</body>So, jetzt hast du schonmal drei Container nebeneinander.
Wenn du jetzt einfach in jeden Container ein Bild oder Hintergrundbild einfügst, je nachdem ob du noch Text hast oder nicht, hast du das, was du wolltest.
Bsp:
<head>
<style type="text/css">
<!--
#box1 {
background-color: red;
float: left;
height: 10px;
width: 200px;
}
#box2 {
background-image: url(bild2.jpg);
float: left;
height: 10px;
width: 200px;
}
#box3 {
background-color: yellow;
float: left;
height: 10px;
width: 200px;
}
-->
</style>
</head>
<body>
<div id="box1">
Hallo, <br />
das ist die erste Box,<br />
mit Bild unter Text.<br />
<img src="bild1.jpg" />
</div>
<div id="box2">
Hallo,<br />
das ist die zweite Box,<br />
mit Text auf (nicht vorhandenem) Hintergrundbild!<br />
</div>
<div id="box3">
<img src="bild3.jpg" /><br />
<img src="bild4.jpg" />
</div>
</body>So. in der ersten Box hast du ne Hintergrundfarbe mit Text und Bild, in der zweiten den Text auf dem Hintergrundbild und in der dritte einfach zwei Bilder.
Noch Fragen?
letzte Frage: https://www.html-seminar.de/box-modell.htm einmal da gucken, da wird es gut erklärt!
justify guckst du da: https://www.html-seminar.de/css-definitionen-uebersicht.htm guckst du da!
width & height:
#box {
width: 200px;
height: 500px;
}
bedeutet, dass die Box, die hier angesprochen wird so groß ist (habe dein Beispiel in meinem Code nicht gefunden, deshalb nur ein Beispiel), mehr nicht.
Noch FRagen?
LG
PS.: Du nervst schon nicht
Wieso bringst du nicht einfach beide Bilder auf ein Bild, sodass du nur eins einbinden musst?
Ansonsten würde ich sagen, du machst zwei div-Container und positionierst die beiden so, wie du sie haben willst. Dann legst du für jeden der div-Container ein Hintergrundbild fest.
BSP:
HTML:
<div id="box1"></div>
<div id="box2"></div>CSS:
#box1 {
float: left;
margin: 10px;
padding: 20 px;
background-image: url (bild1.jpg);
}
#box2 {
float: right;
margin: 10px;
padding: 20px;
background-image: url (bild2.jpg);
}Verstehst?
LG
Laura
HTML ist die Grundlage für PHP. Ich kan HTML ziemlich gut und nur so verstehe ich auch die Befehle von PHP. Dadurch, dass ich ziemlich viele HTML und auch CSS Befehle kenne, sind die meisten PHP Sachen ziemlich einfach zu verstehen. Und wenn du PHP lernen willst, empfehle ich dir den Kurs vom Admin hier, da er genauso aufgebaut ist wie das HTML-Seminar. Nur das baut eben alles aufeinander auf.
LG
PS.: Eine Mailfunktion in PHP kann man in 10 Zeilen schreiben, eine MySQL Abfrage nicht.
Dann kannst du es dir auch per Mail schicken lassen Das ist noch einfacher
1. Zum Beispiel statt "Wie geht das" ein "Wie geht das, und zwar in dem und dem Fall für das und das"
2. Das hat nichts mit arbeiten sondern mit genervt sein zu tun.
3. Ich weiß nicht ob das im Seminar steht, ist ja nur ein einfacher CSS-Befehl.
Soll das ein Gästebuch werden?
Basti
Betr. Yeti
(das ist kompliziert!)
Das mit der verkürzten Seite solltest du dir aber merken. Auch wenn ich es selbst aus bestimmten Gründen nicht mache, kann es sehr sinnvoll sein, da du den Surfern unnötiges Runtergescrolle ersparst. Und du solltest deine Fragen besser formulieren
wen meinst du?
OpenOffice, ja. Aber ein Office-Paket nicht
Word und Excel verschicken? Na du bist mir ein Vogel!
Das Office-Paket kannst du bestellen, kostet glaube ich in der neuesten Version so um die 150 €. Wem das zu teuer ist, kann auf OpenOffice zurückgreifen. Funktion ist die gleiche, hat alles was das Office-Paket auch hat: Word (writer), Excel (calc), Powerpoint (impress), Access (base) außerdem noch draw, so etwas Ähnliches wie Paint oder Picture Publisher und math, das ist etwa mit Derive o.Ä. vergleichbar. Das Outlook aus dem Office-Paket kannst du zum Beispiel mit Mozilla Thunderbird ersetzen.
Alles kostenlos.
Ich habe sowohl das Office-Paket als auch OpenOffice und bin mit beidem zufrieden und nehme immer das, was ich grade brauche.
Wer natürlich umsonst an ein Office-Paket rankommt (so wie ich), der hat halt Glück gehabt
LG
Dann würde ich Kessel aber groß schreiben.
Da bei dir einfach alles weiß ist und ich nicht so viel Zeit habe, mich da jetzt reinzudenken, gebe ich dir jetzt einfach mal meinen Quellcode, den ich acuh auf meiner Page benutzt habe. Kannst ihn benutzen und natürlich auch verändern, aber bitte wenn du ihn so oder so ähnlich verwendest das Copyright drin lassen.
Schaus dir einfach mal an, da verschiebt sich auch nix, die Größen müssen nur je nach Textumfang angepasst werden und das mit dem Einbinden der Navigation ggf. ändern.
Bitte mit Vorsicht behandeln, hab lang dran gearbeitet
LG
PS: einige CSS-Elemente sind überflüssig, da auch für die anderen Seiten des Projektes gedacht, sind aber ganz praktisch (besonders die Bilder ;))
PS2: Wens interessiert: die fertige Seite gibts demnächst auf <!-- m --><a class="postlink" href="http://w92.bplaced.net">http://w92.bplaced.net</a><!-- m --> - ist aber noch im Aufbau und kriegt noch ein anderes Design, werde ich auch später nochmal vorstellen
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" xml:lang="de" lang="de">
<head>
<title>Titel</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="description" content="" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="generator" content="Webocton - Scriptly (www.scriptly.de)" />
<link href="style.css" type="text/css" rel="stylesheet" />
<link href="favicon.ico" type="image/x-icon" rel="shortcut icon" />
</head>
<body>
<center>
<div id="header">
<p>Titel o.Ä.</p>
</div>
<div class="abstand"></div> <!-- Abstand von 10px -->
<div id="main">
<div id="navi">
<!-- Einfügen der Navigation per PHP -->
<?php
include ("navi.php")
?>
</div>
<div id="text">
<div id="text2"> <!-- erzeugt den Abstand zwischen #text und dem Inhalt -->
<div class="abstand"></div>
<h3>Überschrift</h3><br />
<br />
Text<br />
immer noch Text<br />
Blub.<br />
immer weiter Text<br />
<div class="abstand"></div> <!-- Abstand vom Text bis zum Ende der Seite pro div 10px -->
<div class="abstand"></div>
<div class="abstand"></div>
<div class="abstand"></div>
<div class="abstand"></div>
<div class="abstand"></div>
<div class="abstand"></div>
</div>
</div>
</div>
<div class="abstand"></div>
<div id="footer">
<a href="copyright.htm">Copyright</a> |
<a href="kontakt.htm">Kontakt</a>
</div>
</center>
</body>
<!-- Copyright 2009 by Laura Seidler -->
<!-- unerlaubte Verwendung des Quellcodes wird strafrechtlich verfolgt -->
</html>CSS:
body {
background-color: #000000;
}
#navi hr {
color: #4A99D9 ;
}
a:link {color: #4A99D9;text-decoration:none;}
a:visited {color: #4A99D9; text-decoration:none;}
a:focus {color: #4A99D9; text-decoration:none;}
a:hover {color: #4A99D9; text-decoration:none;}
a:active {color: #4A99D9; text-decoration:none;}
#footer a:link {color: #000000;text-decoration:none;}
#footer a:visited {color: #000000; text-decoration:none;}
#footer a:focus {color: #000000; text-decoration:none;}
#footer a:hover {color: #000000; text-decoration:none;}
#footer a:active {color: #000000; text-decoration:none;}
h3 {
text-align: center;
}
h4 {
text-align: center;
}
td {
width: 200px;
height: auto;
padding: 4px;
}
table {
border: medium;
border-color: white;
}
.abstand {
height: 10px;
}
.bildrechts {
float: right;
}
.bildlinks {
float: left;
}
.antworten {
font-size: small;
}
#header {
height: 100px;
width: 750px;
background-color: #FFFF00;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
font-size: x-large;
line-height: 100px;
}
#main {
height: 1000px;
width: 750px;
background-color: #21415A;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
}
#navi {
float: left;
background-color: #000000;
color: #4A99D9;
width: 150px;
height: 980px;
margin: 10px;
}
#navi a {
font-size: small;
color: #4A99D9;
}
#text {
float: right;
width: 550px;
height: 980px;
margin: 10px;
text-align: justify;
}
#text2 {
background-color: #000000;
color: #4A99D9;
text-align: justify;
width: 530px;
height: 960px;
padding: 10px;
}
#footer {
height: 25px;
width: 750px;
background-color: #FFFF00;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
line-height: 25px;
}
<!-- Copyright 2009 by Laura Seidler -->
<!-- unerlaubte Verwendung des Quellcodes wird strafrechtlich verfolgt -->hmm... auf anhieb wüsste ich es jetzt nicht, da ich mich mit php auch nicht so gut auskenne, aber jetzt wo ich ein bisschen nachgedacht habe, sollte es auch mit js gehen (wenn du dich damit besser auskennst als ich... ich habe keine ahnung ;))
folgendes: meine mich zu erinnern zu können, dass es bei js eine funktion gibt die onclick heißt. d.h.: onclick und dann include style.css oder so, ich habe keine ahnung, wie das bei js geht. ansonsten frag mal im php-bereich nach
ich habe nochmal eine inhaltliche frage: was bitte ist "ein kessel buntes"???