Turorial "Homepage erstellen in 3 Tagen"

pTown · 12.11.2011

Hi,

hab grad das tutorial "Homepage erstellen in 3 Tagen" gemacht, oder viel mehr seit freitag mittag, aber es will nicht so richtig sein...

überall, wo ein bild z laden war, habe ich im css das laden weggelassen und eingetragen, dass er eine farbe zeigen soll.

gestern abend hat zumindest der footer fnktioniert... der funktioniert heute leider nichtmehr... warum auch immer...

dafür habe ich heute einen grauen hintergrund und gelbe schrift... und das navi is auch untereinander... texte werden wie fortlaufend angezeigt... is voll doof...

kann mir da einer helfen?

cebito · 12.11.2011

AW: Turorial "Homepage erstellen in 3 Tagen"

Deine Angaben sind sehr wirr. Verlinke bitte zum Tutorial (niemand hat Lust das Ding erst zu suchen) und stell deinen Versuch am besten irgendwo online.

Klick mal die rote Zeile in meiner Sig, da erfährst du, was für uns notwendig ist dir zu helfen.

pTown · 12.11.2011

AW: Turorial "Homepage erstellen in 3 Tagen"

sorry...

hier die tutS:

http://www.psd-tutorials.de/tutorials/web/html-css/-/view/1784--homepage-workshop-2-tag-1-
http://www.psd-tutorials.de/tutorials/web/html-css/-/view/1788--homepage-workshop-2-tag-2-
http://www.psd-tutorials.de/tutorials/web/html-css/-/view/1797--homepage-workshop-2-tag-3-

so sieht mein css aus:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

    <head>
        <title></title>
        
        <style type="text/css">

        /* Jeder Selektor wird hiermit auf 0 gesetzt */
*             {
**********    **margin:0;
**********    **padding:0;
            }
**
            body {
                margin:20px
                background-color:url(http://www.rezeptwiese.de/images/recipes/0007/0450/pralinen_schachtel_torte.jpg) top repeat-x #333;
            }**
            
            #wrapper {
                margin:0 auto;
                backround:#fff;
                padding:5px;
                border:4px solid #555;
                width:760px;
            }
**
            #header {
                height:110px;
                backround:blue;
            }
**
/* Das ist die Formatierung für eine Überschrift im Header */
            
            #header h1 {
************    height:45px;
************    font:250% Trebuchet MS;
************    padding:30px 20px 10px 20px;
************    color:#fff;
            }
**
/* Hier beginnt die Formatierung für das Navigationsmenü */
            
            #nav {
************    margin:0 0 0 0;
            }
**
            #nav li {
************list-style:none;
************display:inline;
************padding:7px 0;
            }
**
            #nav li a {
************    padding:7px;
************    color:#EBEAEA;
************    text-decoration:none;
            }
**
            #nav li a:hover {
************    background:#333;
************    border-bottom: 4px solid #E70565;
************    color:#E70565;
            }
*
            #seitenbox_links {
                float:left;
                width:180px;
                padding:0 10px;
                background:#ebeaea;
                font:100% Helvetica Neue;
                border:1px solid #ccc;
                margin:0 15px 0 0;
            }
**
/* Überschriftformatierung für Seitenbox */
            
            #seitenbox_links h2 {
************    font:140% Arial;
************    color:#222;
************    border-top:1px solid #f6f6f6;
************    border-bottom:1px solid #f6f6f6;
************    padding:5px;
            }
**
/* Absatzformatierung. ACHTUNG: Line-Height ändert Zeilenabstand der Seitenbox!! */

            #seitenbox_links p {
************    line-height:20px;
            }
**
            #content {
                padding:0 15px;
                font-size:120%;
            }
**
/* Überschriften im Content stylen */
            #content h2 {
************    font:150% Trebuchet MS;
************    color:#222;
************    border-bottom:1px solid #eee;
            }
**
            #content h3 {
************    font:140% Arial;
************    color:#222;
************    border-top:1px solid #f6f6f6;
************    border-bottom:1px solid #f6f6f6;
************    padding:5px;
            }
**
/* Hier Klasse „Mit_Seitenbox */

            .mit_seitenbox {
                margin:0 0 0 200px;
            }
**
/* Ein paar Selektoren des Contents gesammelt und formatiert */
/* ACHTUNG: Line-Height ändern auch hier den Zeilenabstand im gesamten Text!! */
        
            #content h1,h2,h3,h4,p,ul,ol {
************    margin:15px 0;
************    line-height:20px;
            }
            
            #footer {
                margin:30px -5px -5px -5px;
                padding:15px;
                background:#f6f6f6;
                border-top:2px solid #eee;
                clear:left
            }
            
**
/* AB HIER: FORMATIERUNGEN, DIE HTML-TAGS ÜBERSCHREIBEN FÜR TEXT IM CONTENT */
**
/* Zum Zitieren bzw. hier nur für HTML Code verwendet */
code {
************background:#f6f6f6;
}

    </style>

    </head>
    <body>


    </body>
</html>

und so mein html:

<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
    <head>
        <title> pralinen-selbermachen.de - Pralinen zum selber machen </title>
        
        <meta http-equic="contant-type" content="text/html; charset=utf-8" />
        
        <link rel="stylesheet" href="css/default.css" type="text/css" media="screen" />
        
    </head>
    <body>
    
        <div id="wrapper"> 
            
                    <div id="header">
                
                    <h1> Willkommen bei <nobr> pralinen-selbermachen.de </nobr> </h1>

                            <ul id="nav"> 
                
                            <li><a href="index.html">Pralinen selber machen</a></li> 
                            <li><a href="#">FAQ</a></li> 
                            <li><a href="#">Pralinen f&uuml;r Firmen</a></li> 
                            <li><a href="#">Gutscheine</a></li> 
                            <li><a href="#">beliebte Kreationen</a></li> 
                            <li><a href="#">Seite 6</a></li> 
            
                            </ul> 
            
                    </div> 
            
                <div id="seitenbox_links">
        
                <h2>Die linke Seitenbox!</h2>
                
                <p> Hier kannst du beliebige Inhalte einbinden, z.B.: News, Kommentare und kleine Bilder. Es folgt jetzt jede Menge Blindtext:</p>

        
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed ultrices risus sit amet lectus. Cras vulputate augue in enim. Cras feugiat diam non odio suscipit rutrum. Nullam quam arcu, tincidunt eget, varius ac, semper non, massa. Sed lorem leo, gravida ut, mattis vitae, suscipit id, enim. Sed ac metus et lectus semper varius. Morbi posuere rutrum ante. Etiam ac purus. Sed mattis aliquam tortor. Duis facilisis tellus placerat lorem.</p>
            
                </div>

                <div id="content" class="mit_seitenbox">
                <p>
                Herzlich Willkommen bei pralinen-selbermachen.de </br> </br>
                Kennen Sie das? Sie kaufen sich eine Schachtel Pralinen weil Sie gerne diese eine Sorte essen? </br> Aber warum kaufen Sie dann eine ganze Schachtel?</br></br>
                Kreieren Sie sich doch lieber eine ganze Schachtel voller Lieblingspralinen
                </p>
            
                <p>
                Und das ganz einfach in nur 4 Schritten!     
                </p>
            
                </div>
                
        </div>
        
        <div id="footer"> 

        <p> 
        Pralin&eacute; Passion UG (haftungsbeschr&auml;nkt)&copy;
        </p> 
        
        </div> 

        
    </body>
</html>

erkennt da jemand einen fehler???

schonmal danke im voraus...

Uwe367 · 12.11.2011

AW: Turorial "Homepage erstellen in 3 Tagen"

Du hast einige Fehler in der CSS Datei.
Ich lese oft "backround", allerdings muß das "background" heißen.

