Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Homepage: Button als Hintergrund wird abgeschnitten“

VirusX

Aktives Mitglied

HiHo,

Also ich habe mir die Grundkenntnisse in HTML und CSS angeeignet aber ich hänge gerade an einem Problem, auf dessen Lösung ich nicht komme:

Also oben ist der Header und links und rechts wollte ich Menüs haben.
Ich habe jetzt versucht im HTML Code die linke Navigationsleiste zu erstellen und in CSS den Hintergrund dafür zu erstellen, aber das sieht im Moment so aus:

http://www.abload.de/img/aufzeichnengus.jpg




Der Button in der linken Leiste sieht normaler Weise so aus:

button5de.jpg


Und das ist der Code dazu:

Code:
<!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>Test</title>
<link  rel="stylesheet" href="style.css" type="text/css">
</head>

<body>
  <div align="center"><img src="http://www.psd-tutorials.de/modules/Forum/Header.jpg" />
  </div>
<ul>
 	<li id="Navi"><a href="http://www.abc.de">News</a></li>
  <li id="Navi"><a href="http://www.abc.de">Gästebuch</a></li>
  </ul>

</body>
</html>

und

Code:
body {
	background-color: #FFFF99;
}

a { 
	background-image: url(../Button.jpg);
	display: block;
}

a:hover {
	background-image: url(../Button-over.jpg);
	display: block;
}

ul {
	list-style: none;
}

Also ich hätte es gerne so, dass der Button pro Link nur einmal angezeigt wird und in voller Größe, nicht so abgeschnitten.

(Ich hoffe die Frage ist nicht so simpel , dass ihr mich am liebsten prügeln wollt :lol:)

Edit: Ich habe noch eine Frage:

- Soll ich ein reines Bild ohne Text wie den Header direkt in den HTML Code einfügen oder über CSS? (Wie mache ich das am beste? mit <div id="Header"></div> und dann in der CSS Datei halt das Bild einfügen?
 
Zuletzt bearbeitet von einem Moderator:
R

rapzitis

Guest

AW: Homepage: Button als Hintergrund wird abgeschnitten

ganz einfach ... du musst dem link eine feste breite und höhe (entsprechend der grafik) geben.

sinnvoller wäre es in deinem fall wahrscheinlich dem lstenpunkt die hintergrundgrafik und feste werte zugeben + text-align:center; (wenn gewünscht).

die angabe von display block ist bei hover nicht nötig ... er übernimmt die einstellung von der link definition.
 
Zuletzt bearbeitet von einem Moderator:

Der_Ritter

Nicht mehr ganz neu hier

AW: Homepage: Button als Hintergrund wird abgeschnitten

Also ich hätte es gerne so, dass der Button pro Link nur einmal angezeigt wird und in voller Größe, nicht so abgeschnitten.

repeat: no-repeat;

dann erscheint der nur einmal.
- Soll ich ein reines Bild ohne Text wie den Header direkt in den HTML Code einfügen oder über CSS? (Wie mache ich das am beste? mit <div id="Header"></div> und dann in der CSS Datei halt das Bild einfügen?
Am Besten, wenn möglich, immer über CSS einbinden. Allerdings stellt sich die Frage, ob dieses Bild für das Layout dienen soll oder als unterstützendes Symbol für den Inhalt der Seite? ich gehe mal davon aus dass es sich nur um den Header dreht.

Im CSS die Größe des Divs entsprechend der Größe des Bildes angeben. mit background-image das Bild dem Div zuweisen. Dann evt. noch eine repeat-Anweisung (also wie und in welcher Richtung sich das Bild wiederholen soll) - wenn einmalig dann repeat: no-repeat;

Gruß
Der_Ritter
 
Zuletzt bearbeitet:

sokie

Mod | Web

AW: Homepage: Button als Hintergrund wird abgeschnitten

(Ich hoffe die Frage ist nicht so simpel , dass ihr mich am liebsten prügeln wollt :lol:)
soo simpel ist das auch nicht, wenn man grad dabei ist sich die Grundkenntnisse anzueigenen.
vielleicht kannst du etwas aus dieser Lösung für dein Problemenwenden.
.
ich habe der Liste eine ID gegeben, damit es nicht kollidiert, falls man in der Seite weitere Listen definiert.



- Soll ich ein reines Bild ohne Text wie den Header direkt in den HTML Code einfügen oder über CSS? (Wie mache ich das am beste? mit <div id="Header"></div> und dann in der CSS Datei halt das Bild einfügen?

ich würde es mit der DIV-Methode und css machen, einmal, weil es für die logische Struktur günstiger ist, auf der anderen Seite hast du so sehr viel mehr Möglichkeiten, diesen Bereich nachträglich zu erweitern (zB einen Text oder andere Elemente über die Grafik zu legen)
 
Zuletzt bearbeitet:

VirusX

Aktives Mitglied

AW: Homepage: Button als Hintergrund wird abgeschnitten

Jo erstmal danke für eure Hilfen! :rolleyes:

@ Sokie, sehr gut, dass du mal ein Beispiel erstellt hast, wie es aussehen könnte! ;)

Ich habe jetzt versucht, den Header einzufügen und bin wie folgt vorgegangen:

Ich habe in HTML ein Div erstellt

Code:
<!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>Unbenanntes Dokument</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
	<div id="Header"></div>




</body>
</html>

und in CSS dann das Bild eingefügt:

Code:
body {
	background-color: #FFFF99;
}

div#Header {
	background-image: url(../Header.jpg);
}

Aber das Bild wird nicht angezeigt. Leigt es vielleicht daran, dass das Div-Attribut noch irgendeinen Inhalt haben muss? Denn in der HTML Datei ist es ja eigentlich leer!?
 
Zuletzt bearbeitet:

p3t6

Noch nicht viel geschrieben

AW: Homepage: Button als Hintergrund wird abgeschnitten

tja das bild sollte auch in den div-container und nicht ins css.
 

sokie

Mod | Web

AW: Homepage: Button als Hintergrund wird abgeschnitten

tja das bild sollte auch in den div-container und nicht ins css.
wenn du die vorangegangenen Beiträge einmal liest, wird klar, dass das Bild als background im div liegt, und das wird natürlich per css gemacht.

Du musst im css noch die height und width des Containers definieren, sonst wird der nicht angezeigt. height und width muss die grösse des Hintergrundbildes haben. für einen inhalt reicht auch ein &nbsp;
 

Der_Ritter

Nicht mehr ganz neu hier

AW: Homepage: Button als Hintergrund wird abgeschnitten

body {
background-color: #FFFF99;
}

div#Header {
background-image: url(../Header.jpg);
repeat: no-repeat;
width: BREITE_DEINES_BILDES px;
height: HÖHE_DEINES_BILDES px;
}
 

VirusX

Aktives Mitglied

AW: Homepage: Button als Hintergrund wird abgeschnitten

So ich habe jetzt versucht alle Schnippsel zusammenzufügen und es klappt auch schon recht gut nur bei der Positionierung von ein paar Bereichen habe ich noch Schwierigkeiten (Es wird sich bestimmt nur um wenige Codes handeln, die das richten können):

So siehts aus:



Der Header und die linke Leiste sind schon richtig positioniert, aber die anderen Elemente sind nach unten verschoben bzw. der "Content" schiebt sich nicht zwischen die beiden Leisten.

Hier die Codes:

Code:
<!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>Unbenanntes Dokument</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<div id="Header"></div>
     <ul id="Navigation">
        <li><a href="">News</a></li>
        <li><a href="">Gästebuch</a></li>
        <li><a href="">Über mich</a></li>
    </ul>
    <ul id="Navigation2">
        <li><a href="">Kontakt</a></li>
        <li><a href="">Forum</a></li>
        <li><a href="">Registration</a></li>
    </ul>
<div id="Content">
	<p>News News News News News News News News News News News News News News News News News</p>
  <p>News News News News News News News News News News News News News News News News News</p>
  <p>News News News News News News News News News News News News News News News News News</p>
  <p>News News News News News News News News News News News News News News News News News</p>
</div>
<div id="Footer"></div>
</body>
</html>

und

Code:
body {
	background-color: #FFFF99;
	color: #FFFFFF;
	width: 1024px;
	height: auto;
}

div#Header {
	width: 1024px;
	height: 200px;
	background-image: url(../Header.jpg);
	margin: 0;
	padding: 0;
	
}

#Navigation li {
	float: left;
	width: 215px;
	height: 50px;
	text-align: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

#Navigation a {
	display: block;
	text-align: center;
	background-image: url(../Button.jpg);
	height: 50px;
}

#Navigation a:hover {
	background-image: url(../Button-over.jpg);
}

ul#Navigation {
	background-image: url(../Hintergrund_links.jpg);
	display: block;
	width: 220px;
	height: 800px;
	margin: 0;
	padding: 0;
}

#Navigation2 li {
	float: right;
	width: 215px;
	height: 50px;
	text-align: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

#Navigation2 a {
	display: block;
	background-image: url(../Button.jpg);
	text-align: center;
	height: 50px;
}

#Navigation2 a:hover {
	background-image: url(../Button-over.jpg);
}

ul#Navigation2 {
	float: right;
	background-image: url(../Hintergrund_links.jpg);
	width: 220px;
	height: 800px;
	margin: 0;
	padding: 0;
}

