• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Seite verzerrt beim ersten Klicken, nochmaliges Klicken zeigt dann sauber an

gualicho

Neues Mitglied
Liebes Forum,

ich erstelle derzeit eine Homepage für eine Konferenz. Allerdings hat sich ein eigenartiger Effekt eingestellt, dass oft (nicht immer) beim erstmaligen Klicken auf einen Menüpunkt in der rechten Navigation die Seite verzerrt angezeigt wird. Ein weiterer Klick darauf zeigt die Seite dann wie gedacht an:

verzerrt.jpgnormal.jpg

Habt ihr dafür eine Erklärung?
Vielen Dank schonmal.
 
Hi Dagunn,
alles klar, here we go:

CSS-File:

/* GLOBAL RESET ------------------------------------------------------------------------------------- */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 5;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}

html {
height: 100%;
}

body {
line-height: 1;
font-size: 75%; /* So entspricht 1em 12px */
font-family: "Calibri", "Arial", sans-serif;
text-align: center;
}

ol, ul {list-style: none;}

blockquote, q {quotes: none;}

blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}

table {
border-collapse: collapse;
border-spacing: 50;
}




/* TYPOGRAFIE ------------------------------------------------------------------------------ */

h1 {
font-size: 30px;
text-align: center;
}

#header .subtitle {
font-size: 20px;
}

#header p {
font-size: 15px;
font-weight: bold;
}

.clear {
clear: both;
}

h2 {
font-size: 20px;
text-align: center;
}

h3 {
font-size: 18px;
text-align: left;
font-weight: bold
}


#nav li a {
font-size: 15px;
font-weight: bold;
}

#content {
font-size: 15px;
}

div {
text-align: left;
}

p {
margin-bottom: 10px;
}
#p1 {
margin-left: 10px;
}

#p2 { padding-left: 20px;
}
#p3 { padding-left: 50px;
}

li { padding-left: 5px;
}

.centered {
width: 460px;
text-align: center;
}

#sidebar{
font-size: 15px;
font-weight: bold;
color: white;
}

#footer {
font-size: 15px;
text-align: center;
}

/* LAYOUT -------------------------------------------------------------------------------------------- */

#wrapper {
width: 1280px;
overflow: hidden;
margin: 0 auto;
background-color: #0174DF;
}

#header {
text-align: center;
height: 123px;
top: 0px;
width: 100%;
}

#logo-conf {
overflow: hidden;
float: left;
width: 200px;
padding-left: 22px;
padding-top: 5px;
}

h1 {
text-align: center;
float: none;
}

#sitetitle {
text-align: center;
float: left;
width: 800px;
}

#unilogo {
overflow: hidden;
float: right;
width: 193px;
padding-right: 0px;
}

#navigator {
position:centered;
width:1280px;
height:21px;
z-index:1;
left: 128px;
top: 99px;
background-color: #0B3861;
layer-background-color: #0B3861;
border: 1px none #000000;
}

#nav {
width: 220px;
float: left;
padding: 5px 5px 5px 5px;
margin: 0;
background-color: #0174DF;
}

#nav a {
color: #0B3861; background-color: black;
}

#nav li a {
display: block;
height: 20px;
background-color: #BDBDBD;
margin: 5px;
text-decoration: none;
padding: 5px;
border: 1px solid black;
border-left-color: white; border-top-color: white;
}


#nav li:link {
color: #0B3861;
text-decoration:none;
}

#nav a:active {
Color: #0B3861;
text-decoration: none;
background-color: white;
display: block;
}
#nav li:hover {
display:block;
text-decoration:none;
border-top: 0 solid #BDBDBD; border-right: 0px solid #BDBDBD;
background-color: #0B3861;
}

#content {
width: 820px;
float: left;
background-color: #A9D0F5;
padding: 10px 10px 10px 10px;
}

#sidebar {
width: 185px;
float: right;
background-color: #0174DF;
margin: 5px;
text-decoration: none;
padding: 5px 5px 10px 10px;
}

#sidebar li a {
display: block;
height: 20px;
background-color: red;
margin: 5px;
text-decoration: none;
padding: 5px;
}

#footer {
clear: both;
margin: 0; padding: 0.1em;

}
 
... und dann noch die oben abgebildete Seite:

<!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" />
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />

<title>Biohydrology Conference 2013 - Bio meets Hydrology</title>

<meta name="description" content="Konferenzbeschreibung" />
<meta name="author" content="Universität Landau">
<meta name="keywords" content="Biohydrology, Konferenz, Conference, 2013, Universität Landau, Landau">
<meta http-equiv="content-language" content="en">
</head>

<body>

<div id="wrapper">
<div id="header">

<div id="logo-conf">
<img src="Logos/Water for Life.jpg" alt="Logo Conference" />
</div>

<br />

<div id="sitetitle">
<h1 style= color:white>Biohydrology Conference 2013</h1>
<br />
<h2 style= color:white>Bio meets Hydrology</h2> <br />
<p style= color:white>21st - 24th May, 2013 - Landau/Pfalz, Germany</p>
</div>

<div id="unilogo">
<img src="Logos/Uni_UWI_y2.jpg" alt="Logo Uni Landau" />
</div>


</div><!-- HEADER END -->



<div class="navigator" id="navigator"></div>


<ul id="nav">
<li><a href="index.html">Home</a></li>
<li><a href="programme.html">Programme</a></li>
<li><a href="sessions.html">Sessions</a></li>
<li><a href="keynotes.html">Keynotes</a></li>
<li><a href="location.html">Conference Location</a></li>
<li><a href="abstract-submission.html">Abstract Submission</a></li>
<li><a href="registration.html">Registration</a></li>
<li><a href="accommodation.html">Accommodation</a></li>
<li><a href="organization.html">Organization and Funding</a></li>
<li><a href="dates.html">Dates and Deadlines</a></li>
<li><a href="past.html">Past Conferences</a></li>
</ul><!-- NAV END -->


<div id="content">
<h2>REGISTRATION</h2>
<br />
<br />
<br />
<br /><h3>Conference fees:</h3><br /> <br /> <br /> <br />


<table width="100%" border="1" cellpadding="0" cellspacing="2">
<tr>
<td><p id="p3"><u><b>Early bird</b> (until 28th February 2013):</u></p><br /> </td>
<td><li>Regular participants: €180.-</li><br />
<li>PhD Students: €140.-</li> <br /> <br /> </td>
</tr>

<tr>
<td><p id="p3"><u><b>Standard</b> (1st March - 12th May 2013):</u></p><br /> </td>
<td><li>Regular participants: €200.-</li><br />
<li>PhD Students: €180.-</li> <br /> <br /> </td>
</tr>

<tr>
<td><p id="p3"><u><b>Late</b> (after 12th May 2013):</u></p><br /> </td>
<td><li>Regular participants: €250.-</li><br />
<li>PhD Students: €250.-</li> <br /> <br /> </td>
</tr>
</table>
<br />

<br />
<h2>- Online registration opens 1st October 2012 -</h2>
<br />
<br />
The conference fee includes: Access to all conference sessions; conference abstract booklet; welcome reception on May 20th; lunches and coffee breaks during the conference.
<br /> <br /> <br />

<b>The cancellation policy for the conference is: </b><br /> <br /> <br />

- Full refund before 28th February 2013 <br />
- 75% refund for cancellations in writing before 8th April 2013<br />
- 50% refund for cancellations in writing before 13th May 2013<br />
- No refund will be made after 13th May 2013<br /> <br /> <br />

Cancellation of registration must be made in writing to <i>[email protected]</i>, which will be confirmed by the Conference Secretariat.<br /> <br />
All refunds will be paid after the conclusion of the Conference. As alternative to cancellation please consider a transfer of your registration to another person.
<br />
<br />




</div><!-- CONTENT END -->

<div id="sidebar">
<p><u>News:</u></p>
<br />
<br />
<br />
<br />
<br />
<p><u>Contact:</u>
<br /> <br />
<a href="mailto:[email protected]">mail[at]biohydrology2013.de</a></p>
</div><!-- SIDEBAR END -->


<div id="footer">

<div id="fussleiste">
<img src="images/fussleiste3.jpg" alt="Uni Landau" />
</div>

</div><!-- FOOTER END -->

<br class="clear" />
</div><!-- WRAPPER END -->
</body>
</hmtl>
 
1. Bitte benutz doch mal die HTML/Code tags dieses Forums
2. Korrigier zuerst die Fehler, die dein HTML hat z.b.:
Der HTML Validator und Dem Css Validator

3. mhh von deiner reinen beschreibung her wüsste ich jetzt direkt nichts, gucke mir den code mal an wobei das (wenn es nicht live ist) natürlich nicht leicht navollziehbar ist, da ich "eigentlich" keinen pagewechsel machen kann...(hast du vl nen livelink ?)
- es kann ja sein das der cache deines Browsers das verändert, leer ihn doch mal und prüf dann nochmal die seit ?!

Lg dagunn

EDIT: okay, googlne hilft bei der suche einer liveseite....

EDIT 2: soo also bei mir wird die seite "vollkommen" korrekt (nach dem wohl richtigen bild oben) dargestellt....
wie oben schon geschrieben, guck doch vl ob du mal den cache vom browser leerst....
 
Zuletzt bearbeitet:
Hi Dagunn,

vielen Dank erstmal für deine Hilfe. Ich check gerade alle Seiten mit den beiden Validators (super Tipp!).

Am Cache kann es allerdings nicht liegen, den leere ich immer gleich. Vor allem scheint es beim erstmaligen Öffnen zu passieren, dass die Seite verspringt, übrigens auch bei meiner Chefin.

Ich versuche, die doch zahlreichen Hinweise des Validators auszumerzen (manche erschließen sich mir nicht wirklich), vllt. liegt es ja daran.
Ich bleibe am Ball.
Jedenfalls nochmal Danke, auch für die schnelle Hilfe!

gualicho
 
Hallo gualicho,

Habe mir mal erlaubt, zweck genauerer Inaugenscheinnahme die Logo-Grafiken herunterzuladen von der aktuellen HP, um dahinter zu kommen, was da so passiert mit dem Layout etc.

Im Übrigen: sporadisch beim Durchklicken sämtlicher Menupunkte kann es passieren, dass das 'suabere' Layout urplötzlich wieder zerschossen wird (siehe Anhang)!!

Naja,.... das Stylesheet ist ja m.E. etwas (sehr) verwirrend und schlägt dann auch entsprechende beim Seitenaufbau zu. Und da vermute ich so die diversen Fehler(chen)...
Frage: wer/oder was hat das (und den HTML-Text) so *** notiert?

Ich pick mal das eine oder andere heraus, was mir halt so aufgefallen ist (nur beispielhaft, um zu zeigen, wo m.E. die Böcke drin sind):

Code:
/* GLOBAL RESET ------------------------------------------------------------------------------------- */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
...
}
kann vereinfacht so geschrieben werden:
Code:
*{
  margin: 0;
/*padding: 5px;  auf 0 setzen, paddings besser einzeln in entsprechenden Elementen setzen */
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}

Den kompletten Header habe ich mal um'gestylt' bzw die DIV's so angepasst, dass auch die Logos rechts und links optisch den gleichen TOP-Abstand haben:

HTML:
Code:
   <div id="header">

    <div id="logo-conf"></div>
    <div id="sitetitle">
      <h1>Biohydrology Conference 2013</h1>
      <br />
      <h2>Bio meets Hydrology</h2> <br />
      <p>21st - 24th May, 2013 - Landau/Pfalz, Germany</p>
    </div>
    <div id="unilogo"></div>
  </div><!-- HEADER END -->
Zugehöriges CSS:
Code:
#header {
height: 122px;
background-color:  #800000;
padding: 5px;
}

#sitetitle {
  float: left;
  width: 800px;
  text-align: center;
  color: #FFFFFF;
  margin-top: 15px;
}

#sitetitle h1 {
font-size: 30px;
}

#sitetitle h2 {
font-size: 20px;
}

#sitetitle p {
font-size: 15px;
font-weight: bold;
}

#logo-conf {
  float: left;
  width: 200px;
  padding-left: 22px;
  background: url(Water_for_Life.jpg) center no-repeat;
  height: 120px;
}

#unilogo {
    float: right;
    width: 200px;
    padding-right: 10px;
    background: url(Uni_UWI_y2.jpg) no-repeat center;
    height: 120px;
}



Code:
<div class="navigator" id="navigator"></div>
Die Klasse 'navigator' gibts nicht.

Um den weiteren Fluss der nachfolgenden Elemente bzw DIV's nicht zu stören, empfiehlt sich, den bisherigen Fluss (die floats) zu clearen:
Code:
#navigator {
  clear: both;     /* Fluss aus dem Header rausnehmen */
  height:21px;
/*width: 1280px;    ist überflüssig!*/
  background-color: #0B3861;
}
Eine expliziete Angabe von widht: 1280px ist überflüssig, wenn sich die DIV über die Gesamtbreite des Elternelements erstredcken soll.



Code:
<p id="p3">...
ist zwar syntaktisch richtig, aber NICHT wenn diese Angabe auf mehrere Paragraphen innerhalb einer Seite angewandt wird! Eine ID Darf auf der Seite nur einmal vorkommen!
Besser ist hier
Code:
<p class="p3">...
zu notieren (natürlich in der CSS entsprechend ändern)


Es gibt da noch ne Menge 'Baustellen' sowohl im CSS als auch im HTML... aber das ist mir momentan zu müssig, das alles durchzugehen.
Ich habe testhalber mal ein bissl 'gespielt' und das eine oder andere ein bissl angepasst; sicherlich ist da auch noch nit alles perfekt, soll aber zeigen, wie man es machen könnte ;) Siehe dazu meinen nachfolgenden Beitrag!



2012-07-20_versatz.jpg
Beachte besonders die linke Seite: Navipunkte grösserer Abstand und ganz links aussen erkennbar den 'list-style' der Listelemente!
 
Zuletzt bearbeitet:
Hier nun die Codes (passte im ersten Beitrag wg. max. Zeichenanzahl nit mehr rein :( )

Code:
/* GLOBAL RESET ------------------------------------------------------------------------------------- */

*{
margin: 0;
/*padding: 5px;  auf 0 setzen, paddings besser einzeln in entsprechenden Elementen setzen */
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}

html {
height: 100%;
}

body {
/* line-height: 1; */
font-family: "Calibri", "Arial", sans-serif;
text-align: center;
}

ol, ul {list-style: none;}

#wrapper {
width: 1280px;
margin: 0 auto;
background-color: #0174DF;
line-height: 1;
font-size: 75%; /* So entspricht 1em 12px */
font-family: "Calibri", "Arial", sans-serif;
text-align: center;
}

#header {
height: 122px;
background-color: #0B3861;
padding: 5px;
}

#sitetitle {
float: left;
width: 800px;
text-align: center;
color: #FFFFFF;
margin-top: 15px;
}

#sitetitle h1 {
font-size: 30px;
}

#sitetitle h2 {
font-size: 20px;
}

#sitetitle p {
font-size: 15px;
font-weight: bold;
}



#logo-conf {
/* overflow: hidden; */
float: left;
width: 200px;
padding-left: 22px;
/*padding-top: 5px;  kann entfallen, da feste Höhe und Image centriert wird!! */
background: url(Water_for_Life.jpg) center no-repeat;
height: 120px;
}

#unilogo {
    float: right;
    width: 200px;
    padding-right: 10px;
    background: url(Uni_UWI_y2.jpg) no-repeat center;
    height: 120px;
}

/*Navigation liks */
#navigator {
  clear: both;     /* Fluss aus dem Header rausnehmen */
  height:21px;
  background-color: #0B3861;
}

#nav {
  float: left;
  width: 220px;
  padding: 5px 5px 5px 5px;
  background-color: #0174DF;
  text-align: left;
}

#nav a {
  color: #0B3861;
  /* background-color: black; */
}

#nav li a {
  font-size: 15px;
  font-weight: bold;
  display: block;
  height: 20px;
  background-color: #BDBDBD;
  margin: 5px;
  padding: 5px;
  text-decoration: none;
  border: 1px solid black;
  border-left-color: white;
  border-top-color: white;
}


#nav li:link {
  color: #0B3861;
  text-decoration:none;
}

#nav li:hover {
  display:block;
  text-decoration:none;
  border-top: 0 solid #BDBDBD;
  border-right: 0px solid #BDBDBD;
  background-color: #0B3861;
}

#nav a:active {
  Color: #0B3861;
  text-decoration: none;
  background-color: white;
  display: block;
}


#content {
  width: 820px;
  float: left;
  background-color: #A9D0F5;
  padding: 10px 10px 10px 10px;
  text-align: left;
}

#content h2 {
  font-size: 20px;
  text-align: center;
}

#content h3 {
  font-size: 18px;
  text-align: left;
  font-weight: bold;
}

#content table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 2px;
  margin: 0px 15px;
}

#content table td p{
  font-size: 120%;
}

p {
margin-bottom: 10px;
}

.p1 {
margin-left: 10px;
}

.p2 { padding-left: 20px;
}
.p3 { padding-left: 50px;
}

li { padding-left: 5px;
}

.centered {
width: 460px;
text-align: center;
}

#sidebar {
  width: 185px;
  float: right;
  background-color: #0174DF;
  margin: 5px;
  text-decoration: none;
  padding: 5px 5px 10px 10px;
}

#sidebar li a {
  display: block;
  height: 20px;
  background-color: red;
  margin: 5px;
  text-decoration: none;
  padding: 5px;
}

#footer {
  clear: both;
  margin: 0; padding: 0.1em;

}

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" />
<link href="style01.css" rel="stylesheet" type="text/css" media="screen" />

<title>landau-test</title>

<meta name="description" content="Konferenzbeschreibung" />
<meta name="author" content="Universit&auml;t Landau"/>
<meta name="keywords" content="Biohydrology, Konferenz, Conference, 2013, Universit&auml;t Landau, Landau"/>
<meta http-equiv="content-language" content="en"/>
</head>

<body>

<div id="wrapper">
  <div id="header">

    <div id="logo-conf"></div>
    <div id="sitetitle">
      <h1>Biohydrology Conference 2013</h1>
      <br />
      <h2>Bio meets Hydrology</h2> <br />
      <p>21st - 24th May, 2013 - Landau/Pfalz, Germany</p>
    </div>
    <div id="unilogo"></div>
  </div><!-- HEADER END -->



  <div class="navigator" id="navigator"></div>


  <ul id="nav">
    <li><a href="index.html">Home</a></li>
    <li><a href="programme.html">Programme</a></li>
    <li><a href="sessions.html">Sessions</a></li>
    <li><a href="keynotes.html">Keynotes</a></li>
    <li><a href="location.html">Conference Location</a></li>
    <li><a href="abstract-submission.html">Abstract Submission</a></li>
    <li><a href="registration.html">Registration</a></li>
    <li><a href="accommodation.html">Accommodation</a></li>
    <li><a href="organization.html">Organization and Funding</a></li>
    <li><a href="dates.html">Dates and Deadlines</a></li>
    <li><a href="past.html">Past Conferences</a></li>
  </ul><!-- NAV END -->


  <div id="content">
    <h2>REGISTRATION</h2>
    <br />
    <br />
    <br />
    <br /><h3>Conference fees:</h3><br /> <br /> <br /> <br />


    <table>
      <tr>
        <td><p class="p3"><u><b>Early  bird</b> (until 28th February 2013):</u></p><br  /> </td>
        <td><li>Regular participants: &euro;180.-</li><br />
            <li>PhD Students: &euro;140.-</li> <br /> <br />
        </td>
      </tr>

      <tr>
        <td><p  class="p3"><u><b>Standard</b> (1st March - 12th May  2013):</u></p><br /> </td>
        <td><li>Regular participants: &euro;200.-</li><br />
            <li>PhD Students: &euro;180.-</li> <br /> <br />
        </td>
      </tr>

      <tr>
        <td><p class="p3"><u><b>Late</b>  (after 12th May 2013):</u></p><br /> </td>
        <td><li>Regular participants: &euro;250.-</li><br />
            <li>PhD Students: &euro;250.-</li> <br /> <br />
        </td>
      </tr>
    </table>
    <br />

    <br />
    <h2>- Online registration opens 1st October 2012 -</h2>
    <br />
    <br />
    <p>The conference fee includes: Access to all conference  sessions; conference abstract booklet; welcome reception on May 20th;  lunches and coffee breaks during the conference.</p>
    <br /> <br /> <br />

    <p><b>The cancellation policy for the conference is: </b><br /> <br /> <br />

    - Full refund before 28th February 2013 <br />
    - 75% refund for cancellations in writing before 8th April 2013<br />
    - 50% refund for cancellations in writing before 13th May 2013<br />
    - No refund will be made after 13th May 2013<br /> <br /> <br />

    Cancellation of registration must be made in writing to  <i>[email protected]</i>, which will be confirmed by  the Conference Secretariat.<br /> <br />
    All refunds will be paid after the conclusion of the Conference. As  alternative to cancellation please consider a transfer of your  registration to another person.</p>
    <br />
    <br />

  </div><!-- CONTENT END -->

  <div id="sidebar">
    <p><u>News:</u></p>
    <br />
    <br />
    <br />
    <br />
    <br />
    <p><u>Contact:</u>
    <br /> <br />
    <a href="mailto:[email protected]">mail[at]biohydrology2013.de</a></p>
  </div><!-- SIDEBAR END -->


  <div id="footer">

    <div id="fussleiste">
    <img src="fussleiste3.jpg" alt="Uni Landau" />
    </div>

  </div><!-- FOOTER END -->

  <br class="clear" />
</div><!-- WRAPPER END -->
</body>
</html>

Feinarbeiten müssten noch gemacht werden, keine Frage - soll hier ja nur zur Demo sein.
Sicherlich hat der eine oder andere Guru hier noch was anzumerken ;)

So, bin am WE offline.

Gruss
Rainer
 
Zurück
Oben