Höhe skallieren mit CSS
- Ersteller Stallion
- Erstellt am
Hallo, ist eigentlich eine super einfache Sache, aber irgendwie will es nicht. Ich möchte die ganze Webside auf einer Höhe haben, so wie sie jetzt ist. Falls der Seiteninhalt länger ist, möchte ich das man es dann runter scrollen kann, nur irgendwie mag es nicht klappen. Was mach ich falsch?
Hier der Link zur Webside: LINK
die CSS-Datei:
der Quelltext:
Hier der Link zur Webside: LINK
die CSS-Datei:
Code:
<style type="text/css">
.a1 {
}
.copyright {
font-size: 9px;
color: #000000;
font-family: "Georgia", Courier New, Arial, mono;
}
.bgtop {
background-positon: top;
background-image: url(anni/header.jpg);
width:760px;height:150px;
border:0px solid red;
padding:0px;
}
.bgbody {
background-image: url(anni/middle.jpg);
width:760px;
border:0px solid red;
padding:0px;
height: 600px;
}
.bgfoot {
background-image: url(anni/footer.jpg);
width:760px;height:17px;
border:0px solid red;
padding:0px;
}
.all {
margin-left: 28px;
margin-right: 25px;
}
.menu {
font-size: 12px;
color: #ffffff;
font-family: "Tahoma", Arial, Helvetica, sans-serif;
margin-left: 28px;
margin-right: 25px;
padding-top: 0px;
}
.header {
margin-left: 28px;
margin-right: 25px;
padding-top: 25px;
}
.main {
font-size: 12px;
color: #000000;
font-family: "Tahoma", Arial, Helvetica, sans-serif;
margin: 0;
padding: 10px;
list-style-type: none;
background-image: url(anni/boxhg.jpg);
border: 1px solid black;
border-top: 0px solid white;
border-right: 1px solid black;
text-align: justify;
background-align: center;
width: 679px;
height: 550px;
}
#table1 {
width : 320px;
text-align : left;
}
#table2 {
width : 320px;
text-align : right;
}
#bildmitte {
text-align : center;
}
#copyright {
width : 693px;
text-align : right;
margin : 0px;
border : 0px dashed black;
padding : 1px;
padding-right : 3px;
padding-left : 3px;
}
#h1 {
font-family : Courier New;
font-weight : bold;
font-size : 14px;
text-decoration : none;
text-align : center;
color : #000000;
}
#aboutme {
width : 130px;
higth : 173px;
float : left;
margin : 2px;
padding-right : 2px;
padding-bottom : 2px;
}
#menu {
margin : 0;
padding : .2em .0em;
list-style-type : none;
background-image : url(anni/bg_rot.gif);
border : 1px solid black;
border-bottom : 1px solid black;
border-right : 1px solid black;
text-align : center;
background-align : center;
width : 699px;
}
#menu li {
display : inline;
}
#menu a {
color : #ffffff;
border : 1px solid #ffffff;
border-bottom : 1px solid #A6A6A6;
border-right : 1px solid #A6A6A6;
text-decoration : none;
text-align : center;
padding : 0 1em 0 1em;
font-weight : bold;
}
#menu a:hover {
border : 1px solid #A6A6A6;
border-bottom : 1px solid #ffffff;
border-right : 1px solid #ffffff;
#menu a:visited {
border : 1px solid #A6A6A6;
border-bottom : 1px solid #ffffff;
border-right : 1px solid #ffffff;
#menu a:link {
border : 1px solid #A6A6A6;
border-bottom : 1px solid #ffffff;
border-right : 1px solid #ffffff;
#menu a:active {
border : 1px solid #A6A6A6;
border-bottom : 1px solid #ffffff;
border-right : 1px solid #ffffff;
}
#table1 {
text-align : center;
border : 0px;
margin : 0px;
padding : 5px;
}
#table a {
text-align : center;
border : 0px;
margin : 0px;
padding : 5px;
}
#table a:hover {
border : 0px;
#table a:visited {
border : 0px;
#table a:link {
border : 0px;
#table a:active {
border : 0px;
}
</style>der Quelltext:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>psychopeppi.de | Private Homepage von Torsten Pfeffer | History</title>
<link rel="stylesheet" type="text/css" href="../layout.css">
<link rel="shortcut icon" href="../auge.ico">
<META NAME="Author" CONTENT="Torsten Pfeffer">
<META NAME="Date" CONTENT="Thu, 30 Nov 2004 12:30:00 GMT">
<META NAME="KeyWords" CONTENT="Torsten Pfeffer Private Homepage Infos Bilder Links">
<META NAME="Description" CONTENT="Private Homepage von Torsten Pfeffer">
</head>
<body>
<div class="bgtop">
<div class="header"><img src="../anni/augede.jpg" alt="psychopeppi.de"></div>
<div class="menu"><ul id="menu">
<li><a href="../index.htm">Home</a></li>
<li><a href="../aboutme/index.htm">About Me</a></li>
<li><a href="../pics/index.htm">Bilder</a></li>
<li><a href="../guestbook/index.htm">Gästebuch</a></li>
<li><a href="index.htm">History</a></li>
<li><a href="../links/index.htm">Links</a></li>
<li><a href="../email/index.htm">Kontakt</a></li>
<li><a href="../impressum/index.htm">Impressum</a></li>
</ul></div>
</div>
<div class="bgbody">
<div class="all">
<div class="main"><p id="h1">History</p>
<p id="bildmitte"><img src="tabelle4_thumb.jpg"></p>
<p id="bildmitte"><img src="tabelle3_thumb.jpg"></p>
<p id="bildmitte"><img src="tabelle2_thumb.jpg"></p>
<p id="bildmitte"><img src="tabelle1_thumb.jpg"></p>
<p id="bildmitte"><img src="frames2_thumb.jpg"></p>
<p id="bildmitte"><img src="frames1_thumb.jpg"></p>
<p id="bildmitte"><img src="matrix_thumb.jpg"></p>
</div>
<div class="copyright">
<p id="copyright">designed by psychopeppi.de © 2006</p>
</div>
<div id="bildmitte">
<!-- Counter von http://fc.webmasterpro.de : dieser Code zeigt ihre Besucherzahl an und zählt mit -->
<script type="text/javascript" src="http://fc.webmasterpro.de/counter.php?name=psychopeppi&style=pre&w=170&h=30&bgC=ffffff&p=43roughx" id="fcScriptpsychopeppi"></script>
<noscript><div><img src="http://fc.webmasterpro.de/as_noscript.php?name=psychopeppi" alt="" /></div></noscript>
</div>
</div>
</div>
<div class="bgfoot"></div>
</div>
</body>
</html>
feelx
Grand Admiral Special
Hi
Füge mal ins css für die Klasse .main folgendes hinzu:
Aber teste es noch mit den einzelnen Browsern...
Füge mal ins css für die Klasse .main folgendes hinzu:
Code:
.main {
...
[B][COLOR=SeaGreen] overflow: auto;[/COLOR][/B]
}
Phil S.
Vice Admiral Special
Moin, Moin,
also ich denk du darfst in der .bgbody und in der .main keine Höhe setzen. Dann skalieren die Boxen mit und du kannst scrollen, wenn es zu hoch wird. Eventuell noch mit min-height arbeiten. Habs jetzt aber auf die schnelle nur im FF1.5 probiert.
Weitere Tipps:
- Dein letztes </div> ist zuviel.
. Du vertauschst classes und IDs. Eine ID darf nur einmal vorkommen, eine class mehrmals. Mach also deine bildmitte Elemente als class und deine layer (z.B. .all) als ID.
- Wenn du eine Überschrift hast, dann kennzeichne sie auch dementsprechend so. Also nicht <p id="h1"> sondern wirklich <h1>
Ciao
Phil
also ich denk du darfst in der .bgbody und in der .main keine Höhe setzen. Dann skalieren die Boxen mit und du kannst scrollen, wenn es zu hoch wird. Eventuell noch mit min-height arbeiten. Habs jetzt aber auf die schnelle nur im FF1.5 probiert.
Weitere Tipps:
- Dein letztes </div> ist zuviel.
. Du vertauschst classes und IDs. Eine ID darf nur einmal vorkommen, eine class mehrmals. Mach also deine bildmitte Elemente als class und deine layer (z.B. .all) als ID.
- Wenn du eine Überschrift hast, dann kennzeichne sie auch dementsprechend so. Also nicht <p id="h1"> sondern wirklich <h1>
Ciao
Phil
![[³dgamer]](/data/avatars/m/25/25369.jpg?1596828194){kind=avatar}
Phil S.
Vice Admiral Special
Naja, eigentlich heißt es bei IE bloss anders: height. Ich mach das immer so, dass ich die min-height im Hauptstylesheets vergebe und der IE mittels conditional comment sein eigenes Stylesheet bekommt, in dem dann eben nicht min-height sondern height steht.[³dgamer];2771715 schrieb:
Ciao
Phil
Sorry, dass ich erst jetzt weider online bin und mich melde. Habe die Ratschläge mal ausprobiert und noch einige Fragen dazu...
Jo danke, geht auf anhieb. Ist erst mal die einfachste Lösung. thx
Ja das mit den Klassen und der ID habe ich noch nicht so richtig gerafft. Habe es so gemacht, dass es funzt. Mal sehen, wann ich das noch mal genauer definiere.
Wie kann ich denn von einer Haupt css.datei auf eine Unterdatei z.B. für IE verweisen?
feelx schrieb:
Jo danke, geht auf anhieb. Ist erst mal die einfachste Lösung. thx
Phil S. schrieb:
Ja das mit den Klassen und der ID habe ich noch nicht so richtig gerafft. Habe es so gemacht, dass es funzt. Mal sehen, wann ich das noch mal genauer definiere.
Wie kann ich denn von einer Haupt css.datei auf eine Unterdatei z.B. für IE verweisen?
c.s
Commander
<style type="text/css">@import url(modern_ohne_ie.css) all;</style>
du kannst aber noch zwischen den unterschiedlichen ie s schalten :
bsp.: IE 5.5
<!--[if gte IE 5.5]>
<style type="text/css">@import url(ie55+.css);</style>
<![endif]-->
lohnt sich aber net
mfg
Sehe ioch das richtig, dass diese Zeile in den Head jeder .htm kommt, zusätzlich zu der, die ich schon drin habe. Und diese .css Datei ist dann nur für den IE?
c.s
Commander
es muss jede css in den headereich eingebunden werden.
nur der ie liest diese zeile aus! also hast du dann min. zwei sheets
mfg
nur der ie liest diese zeile aus! also hast du dann min. zwei sheets
mfg
feelx
Grand Admiral Special
BTW: Woran liegt das?nur der ie liest diese zeile aus! also hast du dann min. zwei sheets
mfg
Ich würde trotzdem _nur_ "conditional" Comments einsetzen, denn am ende liest der IE7 zwar das IE-Fix CSS ein, würde es aber auch ohne korrekt darstellen, bzw. stellt es mit Fix sogar falsch dar... [das wäre ja wünschenswert, wenn der IE7 endlich mal richtig darstellen würde...!]
Nur hat man nachher das Problem, dass man alles ohnehin über Conditional Comments lösen muss. Bei der anderen Variante müsste man nur das Conditional Comment ändern. In diesem Fall <!--[if lte IE 6]>
Den minimalen Aufwand hätte man, wenn man per php-include die entsprechenden Zeilen einbinden würde. Dann müsste sie nur 1x im php included file stattfinden.
Vorraussetzung ist natürlich, dass der Server php unterstützt.
c.s
Commander
eigentlich braucht mehere css nicht. der quelltext sieht mir m. n. so kompliziert aus, dass die s erforderlich wäre. eher hat man selber was falsch gemacht, als der browser.
JO, der Server unterstüzt PHP, aber leider nicht der User. In dem fall meine Wenigkeit.
Ähnliche Themen
