✔ Irgendwie nicht zufrieden

  • Themenstarter Themenstarter GreenThunder
  • Beginndatum Beginndatum
Status
Nicht offen für weitere Antworten.
G

GreenThunder

Hallo,

ich hab zwar das Design so einigermaßen hinbekommen, doch bin ich nicht wirklich zufrieden damit.
Zumindestens was die techn. Seite betrifft. Vom Aussehen her ist es so ok.
Also was mich z.B. stört ist,
- dass die Seite am rechten Rand klebt und nicht zentriert ist.
- dass beim verkleinern des Fensters der rechte "Hintergrundbalken" nach unten rutscht
- und dass beim IE die Abstände so groß sind.

Ich geb euch mal den CSS-Quellcode und hoffe das ihr mir helfen könnt.

PHP: 
body 
{
 font-family:Verdana;
 font-size:9px;
 background-color:#979797;
 margin:0;
 padding:0;
 overflow:auto;


}
h1 {font-size:18px;color:#000000;margin-bottom:0px;}
h2 {font-size:16px;color:yellow;}
h3 {font-size:14px;}
p  {margin-top:0px;margin-left:10px;margin-right:5px;}

a:link, a:visited, a:active, a:hover
{ 
  text-decoration:none;
  font-weight:bold;
  color:yellow;
  font-size:10px;
  }
  
img {
	border:none;
}

a:active, a:hover { 
 text-decoration:underline;
}

.left {
float:left;
margin-bottom:0px;

}

.right {
float:right;
margin-bottom:0px;
margin-right:10px;
width:300px;
}

.ueberschrift {
  background-color:yellow;
  color:#000099;
  font-weight:bold;
  width:580px;
}

.ueberschriftstart {
  background-color:yellow;
  color:#000099;
  font-weight:bold;
  width:270px;
}

.text {
  margin-left:10px;
  margin-bottom:10px;
  width:270px;
}

.textarchiv {
  margin-left:10px;
  margin-bottom:10px;
  width:350px;
  
}


#content {
	margin:0px;
	float:left;
	width:600px;
	height:800px;
	padding:0px;
	border:1px solid black;
    background-color:;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	background-color: #000099;
	color: #FFFFFF;
   overflow-y:auto;
   overflow-x:hidden;
}

table {
	margin-left:10px;

}
    
td{
   padding-left:25px;
   padding-right:25px;
}


Website
 
Setze die Grafik mal als Hintergrundgrafik ein (vgl. Faux-Column-Technik) und zentriere alles wie folgt:
HTML: 
<body>
<div id="container">
	…
</div>
</body>
Code: 
html, body {
	margin: 0;
	padding: 0;
}
body {
	text-align: center;
}
#container {
	margin: 0 auto;
	width: 780px;
	text-align: left;
}
Übrigens solltest du dein XHTML-Dokument noch validieren (siehe Validierungsbericht).
 
Danke erstmal für den Tipp mit dem zentrieren!

Das mit dem Hintergrundbild ist mir allerdings noch ein wenig suspekt. Ich kann es zwar einfügen und auch an die richtige Stelle setzen, doch druch die Prozentangabe verschiebt es sich beim verkleinern des Fensters so, dass es nicht mehr zu sehen ist.

Testseite

Im Body-Tag:
PHP: 
 background: #ccc url(../bilder/grunge.jpg) repeat-y 22.5% 0;

Außerdem sind es ja insgesamt 3 Grafiken (links, rechts, unten) wie bekomme ich rechts und unten mit hinein?



P.S. Validieren hab ich in der Uffrechung janz vergessen ;)
 
Meine Intention war eher, dass du aus den beiden Hintergrundgrafiken eine machst und sie dann im body-Element darstellst.
 
Ok, hab alle drei in ein Bild gebastelt. Es klappt auch fast ganz gut.
Nur wenn man die Auflösung verkleinert (<1280x1024) passt es nicht mehr richtig. Woran liegt das und viel wichtiger wie kann ich das beheben?

Ich seh gerade im IE stimmt es bei 1280x1024 nicht wirklich, dafür bei 1024x768!

L I N K


+++edit+++

Mittlerweile hab ich die Seite Valid HTML, nur mit dem Valid CSS klappt es nicht ganz wegen
PHP: 
overflow-y:auto;
   overflow-x:hidden;
 
Zuletzt bearbeitet von einem Moderator:
Vielleicht hängt es mit den unterschiedlichen Breitenangaben für das DIV .mitte (580px) und .content (600px) zusammen?
 
michaelsinterface hat gesagt.:
Vielleicht hängt es mit den unterschiedlichen Breitenangaben für das DIV .mitte (580px) und .content (600px) zusammen?
Zum Vergrößern anklicken....
Leider nicht!

Hab das Hintergrundbild jetzt mal als Ebene eingefügt und mit "position:absolute;" positioniert.
Nun hab ich nicht mehr das "Verschiebungsproblem", dafür ist die Gesamte Seite wieder nicht zentriert:confused:
 
Zuletzt bearbeitet von einem Moderator:
In der Hintergrundgrafik differenziert die Breite des linken und rechten "grunge"-Rahmen um ca.12 Pixel, womit der "Platzhalter" für den Inhalt in der Grafik außermittig sitzt, der darüber liegende Inhalt aber mit margin:0 auto im Browserfenster horizontal zentriert ist.

Diese Asymmetrie versuchst du nun auszugleichen, indem du die Hintergrundgrafik 53% vom linken Fensterrand positionierst. Und das dürfte meines Erachtens der Knackpunkt sein.

Vielleichst solltest du stattdessen den "Platzhalter" in der Grafik zentrieren und anschliessend die Hintergrundgrafik 50% vom linken Elementrand positionieren.

So sollte es dann zu keinen Verschiebungen kommen, wenn du die Bildschirmauflösung oder die Größe des Browserfensters veränderst.

GreenThunder hat gesagt.:
Hab das Hintergrundbild jetzt mal als Ebene eingefügt und mit "position:absolute;" positioniert.
Nun hab ich nicht mehr das "Verschiebungsproblem", dafür ist die Gesamte Seite wieder nicht zentriert
Zum Vergrößern anklicken....
Das liegt wohl daran, daß du das DIV .content 81 Pixel vom linken Elternelement-Rand positioniert hast.
 
ok, das probier ich mal!

++++++edit++++++++

Danke, das hat geholfen! :)

Hast du vielleicht noch einen Tipp wegen den großen Abständen beim IE? Das die verschiedenen Browser es auch verschieden Interpretieren weiß ich, aber wie man damit umgeht weiß ich nicht.
 
Zuletzt bearbeitet von einem Moderator:
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück