Browser Zoom - Divs vergrößern sich nicht

Mathias_Bauer

Hallo,

ich habe folgendes Problem:

Wenn ich im Browser die Seite größer zoome, dann wachsen die divs nicht mit sondern eben nur der Text und die anderen Elemente.

Was kann ich am einfachsten ändern, um nicht das ganze Design ändern zu müssen?

Hier der Link zu einer Seite, die am schlimmsten betroffen ist.

Nachfolgend das zugehörige css für den Firefox.
Ich denke, dass #pagecell1, .feature und .content die entscheidenden Eigenschaften enthalten.

Vielen Dank im Voraus!

Code

/***********************************************/
/* emx_nav_left.css                            */
/* Use with template Halo_leftNav.html         */
/***********************************************/


/***********************************************/
/* HTML tag styles                             */
/***********************************************/
body{
    font-family: Arial,sans-serif;
    color: #333333;
    line-height: 1.166;
    margin: 0px;
    padding: 0px;
    background: #cccccc url("bg_grad2.jpg") fixed;
}




/******* hyperlink and anchor tag styles *******/


a:link, a:visited{
    color: #005FA9;
    text-decoration: none;
}


a:hover{
    text-decoration: underline;
}




/************** header tag styles **************/


h1{
 font: bold 150% Arial,sans-serif;
 color: #006699;
 margin: 0px;
 padding: 0px 10px 10px 0px;
}


h2{
 font: bold 114% Arial,sans-serif;
 color: #006699;
 margin: 0px;
 padding: 0px;
}


#ueber{
font: bold 175% Arial,sans-serif;
    float:left;
    color: #000000;
    margin-top:4px;
    padding: 0px;
    width:168px;
}


#ueber2{
 font: bold 200% Arial,sans-serif;
 color: #006699;
 margin-top: -4px;
 padding:0px;
}


h3{
 font: bold 100% Arial,sans-serif;
 color: #006699;
 margin: 0px;
 padding: 0px;
}


h4{
 font: bold 100% Arial,sans-serif;
 color: #006699;
 margin: 0px;
  padding: 0px 10px 10px 0px;
}


h5{
 font: 100% Arial,sans-serif;
 color: #006699;
 margin: 0px;
 padding: 0px;
}


h6{
 font: bold 150% Arial,sans-serif;
color: #006699;
 margin: 0px;
 padding: 0px;
}


h7{
 font: bold italic 100% Arial,sans-serif;
  color: #006699;
 margin: 0px;
 padding: 0px;
}




/*************** list tag styles ***************/


ul{
 list-style-type: square;
}


ul ul{
 list-style-type: disc;
}


ul ul ul{
 list-style-type: none;
}


/********* form and related tag styles *********/
form {
    margin: 0px;
    padding: 0px;
}


label{
 font: bold 1em Arial,sans-serif;
 color: #334d55;
}


input{
font-family: Arial,sans-serif;
text-align:center;
}


/***********************************************/
/* Layout Divs                                 */
/***********************************************/
#pagecell1{
    position:absolute;
    top: 163px;
    left: 2%;
    right: 2%;
    width:95.6%;
    background-color: #ffffff;
}


#tl {
    position:absolute;
    top: -1px;
    left: -1px;
    margin: 0px;
    padding: 0px;
    z-index: 100;
}


#tr {
    position:absolute;
    top: -1px;
    right: -1px;
    margin: 0px;
    padding: 0px;
    z-index: 100;
}


#trPrint {
    position:absolute;
    top: -1px;
    right: 10px;
    margin: 0px;
    padding: 0px;
    z-index: 100;
}


#trPrintAusstellerInfo {
    position:absolute;
    top: 30px;
    right: 10px;
    margin: 0px;
    padding: 0px;
    z-index: 100;
}






#masthead{
    position: absolute;
    top: 0px;
    left: 2%;
    right: 2%;
    width:95.6%;
}


#mastheadcenter{
    position: absolute;
    font: 75% Verdana,sans-serif;
    top: 16px;
    color: #FFFFFF;
    left:40%;
    z-index:2;
}




#pageNav{
    float: left;
    width:178px;
    margin:0px;
    height: auto;
    padding: 0px;
    background-color: #F5f7f7;
/*    border-bottom: 1px solid #cccccc;*/
    font: small Verdana,sans-serif;


}


#content{
    position:relative;
    padding: 10px 10px 0px 0px;
    margin:0px 0px 0px 178px;
    border-left:1px solid #cccccc;
    min-height: 100px;
    height: auto;
    width:auto;
    z-index:1;
}




/***********************************************/
/* Component Divs                              */
/***********************************************/
#siteName{
    font: bold 120% Arial,sans-serif;
    margin: 0px;
    padding: 16px 0px 8px 0px;
    color: #ffffff;
    font-weight: normal;
}


/************** utility styles *****************/


#utility{
    font: 75% Verdana,sans-serif;
    position: absolute;
    top: 16px;
    right: 0px;
    color: #919999;
}


#utility a{
    color: #ffffff;
}


#utility a:hover{
    text-decoration: underline;
}


/************** pageName styles ****************/


#pageName{
    padding: 0px 0px 14px 10px;
    margin: 0px;
    border-bottom:1px solid #ccd2d2;
}


#pageName h2{
    font: bold 175% Arial,sans-serif;
    color: #000000;
    margin:0px;
    padding: 0px;
}


#pageName img{
    position: absolute;
    top: 0px;
    right: 6px;
    padding: 0px;
    margin: 0px;
}


/************* globalNav styles ****************/


#globalNav{
position: relative;
width: 100%;
min-width: 640px;
height: 96px;
color: #cccccc;
padding: 0px;
margin: 0px;
background: #FFFFFF;
/*background-image:  url("glbnav_background.gif");*/
}


#globalNav img{
    margin-bottom: -4px;


}


#gnl {
    position: absolute;
    top: -1px;
    left:-1px;


}


#gnr {
    position: absolute;
    top: -1px;
    right:-1px;
}


#gnld {
    position: absolute;
    bottom: 3px;
    left:-1px;
    z-index:600;
}


#gnrd {
    position: absolute;
    bottom: 3px;
    right:-1px;
}


#globalLink{
    position: absolute;
    top: 6px;
    height: 90px;
    min-width: 100px;
    padding: 0px;
/*    margin: 0px;
    left: 0px;*/
    z-index: 100;
    margin-top: auto;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;


}
#globalLinkRight{
    position: absolute;
    top: 3px;
    height: 90px;
    width: 964px;
    min-width: 964px;
    padding: 0px;
/*    margin: 0px;
    left: 20px;*/
    z-index:200;
top: 50%;
left: 50%;
margin-top: -45px;
margin-left: -482px;


}




#logoRechts{
    position: absolute;
    top: 6px;
    height: 90px;
    width:100px;
    min-width: 100px;
    padding: 0px;
/*    margin: 0px;
    left: 845px;*/
    z-index: 300;
top: 100%;
left: 100%;
margin-top: -90px;
margin-left: -120px;


}




a.glink, a.glink:visited{
      font-size: small;
      color: #000000;
    font-weight: bold;
    margin: 0px;
    padding: 2px 5px 4px 5px;
    border-right: 1px solid #8FB8BC;
}


a.glink:hover{
      background-image:  url("glblnav_selected.gif");
    text-decoration: none;
}


.skipLinks {display: none;}


/************ subglobalNav styles **************/


.subglobalNav{
    position: absolute;
    top: 84px;
    left: 0px;
    /*width: 100%;*/
    min-width: 640px;
    height: 20px;
    padding: 0px 0px 0px 10px;
    visibility: hidden;
    color: #ffffff;
}


.subglobalNav a:link, .subglobalNav a:visited {
    font-size: 80%;
    color: #ffffff;
}


.subglobalNav a:hover{
    color: #cccccc;
}


/*************** search styles *****************/


#search{
    position: absolute;
    top: 5px;
    right: 10px;
    z-index: 101;
}


#search input{
  font-size: 70%;
  margin: 0px  0px 0px 10px;
 }


#search a:link, #search a:visited {
    font-size: 80%;
    font-weight: bold;


}


#search a:hover{
    margin: 0px;
}




/************* breadCrumb styles ***************/


#breadCrumb{
    padding: 5px 0px 5px 10px;
    font: small Verdana,sans-serif;
    color: #AAAAAA;
}


#breadCrumb a{
    color: #AAAAAA;
}


#breadCrumb a:hover{
    color: #005FA9;
    text-decoration: underline;
}




/************** feature styles *****************/


.werbung{
    position: absolute;
    right:5px;
    top: 10px;
    min-height: 450px;
    height: auto;
}




.feature{
    position:relative;
    width: 99%;
    padding: 0px 10px 10px 10px;
    font-size: 80%;
    margin:0px;
    min-height: 450px;
    height: auto;
    z-index:1;
}




html>body .feature {height: auto;}




.feature h3{
    font: bold 175% Arial,sans-serif;
    color: #000000;
    padding: 30px 0px 5px 0px;
}


.feature2 a{
    text-decoration:none;
    color:#000000;
}


.feature2 a:visited{
    text-decoration:none;
    color:#000000;
}


.feature a{
    text-decoration:none;
    color:#000000;
}


.feature a:visited{
    text-decoration:none;
    color:#000000;
}


.feature a:hover{
    text-decoration:underline;
}


.featurehotels a{
    text-decoration:underline;
}


.featurehotels a:visited{
    text-decoration:underline;
}


.featurehotels a:hover{
    text-decoration:underline;
}


.featurehotels{
    position:relative;
    width: 99%;
    padding: 0px 10px 10px 10px;
    font-size: 80%;
    margin:0px;
    min-height: 450px;
    height: auto;
}


table.ausstellerinfo{
   width: 70%;
}








#tag1hin{
border:1px solid #000000;
padding: 10px 0px 5px 10px;
background: #cccccc;
width:50%;
}


#tag1rueck{
border:1px solid #000000;
padding: 10px 0px 5px 10px;
background: #cccccc;
width:50%;
}


#tag2hin{
border:1px solid #000000;
padding: 10px 0px 5px 10px;
background: #cccccc;
width:50%;
}


#tag2rueck{
border:1px solid #000000;
padding: 10px 0px 5px 10px;
background: #cccccc;
width:50%;
}


#tag3hin{
border:1px solid #000000;
padding: 10px 0px 5px 10px;
background: #cccccc;
width:50%;
}


#tag3rueck{
border:1px solid #000000;
padding: 10px 0px 5px 10px;
background: #cccccc;
width:50%;
}


#tag4hin{
border:1px solid #000000;
padding: 10px 0px 5px 10px;
background: #cccccc;
width:50%;
}


#tag4rueck{
border:1px solid #000000;
padding: 10px 0px 5px 10px;
background: #cccccc;
width:50%;
}


/*************** story styles ******************/


#rechnung {
    display:none;
    padding: 20px 0px 0px 0px;
/*    font-size: 80%;*/
}


#korrespondenz {
    display:none;
    padding: 20px 0px 0px 0px;
/*    font-size: 80%;*/
}


#mitaussteller1 {
    display:none;
    padding: 20px 0px 0px 0px;
}


#mitaussteller2 {
    display:none;
    padding: 20px 0px 0px 0px;
}


#mitaussteller3 {
    display:none;
    padding: 20px 0px 0px 0px;
}


#mitaussteller4 {
    display:none;
    padding: 20px 0px 0px 0px;
}


#mitaussteller5 {
    display:none;
    padding: 20px 0px 0px 0px;
}


#absenden {
    padding: 20px 0px 0px 0px;
}




.story h3{
    font: bold 125% Arial,sans-serif;
    color: #000000;
}


.story p {
    padding: 0px 0px 10px 0px;
}


.story a.capsule{
    font: bold 1em Arial,sans-serif;
    color: #005FA9;
    display:block;
    padding-bottom: 5px;
}


.story a.capsule:hover{
    text-decoration: underline;
}


td.storyLeft{
    padding-right: 12px;
}




/************** siteInfo styles ****************/


#siteInfo{
    clear: both;
    border-top: 1px solid #cccccc;
    font-size: small;
    color: #006699;
    background: #FFFFFF;
    padding: 10px 10px 10px 0px;
    margin-top: 0px;
    width:auto;
    left:0px;
    right:0px;
    z-index:100;
}


#siteInfo img{
    padding: 4px 4px 4px 0px;
    vertical-align: middle;


}




/************ sectionLinks styles **************/


.sectionLinks{
    margin: 0px;
    padding: 0px;




}


.sectionLinks h3{
    padding: 10px 0px 2px 10px;
    border-bottom: 1px solid #cccccc;
}


.sectionLinks a:link, .sectionLinks a:visited {
    display: block;
    border-top: 1px solid #ffffff;
    border-bottom: 1px solid #cccccc;


    background-image:  url("bg_nav.jpg");
    font-weight: bold;
    padding: 3px 0px 3px 10px;
    color: #21536A;
}


.sectionLinks2{
    margin: 0px;
    padding: 0px;


}


.sectionLinks2 h3{
    padding: 10px 0px 2px 10px;
    border-bottom: 1px solid #cccccc;
}


.sectionLinks2 a:link, .sectionLinks2 a:visited {
    display: block;


    border-top: 1px solid #ffffff;
    border-bottom: 1px solid #cccccc;
    background-image:  url("bg_nav.jpg");
    font-weight: bold;
    padding: 3px 0px 3px 10px;
    color: #21536A;
}




.selectedRightLinks a:link, .selectedRightLinks a:visited {
    display: block;


    border-top: 1px solid #ffffff;
    border-bottom: 1px solid #cccccc;
    background-image:  url("bg_nav.jpg");
    font-weight: bold;
    font-size: smaller;
    padding: 3px 0px 3px 25px;
    color: #21536A;
}


.selectedRightLinks a:hover{


    border-top: 1px solid #cccccc;
    background-color: #DDEEFF;
    background-image: none;
    font-weight: bold;
    text-decoration: none;
}


.selectedRight{


    display: block;
    border-top: 1px solid #ffffff;
    border-bottom: 1px solid #cccccc;
    background-image:  url("bg_nav.jpg");
    font-weight: bold;
    font-size: smaller;
    padding: 3px 0px 3px 25px;
    color: #FF0000;
}


.selectedLinks{


    display: block;
    border-top: 1px solid #ffffff;
    border-bottom: 1px solid #cccccc;
    background-image:  url("bg_nav.jpg");
    font-weight: bold;
    padding: 3px 0px 3px 10px;
    color: #FF0000;
}


.sectionLinks a:hover{


    border-top: 1px solid #cccccc;
    background-color: #DDEEFF;
    background-image: none;
    font-weight: bold;
    text-decoration: none;
}


.sectionLinks2 a:hover{


    border-top: 1px solid #cccccc;
    background-color: #DDEEFF;
    background-image: none;
    font-weight: bold;
    text-decoration: none;
}


.selectedRightLinksProgram a:link, #selectedRightLinksProgram a:visited {
    display: block;
    border-top: 1px solid #ffffff;
    border-bottom: 1px solid #cccccc;
    background-image:  url("bg_nav.jpg");
    font-weight: bold;
    font-size: smaller;
    padding: 3px 0px 3px 40px;
    color: #21536A;
}


.selectedRightLinksProgram a:hover{


    border-top: 1px solid #cccccc;
    background-color: #DDEEFF;
    background-image: none;
    font-weight: bold;
    text-decoration: none;
}


.selectedRightProgram{


    display: block;
    border-top: 1px solid #ffffff;
    border-bottom: 1px solid #cccccc;
    background-image:  url("bg_nav.jpg");
    font-weight: bold;
    font-size: smaller;
    padding: 3px 0px 3px 40px;
    color: #FF0000;
}




/************* relatedLinks styles **************/


.relatedLinks{
    margin: 0px;
    padding: 0px 0px 10px 10px;
    border-bottom: 1px solid #cccccc;
}


.relatedLinks h3{
    padding: 10px 0px 2px 0px;
}


.relatedLinks a{
    display: block;
}




/**************** advert styles *****************/


#advert{
    padding: 20px;
    background: #FFFFFF;




}


#advert a{
    text-decorartion: none;
    color: #000000;
}


#advert a:visited{
    text-decorartion: none;
    color: #000000;
}


#advert img{
    text-decoration:none;
}


#advert2{
    padding: 20px;
    background: #FFFFFF;




}


#advert2 a{
    text-decorartion: none;
    color: #000000;
}


#advert2 a:visited{
    text-decorartion: none;
    color: #000000;
}


#advert2 a:hover{
    z-index:99;
    text-decorartion: none;
    color: #000000;
}


#advert2 img{
    text-decoration:none;
}










/********************* end **********************/

Alles anzeigen

Thonixx

Das mit dem Zoomen ist browsermässig festgelegt und daher kann man das nicht verändern, ausser du machst mit PHP eine aufwendige Zoomfunktion, aber das ist nicht empfehlenswert.

Mathias_Bauer

Nein, ich glaube da liegt ein Missverständnis vor.
Ich möchte keine Zoom-Funktion. Ich habe das Problem, wenn ich mit der Browserfunktion zoome, dann werden die Divs nicht größer, sondern nur der Text und die anderen Elemente. Irgendwann gehen die dann über den Div-Rand hinaus.
D.h. die Css-Einstellungen meiner Seite stimmen nicht! Wenn ich andere Webseiten zoome, dann wird alles gleichmäßig größer.

Thonixx

Zitat von firefox5.0

Das mit dem Zoomen ist browsermässig festgelegt und daher kann man das nicht verändern.

Aber probier mal allen Divs Höhen- und Breitenangaben zu geben, sonst wüsste ich nicht gerade, was das Problem ist und wo du gesehen hättest, wos funktioniert.

Hast du mal einen Link zu deiner Seite?
Und noch einen Link zu der Seite, wos geht?

Mathias_Bauer

Der Link oben war wahrscheinlich nicht auffällig genug...

Hier nochmal der Link wo es nicht geht: http://pferd-rhein-ruhr.de/index.php?page…er&group=1#oben

Und hier ein Link wo es geht: http://www.tischtennis-gross-zimmern.de/

thilda

Wo ist deine Maßeinheit?

Zitat

line-height: 1.166;

Als kleiner Tipp. Wenn du alles in em angibts dann könnte es dir sicher weiterhelfen. Lies dazu aber mal etwas nach.

Mathias_Bauer

Also eigentlich habe ich alles in px angegeben. Hab ich an der einen Stelle bestimmt vergessen. Ich glaube aber nicht, dass es an der Maßeinheit liegt...

Ich habe die rechten divs mit der Eigenschaft right ausgerichtet. D.h. das Verhalten ist schon logisch. Ich möchte aber nicht mit festen Angaben oder Prozentualwerten arbeiten, da je nach Auflösung die Seite dann anders angezeigt wird. Nur die Zoom-Funktion des Browsers habe ich eben nicht berücksichtigt...
Um diesen Missstand zu beheben, ist es die einzige Möglichkeit mit festen Angaben zu arbeiten?

Grevas

Ich muss leider feststellen, dass es bei beiden Seiten nicht funktioniert.

Getestet mit Firefox.

Spontane Seite bei der die Navi sich in der breite auch anpasst wäre Wikipedia, schau dir dort den CSS code an, vllt hilft dir das weiter (ich mach das immer mit Firefox's Web-developer).

Mathias_Bauer

Das was nicht funktioniert???

Bei der Seite, auf der es funktioniert, wird das div mit größer, so dass der Text nicht über den Rand hinausgeht.

Ich teste das auch mit Firefox.

Grevas

Hast es vorher mit dem IE getestet? Da ist es ja noch schlimmer :O Bei der Seite wo es nicht richtig funktionieren soll, verschwindet nämlich der komplette content bei maximaler größe...

Spontan würd ich sagen, dass du bei der "guten" Seite einfach mehr Platz in der Navi gelassen hast, so dass der Text seinen Bereich nicht seitlich sprengen kann.

Mathias_Bauer

Das mit dem mehr Platz kann hoffentlich nicht die Lösung sein.
Dann wäre ich dem Problem ja hilflos ausgeliefert!

Grevas

Also wenn du die Seite so wie sie ist zoombar haben willst, dann doch. Das mit dem Content im IE passiert vermutlich weil die Inputboxen den Div sprengen und der dann sagt "hä?... näää..."...

Ich hab mir den CSS code von Wikipedia nicht angeschaut, aber um die Divs zu vergrößern dürfen sie ja keine feste größe haben - sprich statt width mit padding-right/left arbeiten - habs jetzt nicht ausprobiert aber dadurch sollte dein Navi-Div automatisch mitwachsen wenn die Textgröße verändert wird.

/P.S: ich würde mir auf deiner Stelle gar nicht solche sorgen darum machen... Solange nichts verschwindet ist es im prinzip egal - wer zoomt nimmt es auch in kauf wenn es ein wenig doof aussieht.

Mathias_Bauer

Gut, wenn der Zoom egal ist, dann bleibt alles so wie es ist.

Vielen Dank!

Tags