zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Logo in vorgefertigten Rahmen über CSS einfügen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 16.03.2018, 20:36
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 16.03.2018
Beiträge: 6
otto1985 befindet sich auf einem aufstrebenden Ast
Standard Logo in vorgefertigten Rahmen über CSS einfügen

Guten Abend zusammen, ich bin gänzlich neu in der Materie und versuche mich gerade an einer Webseite mit HTML und CSS.
Die Rahmen habe ich mit CSS schon eingerichtet und nun möchte ich ein Logo in den dafür eingerichteten grünen Rahmen hinzufügen. Aber ich bekomme es zum verecken nicht hin und stehe total aufm Schlauch.

Hier ist noch der HTML Code:

<!DOCTYPE html>
<html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="Author" content="Christian Otto">
<meta name="description" content="Seite rund um das Format der NXL Europe.
Hier sind Bilder, ein Forum, ein Gästebuch und diverse Videos zu finden">
<meta name="viewport" content="initial-scale=1">
<title>NXL Europe - The Paintball Series</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

<div id="webseite">

<div id="header">

<div id="logo">
</div>

</div>

<div id="menü">
</div>

<div id="inhalt">
</div>
</div>
</body>
</html>


Und hier die dazugehörige CSS Kodierung:

body {
text-align: center;
margin-left: auto;
margin-right: auto;
width: 1100px;
height: 650px;
background-image: url(C:/Users/Christian/Desktop/Webseite/Bilder/hintergrund.png);
height:100%;
width:100%;
}

#webseite {
width: 1100px;
margin: 0 auto;
position:absolute;
}

#header {

width: 100%;
height: 150px;
border-color: red;
border-width: 1px;
border-style: solid;
position:absolute;
top:10px;
left:10px;

}

#logo {
background-color:green;
margin-top:10px;
margin-left:20px;
float:left;
height:130px;
width:130px;
background-image: url(C:/Users/Christian/Desktop/Webseite/Bilder/nxl europe.png);
background-size: contain;


}

#menü {

width:200px;
height:498px;
border-color: yellow;
border-width: 1px;
border-style: solid;
position:absolute;
top:161px;
left:10px;
}

#inhalt {
width:899px;
height:498px;
border-color: blue;
border-width: 1px;
border-style: solid;
position:relative;
left:211px;
top:161px;
}

Und hier ist noch das Foto welches als Logo eingebunden werden soll.

Ich hoffe mir kann da weitergeholfen werden. Und bitte seid nicht zu hart mit mir, ich mache das ganze erst seit 5 Tagen.

lg Christian

