Antworten auf deine Fragen:
Neues Thema erstellen

Turorial "Homepage erstellen in 3 Tagen"

pTown

Nicht mehr ganz neu hier

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

undefined

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

Nicht mehr ganz neu hier

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...
 
Zuletzt bearbeitet von einem Moderator:

Uwe367

Noch nicht viel geschrieben

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 "<nobr>" ist auch suboptimaler Mist!

edit: uups, zu langsam!
 

pTown

Nicht mehr ganz neu hier

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 <nobr> suboptimal? ich möchte halt, das dieser textteil nicht gebrochen wird...
 

pTown

Nicht mehr ganz neu hier

AW: Turorial "Homepage erstellen in 3 Tagen"

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

pTown

Nicht mehr ganz neu hier

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

Nicht mehr ganz neu hier

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!
 
Zuletzt bearbeitet:

MyBad

localhorst

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

Nicht mehr ganz neu hier

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

Hat es drauf

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

Nicht mehr ganz neu hier

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

Hat es drauf

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

Nicht mehr ganz neu hier

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

Hat es drauf

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

Nicht mehr ganz neu hier

AW: Turorial "Homepage erstellen in 3 Tagen"

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

Myhar

Hat es drauf

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.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.615
Beiträge
1.538.352
Mitglieder
67.528
Neuestes Mitglied
Links Stream es
Oben