4 Tage vergebliche Suche.. :-(

[Sanisha]

Hi,
nachdem ich mich nun schon den vierten Tag "erfolglos" mit dem Layout der Seiten von Freunden rumschlage - gebe ich nun endgülig auf und hoffe auf Hilfe von Profis!

Ich habe eine Seite per CSS erstellt. Diese soll sich verschiedenen Bildschirmbreiten anpassen.
Soweit es sich auf die Unterseiten bezieht, ist vielleicht mein CSS auch nicht soo toll, aber es sieht wenigstens aus.

Aber - die Startseite ist eine Katastrope!

Links sind die Container mit einzelnen Texten und Bildern.
Rechts die Navigation der Seite.

Es sieht zur Zeit so aus, siehe Anlage. Einfach FURCHTBAR!!

Es ist zum verzweifeln.

Kann mir bitte jemand helfen?
Wer es schafft - bekommt auch kleines Dankeschön von mir

Liebe Grüsse
Sani

[Azra]

Die Webseite wird unterschiedlich dargestellt - OK.
Das war schonmal eine schöne Einleitung, du hast aber völlig vergessen zu formulieren was du erreichen möchtest. Zudem können wir ohne HTML+CSS Code oder online Beispiel nichts anfangen.

[sejuma]

Was ist denn daran so furchtbar?
Ich kann nichts furchtbares erkennen außer zwei Unterschieden:

Der IE unterstützt nicht die abgerundeten Ecken und die Abstände in den rechten Kästen fallen in den Browsern unterschiedlich aus.
Letzteres lässt sich durch ein Abstandsreset mit Neudefinition beheben, siehe
http://www.ohne-css.gehts-gar.net/0037.php

Von einer Seite, die sich an unterschiedliche Bidschirmbreiten anpasst, würde ich dir abraten. Das lässt sich zwar mit prozentualen Breitenangaben erreichen, hat aber den Nachteil, dass die Seite dann je nach Breite des Bildschirmfensters unterschiedlich dargestellt wird. So können insbesondere die Proportionen von Bildern zu Texten verloren gehen, was je nach Einzelfall nicht mehr ansprechend aussieht.

Konkretisiere ggf. nochmal das Problem und poste einen Link zur Seite.

[Sanisha]

Guten Morgen,

herzlichen Dank für die Rückmeldungen.

Naja, was ich errreichen möchte ist, das in der Artikelspalte links beim Firefox nicht sooo viel Platz ist und die Navigation rechts weiter runter läuft als gehöre sie nicht zur Seite.
Beim IE sieht das ja wenigstens ein bisschen passend aus.


Die CSS ist hier:

Code: Alles auswählen

body {
   font-family:Arial,sans-serif; Verdana; Tahoma,sans-serif;
   font-weight:normal;
   margin: 0;
   background-color: #FCE9CD; /*dk green*/;
   color: #660000; /*black*/
   
}


/*===============indicates no border around any image ============*/
body img {
   border: 0px;
   text-decoration: none;
}
/* ============ margins auto center the container on the page ==========*/
#container {
   margin: 10px auto 10px auto;
   padding: 20px;
   background-color: #f0ddc3;
   width: 95%;
}

p-n  {
margin-top: 0px;
margin-bottom: 0px;
COLOR: #660000;
font-family:Verdana,Tahoma,Arial,sans-serif;
font-weight:normal;
vertical-align:middle;

}

p  {
COLOR: #660000;
font-family:Arial,sans-serif; Verdana,Tahoma,sans-serif;
font-size: 10px;
font-weight:normal;
vertical-align:middle;
}

p.klein { font-size:9px; }
p.start {font-size: 15px;}
p.gross  { font-size:20px;}
p.unter { font-size:17px;}


/*=================== styles for top banner ========================*/
#banner {
   background-position: center;
   padding: 0px;
   background-color: #f0ddc3;
   background-image: url('../banner/neue/banner-neu-2011.jpg');
   height: 200px;
   background-repeat: no-repeat;
   color: #000000;
}
/*=================== styles for top menu ======================*/
#topmenu {
   background-color: #f0ddc3;
   text-align: center;
   font-size: .90em;
   padding-top: 5px;
   padding-bottom: 5px;
   margin-top: 5px;
   margin-bottom: 5px;
   margin-right: 10px;
   color: inherit;
   border-top: 2px solid #660000;
   border-bottom: 2px solid #660000;
}


#topmenu ul {
   margin: 0;
   padding: 0;
   list-style-type: none;
}
#topmenu li {
   display: inline;
   list-style-type: none;
   padding: 0px;
   padding-right: 1em;
}
/*==============all site links==============*/
a:link {
   font-weight: bold;
   font-family:Arial,sans-serif; Verdana,Tahoma,sans-serif;
   color: #660000;
   font-size: 13px;
   background: transparent;
   text-decoration: none;
}
a:visited {
   font-weight: bold;
   color: #660000;
   background: transparent;
   font-size: 13px;
   padding: 0px;
   text-decoration: none;
}
a:hover {
   font-weight: bold;
   text-decoration : none;
   background: #660000;
   color: #F8DCB6;
}
a:active {
   font-weight: bold;
   text-decoration : none;
   background: #660000;
   color: #F8DCB6;
}
/*====================== styles for main content area =========================*/
#content {
   margin-right: 280px;
   padding-right: 12px;
   text-align: left;
   vertical-align: top;
   width:auto;
}

#content2 {
   margin-right: 280px;
   padding-right: 5px;
   text-align: left;
   vertical-align: top;
   width: 1180px;
}

/*===========content area list items==============*/
#content ul li {
   list-style-image: url('images/green-bullet-bg.gif');
   margin: 2px;
   padding: 2px;
}
#content li li {
   list-style-image: url('images/green-bullet-sm.gif');
   padding: 2px 0;
}

/* *****************************************************
Navigation Bar - Left hand side
**************************************************** */

#rightnav {
   color: #000;
   padding: 8px 10px 10px 10px;
   margin: 0px 10px 10px 10px;
   border: 0px solid #242F24;
   float: right;
   width: 21%;

}

#rightnav-seiten {
   color: #000;
   padding: 0px 10px 10px 10px;
   margin: 0px 10px 10px 10px;
   border: 0px solid #242F24;
   float: right;
   width: 21%;

}

#rightnav ul {
   list-style: none;
   margin: 0;
   padding: 0;
   margin-bottom: 4px;
}
#rightnav li {
   list-style: none;
   padding: 2px 0;
}
#rightnav ul li {
   text-decoration: none;
   margin-top: 2px;
}
#rightnav ul ul li {
   padding: 3px 0 3px 5px;
   font-size: 80%;
   font-weight: normal;
}
/*============== Styles for footer ===================*/
#footer {
   border-top: 2px solid #660000;
   clear: both;
   padding: 5px;
   background-color: #f0ddc3; /*dk green*/;
   text-align: center;
}
#footer p {
   margin-top: 0px;
   margin-bottom: 0px;
}
/*================== general styles =================*/
hr {
   width: 50%;
   text-align: center;
   background-color: #660000;
   height: 5px;
}


/* =================Styles for heading tags =============== */
h1, h2, h3, h4 {
   color: #F8DCB6; /*dk green*/;
   background-color: #660000;
}
h1 {
   font-size: 19px;
   color: #F8DCB6;
   background: #660000; /*lt green*/
}
h2 {
   font-size: 1em;
}
h3 {
   font-size: .9em;
}
h4 {
   color: #F8DCB6;
   font-size: 17px;
   padding: 0px 0px 0px 0px;
   margin: 0px 0px 0px 0px;
}



/*================used to center anything==============*/
.center {
   text-align: center;
}
/* ============floats images to right or left ============*/
.imgrgt {
   float: right;
   padding-left: 5px; ;
}
.imglft {
   float: left;
   padding-right: 5px;
   
}
.smtxt {
   font-size:small;
}


.div1
{
border:3px solid #660000;
left:10px;top:50px;
-moz-border-radius:30px;
-khtml-border-radius:30px;
padding:5px;
}

.div2
{
border:1px solid #660000;
left:200px;top:50px;
-moz-border-radius:10px;
-khtml-border-radius:30px;
padding:12px;
box-shadow: 10px 10px 5px #999;
-moz-box-shadow: 10px 10px 5px #999; /* Mozilla Firefox */
-webkit-box-shadow: 10px 10px 5px #999; /* Google Chrome */
}

.div3
{
border-width: 7pt;
border-color:#660000;
border-style:double;
padding:5px;
}


Bei größeren Bildschirmen sieht das ganze auch besser aus, da kommt aber auch andere CSS zum tragen. Nur durch die Vergrößerung klappt das irgend wie..

Muß dazu sagen, bin in CSS eigentlich noch Anfänger und lese und arbeite mich jetzt seit einer Woche erst in die Materie ein. Bitte also um Nachsicht!

DANKE für Hilfe!!

Liebe Grüsse
Sani

[Azra]

Auflösung 1680*1050
Wenn ich mir die Seite in Firefox(4) ansehe ist kein großes Loch wie in deinem Screenshot vorhanden. Im IE(8) ebenfalls nicht.
Ich habe auch die Auflösung an 1280*1024 Angepasst und kein Loch ist zu sehen. Hm

[Sanisha]

Hallo,

ja, bei größeren Auflösungen klappt das auch alles wunderbar.
Bei beiden Browsern, sogar Chrome und Safari funzt. Ich verwende für die größeren ja eigene CSS.
NUR bei der doch noch bei mehr als 50% der Nutzer verwendete Auflösung 1024x768 da zerreist mir das alles...
Kriege hier die KRISE!!!

Was kann ich tun?

lg
Sanisha

[Azra]

Verstehe.
Wie wärs wenn du für die content-Elemente Werte wie min-width, max-width nutzt? Wenn der Benutzer dann das Fenster skaliert kannst du es somit kontrollieren.
Zudem du es nicht jedem Recht machen kannst. Was ist wenn der Nutzer Addons hat die das Fenster nochmehr verkleinern oder die Favoriten-Leiste am linken Blidschirmrand. Irgendwo ist einfach Ende.

[Sanisha]

Hi,

nach 5 Tagen habe ich nun endlich selber eine Lösung gefunden.
Nun passt alles. Lag einfach an den Unterschiedlichen Darstellungen und Abständen der Aufzählungslisten beim IE und Firefox.
Das habe ich nun mit line-height korrigiert. Bei den neuen Browsern sieht jetzt alles top aus.
Alles bekommt man sicher nicht ganz sauber hin.. DANKE für eure Hilfe!

liebe Grüsse
Sani