zoom fehler

html.de-Forum HTML, XHTML & CSS
1

hallo zusammen

ich bin neu hier und das ist mein erster thread, sorry also wenn ich etwas daneben greife. Ich schreibe gleich zwei probleme, weil meiner Ansicht nach beide mit „zoom“ zu tun haben.

Mein erstes Problem: Meine Seite ist verlinkt und alles, doch ein Link erscheint in einer anderen Grösse. Alle Link’s sind ursprünglich vom gleichen HTML und danach erweitert. Sie greifen momentan noch alle auf das gleiche CSS-Dokument zu (ist noch nicht viel auf der Seite, geht momentan also noch^^).

Mein zweites Problem: Wenn ich Ctrl+Alt gedrückt halte kann ich mit der Maus weiter weg und näher zoomen. Bei einer bestimmten Grösse geht vom „about me“ das „me“ runter, sonst nirgends…

Ich bin froh für jede Hilfe und danke jedem der ein versuch wagt!
Greez Htmlhobbit

2

Hallo,

hast Du einen Link zur Seite ?

3

sry, ist noch nicht hochgeschaltet (wegen rechte usw…) poste dir aber den code → html:

Dario's Workbook 
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="description" content="Workbook" />
<meta name="author" content="Dario Schaumburg" />
<meta name="keywords" content="Dario, Schaumburg, Workbook" />
<meta name="generator" content="Webocton - Scriptly (www.scriptly.de)" />

<link href="style.css" type="text/css" rel="stylesheet" />
<link href="image/Home.ico" type="image/Home-icon" rel="shortcut icon" />

<!-- [if IE] -->
<link type="text/css" rel="stylesheet" href="IE.css"/>
<!-- [endif] -->

<div id="wrapper">
    <div id="header">
        <div id="search-bar">
            <form id="search-form" action="image/" method="get" autocomplete="off">
                <div>
                   <input id="search-button" type="submit" value="" tabindex="41"/>
                   <input id="search-field" class="ui-autocomplete-input"
                           type="text" name="q" maxlength="200" tabindex="40"
                           alt="Search..." value="Search..." autocomplete="off"
                           role="textbox" aria-autocomplete="list" aria-haspopup="true"/>
               </div>
            </form>
        </div>

    <div id="navigationContainer">
        <ul id="nav">
            <li class="menuparent">
                <a href="home.html"title">HOME</a>
            </li>
            <li class="menuparent">
                <a href="about me.html"title">About Me</a>
            </li>
            <li class="menuparent">
                <a href=""title">Workbook</a>
                    <ul>
                        <li>
                            <a href="workbook_work.html"title">Work</a>
                        </li>
                        <li>
                            <a href="workbook_&uuml;k's.html"title">&Uuml;K's</a>
                        </li>
                        <li>
                            <a href="workbook_download.html"title">Download PDF</a>
                        </li>
                    </ul>
            </li>
            <li class="menuparent">
                <a href=""title">Gallery</a>
                    <ul>
                        <li>
                            <a href="gallery_multimedia.html"title">Multimedia</a>
                        </li>
                        <li>
                            <a href="gallery_informatik.html"title">Informatik</a>
                        </li>
                        <li>
                            <a href="gallery_korrespondenz.html"title">Korrespondenz</a>
                        </li>
                    </ul>
            </li>
            <li class="menuparent">
                <a href=""title">Contact</a>
                    <ul>
                        <li>
                            <a href="contact_mail.html"title">Mail</a>
                        </li>
                        <li>
                            <a href="contact_facebook.html"title">Facebook</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>

css:

html, body
{
background: #000000 url(image/abstract_bearbeitet2.jpg) top center no-repeat;
background-position: 0;
background-position: center;
text-align: center;
font-family: Arial, sans-serif;
font-size: 12px/1.5;
}

div
{
border: 1px solid transparent;
}

#wrapper
{
width: 960px;
min-height: 590px;
position: relative;
top: 30px;
padding: 0;
margin: 0 auto;
background-color: #333333;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}

#header
{
padding-top: 10px;
font-size: 100%;
font-weight: bold;
margin: 0;
border: none;
outline: none;
padding: 0;
}

#content
{
width: 900px;
height: 540px;
text-align: left;
background-color: #262626;
}

#navigationContainer
{
clear: both;
background-color: #000000 ;
position: relative;
height: 15px;
width: 960px;
margin: -5px 0px 0px -1px;
padding-bottom: 18px;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}

html
#navigationContainer
{
/ IE Hack! FU IE------- */
width: 810px;
}

#nav ul
{
float: left;
list-style: none;
line-height: 1em;
font-weight: bold;
padding: 0px;
margin: 4px 0px 0px 30px;
}

#nav a
{
width: 5em;
font-family: tahoma, verdana, arial;
font-size: 10px;
font-weight: bold;
text-align: center;
text-decoration: none;
display: block;
margin-top: -5px;
color: #0066cc;
text-align: left;
}

#nav a:hover
{
color: #FFFFFF;
}

#nav li ul li
{
border-top: none;
border-right: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
background-color: #aaaaaa;
filter: alpha(opacity=75); /*transparenz für navigation */
opacity: .75; /*transparenz für navigation */
-moz-opacity: .75; /*transparenz für navigation */
margin: 0px;
padding: 0px;
text-align: center;
}

#nav li
{
float: left;
padding-bottom: 1px;
width: 6em;
margin: 0px 5em 0px 0px;
list-style: none;
}

#nav li ul
{
position: absolute;
left: -999em;
height: auto;
width: 10em;
font-weight: normal;
border-width: 0.25em;
padding: 11px;
margin: 0;
}

#nav li li
{
width: 10em;
}

#nav li ul a
{
width: 10em;
padding-left: 0em;
margin-top: 1px;
}

#nav li ul ul
{
margin: -1em 0 0 9.3em;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul
{
left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul
{
left: auto;
}

#nav li:hover, #nav li.sfhover
{
color: white;
}

#search-field
{
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
-webkit-box-shadow:0 0 10px #0066cc;
-moz-box-shadow: 0 0 10px #0066cc;
box-shadow: 0 0 10px #0066cc;
background: no-repeat scroll 0 0 #FFFFFF;
position: absolute;
top: 75px;
min-width: 80px;
float: left;
border: medium none;
height: 20px;
outline: medium none;
right: 58px;
}

#search-button
{
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
-webkit-box-shadow:0 0 10px #0066cc;
-moz-box-shadow: 0 0 10px #0066cc;
box-shadow: 0 0 10px #0066cc;
background-image: url(image/Search.jpg);
background-position: center;
border: medium none;
cursor: pointer;
height: 22px;
outline: medium none;
position: absolute;
right: 38px;
top: 75px;
width: 20px;
z-index: 1;
}

4

Hallo,

Du hast im html einige Links mit der Klasse „menuparent“ definiert, die ich im css nicht finden kann. Das dürfte wohl das Problem sein.

5

ok, wenn ichs rausnehme funktioniert gahr nichts mehr.
wenn ich es im css definiere: was für ein/mehrere Befehl/e würdest du empfehlen?
Der Link „home“ zoomt ja von alleine… Und das Runterspringen des „me“ geschieht ja nur in einer bestimmten grösse. Es liegt ja nicht daran, dass plötzlich der Bildschirm zu klein ist oder so…

danke fürs antworten
htmlhobbit

6

Das spricht dafür, dass Du entweder nicht die ganze css gepostet hast, oder ein externes Stylesheet eingebettet ist. Dieser Link im Head
[html]

[/html] spricht dafür, das so etwas vorgesehen ist (auch wenn Pfad und Datei fehlen).

Schau doch mal nach, was hier drin steht:
[html]

[/html] Das ergibt zwar keinen Sinn, aber irgendwo muss die Klasse ja definiert sein, wenn´s nach dem rausnehmen der Klasse nicht mehr klappt.

Um einen Ab-/Umbruch des Links zu vermeiden, würde ich eine Breite für alle Links vorgeben, entweder für jeden einzeln, oder gleiche Breite für alle. Wenn Du zusätzlich und probeweise einen Rahmen um die Links legst (border), kannst Du die Dimensionen in verschiedenen Zoomfaktoren vermutlich am besten beobachten.

7

ok, ich hab das jetzt mit einem freund (1.Lehrjahr informatik) zusammen ausprobiert. aber da läuft nichts! wir haben es mit firebug kontrolliert…der rahmen ist gross genug-.-
ich hab das ganze css gepostet, der link für’s „IE.css“ hat mir ein info aus dem 4.ten empfohlen, wegen den Problemen mit IE. Es steht aber noch nichts drinn. wie man sieht habe ich noch genug probleme mit firefox^^.
naja, werde mal unseren html-guru vom betrieb fragen (der meckert dann zwar wieder, aber was soll’s).

danke für die Antworten und den zeitaufwand! (ich meld mich nochmal wenn unser html-guru versagt^^)