Problem bei verkleinertem Fenster

nuni83 · 24. Juli 2008

Hallo Zusammen

Ich bin an einer Website für einen Verein dran.

Und da habe ich auch schon das erste Problem.

Und zwar habe ich eine Steuerung (Linkbereich), die besteht aus 10 nebeneinander stehenden Bilder. Jetzt wenn ich im Browser das Fenster verkleinere, wandern die plötzlich untereinander.

So sollte es aussehen
http://www.bilder-hochladen.net/files/7jhi-1-jpg.html

Und so eben nicht wenn das Fenster verkleinert ist
http://www.bilder-hochladen.net/files/7jhi-2-jpg.html

Kann mir jemand sagen, was ich machen muss, damit die Links bei verkleinertem Fenster immer noch schön in einer Reihe sind?

Freundliche Grüsse

Peter Gedamke · 24. Juli 2008

nun ja, ist doch aber logisch, oder?

Kannst du umgehen, indem du deinem Eingabgeblock (Box) eine feste Breite zuordnest, wodurch du bei der Erstellung bereits sehen kannst, ob und wie deine Anordnung nachher hinhaut - oder eben nicht,
oder
gebe dem Style dazu bei: overflow:scroll; - was allerdings nun gar kein gutes Bild macht, wenn der Betrachter 'gezwungen' wird jeweils einen horizontalen Scroll für seine Komplettansicht vornehmen zu müssen.

Aber mal zu deinen Musterseitenansichten... WER geht schon mit derartig minimiertem Fenster in's Net
- - - - -
richte dich mal daran aus, wie sind deine Seite noch ansehbar bei (ehemals Standardwerten) Bildschirmauflösungen von
1024*768
oder ganz alt bei
800*600px

nuni83 · 24. Juli 2008

leider kann ich deine sätze nicht ganz nach vollziehen. gibt es kein css code oder so wo man dies ändern kann?

ebenso ist noch ein anderes problem aufgetreten.

und zwar sollten die lücken zwischen den "links" (bildern) nicht sein
http://www.bilder-hochladen.net/files/7jhi-3-jpg.html

Peter Gedamke · 24. Juli 2008

was genau verstehst du an meiner Ausführung nicht?

Um den Abstand zu entfernen, musst du in deinem Tabelleintrag das Attribut
cellpadding=6 eben auf cellpadding=0 setzen

Peter Gedamke · 24. Juli 2008

um das vielleicht besser nachvollziehen zu können,
gebe mal folgendes in deinem Editor ein, und lasse es dir dann im Browser anzeigen - dann wirst du sehen, was ich meinte

Code

<div style="width:250px;overflow:scroll;" align="left">
<table style="" border="1" width="500">
<tr>
<td width="200">ein</td>
<td width="200">zwei</td>
<td width="200">drei</td>
<td width="200">vier</td>
<td width="200">fünf</td>
<td width="200">sechs</td>
<td width="200">sieben</td>
<td width="200">acht</td>
<td width="200">neun</td>
<td width="200">zehn</td>
</tr>
</table>
</div>

Alles anzeigen

nuni83 · 24. Juli 2008

kann dir sonst mal den quelltext vom css und vom html schicken. dann findest du sicher den fehler von mir, den ich leider nicht sehe

nochmals meine zwei probleme:
1. die spalte zwischen den bildern entfernen, dass die bilder schön bündig sind.
2. bei verkleinerung des browser fenser die links immernoch nebeneinander und nicht das sie dann untereinander sind.

Quelltext css:

#banner_oben {
background:url(images/banner_oben.jpg) no-repeat top;
margin: 0 auto;
height:25px;
width:900px;
}

#banner {
background:url(images/banner.jpg) no-repeat top;
margin: 0 auto;
height:150px;
width:900px;
}

#links {
text-align:center;
margin: 0 auto;
height:25px;
}

Quelltext html:

<!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>

</head>

</body>
</html>

wäre toll wenn du mir helfen könntest.

freundliche grüsse und schon einmal besten dank

Peter Gedamke · 24. Juli 2008

mal ganz rasch auf einen Blick...

<body topmargin="0" leftmargin="0" marginheight="0" marginwidth="0">
die margin-Attribute gehören in's Style-Sheet! Nicht in den Body-Tag

