zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Browser Zoom - Divs vergrößern sich nicht mit

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 02.08.2009, 00:03
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.08.2009
Beiträge: 6
mathias81 befindet sich auf einem aufstrebenden Ast
Standard Browser Zoom - Divs vergrößern sich nicht mit

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 **********************/
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 03.08.2009, 09:04
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 14.03.2007
Ort: Bad Schmiedeberg
Beiträge: 1.395
regloh wird schon bald berühmt werden
Standard

Hallo.

Zitat:
Wenn ich im Browser die Seite größer zoome, dann wachsen die divs nicht mit sondern eben nur der Text und die anderen Elemente.
Wie denn auch, wenn du mit fixen Werten bzw. mit Werten, die unabhängig von der Textgröße sind, arbeitest?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 03.08.2009, 13:17
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.08.2009
Beiträge: 6
mathias81 befindet sich auf einem aufstrebenden Ast
Standard

Und was muss ich ändern? So ganz habe ich es noch nicht verstanden.
Mit Zitat antworten
  #4 (permalink)  
Alt 03.08.2009, 13:26
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 14.03.2007
Ort: Bad Schmiedeberg
Beiträge: 1.395
regloh wird schon bald berühmt werden
Standard

Einfach ohne feste Breiten arbeiten. Ein 500px breites Element wird nunmal nicht breiter als 500px

Informier dich einfach mal über flexible und liquide Layouts.
Mit Zitat antworten
  #5 (permalink)  
Alt 03.08.2009, 13:31
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von regloh Beitrag anzeigen
Einfach ohne feste Breiten arbeiten. Ein 500px breites Element wird nunmal nicht breiter als 500px
Mit der Zoom-Funktion eben schon.

Mathias, du kannst eine Mindestbreite angeben.
Mit Zitat antworten
  #6 (permalink)  
Alt 03.08.2009, 13:36
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 14.03.2007
Ort: Bad Schmiedeberg
Beiträge: 1.395
regloh wird schon bald berühmt werden
Standard

Zitat:
Zitat von fricca
Mit der Zoom-Funktion eben schon.
Ich bin von Textzoom ausgegangen, denn wenn man auch das Layout zoomt, dann klappt es problemlos.
Mit Zitat antworten
  #7 (permalink)  
Alt 03.08.2009, 13:38
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

regloh, wenn du bei der verlinkten Seite die Zoom-Funktion (nein, nicht Schriftvergrößerung!) betätigst, laufen irgendwann die Formularfelder über, weil das umgebende Element wegen seiner Prozentbreite nicht aufzoomt.
Das passiert auch ohne Zoom, wenn man das Fenster schmal genug macht.

min-width hilft.
Angehängte Grafiken
Dateityp: jpg screen.jpg (11,9 KB, 5x aufgerufen)
Mit Zitat antworten
  #8 (permalink)  
Alt 03.08.2009, 13:47
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 14.03.2007
Ort: Bad Schmiedeberg
Beiträge: 1.395
regloh wird schon bald berühmt werden
Standard

Stimmt, aber das Menü klappt ^^

Aber prinzipiell war das Problem mit den fixen Angaben ja die Ursache
Mit Zitat antworten
  #9 (permalink)  
Alt 03.08.2009, 13:48
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.08.2009
Beiträge: 6
mathias81 befindet sich auf einem aufstrebenden Ast
Standard

Und was soll ich mit min-width anfangen?
Die Divs an den größten Zoom anpassen?
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 03.08.2009, 13:53
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 14.03.2007
Ort: Bad Schmiedeberg
Beiträge: 1.395
regloh wird schon bald berühmt werden
Standard

Informiere dich doch mal über diese CSS-Eigenschaft.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Schrift vergrößern mit Browser niggel84 Barrierefreiheit 6 28.10.2010 08:45
2 DIVs parallel vergrößern xVApeironVx CSS 6 15.06.2010 19:08
DIV je nach Größe eines darinliegenden DIVs vergrößern Merlin123 CSS 18 18.08.2009 09:46
Divs mittig in Browser zentrieren doublemc CSS 15 18.02.2008 15:52
Div's vergrößern sich im Firefox nicht! SvartfaR CSS 2 29.09.2006 09:14


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:11 Uhr.