div#Content {
	background-image: url(../Content.jpg);
	width: 584px;
	height: 800px;
	margin: 0;
	padding: 0;
	color: black;
}

div#Footer {
	background-image: url(../Footer.jpg);
	width: 1024px;
	height: 50px;
}
 

sokie

Mod | Web

AW: Homepage: Button als Hintergrund wird abgeschnitten

der Content-bereich muss noch floaten. (float:left)

wenn die Navigationslistenpunkte untereinander stehen, ist für die ein float unangebracht, das macht man nur bei horizontalen listenmenüs.

die breite aller container (ul+div+ul) ist 1024px. bei kleineren zur Verfügung stehenden Fensterbreiten verspringen diese container. Sinnvoll ist es, dem layout eine äussere box (div) zu geben, die die entsprechende Breite hat. Dann enstehen bei kleineren Fenstern zwar scrollbalken, aber das Layout bleibt erhalten.
Bei der Berücksichtigung der Auflösung 1024:x empfiehlt es sich aber die Breite des Layouts etwas kleiner zu wählen.
 
Zuletzt bearbeitet:

VirusX

Aktives Mitglied

AW: Homepage: Button als Hintergrund wird abgeschnitten

Die Bilder wollen sich einfach nicht nebeneinander positionieren!

Code:
<!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>Unbenanntes Dokument</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<div id="Seite">
	<div id="Header"></div>
  	<ul id="Navigation_links">
    	<li><a href="">News</a></li>
      <li><a href="">Kontakt</a></li>
      <li><a href="">Forum</a></li>
    </ul>
    <ul id="Navigation_rechts">
    	<li><a href="">Forum</a></li>
      <li><a href="">Latest News</a></li>
      <li><a href="">Gästebuch</a></li>
    </ul>
 <div id="Content"></div>
</div>
</body>
</html>

Code:
body {
	background-color: #FFFF99;
	color: #FFFFFF;
}

div#Seite {
	width: 1024px;
	height: 1200px;
	background-color: #FFFF99;
}

div#Header {
	background-image: url(../Header.jpg);
	height: 200px;
	border: 0 0 0 0;
}

ul#Navigation_links {
	background-image: url(../Hintergrund_links.jpg);
	width: 220px;
	height: 800px;
	border: 0 0 0 0;
	padding: 0 0 0 0;
}

#Navigation_links a {
	background-image: url(../Button.jpg);
	width: 215px;
	height: 40px;
	display: block;
	text-align: center;
	padding: 8px 0 0 0;
}

#Navigation_links a:hover {
	background-image: url(../Button-over.jpg);
	width: 215px;
	height: 40px;
	display: block;
	text-align: center;
	padding: 8px 0 0 0;
}

#Navigation_links li {
	list-style: none;
}

div#Content {
	background-image: url(../Content.jpg);
	float: left;
	width: 584px;
	height: 800px;
	border: 0;
	padding: 0;
}

ul#Navigation_rechts {
	background-image: url(../Hintergrund_rechts.jpg);
	width: 220px;
	height: 800px;
	border: 0 0 0 0;
	padding: 0 0 0 0;
}

#Navigation_rechts a {
	background-image: url(../Button.jpg);
	width: 215px;
	height: 40px;
	display: block;
	text-align: center;
	padding: 8px 0 0 0;
}

#Navigation_rechts a:hover {
	background-image: url(../Button-over.jpg);
	display: block;
}

#Navigation_rechts li {
	list-style: none;
}
 

VirusX

Aktives Mitglied

AW: Homepage: Button als Hintergrund wird abgeschnitten

So ich habe ein bisschen weiter rumgebastelt und auch schon einige Bilder eingebaut, die ich auch später im fertigen Design haben möchte.

So siehts aus:



Die Pfeile zeigen halt noch Sachen, mit denen ich nicht zufrieden bin :hmpf: und die noch verändert werden sollen.

In der linken Navigationsleiste soll es einen Abschluss geben wie in der rechten Leiste, aber irgendwie ist das nur so verkrüppelt neben dem Bild "Forum".

Also hier ist der Code

Code:
<!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>pWnD Page</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="Seite">
<div id="Header"></div>
	<ul id="Navigation_links">
  	<li id="Navigation_top"></li>
    <li id="Calendar"><a href=""></a></li>
    <li id="News"><a href=""></a></li>
    <li id="Forum"><a href=""></a></li><br />
    <li id="Navigation_bottom_links"></li>
  </ul>
	<ul id="Navigation_rechts">
  	<li id="Navigation_top"></li>
    <li id="Squads"><a href=""></a></li>
    <li id ="Polls"><a href=""></a></li>
    <li id="Contact"><a href=""></a></li><br />
    <li id="Navigation_bottom_rechts"></li>
  </ul>
  <div id="Content">
  	<p id="Content_top"></p>
    <p>Text Text Text</p>
    <p id="Content_bottom"></p>
  </div>
 	


</div>
</body>
</html>

Code:
@charset "utf-8";
/* CSS Document */

body {

}

div#Seite {
	width: 1024px;
	height: 800px;
}

div#Header {
	background-image: url(../../eigenes%20Template/Header.jpg);
	width: 1024px;
	height: 200px;
	display: block;
	margin: 0;
}

li {
	list-style: none;
}

li#Navigation_top {
	background-image: url(../../eigenes%20Template/Entw%C3%BCrfe/Navigation_top.jpg);
	width: 220px;
	height: 50px;
	display: block;
	margin: 0 0 5px 0;
}

li#Navigation_bottom_links {
background-image: url(../../eigenes%20Template/Entw%C3%BCrfe/Navigation_bottom.jpg);
	width: 220px;
	height: 50px;
	display: block;
	margin: 50px 0 0 0;
}

li#Navigation_bottom_rechts {
background-image: url(../../eigenes%20Template/Entw%C3%BCrfe/Navigation_bottom.jpg);
	width: 220px;
	height: 50px;
	display: block;
	clear: left;
	margin: 550px 0 0 0;
}

/*Navigation_links Start*/

ul#Navigation_links {
	width: 220px;
	height: 600px;
	background-color: #464646;
	margin: 0 10px 0 0;
	padding: 0 0 5px 0;

li {
	list-style: none;
}

li#Calendar a {
	background-image:url(../../eigenes%20Template/Entw%C3%BCrfe/Buttons/Button_Calender.jpg);
	width: 60px;
	height: 60px;
	display: block;
	float: left;
	margin: 10px 10px 0 10px;
}

li#News a {
	background-image: url(../../eigenes%20Template/Entw%C3%BCrfe/Buttons/Button_News.jpg);
	width: 60px;
	height: 60px;
	display: block;
	float: left;
	margin: 10px 10px 0 0;
}

li#Forum a {
	background-image: url(../../eigenes%20Template/Entw%C3%BCrfe/Buttons/Button_Forum.jpg);
	width: 60px;
	height: 60px;
	display: block;
	float: left;
	margin: 10px 0 0 0;
}
/*Navigation_links Ende*/


/*Navigation_rechts Start*/

ul#Navigation_rechts {
	width: 220px;
	height: 600px;
	background-color: #464646;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	float: right;
}

li#Squads a {	
	background-image: url(../../eigenes%20Template/Entw%C3%BCrfe/Buttons/Button_Squads.jpg);
	width: 60px;
	height: 60px;
	display: block;
	float: left;
	margin: 10px 10px 0 10px;
}

li#Polls a {
	background-image: url(../../eigenes%20Template/Entw%C3%BCrfe/Buttons/Button_Polls.jpg);
	width: 60px;
	height: 60px;
	display: block;
	float: left;
	margin: 10px 10px 0 0;
}

li#Contact a {
	background-image: url(../../eigenes%20Template/Entw%C3%BCrfe/Buttons/Button_Contact.jpg);
	width: 60px;
	height: 60px;
	display: block;
	float: left;
	margin: 10px 0 0 0;
}

/*Navigation_rechts Ende*/

div#Content {
	float: left;
	width: 564px;
	height: 600px;
	margin: 0 0 0 20px;
}

p#Content_top {
	background-image: url(../../eigenes%20Template/Entw%C3%BCrfe/Content_top.jpg);
	width: 564px;
	height: 50px;
	display: block;
	margin: 0;
}

p#Content_bottom {
	background-image: url(../../eigenes%20Template/Entw%C3%BCrfe/Content_bottom.jpg);
	width: 564px;
	height: 50px;
	margin: 500px 0 0 0;
}

Im Dreamweaver Browser sieht das so wie im Bild aus, aber bei Opera ist das wieder total verschoben - warum ist das so? :schmoll:
 

VirusX

Aktives Mitglied

AW: Homepage: Button als Hintergrund wird abgeschnitten

So ich hab mit viel probieren das Problem selber gelöst.

Für alle, die es interessiert: Ich habe der rechten Tabelle mit CSS float: right; und dem Content float: left; gegeben und dann die Positionen angepasst.



Und jetzt gibts noch die Feinabstimmung
 

sokie

Mod | Web

AW: Homepage: Button als Hintergrund wird abgeschnitten

Dreifachposts und Bilder vermitteln nur wenig Eindruck von der Sache. Uploaden und einen Link posten (möglichst noch mit der 'EDIT' Funktion - dafür ist die da!) sagt mehr als seitenweise Quellcode
 
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
175.156
Beiträge
2.581.859
Mitglieder
67.222
Neuestes Mitglied
Gregor
Oben