000
15.08.2007, 00:17
CPoly
|
Ich habe meine erste Seite mit css und php erstellt ( http://sv-gg.cpoly-design.de/ ).
Der Aufbau der Seite (jeweils ein div) :
-Header (120px hoch, von links nach rechts)
-Wrapper (darin spielt sich alles ab, also Nav und Content). Wrapper ist in der Seitenmitte und sollte vom oberen Rand 122px Abstand haben und unten bündig sitzen. Außer im IE funktioniert das mit "bottom : 0px" und "top : 122px" sehr gut. Tja, aber wie gesagt, nicht im IE.
entsprechender Ausschnitt aus der css Datei :
#div_header {
background-image : url(images/header_bg.jpg);
background-color : #e0efff;
width : 100%;
height : 120px;
border-bottom : 2px solid #b6d9ff;
text-align : center;
overflow : hidden;
}
#div_wrapper {
height : 78%; /*das passt leider nicht richtig*/
background-color : #eaf8ff;
width : 750px;
margin-right : 0;
padding-bottom : 0;
padding-right : 0;
position : absolute;
left : 50%;
margin-left : -377px;
border-left : 2px solid #b6d9ff;
border-right : 2px solid #b6d9ff;
}
Weiteres Problem : Die star-html-hacks funktionieren nicht mehr (seitdem ich zwecks Validierung ein DOCTYPE eingefügt habe)
Bitte schlagt mich nicht, habe vorher weder css noch php gekannt.
--
|
|
Profil || Suche
|
001
15.08.2007, 00:25
Chumper
|
Also es soll unten bündig ansitzen und wenn mehr Inhalt drin ist, soll es scrollbar sein?
--
Wer das Schicksal durschauen will, muss es überleben!
Dieser Beitrag wurde am 15.08.2007 um 00:25 von Chumper bearbeitet.
|
|
|
Profil || Suche
|
002
15.08.2007, 00:51
CPoly
|
Exakt. Habe mal den Text auf der Startseite verlänger damit man sieht dass das Scrollen funktioniert.
Edit: ich hab deinen Post nochmal gelesen und vieleicht hab ich es falsch verstanden. Also innerhalb der Box soll gescrollt werden und nav und header bleiben fest (wie auf der Startseite zu sehen.)
--
Dieser Beitrag wurde am 15.08.2007 um 00:58 von CPoly bearbeitet.
|
|
|
Profil || Suche
|
003
15.08.2007, 02:33
Chumper
|
Erstmal seh ich gar keinen Text, wenn ich mit dem IE6 reingehe, IE7 ist aber ok...
Ich guck mir das mal eben an.
€dit: Ich hab mich mal rangesetzt.
Hab einige kleine Änderungen gemacht.
Sieht auch in FF2, IE6, IE7, Netscape7, Opera 9 ganz ordentlich aus, scrollen geht auch.
Habe das <div id="Container_All"> hinzugefügt, aber sonst nichts bewegendes.
Im IE6 und Opera 9 sind lediglich ganz unten 1-3 pixel frei, das kannst du dann ja noch genauer beheben.
Webspace ist etwas lahm, notfalls nochmal refreshen.
Hier Probe --> KLICK
index.html
<?xml version='1.0' encoding='iso-8859-1'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
<title>Tolle Seite</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body id="body">
<div id="Container-All">
<div id="div_header">
<img class='noborder' alt="head" src="images/header.jpg" />
</div>
<div id="div_wrapper">
<div id="div_wrapper_nav">
<div id="div_nav">
<table style='text-align:center;' width='150' cellspacing='0' cellpadding='0' class='noborder'><tr><td><img src='images/nav_top.jpg' style='vertical-align:bottom;' alt='' /></td></tr><tr><td><img src='images/nav_startseite_strich.jpg' class='noborder' style='vertical-align:bottom;' alt='' />
<a href='index.php?show=mitglieder'><img src='images/nav_mitglieder.jpg' class='noborder' style='vertical-align:bottom;' alt='' /></a>
<a href='index.php?show=bilder'><img src='images/nav_bilder.jpg' class='noborder' style='vertical-align:bottom;' alt='' /></a>
<a href='index.php?show=gaestebuch'><img src='images/nav_gaestebuch.jpg' class='noborder' style='vertical-align:bottom;' alt='' /></a>
<a href='index.php?show=termine'><img src='images/nav_termine.jpg' class='noborder' style='vertical-align:bottom;' alt='' /></a>
<a href='index.php?show=links'><img src='images/nav_links.jpg' class='noborder' style='vertical-align:bottom;' alt='' /></a>
<a href='index.php?show=impressum'><img src='images/nav_impressum.jpg' class='noborder' style='vertical-align:bottom;' alt='' /></a></td></tr><tr><td><img src='images/nav_bottom.jpg' style='vertical-align:top;' alt='' /></td></tr></table>
</div>
<div id="div_counter">
<table style='text-align:center;' width='150' cellspacing='0' cellpadding='0' class='noborder'><tr><td><img src='images/box_top.jpg' style='vertical-align:bottom;' alt='' /></td></tr><tr><td class='bg_box'><span id='counter_text'>Besucher : 26</span></td></tr><tr><td><img src='images/box_bottom.jpg' alt='' /></td></tr></table>
</div>
</div>
<div id="div_content">
<p id='text'>
Schön dass du her gefunden hast!
<br />
<br />Das hier ist die Webseite der Schülervertetung des Göttenbach-Gymnasium!
<br />
<br />Scroll mich!
<br />
<br />Scroll mich!
<br />
<br />Scroll mich!
<br />
<br />Scroll mich!
<br />
<br />Scroll mich!
<br />
<br />Scroll mich!
<br />
<br />Scroll mich!
<br />
<br />Scroll mich!
<br />
<br />Scroll mich!
<br />
<br />Scroll mich!
<br />
<br />Scroll mich!
<br />
<br />Scroll mich!
<br />
<br />Scroll mich!
<br />
<br />Scroll mich!
<br />
<br />Scroll mich!
<br />
<br />Scroll mich!
<br />
<br />Scroll mich!
<br />
<br />Scroll mich!
<br />
<br />Scroll mich!
<br />
<br />Scroll mich!
<br />
<br />Scroll mich!
<br />
<br />Scroll mich!
<br />
<br />Scroll mich!
<br />
<br />Scroll mich!
<br />
<br />Scroll mich!
<br />
<br />Scroll mich!
<br />
<br />Scroll mich!
<br />
<br />Scroll mich!
<br />
<br /></p>
</div>
</div>
</div>
</body>
</html>
style.css
a:link
{
color:#005ac0;
text-decoration:none;
}
a:visited
{
color:#005ac0;
text-decoration:none;
}
a:active
{
color:#005ac0;
text-decoration:none;
}
a:hover
{
color:#000000;
text-decoration:none;
}
.bg_picbox
{
background-image:url(images/picbox_mid.jpg);
background-repeat:repeat-y;
background-position:0px 0px;
}
.bg_box
{
background-image:url(images/box_mid.jpg);
background-repeat:repeat-y;
background-position:0px 0px;
}
.noborder
{
border:0px;
}
.center
{
text-align:center;
}
#text {
text-decoration:none;
font-family:Arial;
font-size:0.8em;
color:#000000;
}
#counter_text {
text-decoration:none;
font-family:Arial;
font-weight: bold;
font-size:0.9em;
color:#000000;
}
#nav_text {
text-decoration:none;
font-family:Arial;
font-size:0.8em;
color:#000000;
}
#body {
background-color:#fff8cc;
margin:0px;
padding:0px;
height:100%;
overflow:hidden;
}
#Container_All {
height:100%;
}
#div_header {
background-image:url(images/header_bg.jpg);
background-color:#e0efff;
width: 100%;
height: 120px;
border-bottom:2px solid #b6d9ff;
text-align:center;
overflow:hidden;
}
#div_wrapper {
height:auto;
top:122px; !important;
height:81%;
bottom:0px;
background-color:#eaf8ff;
width: 750px;
margin-right: 0px;
padding-bottom: 0px;
padding-right : 0px;
position:absolute;
left:50%;
margin-left:-377px;
border-left:2px solid #b6d9ff;
border-right:2px solid #b6d9ff;
}
#div_wrapper_nav {
float:left;
background-color : #ffe6af;
padding-left: 0px;
padding-top: 0px;
margin-right: 0px;
margin-left: 10px;
margin-top: 0px;
width: 150px;
height:100%;
border-left:2px solid #b6d9ff;
border-right:2px solid #b6d9ff;
}
#div_nav {
background-color : transparent;
padding-left: 0px;
padding-top: 0px;
margin-right: 0px;
margin-left: 0px;
margin-top:15px;
width: 150px;
height: 240px;
border: 0px solid black;
text-align : center;
}
#div_counter {
background-color : transparent;
padding-left: 0px;
padding-top: 0px;
margin-right: 0px;
margin-left: 0px;
margin-top:0px;
width: 150px;
height: 10px;
text-align : center;
border : 0px solid black;
}
#div_content {
padding-top: 0px;
padding-right: 15px;
margin-left: 15px;
margin-right: 0px;
margin-top:0px;
width: 556px;
height: 100%;
overflow:auto;
background:transparent;
border: 0px solid black;
}
* html #div_wrapper {
margin-top:-2px;
margin-bottom:-2px;
}
--
Wer das Schicksal durschauen will, muss es überleben!
Dieser Beitrag wurde am 15.08.2007 um 03:12 von Chumper bearbeitet.
|
|
|
Profil || Suche
|
004
15.08.2007, 11:17
CPoly
|
Funktioniert bei mir auf keinem getesteten Browser. Überall geht der scrollbar im Nirgendwo weiter. Das liegt scheinbar daran, das "container_all" nicht alles umschließt, sondern nur den header (das sehe ich mit dem Firefox Plugin "Firebug").
Das liegt scheinbar daran, das sich der wrapper wegen "position:absolute;" nicht beeinflussen lässt.
Wie kann ich den wrapper doch mittig ausrichten und trotzdem bündig am Boden?
danke für deine Mühe.
--
|
|
|
Profil || Suche
|
005
15.08.2007, 13:21
Chumper
|
normalerweise geht das mit margin:auto; dann sollte das mittig sitzen.
Aber deinen Einwand kann ich trotzdem nicht nachvollziehen.
FF
IE6
IE7
Opera 9
Netscape 7
€dit: Schreibfehler in style.css: Container-All statt Container_All
--
Wer das Schicksal durschauen will, muss es überleben!
Dieser Beitrag wurde am 15.08.2007 um 13:45 von Chumper bearbeitet.
|
|
|
Profil || Suche
|
006
15.08.2007, 14:14
CPoly
|
Vieleicht ist es bei dir Zufall das durch die 81% beim wrapper es ungefähr passt. Ich hatte ja nicht ohne Grund vorher 78%.
--
Dieser Beitrag wurde am 15.08.2007 um 14:14 von CPoly bearbeitet.
|
|
|
Profil || Suche
|
007
15.08.2007, 16:08
Chumper
|
Wäre es nicht eine Überlegung wert, den Header oben zu fixen und das menü auch, dann ist die ganze Seite scrollbar, aber nur der inhalt bewegt sich.
Weiteres Problem : Die star-html-hacks funktionieren nicht mehr (seitdem ich zwecks Validierung ein DOCTYPE eingefügt habe) Sie funktionieren doch trotzdem.
--
Wer das Schicksal durschauen will, muss es überleben!
Dieser Beitrag wurde am 15.08.2007 um 16:10 von Chumper bearbeitet.
|
|
|
Profil || Suche
|
008
22.08.2007, 21:21
CPoly
|
http://sv-gg.cpoly-design.de/
Habs jetzt auf eine andere Art gelöst, die mir gut/besser gefällt. Vieleicht könntest du mir ja den Gefallen tun und mir sagen ob die Seite auf all deinen Browsern gleich aussieht und ein Referenz Bild aus irgendeinem Browser zeigen, damit ich weis dass es nicht auf jedem deiner Browser anderst aussieht als ich es will ;).
--
Dieser Beitrag wurde am 22.08.2007 um 21:21 von CPoly bearbeitet.
|
|
|
Profil || Suche
|
009
22.08.2007, 21:48
rawe
|
IE3 hat probs mitm 16bit-Teilsystem :P
IE4 Designsalat
IE5,IE6,IE7,FF2,GranParadiso5,Netscape ok
in Opera hängt der Content direkt ohne Lücke am Menü
diverse Browser ohne Installation zum selber testen:
opera: http://download.freenet.de/archiv_p/portable_opera_(usb)_8075.html
ie3-6: http://tredosoft.com/Multiple_IE
ie7: http://www.angelux.net/2006/11/13/internet-explorer-7-portable.html
firefox: http://www.zdnet.de/downloads/prg/3/7/deAY37-wc.html
GranParadiso5 portable kannst du dir aus Firefox portable /FirefoxLoader.exe basteln (GP5 installer mit "universal extractor" entpacken)
--
O o
/¯¯/_o___o___o___o____o__
\__\¯¯o¯¯¯o¯¯¯¯¯¯o¯¯¯¯¯¯o
i'm doctoroctogonnafuckinggonnapus blaaaaaaaaaaargggggg-
Dieser Beitrag wurde am 22.08.2007 um 21:51 von rawe bearbeitet.
|
|
|
Profil || Suche
|
010
22.08.2007, 22:22
CPoly
|
Meint ihr den 3er und 4er IE sollte man ignorieren? Also ich kenne Niemanden der nicht mindestens win xp hat. Ich werde sie einfach ignorieren :-P.
Das mit dem Opera bekomm ich hin.
Danke für die Links! Genau sowas hab ich gesucht ;).
--
Dieser Beitrag wurde am 22.08.2007 um 22:23 von CPoly bearbeitet.
|
|
|
Profil || Suche
|
011
22.08.2007, 22:28
rawe
|
wer einen >10 Jahre alten 16Bit-Browser benutzt ist selbst schuld ^^ Da machts mehr Sinn die Seite mit Lynx zu Analysieren was die Suchmaschinen so mirkreigen.
--
O o
/¯¯/_o___o___o___o____o__
\__\¯¯o¯¯¯o¯¯¯¯¯¯o¯¯¯¯¯¯o
i'm doctoroctogonnafuckinggonnapus blaaaaaaaaaaargggggg-
|
|
|
Profil || Suche
|
012
22.08.2007, 22:39
CPoly
|
So, es sollte jetzt auch im Opera funktionieren. Ich geb mich damit zufrieden und mache mich an den Inhalt.
Danke euch.
--
|
|
|
Profil || Suche
|
013
29.08.2007, 14:01
Exec
|
du solltest die bilder der aktiven links mal vorladen lassen, weil die immer erst beim öffnen des unterpunktes geladen werden und dann das menu ruckelt (sprich: menupunkt fehlt und wenn bild geladen ist rutscht der rest nach unten)
alternativ könntest du den links auch eine fest höhe geben, da ruckelts wenigstens nicht mehr, sondern das bild fehlt nur - gepaart mit alt-text wäre das sicher die beste lösung.
vorladen könntest du z.b. indem du das bild ans seitenende machst und es einfach unsichtbar "darstellen" lässt.
zweite möglichkeit wäre es das menu als ein großes bild zu machen, pepe (tubgirl) hat da mal was auf seinem blog drüber geschrieben, afair.
mfg
--
"selbermachen rockt am meisten :D" - -LeJean-
|
|
|
Profil || Suche
|
014
29.08.2007, 16:09
CPoly
|
Ist mir auch schon aufgefallen. Danke für den Hinweis. Werde das mit dem Vorladen oder der Höhe mal testen.
--
|
|
|
Profil || Suche
|
.
