Guten Tag,
wie der Titel schon sage habe ich ein kleines Problem beim Positionieren von einem Element.
Zu Beginn, ich bin noch ein totaler Anfänger und mache die ersten Html/Css versuche für schulische Zwecke.
Also:
Ich entwerfe eine Website für eine Tacofirma und möchte ein Maskottchen in die obere linke Ecke stecken, was auch ohne jegliche Positionierungsbefehle funktioniert. Direkt darunter kommt dann ein Menü und rechts daneben ein kleines Textfeld.
Nun möchte ich das Logo für die Firma oben rechts in die Ecke platzieren und so einstellen das es beim runterscrollen mitgescrollt wird, also immer sichtbar ist (ich denke das ist die fixed Einstellung).
Das Problem ist, egal welche Positionierungsbefehle ich verwende, das Logo wird immer direkt unter dem Maskottchen angebracht oder so das diese sich überlappen.
So, hier nun die villeicht etwas unübersichtlichen Dokumente (Ich weiß leider nicht wie ich diese zum Ausklappen einstelle):
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="head">
<img src="startma.png"></div>
<div id="logo"> <img src="Logo2.png"></div>
<div id="menue">
<p>
<a href="start.html"><font color="#000000">Start </p><p>
<a href="kontakte.html"><font color="#000000"> Kontakte </p><p>
<a href="info.html"><font color="#000000">Into </p><p>
<a href="produkte.html"><font color="#000000">Produkte </p>
<a href="bilder.html"><font color="#000000">Bilder </a>
</div>
<div id="text">
Willkommen bei GeTaco <p> </p>
</div>
</body>
</html>
Und die dazugehörigen kurzen Css Einstellungen:
#head{
position: relative;
padding: 20px 20px 20px 20px;
}
#menue {
font-size:large;filter-glow:#aaaaaa;font-family: arial, Times New Roman ;
background-image:url(menue.png) ;
background-color:#55aa00;padding: 20px 20px 20px 20px;
margin-left: 20px;
float: left;
width: 160px;height: 260;
font-family: swift;
color:#dddddd;
}
#text{
padding: 10px;10px;margine-top: 20;
font-style: italic;font-family: arial, Times New Roman ;background-color:#55aa00;
float: right;
width: 700px;
margin-left: 20px;
width: 700px;height: 500;
font-size:10ex;}
body {
background-color:#33dd00;
}
#bilder{
}
#logo{
position: fixed; top: 10px; left: 10px; bottom: 10px; right:10px;}
Mag sein das einige dieser Befehle überflüssig sind, aber wie gesagt ich bin noch neu in diesem Branche:)
Schonmal danke im voraus.
wie der Titel schon sage habe ich ein kleines Problem beim Positionieren von einem Element.
Zu Beginn, ich bin noch ein totaler Anfänger und mache die ersten Html/Css versuche für schulische Zwecke.
Also:
Ich entwerfe eine Website für eine Tacofirma und möchte ein Maskottchen in die obere linke Ecke stecken, was auch ohne jegliche Positionierungsbefehle funktioniert. Direkt darunter kommt dann ein Menü und rechts daneben ein kleines Textfeld.
Nun möchte ich das Logo für die Firma oben rechts in die Ecke platzieren und so einstellen das es beim runterscrollen mitgescrollt wird, also immer sichtbar ist (ich denke das ist die fixed Einstellung).
Das Problem ist, egal welche Positionierungsbefehle ich verwende, das Logo wird immer direkt unter dem Maskottchen angebracht oder so das diese sich überlappen.
So, hier nun die villeicht etwas unübersichtlichen Dokumente (Ich weiß leider nicht wie ich diese zum Ausklappen einstelle):
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="head">
<img src="startma.png"></div>
<div id="logo"> <img src="Logo2.png"></div>
<div id="menue">
<p>
<a href="start.html"><font color="#000000">Start </p><p>
<a href="kontakte.html"><font color="#000000"> Kontakte </p><p>
<a href="info.html"><font color="#000000">Into </p><p>
<a href="produkte.html"><font color="#000000">Produkte </p>
<a href="bilder.html"><font color="#000000">Bilder </a>
</div>
<div id="text">
Willkommen bei GeTaco <p> </p>
</div>
</body>
</html>
Und die dazugehörigen kurzen Css Einstellungen:
#head{
position: relative;
padding: 20px 20px 20px 20px;
}
#menue {
font-size:large;filter-glow:#aaaaaa;font-family: arial, Times New Roman ;
background-image:url(menue.png) ;
background-color:#55aa00;padding: 20px 20px 20px 20px;
margin-left: 20px;
float: left;
width: 160px;height: 260;
font-family: swift;
color:#dddddd;
}
#text{
padding: 10px;10px;margine-top: 20;
font-style: italic;font-family: arial, Times New Roman ;background-color:#55aa00;
float: right;
width: 700px;
margin-left: 20px;
width: 700px;height: 500;
font-size:10ex;}
body {
background-color:#33dd00;
}
#bilder{
}
#logo{
position: fixed; top: 10px; left: 10px; bottom: 10px; right:10px;}
Mag sein das einige dieser Befehle überflüssig sind, aber wie gesagt ich bin noch neu in diesem Branche:)
Schonmal danke im voraus.
