Scooby's Folio

[Scooby]

Bin grad dabei ein Portfolio zu machen und steh vor folgendem Probelm:
Ich versuch einen Rahmen zu machen, mit zwei abgerundeten Ecken, wollte es mit JPG's realisieren, bei IE (ausnahmsweise mal ) klappt alles, nur Mozilla spinnt rum, wie es bei anderen Browsern aussieht weiß ich nicht.
Hier mal ein Link zur angefangen Page:
http://www.den-martins.de/portfolio/index.html

[sadcrow]

Dann poste doch mal die css.

[Scooby]

Code: Alles auswählen

/* CSS Document */

body {
   background: #303030;
   font-family: Geneva, Arial, Helvetica, sans-serif;
   margin: 0;
   padding: 0;
}

.h1 {
   color: #75c022;
}

.h2 {
   color: #FFFFFF;
}

.h3 {
   color: #8b8b8b;
}

#top1 {
   width: 370px;
   font-size: 48px;
   background-image: url(images/ecken.jpg);
   background-position: right top;
   background-repeat: no-repeat;
   margin-top: 100px;
   line-height: 75px;
   text-align: left;
}

#top2 {
   margin-top: -10px;
   width: 370px;
   font-size: 14px;
   text-align: left;
}

#navi_a {
   width: 370px;
   height: 50px;
   font-size: 18;
   text-align: center;
   margin-top: 10px;
   background: #FFFFFF;
   background-image: url(images/lo.jpg);
   background-position: left top;
   background-repeat: no-repeat;
}

#navi {
   width: 364px;
   height: 44px;
   margin: 3px;
   background: #303030;
   background-image:url(images/lolo.jpg);
   background-position: left top;
   background-repeat: no-repeat;
}

[Ingo]

Hi, Scooby.

Ich könnte so auf die Schnelle (bin im Streß ;o) nicht sagen, warum das so nicht klappt.
Als Alternative bietet sich aber erst einmal folgendes an:

Code: Alles auswählen

#navi      { witdh:364px; height:44px, padding: 3px; .... }

#navi_a    {  witdh:364px; height:44px; margin: 0px; ....  }


Das ergibt ebenfalls eine Breite von 370px und läuft auch im FF.

Gruß, Ingo

(Edit: pixel-Angaben auf 364/44 geändert )

[Scooby]

Konnte jetzt deine Rechnung bezüglich auf die Höhe und Breite nicht ganz verfolgen, aber jetzt klappts, hier der jetztige Code:

Code: Alles auswählen

#navi_a {
   width: 370px;
   height: 50px;
   font-size: 18;
   text-align: center;
   margin-top: 10px;
   padding: 3px;
   background: #FFFFFF;
   background-image: url(images/lo.jpg);
   background-position: left top;
   background-repeat: no-repeat;
}

#navi {
   width: 370px;
   height: 50px;
   background: #303030;
   background-image:url(images/lolo.jpg);
   background-position: left top;
   background-repeat: no-repeat;
}

Hat vllt jemand Safari um zu testen obs dort auch geht?

[Ingo]

Joar, ich meinte das so: die Breite eines Elements (Platz zwischen den Border-Innenkanten)
setzt sich ja zusammen aus "width" (364px) und padding (links und rechts je 3px), Summe
also 370px. Bei deiner Variante ist das dann eben 370px width + 2 mal 3px padding = 376px
Platz zwischen den Border-Innenkanten von #navi_a.

Edit: Safari-Screenshots gibt's derzeit hier.

[Scooby]

Mit der Korrigierung im oberen hab ichs jetzt verstanden

Edit:
Hier der aktuelle Zwischenstand, schon fast das Template
Hab mich schon lang nicht mehr so mit CSS rumgeqäult.
Link zur Seite: http://www.den-martins.de/portfolio/index.html

CSS-Code:

Code: Alles auswählen

body {
   background: #303030;
   font-family: Geneva, Arial, Helvetica, sans-serif;
   margin: 0;
   padding: 0;
}

.h1 {
   color: #75c022;
}

.h2 {
   color: #FFFFFF;
}

.h3 {
   color: #8b8b8b;
}

#top1 {
   width: 370px;
   font-size: 48px;
   background-image: url(images/ecken.jpg);
   background-position: right top;
   background-repeat: no-repeat;
   margin-top: 100px;
   line-height: 75px;
   text-align: left;
}

#top2 {
   margin-top: -10px;
   width: 370px;
   font-size: 14px;
   text-align: left;
}

#navi a {
   text-decoration: none;
   color: #FFFFFF;
   padding-left: 10px;
   padding-right: 10px;
}

#navi a:hover {
   text-decoration: none;
   color: #8b8b8b;
}

#navi_a {
   width: 370px;
   height: 35px;
   margin-top: 10px;
   padding: 3px;
   background: #FFFFFF;
   background-image: url(images/lo.jpg);
   background-position: left top;
   background-repeat: no-repeat;
}

#navi {
   width: 370px;
   height: 35px;
   line-height: 32px;
   font-size: 19px;
   text-align: center;
   background: #303030;
   background-image: url(images/lolo.jpg);
   background-position: left top;
   background-repeat: no-repeat;
   color: #FFFFFF;
}

#main_a {
   width: 370px;
   height: 497px;
   padding: 0px 3px 3px 3px;
   background: #FFFFFF;
   background-image: url(images/ru.jpg);
   background-position: right bottom;
   background-repeat: no-repeat;
}

#main {
   width: 370px;
   height: 497px;
   background: #303030;
   background-image: url(images/ruru.jpg);
   background-position: right bottom;
   background-repeat: no-repeat;
}

Falls euch Fehler auffallen, nur her damit

[Ingo]

Hm, sieht wirklich fein aus. Vllt. noch ein bisschen margin-bottom für #main_a, damit bei kleineren
Auflösungen der weiße Rahmen beim Scrollen nicht am unteren Viewport-Rand kleben bleibt ?

PS: *ingo merken: nicht rechnen wenn gerade kaum zeit*

[Chris]

Ich würde das Weiss nicht im Kontrast zu Grün stellen... Wenn du das Grün behalten willst, würde ich ein leichtes Gelb nehmen... Sonst sieht es schon gut aus!

[Scooby]

Hmm, weiß nicht, sieht irgendwie seltsam aus mit gelb.
http://www.den-martins.de/portfolio/gelbindex.html
http://www.den-martins.de/portfolio/index.html

[Chris]

Hmmm... So schlechte finde ich es nicht, allerdings ist mein Bildschirm auf Arbeit nicht optimal eingestellt, dass kann also täuschen...

[Scooby]

Hab nochmal ein neues Design probiert, Kritik ist erwünscht.

[schnuppel]

Hallo,

also ich find es gar nicht schlecht, bis auf dass sich die Abrundung zu Oft wiederholt. Villeicht solltest Du zwischen der Navigation und dem Inhalt einen Freiraum lassen. Genauso zwischen dem Inhalt und dem Footer.

Vom grundsätzlichen Style her denke ich dass es schon passt.

Gruß

Schnuppel

[Scooby]

So, hab endlich mal weiter gemacht, die CSS/HTML-Galerie hab ich doch nicht verwendet und stattdessen Lightbox benutzt
Die Seite ist in HTML 4.01 geschrieben, allerdings meckert der Validator bei einer Seite bei den Tabellen rum (fürs Kontaktformular), da ich bei PHP noch sehr im Anfangsstadium bin hab ich das Kontaktformular nicht selber geschrieben, bzw. nur sehr wenig und arbeite auch sonst nicht mit Tabellen und weiß deshalt nicht wie es da aussieht mit HTML 4.01 und Tabellen.
Falls ich da nicht weiterkommen sollte, schreib ich alles mal in XHTML 1.0 um.

Die Seite: http://www.1a-edv.com/graphicportfolio/index.html

So, jetzt meckert alle mal rum

EDIT: Meckern zählt noch nicht, die Bilder von der Galerie wollen grad nich funzen
EDIT2: So, jetzt gehen se, seit wann achten Browser auf , blödes PHP.

MfG
Matze

[studdy]

Ich wollte noch sagen das man die Schrift fast nich lesen kann, aber ich glaube das hast du schon selber gemerkt oder?