Mehrfach hast du zugewiesen: id="links"
geht nicht, da eine bestimmte "id" nur einmalig auf jeder Seite vergeben werden kann.

Dann erstelle halt eine class dafür

WO hast du nun deine CSS überhaupt zu stehen?
Ich kann da weder im Head-Bereich was sehen, noch einen Verweis zur evtl. externen Datei...

charset=utf-8" halte ich für unsere Breiten als etwas unüblich, und würde das durch
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
abändern.

Bei Nutzung von CSS muss auch folgende Meta-Eingabe vorliegen:
<meta http-equiv="Content-Style-Type" content="text/css">

Das nur kurz am Rande

nuni83 · 24. Juli 2008

ok hat geklappt, habe es jetzt in tabellen eingebaut.

jetzt möchte ich noch ein onmouseover machen. habe da schon so einiges versucht aber hat nicht geklapt

HTML

<!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">
<meta http-equiv="Content-Style-Type" content="text/css"> 




<title>hcd-uri</title>




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




</head>




<body>




<div id="banner_oben">
&nbsp;
</div>




<div id="banner">
&nbsp;
</div>




<table align="center" cellspacing="0" cellpadding=0 width="900" height="25" border="0">
  <tr>
    <td width="205" background="images/links.jpg">
    <td><a href="index.htm"><img src="images/home1.jpg" width="59" height="25" border="0"></a></td>
    <td><a href="archiv.htm"><img src="images/archiv1.jpg" width="68" height="25" border="0"></a></td>
    <td><a href="clubdaten.htm"><img src="images/clubdaten1.jpg" width="95" height="25" border="0"></a></td>
    <td><a href="fanartikel.htm"><img src="images/fanartikel1.jpg" width="93" height="25" border="0"></a></td>
    <td><a href="vorstand.htm"><img src="images/vorstand1.jpg" width="86" height="25" border="0"></a></td>
    <td><a href="events.htm"><img src="images/events1.jpg" width="71" height="25" border="0"></a></td>
    <td><a href="fotos.htm"><img src="images/fotos1.jpg" name="links" width="62" height="25" border="0"></a></td>
    <td><a href="links.htm"><img src="images/links1.jpg" width="61" height="25" border="0"></a></td>
    <td><a href="gaestebuch.htm"><img src="images/gaestebuch1.jpg" width="100" height="25" border="0"></a></td>
  </tr>
</table>




</body>
</html>

Alles anzeigen

möchte dem

Code

<td><a href="index.htm"><img src="images/home1.jpg" width="59" height="25" border="0"></a></td>

einen onmouseover geben mit dem bild home2.jpg. weiter möchte ich noch das bild home2.jpg als aktieves bild haben, wenn mann sich auf dieser seite befindet. wäre wirklich sehr sehr nett wenn du mir helfen könntest.

hättest du da die richtige lösung auch noch bereit? wäre toll.

Peter Gedamke · 25. Juli 2008

ein onMouseover-Effekt für den hover - damit der BG wechselt - sieht bei mir zum Beispiel so aus:

Code

<th onmouseover="this.style.background='url(images/_backTB2.jpg)'" onmouseout="this.style.background='url(images/_backTB1.jpg)'" style="border-bottom:0px double #AFAFAF;border-top:0px double #AFAFAF;"><a href="mcusers-inhalt.html">Inhalt</a></th>

Dazu muss der Tabellenzelle allerdings als Grundvorgabe - nach meinem Beispiel mal - bereits der Background images/_backTB1.jpg auch schon mal vorgegeben sein... also immer der Wert identisch sein muss, den du im Script als "onMouseout" benennst

Statt mit "background(-image)" kannst du das natürlich auch mit "background(-color)" durchführen

nuni83 · 25. Juli 2008

hmm bei mir klappt das nicht irgendetwas mache ich falsch :cry:

könntest du mir nicht gerade den code von mir bearbeiten, damit das erste bild "home" ein onmouseover ist und auch wenn mann auf diesem link ist, dass dann das bild auch active ist (also wie beim onmouseover aussieht)

wäre super nett. dann könnte ich an meinem projekt entlich weiter arbeiten.

freundliche grüsse

Peter Gedamke · 25. Juli 2008

versuche es mal hiermit

Code

<style type="text/css">
<!--
.hoverbild a {background: url(bild1.gif) no-repeat;display:block; width:?px;}
.hoverbild img {display:block; width:?px; height:?px; border:0;}
.hoverbild a:hover img {visibility: hidden;}




/* Nur Internet Explorer 5.5 und 6 */
.hoverbild a:hover {border:0;}
* html .hoverbild a {margin-right:1px;}




/* Nur Internet Explorer 5.01 */
* html .hoverbild a:hover {width:201px; margin-right:0;}
-->
</style>

Alles anzeigen

musst nur die entsprechenden Maße für die 2 Images eingeben

nuni83 · 25. Juli 2008

funzt bei mir immer noch nicht. irgend etwas mache ich noch falsch.

könntest du mir nicht gerade bei meinem quelltext eingeben? damit ich es nur noch kopieren müsste und es dann klappt. bei html und bei css.

wäre toll

Peter Gedamke · 25. Juli 2008

was ich da geschrieben habe ist die CSS-Vorgabe.

Die Übernahme davon gibst du zum Beispiel so ein:
<div class="hoverbild">
<a href="#"><img src="bild1.jpg" width="?" height="?" border="0" alt="hoverbild"></a>
</div>

nuni83 · 25. Juli 2008

ok dann sieht bei mir der quelltext nun so aus:

HTML

<!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>
</head>




<style type="text/css"> 
<!-- 
.hoverbild a {background: url(images/home2.jpg); no-repeat;display:block; width:59px;} 
.hoverbild img {display:block; width:59px; height:25px; border:0;} 
.hoverbild a:hover img {visibility: hidden;} 




/* Nur Internet Explorer 5.5 und 6 */ 
.hoverbild a:hover {border:0;} 
* html .hoverbild a {margin-right:1px;} 




/* Nur Internet Explorer 5.01 */ 
* html .hoverbild a:hover {width:59px; margin-right:0;} 
--> 
</style>




<body>




<div class="hoverbild"><img src="images/home1.jpg" /></div>




</body>
</html>

Alles anzeigen

aber funzt leider immer noch nicht

Peter Gedamke · 25. Juli 2008

hat sich jetzt wohl mit meiner Korrektur überschnitten...

beachte die Eingabe <a href="#"> </a> um die Grafik herum

nuni83 · 25. Juli 2008

Hervorragend

Vielen herzlichen Dank, der onmouseover Evekt klappt jetzt. Nur noch etwas sollte ich haben und zwar den active Evekt, also wenn der Link aktiv ist das es dann so aussieht wie beim onmouseover.

Kriegst du das auch noch hin?

Wäre sensationell

Nochmals vielen Dank

Peter Gedamke · 25. Juli 2008

hast du schon hinbekommen
nun jut -
ich hatte nämlich gerade eben eine Musterseite für dich hochgeladen:

http://www.mcusers.de/pool/hoverbild.html
- - - - -
für was willste da noch für 'nen active-Effekt?

Soll das nun also nicht nur einen Grafik-Hover-Effekt darstellen, sondern auch noch einen Link... dazu ist mir dann nüscht weiter bekannt - ausser, dass dazu dann JavaScript angesagt wäre.
Wenn du ein gutes Grafikprogramm hast, lassen sich solche Sachen teilweise auch damit erstellen.

nuni83 · 25. Juli 2008

ich meine so wie zum beispiel hier

http://www.fcb.ch/

wenn mann auf aktuell, saison, teams, verein, fans oder medien klickt dann bleibt dies danacht gelb.

das möchte ich auch.

weist du was ich meine ?

Peter Gedamke · 25. Juli 2008

oh Mann -
das ist doch nun wieder ganz was anderes :wink:

TIPP:
:arrow: öffne diese Seite, und schaue dir dort den Quelltext an

nuni83 · 25. Juli 2008

hmm schaade

finde beim quelltext nichts was mich weiter bringen könnte

ja dann lasse ich halt dies sein :cry:

Problem bei verkleinertem Fenster

Jetzt mitmachen!

Teilen