Geändert von otto1985 (16.03.2018 um 20:47 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 17.03.2018, 04:10
Benutzerbild von basti1012
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 23.01.2018
Beiträge: 184
basti1012 befindet sich auf einem aufstrebenden Ast
Standard

#menü {

geht nicht ,da solltest du ue nehmen und kein ü.

Zu dein Bild.
https://codepen.io/basti1012/pen/OvRjBw

Sieht doch ganz gut aus was du da gemacht hast.Wo ist das Problem ?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 17.03.2018, 04:27
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 16.03.2018
Beiträge: 6
otto1985 befindet sich auf einem aufstrebenden Ast
Standard

Wie hast du das jetzt geschafft?
Ich habe es ständig ausprobiert aber der hat das Bild nie dargestellt?!

Also in Tags keine Umlaute einbinden geht nicht gut oder wie? Aber daran kann es nicht nur gelegen haben. Ich hätte das „Menü“ vor als „Navigation“ deklariert und es hat auch nicht funktioniert!
Mit Zitat antworten
  #4 (permalink)  
Alt 17.03.2018, 09:27
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Vielleicht hast du dich bei Navigation vertippt. Groß/Kleinschreibung oder so reicht da schon aus.
Bleibe am besten bei a-z und verwende keine Sonderzeichen.
Mit Zitat antworten
  #5 (permalink)  
Alt 17.03.2018, 12:14
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 16.03.2018
Beiträge: 6
otto1985 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von basti1012 Beitrag anzeigen
#menü {

geht nicht ,da solltest du ue nehmen und kein ü.

Zu dein Bild.
https://codepen.io/basti1012/pen/OvRjBw

Sieht doch ganz gut aus was du da gemacht hast.Wo ist das Problem ?

Würde mich echt mal interessieren was du gemacht hast, das es funktioniert?!

lg Christian
Mit Zitat antworten
  #6 (permalink)  
Alt 17.03.2018, 13:15
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 16.03.2018
Beiträge: 6
otto1985 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von otto1985 Beitrag anzeigen
Würde mich echt mal interessieren was du gemacht hast, das es funktioniert?!

lg Christian
Ich habe meinen Fehler gefunden. Der Fehler liegt in der Einbindung des Bilder auf meinem lokalen Ordner. Wenn ich den Link zu dem hochgeladenen Bild angebe, klappt es.
Gibt es für die Einbindung von lokalen Bildern einen anderen Befehl?

Also nicht background-Image: url() ????
Mit Zitat antworten
  #7 (permalink)  
Alt 18.03.2018, 05:40
Benutzerbild von basti1012
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 23.01.2018
Beiträge: 184
basti1012 befindet sich auf einem aufstrebenden Ast
Standard

Das mit den Bilder vom Rechner Einbinden ,habe ich auch noch nicht ganz verstaden.
Hier im Forum ist eine kurze erklärung die dir vieleicht schon hilft.
https://www.html-seminar.de/forum/th...ht-erscheinen/
Mit Zitat antworten
  #8 (permalink)  
Alt 18.03.2018, 05:45
Benutzerbild von basti1012
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 23.01.2018
Beiträge: 184
basti1012 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von otto1985 Beitrag anzeigen

Also in Tags keine Umlaute einbinden geht nicht gut oder wie? Aber daran kann es nicht nur gelegen haben. Ich hätte das „Menü“ vor als „Navigation“ deklariert und es hat auch nicht funktioniert!
Nee daran lag das auch nicht,das wahr nur Hinweiß zwischendurch weil der sofort aufgefallen ist.
Es kann dann passieren das es gar nicht gefunden wird oder Falsch erkannt ,oder was auch immer .Am besten gar nicht benutzen.
Mit Zitat antworten
  #9 (permalink)  
Alt 18.03.2018, 07:50
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von otto1985 Beitrag anzeigen
Gibt es für die Einbindung von lokalen Bildern einen anderen Befehl?
Nein.

Zitat:
Zitat von otto1985 Beitrag anzeigen
Also nicht background-Image: url() ????
Doch.

Das Problem ist, was meinst du mit "lokal"?

So wie du es im Thread gezeigt hast, wird das Bild nicht von einem Server geholt, sondern von deiner Festplatte. Diese Art von Lokal ist das "file" Protokoll (oder Schema https://de.wikipedia.org/wiki/Unifor...ifier#Schemata) und etwas anderes als Inhalte über http.

Wenn ich das richitg sehe, ist in deinem Orginal Code die Einbindung über das file Protkoll falsch, richtig müsste es heissen:
Code:
background-image: url(file:///C:/Users/Christian/Desktop/Webseite/Bilder/hintergrund.png);
Das ist aber nicht unbedingt empfehlenswert, da das CSS dann nur auf deinem Rechner funktioniert. Üblicherweise benutzt man daher eine relative URI (die ist dann relativ zum CSS) wie auf der von Basti verlinkten Seite erklärt wird oder installiert Lokal einen Server.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
CSS Clearfix / CSS Reset / CSS Hacks 2016 Elma CSS 7 14.08.2016 03:12
(CSS) Bootstrap Framework - Logo Gemeinde St. Nikolaus CSS 4 15.01.2013 21:27
1 Pixel Bild ohne CSS Rahmen RingoD CSS 7 29.12.2010 17:43
Hilfe: CSS Rahmen bei leerer Tabellen Zelle Mondschein1981 CSS 7 26.01.2005 17:13
CSS Rahmen ausrichten FaZi23 CSS 2 05.01.2005 17:34


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:33 Uhr.