hideFocus=true auf nächster Seite ausführen

mitdreissiger · 26.03.2008, 10:35

hideFocus=true auf nächster Seite ausführen

ich habe eine Seite in der die Übersicht aller Werkstätten aufgeführt sind.
Die einzelnen Arbeitsbereiche sind klickbar. Sie führen
mit einem Anker zu der nächsten Werkstattseite. Dort
habe ich mit css und this.hideFocus=true die einzelnen
Arbeitsfelder sichtbar und unsichtbar gemacht.
Jetzt möchte ich, das ich von der Überischtsseite mit
einem Klick zur Werkstattseite komme und natürlich
soll der Arbeitsbereich auch gleich sichtbar (aufgeklappt
werden). Ich such schon nen ganzen Tag nach dieser Möglichkeit.
Hier der Link zur Übersichtsseite:

http://www.g-p-z.de/wbo/uebersicht_01.html

und der Code

HTML-Code:

<a href="wbo_bruder.html#flasche" target="_self" ><img src="gif/punkt.gif" width="20" height="20" border="0" /></a>

HTML-Code:

]<a class="hid" href="#more" onclick="this.hideFocus=true" onblur="this.hideFocus=false"><span> <img src="gif/flaschen.gif" width="70" height="61" /></span> <em><br />
  <img src="gif/flaschen.gif" width="40" height="27" border="0" />
 <ul>
  <li><strong>Lebensmittelabf&uuml;llung</strong><br />

In separaten Food Bereichen in Ravensburg oder Wangen f&uuml;llen wir mit Halbautomaten und/oder manuell trockene und fl&uuml;ssige Lebensmittel in T&uuml;ten, Beutel, Folien, Bechern und Flaschen ab.<br />
  Ebenso erledigen wir f&uuml;r Sie die vor-und nachgelagerten T&auml;tigkeiten wie mischen, etikettieren und kommissionieren.</li>   
</ul><a name="flasche" id="flasche"></a>
  </em></a></p>

css code

HTML-Code:

.holder {
	width:570px;
	font-size: 1em;
	background-color: #E6D7BE;
	padding: 2px;
	border: 1px solid #94212D;
}
.holder h2 {
	text-align:left;
	font-size: 1.0em;
	color: #94212D;
	font-weight: bold;
}

.holder img, a img  {
	border: 1 solid #94212D;
	font-size: 1em;
	font-weight: normal;
}


a.hid ul li {
	list-style-position: outside;
	list-style-type: none;
	padding-left: 50px;
	font-size: 1em;
	font-weight: normal;
}
a.hid em {display:none;}
a.hid:hover {
	text-decoration:none;
	color: #94212D;
}
a.hid:active, a.hid:focus {
}
a.hid:active span, a.hid:focus span {
	display:none;
	color: #94212D;
}
a.hid:active em, a.hid:focus em {
	display:block;
	width:100%;
	font-style:normal;
	cursor:default;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
	background-color: #E6D7BE;
}

Vielen Dank für Eure Hilfe

mitdreissiger

Boris · 26.03.2008, 12:58

Vergib der anderen Seite eine ID über body (z.b. <body id="andereseite">) und setz dann im CSS einen entsprechende Angabe rein, z.B.

body#andereseite .wasauchimmer
{
display: block;
}

mitdreissiger · 26.03.2008, 14:44

Zitat:

Zitat von Boris

Vergib der anderen Seite eine ID über body (z.b. <body id="andereseite">) und setz dann im CSS einen entsprechende Angabe rein, z.B.

body#andereseite .wasauchimmer
{
display: block;
}

Hallo,
Danke erstmal für Deine Antwort.
Leider gehts nicht.
Wo genau in der Seite soll ich die ID vergeben? Im body selbst?
Hast Du bemerkt das die Links und Anker auf den roten Punkten sitzen?

Danke für Dein Bemühen.

BG mitdreissiger

Boris · 26.03.2008, 16:46

Ja, auf body. Was was bedeutet "leider gehts nicht" ... kannst du uns deinen Versuch zeigen?

Was für rote Punkte?!?

mitdreissiger · 26.03.2008, 18:56

Hallo,

hier der link:

http://www.g-p-z.de/wbo/uebersicht_01.html

BG Marcus

mitdreissiger · 26.03.2008, 18:59

Sorry fast vergessen!
Hier die css Datei

* {
margin: 0;
padding: 0;
}

html {
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 75%;
color: #94212D;
background-color: #94212D;
}

body#bruder .flasche
{
display: block;
}
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.0em;
color: #96222F;
}

h1 {
color: #94212d;
font-family: Arial, Helvetica, sans-serif;
font-size: 1.6em;
font-weight: bold;
line-height: 1.3em;
font-style: normal;
}
h2 {
font-size: 1.8em;
color: #FFFFFF;
font-variant: small-caps;
vertical-align: middle;

}
img, a img {
border: 0;
}

a {
color: #FFFFFF;
font-size: 1em;
text-decoration: none;
font-weight: bold;

}
a:visited {
color: #FFFFFF;

font-size: 1.0em;
text-decoration: none;
}

a:hover {
color: #0F0162;

font-size: 1em;
text-decoration: none;
}

a:active {

color: D97F7F;
font-size: 1em;
text-decoration: none;
}
.break {
word-break: break all;
}
#nachoben {
color: #94212D;
text-align: right;

}
#nachoben a {
color: #94212D;

}
#nachoben a:hover{
color: #574D92;

}

/* Basisdefinitionen */

#alles {
width: 1000px;
color: #fff;
background-color: #94212D;
margin-right: auto;
margin-left: auto;
height: auto;
}

#header {
color: #fff;
width: 1000px;
}
#logo {
color: #fff;
background-image: url(../jpeg/logo_wbo.jpg);
background-repeat: no-repeat;
height: 150px;
background-position: 8px;
}
#mainnavi {
background-color: #668;
height: 15px;
font-size: 1.0em;
margin-left: 200px;
font-family: Arial, Helvetica, sans-serif;
background-position: center;
text-align: right;
}

#main {
margin-left: 200px;
background-color: #e6d7be;
margin-right: 200px;
padding: 5px;
font-size: 1.0em;
}

#main ul, li {
color: #94212D;
list-style-position: inside;
}

/* Basisdefinitionen */
#menu {
width: 180px;
list-style-type: none;
float: left;
font-size: 1.0em;
background-color: #95212E;
padding-left: 5px;
}

#menu a {
text-decoration: none;
display:block;
width: 180px;
margin-bottom: 10px;
padding-left: 5px;
}
#menu li {
list-style-position: outside;
}
#menu li a {
background-color:#94212d;
color: #fff;
display:block;
padding: 3px;
}
#menu li a:hover {
background-color:#BC7E81;
color: #FFFFFF;
display:block;
width: 183px;
}
#menu li a:active {
display:block;
width: 180px;
font-weight: bold;
color: #FFFFFF;
background-color:#666688;
padding-left: 5px;
}

#right {
float: right;
width: 200px;
color: #fff;
background-color: #94212D;
}
.holder {
width:570px;
font-size: 1em;
background-color: #E6D7BE;
padding: 2px;
border: 1px solid #94212D;
}
.holder h2 {
text-align:left;
font-size: 1.0em;
color: #94212D;
font-weight: bold;
}

.holder img, a img {
border: 1 solid #94212D;
font-size: 1em;
font-weight: normal;
}

a.hid ul li {
list-style-position: outside;
list-style-type: none;
padding-left: 50px;
font-size: 1em;
font-weight: normal;
}
a.hid em {display:none;}
a.hid:hover {
text-decoration:none;
color: #94212D;
}
a.hid:active, a.hid:focus {
}
a.hid:active span, a.hid:focus span {
display:none;
color: #94212D;
}
a.hid:active em, a.hid:focus em {
display:block;
width:100%;
font-style:normal;
cursor:default;
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
background-color: #E6D7BE;
}

.clear {clear:both;}

#footer {
color: #fff;
background-color: #668;
background-position: right;
text-align: right;
clear: both;
}
#platz {
width: 580px;
background-color: #00FF00;
visibility: hidden;
height: 200px;
}

.Stil1 {
color: #94212D;
font-size: 1.1em;}

.holder_leer {
width:800px;
background-color: #E6D7BE;
padding: 2px;
height: 200px;
visibility: hidden;
}

Boris · 26.03.2008, 19:06

Ähm, was soll body#bruder .flasche? Du musst das schon korrekterweise dem Element geben, das du mit display: none versteckst.

mitdreissiger · 26.03.2008, 20:23

Hallo,

musst schon entschuldigen, ich auch nur ein Mensch und
ein Anfänger der noch lernt, DESSHALB wende ich mich
an das Forum, warum sonst, wenn's ich wüßte müsste ich
nicht fragen.
Vielleicht kann Du mir die Lösung, ohne nur Stichpunkte zu
geben, geben?

BG mitdreissiger,

Danke nochmal für die Hilfe.