CSS-Navigation ohne Rahmen um Menüeinträge

[Gast] Foren Programme Web/Internet Adobe Dreamweaver CSS-Navigation ohne Rahmen um Menüeinträge

Web/Internet - Webdesign, eForms

Themen

Beiträge

Moderatoren

Letzter Beitrag

Adobe Dreamweaver

1544

6490

loethelm

3. Okt 2023, 08:40

DonnaStella123

---c---

Beiträge gesamt: 18

14. Mai 2007, 13:54
Beitrag # 1 von 14
Bewertung:
(7724 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

hallo

ich habe mit CSS einen Stil erstellt, den meine Menüpunkte erhalten sollen.
zwischen den einzelnen Menüpunkten fügt Dreamweaver einen Rand von 19px ein, obwohl ich das nicht möchte und auch nicht eingestellt habe.
siehe hier:
http://zieresobersinn.de/Unbenannt-5.png
und so in etwa soll es aussehen:
http://zieresobersinn.de/Unbenannt-7.png

gibt es eine Möglichkeit diesen Rand zwischen den einzelnen Menüpunkten auf 0px zu stellen???

danke schonmal im voraus.

(Dieser Beitrag wurde von ---c--- am 14. Mai 2007, 14:00 geändert)

CSS-Navigation ohne Rahmen um Menüeinträge

loethelm

Beiträge gesamt: 6029

14. Mai 2007, 14:06
Beitrag # 2 von 14
Beitrag ID: #291411
Bewertung:
(7720 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Hallo und welcome auf hds,

dürfen wir die html und die css-Datei mal sehen?
Meine Glaskugel ist gerade kaputt ;-)

als Antwort auf: [#291405]

CSS-Navigation ohne Rahmen um Menüeinträge

---c---

Beiträge gesamt: 18

14. Mai 2007, 14:32
Beitrag # 3 von 14
Beitrag ID: #291416
Bewertung:
(7713 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

sorry, hab ich vergessen.
hier sind sie:
HTML

Zitat <!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=iso-8859-1" />
<title>Home</title>
<style type="text/css">

</style>
<link href="css/navi.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
</head>

<body>
<div id="Layer1"></div>
<p><img src="logo_mit_navi.png" width="227" height="184" alt="Logo" /></p>
<p class="navi"><a href="Home.html">Home</a></p>
<p class="navi"><a href="Mitglieder.html">Mitglieder</a></p>
<p class="navi"><a href="bilder.html">Bildergallerie</a></p>
<p class="navi"><a href="gaestebuch.html">Gästebuch</a></p>
<p class="navi">Kontakt</p>
<p><img src="naviunten.png" width="227" height="62" /></p>
</body>
</html>

und CSS:

Zitat .navi {
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
font-weight: bold;
text-transform: capitalize;
background-image: url(../navicss.png);
background-repeat: no-repeat;
color: #FFFFFF;
text-decoration: none;
background-position: left;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
position: relative;
width: 227px;
height: 32px;
text-align: center;
font-style: normal;
line-height: normal;
font-variant: normal;
white-space: normal;
}
a:link {
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
font-weight: bold;
text-transform: capitalize;
color: #FFFFFF;
background-image: url(../navicss.png);
background-repeat: no-repeat;
text-indent: 50px;
text-decoration: none;
}

a:visited {

font-family: Arial, Helvetica, sans-serif;
font-size: medium;
font-weight: bold;
text-transform: capitalize;
color: #FFFFFF;
background-image: url(../navicss.png);
background-repeat: no-repeat;
text-indent: 50px;
text-decoration: none;
}
a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
font-weight: bold;
color: #5AE4BF;
text-decoration: none;
text-indent: 50px;
background-repeat: no-repeat;
}

als Antwort auf: [#291411]

CSS-Navigation ohne Rahmen um Menüeinträge

loethelm

Beiträge gesamt: 6029

14. Mai 2007, 15:03
Beitrag # 4 von 14
Beitrag ID: #291427
Bewertung:
(7709 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Hallo,

Code

#layer1 p {margin: 0; padding 0;}

könnte helfen.
Und: Ich würde die Navi als Liste anlegen und nicht in p-tags packen.

als Antwort auf: [#291416]

CSS-Navigation ohne Rahmen um Menüeinträge

---c---

Beiträge gesamt: 18

14. Mai 2007, 15:27
Beitrag # 5 von 14
Beitrag ID: #291436
Bewertung:
(7707 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

danke, es funktioniert.
es lag an den p-tags....

nun habe ich aber folgendes problem:
im firefox siehts so aus:
http://zieresobersinn.de/Unbenannt-2.png

im inertnet-explorer allerdings so:
http://zieresobersinn.de/Unbenannt-4.png

woran liegts???

HTML

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=iso-8859-1" /> 
<title>Home</title> 
<style type="text/css"> 
<!-- 
--> 
</style> 
<link href="css/navi.css" rel="stylesheet" type="text/css" /> 
<style type="text/css"> 
<!-- 
#Layer1 { 
	position:absolute; 
	left:239px; 
	top:162px; 
	width:727px; 
	height:322px; 
	z-index:1; 
} 
--> 
</style> 
</head> 
 
<body> 
 
<img src="logo_mit_navi.png" width="227" height="184" alt="Logo" /> 
<p class="navi">&nbsp; </p> 
<li class="navi"><a href="Home.html">Home</a></li> 
  <li class="navi"><a href="Mitglieder.html">Mitglieder</a></li> 
  <li class="navi"><a href="bilder.html">Bilder</a></li> 
  <li class="navi"><a href="gaestebuch.html">G&auml;stebuch</a></li> 
  <li class="navi"><a href="Kontakt.html">Kontakt</a></li> 
  <img src="naviunten.png" width="227" height="62" /> 
</body> 
</html>

CSS:

Code

.navi { 
	font-family: Arial, Helvetica, sans-serif; 
	font-size: medium; 
	font-weight: bold; 
	text-transform: capitalize; 
	background-image: url(../navicss.png); 
	background-repeat: no-repeat; 
	color: #FFFFFF; 
	text-decoration: none; 
	background-position: left; 
	border-top-width: thin; 
	border-right-width: thin; 
	border-bottom-width: thin; 
	border-left-width: thin; 
	border-top-style: none; 
	border-right-style: none; 
	border-bottom-style: none; 
	border-left-style: none; 
	position: relative; 
	width: 227px; 
	height: 32px; 
	text-align: center; 
	font-style: normal; 
	line-height: normal; 
	font-variant: normal; 
	white-space: normal; 
	margin: 0; 
	padding: 0; 
	margin-top: 0px; 
	margin-right: 0px; 
	margin-bottom: 0px; 
	margin-left: 0px; 
	padding-top: 0px; 
	padding-right: 0px; 
	padding-bottom: 0px; 
	padding-left: 0px; 
} 
a:link { 
	font-family: Arial, Helvetica, sans-serif; 
	font-size: medium; 
	font-weight: bold; 
	text-transform: capitalize; 
	color: #FFFFFF; 
	background-image: url(../navicss.png); 
	background-repeat: no-repeat; 
	text-indent: 50px; 
	text-decoration: none; 
	font-style: normal; 
	line-height: normal; 
	font-variant: normal; 
} 
 
a:visited { 
 
	font-family: Arial, Helvetica, sans-serif; 
	font-size: medium; 
	font-weight: bold; 
	text-transform: capitalize; 
	color: #FFFFFF; 
	background-image: url(../navicss.png); 
	background-repeat: no-repeat; 
	text-indent: 50px; 
	text-decoration: none; 
} 
a:hover { 
	font-family: Arial, Helvetica, sans-serif; 
	font-size: medium; 
	font-weight: bold; 
	color: #5AE4BF; 
	text-decoration: none; 
	text-indent: 50px; 
	background-repeat: no-repeat; 
}

als Antwort auf: [#291427]

CSS-Navigation ohne Rahmen um Menüeinträge

loethelm

Beiträge gesamt: 6029

14. Mai 2007, 16:03
Beitrag # 6 von 14
Beitrag ID: #291441
Bewertung:
(7700 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Hallo,

das liegt daran, dass der IE CSS falsch interpretiert.
http://www.positioniseverything.net/ie-primer.html

als Antwort auf: [#291436]

CSS-Navigation ohne Rahmen um Menüeinträge

---c---

Beiträge gesamt: 18

15. Mai 2007, 07:45
Beitrag # 7 von 14
Beitrag ID: #291551
Bewertung:
(7682 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

und was kann man dagegen tun???
oder soll ichs bleiben lassen und wieder mit tabellen alles machen???

als Antwort auf: [#291441]

CSS-Navigation ohne Rahmen um Menüeinträge

loethelm

Beiträge gesamt: 6029

15. Mai 2007, 09:10
Beitrag # 8 von 14
Beitrag ID: #291567
Bewertung:
(7677 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Hallo,

Antwort auf: und was kann man dagegen tun???

ein CSS extra für den IE machen.
Das hier ist meiner Meinung nach das beste Buch dafür.

als Antwort auf: [#291551]

CSS-Navigation ohne Rahmen um Menüeinträge

---c---

Beiträge gesamt: 18

15. Mai 2007, 09:49
Beitrag # 9 von 14
Beitrag ID: #291586
Bewertung:
(7675 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

extra wegen einer kleinen seite ein buch kaufen und durcharbeiten. nur weil der inetexploder das nicht kann, finde ich etwas zu viel...

ich werde es dann wohl wieder mit tabellen machen....

dann möge mir aber die frage erlaubt sein, warum dreamweaver alles für firefox optimiert und nicht für inetexplorer.

als Antwort auf: [#291567]
(Dieser Beitrag wurde von ---c--- am 15. Mai 2007, 09:49 geändert)

CSS-Navigation ohne Rahmen um Menüeinträge

SabineP

Beiträge gesamt: 7586

15. Mai 2007, 10:07
Beitrag # 10 von 14
Beitrag ID: #291592
Bewertung:
(7671 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Wie Loethelm schon geschrieben hat:

Es liegt daran, dass der IE CSS falsch interpretiert.

Dreamweaver optimiert sicher keinen Code für einen bestimmten Browser.

als Antwort auf: [#291586]
(Dieser Beitrag wurde von SabineP am 15. Mai 2007, 10:21 geändert)

CSS-Navigation ohne Rahmen um Menüeinträge

loethelm

Beiträge gesamt: 6029

15. Mai 2007, 10:40
Beitrag # 11 von 14
Beitrag ID: #291605
Bewertung:
(7663 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Hallo,

wie Sabine sagt, DW optimiert nicht für Firefox. DW erstellt relativ sauberen standardkonformen Code, der von Firefox korrekt verarbeitet wird vom IE aber falsch.

als Antwort auf: [#291592]

CSS-Navigation ohne Rahmen um Menüeinträge

---c---

Beiträge gesamt: 18

15. Mai 2007, 17:20
Beitrag # 12 von 14
Beitrag ID: #291694
Bewertung:
(7648 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

der internetexplorer ist also nur zu blöd den code richtig zu interpretieren...
saubere arbeit von microsoft...

naja ist ansichtssache.

muss ich dann extra fehler ins CSS einbauen, dass diese fehler, dann die flasche interpretation ausgleichen, dass es in inernetexplorer geht???

als Antwort auf: [#291605]

CSS-Navigation ohne Rahmen um Menüeinträge

loethelm

Beiträge gesamt: 6029

17. Mai 2007, 00:15
Beitrag # 13 von 14
Beitrag ID: #291968
Bewertung:
(7627 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Hallo,

du musst keine Fehler einbauen, du musst dem IE nur rechnen beibringen ;-)
Daher ja meine Buchempfehlung.
Oder: http://www.positioniseverything.com

als Antwort auf: [#291694]