Zudem lese ich in einer Zeile
background-color:url(http://www.rezeptwiese.de/images/rec...htel_torte.jpg) top;

background-color verlangt aber eine Farbangabe wie z.B. #fff. Willst du dass ein Bild angezeigt wird so muss die Zeile so aussehen:
background: url(http://www.rezeptwiese.de/images/rec...htel_torte.jpg) top;

_schatzi_ · 12.11.2011

AW: Turorial "Homepage erstellen in 3 Tagen"

Hallo!

Da sind diverse Fehler!!!
Es heißt nicht "backround" sondern "background"!
Bei "background-color" kannst du keine url angeben! (color=Farbe)
Der DOCTYPE ist auch doppelt, usw, usw...

Das Tut habe ich mir jetzt nicht angeschaut, daher kann ich weiteres nicht beurteilen, aber "" ist auch suboptimaler Mist!

edit: uups, zu langsam!

pTown · 12.11.2011

AW: Turorial "Homepage erstellen in 3 Tagen"

hi,

schonmal danke. das mit dem "grund" ist mir auch schon aufgefallen, habe mich da am anfang verlesen und dann dachte ich eigentlich in der hinsicht alles verbessert zu haben...

aber schonmal danke...

was ist an suboptimal? ich möchte halt, das dieser textteil nicht gebrochen wird...

lexip · 13.11.2011

AW: Turorial "Homepage erstellen in 3 Tagen"

pTown schrieb:
,
was ist an suboptimal? ich möchte halt, das dieser textteil nicht gebrochen wird...

In XHTML gibts das "" nicht
Mehr da: http://dciwam.de/faq/css/css-nobr-ersetzen

pTown · 13.11.2011

AW: Turorial "Homepage erstellen in 3 Tagen"

das bedeutet, ich definiere in meinem css solch ein "adress" und ersetzte dadurch das ?

christin32 · 13.11.2011

Homepage erstellen in 3 Tagen

Versuche es mal hiermit als Unterstützung zum Tutorial: http://little-boxes.de/little-boxes-teil1-online.html

pTown · 13.11.2011

AW: Turorial "Homepage erstellen in 3 Tagen"

okay, schau ich mir mal an, danke.

aber kommen wir mal zum menue, also #nav, kann ich das bei <ul> mit einem float:left; ändern?

pTown · 13.11.2011

AW: Turorial "Homepage erstellen in 3 Tagen"

So, hab mir heute mal nen ganzen Tag HTML und CSS reingezogen...

also meinen header, meine sidebox, meinen content und meinen footer hab ich jetzt m wrapper. Das passt mittlerweile alles ganz schick.

nur leider hab ich dabei noch ein Problem: meine sidebox ist auf 180px beschränkt, geht aber trotzdem über die komplette seite, so das der content darunter eingerückt ersichtlich ist. Könnt ihr mir da helfen?

hier der CSS für die Sidebox:

HTML:

seitenbox_links {
	background-color: #FFFF99;
	width: 180px;
	margin-top: 0px;
	margin-right: 15px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 10px;
	padding-bottom: 0px;
	padding-left: 10px;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #FFFF00;
	height: auto;
	float: left;
}

und so isses im HTML:

HTML:

<div id="seitenbox_links">
    
   		<h2 class="seitenbox_linksh2"> Probieren wir mal </h2>
    
		<p class="seitenbox_linksp"> Blindtext </p>
        
	</div>

sieht da einer, warum der <div>-Tag da nicht begrenzt is?

DANKE im Voraus!

MyBad · 13.11.2011

AW: Turorial "Homepage erstellen in 3 Tagen"

Wenn ich es richtig sehe, fehlt dir die Kennzeichnung im CSS. Mit #seitenbox_links sollte es klappen.

pTown · 14.11.2011

AW: Turorial "Homepage erstellen in 3 Tagen"

sollte es nur an dem # liegen? im css hab ich (oder dreamweaver) bisher kein # gesetzt. sollte ich das bei allen deklarationen nachholen?

Myhar · 14.11.2011

AW: Turorial "Homepage erstellen in 3 Tagen"

Nein, das solltest du nicht. Du solltest dir vielmehr ansehen, was dieses # bewirkt. Die Raute dient im CSS dafür, dass du eine ID spezifizierst. Mit einem . kannst du eine Klasse ansprechen. Bsp:

HTML:

#elementId{border:2px solid red} /*NUR das Element mit der ID elementId bekommt den Border*/


.klasse1 .klasse2 {border 2px solid green} /*Jedes Element mit der klasse2, welches ein übergeordnetes Element mit klasse1 besitzt, bekommt diesen grünen border*/

Es scheint mir, als ob du dich zu sehr auf Dreamweaver verlässt, was das erstellen von Code angeht. Ich empfehle, vergiss das Programm und verwende es erst, wenn du weißt, was du tust (also nur in der Code Ansicht)

L. G.

pTown · 14.11.2011

AW: Turorial "Homepage erstellen in 3 Tagen"

wenn ich das also rictig verstehe, kann mann die ID´s und Klassen miteinander kombinieren?

also icih weiß, man kann einem div eine id (oder muss man) und eine klasse zuordnen, aber ich kann auch 2 klassen miteinander kombinieren?

wenn ich jetzt jeder id eine # verpasse, sollte es dann klappen?

ich hab vorher taco benutzt, und hab nur zu dreamweaver gewechselt, da man da auch gleich was sieht und man (zumindest im css) seine befehle einfacher tippen kann. manche davon hab ich nachher nochmal manuell bearbeitet, wusste jetzt aber nicht, dass die raute dafür so wichtig ist.

aber mal was anderes, wie schaffe ich es, dass das navi nach links läuft? lege ich dafür eine Tabelle an, oder kann ich, so wie ich in dem tut interpretiert habe, eine ul nebeneinander legen?

Myhar · 14.11.2011

AW: Turorial "Homepage erstellen in 3 Tagen"

Du kannst alles miteinander kombinieren, wie du möchtest. Bedenke aber nur, dass eine ID für jede Seite nur einmal vorkommen darf. Auch Konstrukte wie #myId .klasse1 p sind erlaubt. Aber das sind wirklich die notwendigsten Grundlagen für CSS, welche man sich direkt zu Beginn aneignen sollte.

Sicher, man sieht in Dreamweaver etwas, aber wie viele Leute surfen wirklich mit Dreamweaver im Netz? Ich kenne keinen, also ist die Voransicht am Besten gleich zu vergessen.
Mein Tipp: Nimm Firefox mit der Erweiterung Firebug, da siehst du auch alle Änderungen sofort und das auch in einem Browser, welcher im Internet wirklich verwendet wird.

Bezüglich der Navigation:
Was meinst du mit laufen? Im Internet läuft/geht/rennt/schwimmt/fliegt nichts?
Prinzipiell kann man sagen, dass du die Tags auch dafür verwenden sollst, wofür sie da sind. Ist deine Navigation eine Aufzählung von einzelnen Menüpunkten (also eine Liste)?
Dann verwende eine Liste.
Hast du einen Absatz, verwende ein p, hast du eine Tabelle mit tabellarischen Daten, verwende eine Tabelle. Damit weißt du, wann du welches Element einsetzen sollst.
Nur wenn du ein bedeutungsloses, inhaltsleeres Element, zum Beispiel für Designzwecke, benötigst, verwende ein div oder ein span. Jedoch ist es nicht zielführend, jedes Element in ein div zu packen.

L. G.

pTown · 14.11.2011

AW: Turorial "Homepage erstellen in 3 Tagen"

schonmal danke für deine erklärung.

was ich mit meiner falschen ausdrucksweise meinte ist, wie mache ich es, dass mein Nav auf einer höhe eine Art linie bildet. Du weist sicher was ich meine.

was ich mein, wenn ich eine unsortierte liste nehme, dann wird das ja untereinander angezeigt. Soweit mein bescheidenes verständniss reicht, müsste man da für <ul> und <li> eine eigene klasse im css definieren?

und wie mache ich es, dass die <li> nebeneinander angezeigt werden?
ich kann ja definieren, dass die kästchen eine entsprechende weite haben (geht mit <width>, oder?) wie definiere ich aber, dass die "Kästen" nebeneinander angezeigt werden?

Myhar · 14.11.2011

AW: Turorial "Homepage erstellen in 3 Tagen"

Das war für mich verständlich formuliert. Und nein, man muss nicht für jedes kleine Detail eine eigene Klasse definieren:

HTML:

<ul>
<li>ich </li>
<li>floate</li>
<li>horizontal</li>
</ul>

ul li{float:left}

Du kannst auch mit display:inline arbeiten (das wird aber meines Wissens nach vor allem in älteren IEs nicht zu 100% unterstützt)
Du darfst natürlich aufs clearen nicht vergessen. ;-)

L. G.

pTown · 14.11.2011

AW: Turorial "Homepage erstellen in 3 Tagen"

du meinst, durch so einen {float:left} wird die liste nebeneinander angezeigt???

Myhar · 14.11.2011

AW: Turorial "Homepage erstellen in 3 Tagen"

Nein, ich habe das nur so zum Spaß geschrieben, weil ich nicht wusste, wie ich sonst die 5 Minuten verbringen soll... :rolleyes:

Natürlich funktioniert das. (Für alle, die das Sarkasmusschild übersehen haben)
Auch finde ich es interessant, wieso man lieber auf eine Antwort wartet, wenn man es innerhalb von ein paar Minuten selber herausfinden kann.

Ich frage mich nur immer mehr, was du an einem Tag mit HTML + CSS wirklich gelernt hast? Floating von Elementen sind ebenso wie das Ansprechen derselben im CSS Grundlagen, welches man so ziemlich als erstes lernt. Welche Quellen verwendest du denn zum lernen von HTML + CSS?

L. G.