• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Background

Vielleicht kannst Du ja auch daran erkennen (neben dem Rahmen) woran es liegt, dass das Logo nicht von der Oberkante weggeht. Wie gesagt, mit margin bewegt es sich nur nach links oder rechts und nach unten kann ich es nur durch Umbrüche verschieben .. Vielen Dank

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=UTF-8" />
<title>agile Tournee</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>


<body>


<div id="wrapper">




<span style="margin-left:50px;margin-top:20px;outline-style:none">
<a href=><img src="img/logo.png"><a href="index.html"</a>
</span>

</div>




</body>
</html>


CSS

body {
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
margin:0px;
padding:0px;
line-height: 20px;
text-align:center;
list-style-type:none;
color: #3e3d40;

}




#wrapper {


width:1024px;
min-height:768px;
margin: 0 auto;
text-align:left;
background-image: url(../img/site.png);
background-repeat:no-repeat;


}
 
Du hattest ein Fehler im a-Tag, diese Zeile hier

<a href=><img src="img/logo.png"><a href="index.html"</a>
ist komplett falsch.

Hier der korrigierte Code, damit du weitertesten kannst.
HTML: 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>agile Tournee
        </title>
        <link href="css/style.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <div id="wrapper">
            <span style="margin-left:50px;margin-top:20px;outline-style:none">
                <a href="index.html">
                    <img src="img/logo.png"></a>
            </span>
        </div>
    </body>
</html>
 
Der eine ist, dass das Logo sich nur durch Umbrüche (<br />) nach unten verschieben lässt. Wenn ich es in Html mit margin-top anspreche, passiert nichts und wenn ich es als Element vom Stylesheet aus mit margin-top anspreche, verschiebt sich auch das Hintergrundbild mit nach unten, so als ob der Hintergrund und das Logo an der Oberkante zusammenhängen (nach links und rechts verschiebt es sich problemlos). Der andere Punkt war, dass ich den farbigen Rahmen vom Logo-Bild in Firefox nicht wegbekomme ..
 
Hallo,

dein Fehler liegt daran, das du die Elemente nicht richtig ansprichst:

Du hast folgenden Code den head-Bereich habe ich jetzt mal zur Veranschaulichung weggelassen
HTML: 
<!DOCTYPE html>
<html>
    
    <body>
        <div id="wrapper">
            <span style="margin-left:50px;margin-top:20px;outline-style:none">
                <a href="index.html">
                    <img src="img/logo.png" alt=""></a>
            </span>
        </div>
    </body>
</html>
Als oberstes Element hast du das html-Element.
Danach folgen von der Hierachie:
body und div(mit id wrapper)

Wenn du nun den Rahmen entfernen willst vom Bild musst du das in deinem CSS richtig auswählen:
Dazu gibt es folgende Möglichkeiten:
img {} - würde alle Bilder ansprechen
#wrapper img{} - spricht Bilder an, die sich in einem Element mit der ID Wrapper befinden.


Du hast aber alles in ein Span-Element geschrieben, das ist nicht richtig, da das Span-Element ein Inline-Element ist. Es gibt vereinfacht gesagt container und halt Inhalt in dem Container und span p img sind halt Inhalt in den Containern. Stimmt eigentlich nicht ganz, aber ist auch nicht einfach zu erklären. Nimm es erst mal einfach so hin.
Lies mal CSS 4 You - The Finest in Stylesheets: Workshop: Elemente zu Block und Inline-Elementen.

Wenn du nun den Rahmen vom Bild im Container wrapper ansprechen willst, musst du
#wrapper img {border:0;}
in dein CSS schreiben. Alle Angaben darin verändern nun alle Bilder, die sich im DIV mit der ID wrapper befinden. Bei dir ist es jetzt nur eins, können aber auch mehrere Bilder sein oder gar andere Elemente.

Ich weiss, das ist jetzt nicht so einfach zu verstehen, von daher empfehle ich dir erst mal ausprobieren und lesen.
Suchbegriffe bei Google sind css html anleitung, da bekommst du etliche Treffer.
 
Hi, vielen Dank für die Erklärung, den Rahmen habe ich so wegbekommen (#wrapper img {border:0;}). Jetzt bleibt nur noch das Problem, dass ich das Logo nicht richtig positioniert kriege. Ich habe es im Stylesheet #wrapper img mit margin-top und -left angesprochen aber es bewegt sich nur auf der horizontalen Achse und bewegt sich nicht von der Oberkante weg (wenn müsste dafür wahrscheinlich eh eine andere Lösung gefunden werden, da ich später noch mehr imgs im Wrapper positionieren werde). Ist da vielleicht irgendein Attribut im Wrapper, dass da alles oben fixiert ist o.ä.? Ich weiss da nicht weiter.

Viele Grüße
 
Lies dir mal meine Erklärung noch einmal durch.
Probiere es nur mit dem Body-Tag, nimm alles raus aus dem HTML-Dokument. Gib dem Body-tag eine Hintergrundfarbe, damit du es besser siehst und probiere erst mal damit alles aus.

Danach platzierst du ein anderes Blockelement in das body das HTML-Dodumentes. Ein Div ist hier schon mal gut geeignet zum testen.
Dann probierst du auch wieder alles aus, also Rahmen, Farben, Margin, Padding usw. Vielleicht kommst ja dann dahinter.
Ausserdem lesen, lesen, lesen.
Wenn du nicht liest, können wir dir ja gleich die Webseite komplett herstellen, aber das ist ja nicht das Ziel denke ich.

Empfehlen, kann ich auch das Video von vitus37, Erstellen einer Webseite im Zeitraffer. Da kannst an jeder Stelle stoppen und dir das mal genau ansehen, wie Elemente platziert werden und wie die im CSS verändert werden.
http://vlmedia.de/824/erstellung-einer-webseite-im-zeitraffer
 
Zuletzt bearbeitet von einem Moderator:
Ich hab die Seite nochmal Schritt für Schritt aufgebaut und im Endeffekt war es nur ein Logikfehler, da das Logo sich im Wrapper befindet ich es aber immer mit margin anstatt mit padding angesprochen habe. Jetzt ist soweit alles in Ordnung. Vielen Dank an alle die mir geholfen haben

Grüße
 
Hallo. Einmal muss ich hier noch eine Frage stellen. Ich habe das Logo oben links in der Ecke platziert und ich möchte einige Menüpunkte auf gleicher horizontaler Höhe weiter rechts anordnen, aber egal was ich auch probiere, ist der oberste Punkt wo diese anfangen die Unterkante von dem Logo (so als ob das Logo die komplette Breite einnehmen würde). Weiss jemand was ich da machen muss?

Viele Grüße
 
dafür kannst du für das nachfolgende Blockelement float:left verwenden und ein margin-left mit linken Abstand von der linken Kante des Logos aus gesehen.
Oder du gibts dem img-Element ein float:left, was zur Zeit noch eleganter erscheint, dann ist das nächste Element auf jeden Fall rechts daneben.

Da es Menüpunkte sind muss dein nächstes Element wohl ein Ul sein. Menüpunkte kommen dann in die li Elemente.

Solange das nur ein Test ist, ist das ja alles wunderbar wie du das machst, aber wenn das eine Webseite werden soll, die du tatsächlich ins WWW stellst ist dein Vorgehen nicht richtig. Denn zuerst hat der Architekt die Zeichnung erstellt, danach wird dann gebaut. Bei Webseiten sollte man genauso vorgehen.

Dann erstellt man die HTML-Elemente und zum Schluss erst das formatieren mit CSS.

Wie gesagt solange du lernst und testest ist das nicht schlimm, aber es wird schwieriger werden so wie du vorgehst, mit jedem HTML-Element.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben