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

Problem bei "Text neben Navigation"

H

HansiGangster

Neues Mitglied
Hallo Forum. ich bin neu hier.

ich kenne mich zwar schon ein bisschen mit HTML und CSS aus, aber bin auf ein Problem gestoßen,

ich hoffe ihr könnt mir helfen.

zum problem:

wenn man stark zoomt, oder stark verkleinert, verschiebt sich der text neben der navigation.

hier der link. ich bitte euch, dass ihr diesen link NIEMALS ausschreibt. er darf in google derzeit nicht auffindbar sein.

ich verschleiere deshalb mal den link, indem ich ihn mit leerzeichen rückwärts schreibe. ggenbawhpotsirhc . oc . ed

ihr könnt ihn umdrehen mit diesem tool. Rückwärts schreiben | nebierhcs sträwkcüR einfach kopieren, dort einfügen und unten auf "Buchstaben umdrehen" klicken.

Und Außerdem möchte ich wissen wie man sowas ganz simpel und einfach nachkonstruieren kann. nur mit css und html natürlich^^ http://alexw.me/ipad2/#spring

hier der HTML code
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    
<html lang="de">



<head>
<link rel="stylesheet" href="index.css" type="text/css"/>
<meta name="author" content="nicht genannt" />
<meta name="robots" content="index,follow" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="description" content="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." />
<meta name="keywords" content="beispielseite, beispielhomepage, test" />



<title>Beispiel Homepage</title>

</head>

<body>



<img class="banner" src="banner.png" alt="Homepage Beispiel Banner">



<div id="box">
<ul id="Navigation">
        <li><a href="index.html">Home</a></li>
      <li><a href="seiteeins.html">Seite 1</a></li>
      <li><a href="seitezwei.html">Seite 2</a></li>
      <li><a href="seitedrei.html">Seite 3</a></li>
      <li><a href="seitevier.html">Seite 4</a></li>
    <li><a href="seitefuenf.html">Seite 5</a></li>
    <li><a href="seitesechs.html">Seite 6</a></li>
    </ul>
   
    
    <img class="footerpng" src="footer.png" alt="Footer">
    
   </div>

   <div id="content">
    <h2>Meine Beispiel Homepage</h2>
    
    <h3>Diese Seite enthält nur fiktive Sachen</h3>
    
    
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur congue lacus rhoncus ipsum<br>
    tincidunt quis rhoncus ipsum ornare. In elementum eros ut risus blandit sodales. Morbi vel euismod<br>
    dolor. Nullam eget lorem sit amet nisi consectetur luctus vitae id tortor. </p>
    
    <p>Vestibulum eu lobortis odio. Integer quam arcu, imperdiet sit amet tempor cursus, volutpat eu nulla.<br>
    Duis feugiat, diam ut lobortis sodales, velit erat porttitor lacus, id ultricies elit nibh a erat. S.(aus Lorem Ipsum) </p>
    </div>
    
    <div id="footer">
    </div>
    
    
    </body>


</html>


und hier CSS
Code: 
  body {
  background-color:#2e2e2e;
  font-family:verdana;
  }
  
  ul#Navigation {
    width: 14em;
    margin: 0; padding: 1px;
    border: 1px solid white;
    background-color: white;
    text-align:center;
    font-family:verdana;
    font-weight:bold;
    color: green; background-image:url(bgnav.jpg);
  }
  * html ul#Navigation {  /* Korrekturen fuer IE 5.x */
    width: 11.6em;
    w\idth: 10em;
    padding-left: 0;
    padd\ing-left: 0.8em;
  }
  ul#Navigation li {
    list-style: none;
    margin: 2px; padding: 0;
  }

  ul#Navigation a {
    display:block;
    padding: 0.8em;
    text-decoration: none; font-weight: bold;
    border: 1px solid black;
    border-left-color: white; border-top-color: white;
    color: black; background-image:url(navbg.jpg);
  }
  * html ul#Navigation a {  /* Breitenangaben nur fuer IE */
    width: 100%;
    w\idth: 8.8em;
  }
  ul#Navigation a:hover {
    border-color: white;
    border-left-color: black; border-top-color: black;
    color: white; background-image:url(navbgar.jpg);
  padding: 0.8em;
  text-align:center;
  }
  
  
  #box {
  width:900px;
  height:400px;
  margin-left:130px;
  background-color:#4a4949;
  }
  
 .banner {
 margin-left:131px;
 }
 
 
 h1 {

 }
 
 h2 {
 margin:30px;
 }
 
 h3 {
 margin:30px;
 }
 
 p {
 margin-left:30px;
 }
 
 #content {
  position:relative;
 left:348px;
 bottom:390px;
 width:630px;
 min-height:400px;
 
 }
 
 .footerpng {
position:absolute;
left:138px;
top:552px;
 }


lg und danke schon mal
 
Zuletzt bearbeitet:
Die Seite verhält sich ganz normal. Ich weiss nicht was die Seite sonst machen soll als vergrössern, wenn ich auf zoom klicke, dafür ist das ja gemacht.
Wenn du nicht willst dass die Navigationsbuttons mitwachsen, gib dem ul einen feste Wert in px und nicht em:

ul#Navigation { width: 14em;

ul#Navigation a { display:block; padding: 0.8em;
 
danke für deine antwor...

also das ist dann komisch. die buttons können ruhig mitwachsen. aber bei beim vergrößern verschiebt sich bei mir der lorum ipsum text. und beim verkeinern auch.

lg
 
Zuletzt bearbeitet:
achja. und übrigens. kann man wenn ich auf meiner homepage einen link anklicke, der auf eine andere seite führt, im gleichen tab anzeigen lassen, ABER nur in einem von mir defienierten bereich. möchte nämlich ein iPad als startseite machen, und die apps sind die links. die seiten sollen aber im"BILDSCHIRM" angezeigt werden.

ich hoffe du verstehst mich.

lg
 
HansiGangster schrieb:
also das ist dann komisch. die buttons können ruhig mitwachsen. aber bei beim vergrößern verschiebt sich bei mir der lorum ipsum text. und beim verkeinern auch.
Zum Vergrößern anklicken....
Hallo HansiGangster,
willkommen. Welchen Browser verwendest du? Welches Betriebssystem? Was heißt für dich Zoomen? Vergrößern der Schriftart oder der kompletten Seite?
Man kann dem Erscheinen in Google auch einfach entgegenwirken indem man eine robots.txt anlegt. Mehr Infos findest du dazu per Google.

Gruß
Körnerbrötchen
 
i hab den neuesten firefox, windows 7. zoomen heißt für STRG+Mausrad, wenn ich dann z.B. fast bis ans maximum verkleinere, also STRG+Mausrad rückwärts) drückt sich der text nach unten, und bei maximum zoomen das gleiche.

aber wenn das nur bei mir so ist, hat sich das erledigt.

aber kann mir jemand zu der neuen frage eine antwort geben, die wo das iPad die Startseite ist..... lg und cheers

und von dem robot.txt, hab ich glaub ich schonmal was gehört. funktioniert it webmaster-tools oder?
 
Ich weiss ja nicht wie das bei dir aussieht.
Im FF bei mir sieht das so aus wenn man zoomt:
Clipboard04.jpg

Ich kann dein Problem nicht nachvollziehen.

Lass den CSS Hack für den IE weg. Das Problem gibt es nicht mehr, da der Browser ausgestorben ist.

* html ul#Navigation { /* Korrekturen fuer IE 5.x */ width: 11.6em; w\idth: 10em; padding-left: 0; padd\ing-left: 0.8em; }

einfach raus löschen.

kann man wenn ich auf meiner homepage einen link anklicke, der auf eine andere seite führt, im gleichen tab anzeigen lassen,
Zum Vergrößern anklicken....

Ja klar geht das. Du definierst eine Box(DIV) als Contentbereich und dort lässt du den Text anzeigen. Scrollblaken generell abschalten und für die Box einschalten.
 
also stört dich das nicht, dass der text in den buttons drinnen ist??? also mir stört es ja auch nicht.in der normal ansicht passt ja alles.

i hoffe du hast mich nicht falsch verstanden. also ich soll eine DIV box machen, aber wie mach ich daraus nen content bereich? und wie schalte ich scrollbalken aus, und wie schalte ich sie für die box ein?? seh dir das mal an. ich hab schnell eine neue domain gemacht. The Apple iPad das ist jetzt nur so zum testen. wenn man dort auf den app klickt, soll sich das neue fenster im bildschirm vom ipad öffen. damit man dann über den homebutton wieder zurück kommt

ich möchte genau sowas machen, nur eben ohne javascript, und nicht so komplex. schaut es euch an http://alexw.me/ipad2/#spring
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben