mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Sa 10.12.2016 11:55 Benutzername: Passwort: Auto-Login

Thema: [CSS-Design] Zu doof?! Bitte mal helfen ;-) vom 20.01.2005


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> [CSS-Design] Zu doof?! Bitte mal helfen ;-)
Seite: 1, 2  Weiter
Autor Nachricht
WurstOderWas
Threadersteller

Dabei seit: 26.03.2003
Ort: -
Alter: 36
Geschlecht: Männlich
Verfasst Do 20.01.2005 13:58
Titel

[CSS-Design] Zu doof?! Bitte mal helfen ;-)

Antworten mit Zitat Zum Seitenanfang

Moin Leute,

versuch hier gerade zu positionieren wie n grosser.

Aber so ganz will das nicht klappen. Hier mal der Link, wo ihr denn Quelltext lesen könnt:

www.gigantolum.de/csstest

und hier die main.css so wie ich sie jetzt habe. Frage: wie kann ich das css file optimieren und welche fehler hab ich grundsätzlich gemacht, damit ich das endlich mal raffe hier *zwinker* Vielen, vielen Dank für Eure Hilfe schon mal.

Code:
html, body{
   margin: 0px;
   margin-top: 5px;
   padding: 0px;
   font-size: 100.01%;
   background-image: url(../images/bg.gif);
}

.corpus{
   text-align:center;
}

.wrapper{
   text-align: left;
   margin:auto;
   padding:0px;
   width: 767px;
   height: 565px;
   background-color: #FFFFFF;
   border: 1px solid #0D377A;
}
.face{
   background-image: url(../images/main_03.jpg);
   background-repeat: no-repeat;
   top:0px;
   left:0px:
   width: 219px;
   height: 223px;
}
.headline{
   position:relative;
   background-image: url(../images/main_04.gif);
   background-repeat: no-repeat;
   width:548px;
   height:101px;
   top: -223px;
   left: 217px;
   
}
.navi{
   position:relative;
   background-color: #FFFFFF;
   width:546px;
   height:21px;
   left:219px;
   top: -223px;
}
.navi a{
   font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
   font-size: 10px;
   font-style: normal;
   font-variant: normal;
   font-weight: normal;
   line-height: normal;
   text-decoration: none;
   color: #0D377A;
}
.navi a:hover{
   font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
   font-size: 10px;
   font-style: normal;
   font-variant: normal;
   font-weight: normal;
   line-height: normal;
   text-decoration: none;
   color: #1E90FF;
}
.hako{
   position:relative;
   background-image: url(../images/main_07.jpg);
   width:546px;
   height:101px;
   left:219px;
   top:-223px;
}
.content{
   position:relative;
   width:374px;
   top:-223px;
}
.content p{
   margin:10px;
   margin-top:10px;
   font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
   font-size: 10px;
   font-style: normal;
   font-variant: normal;
   font-weight: normal;
   line-height: normal;
   text-decoration: none;
   color: #000000;
}
.content a{
   font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
   font-size: 10px;
   font-style: normal;
   font-variant: normal;
   font-weight: bold;
   line-height: normal;
   text-decoration: none;
   color: #0D377A;
}
.content a:hover{
   font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
   font-size: 10px;
   font-style: normal;
   font-variant: normal;
   font-weight: bold;
   line-height: normal;
   text-decoration: none;
   color: #1E90FF;
}
.content h1{
   margin:10px;
   margin-top:10px;
   font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
   font-size: 10px;
   font-style: normal;
   font-variant: normal;
   font-weight: bold;
   line-height: normal;
   text-decoration: none;
   color: #0D377A;
}
.impression{
   position:relative;
   background-image: url(../images/main_09.jpg);
   background-repeat: no-repeat;
   width:393px;
   height:148px;
   left:372px;
}
.notlinks{
   width:767px;
   background-color: Aqua;
   text-align:right;
}
.notlinks a{
   font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
   font-size: 10px;
   font-style: normal;
   font-variant: normal;
   font-weight: bold;
   line-height: normal;
   text-decoration: none;
   color: #000000;
}

.notlinks a{
   font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
   font-size: 10px;
   font-style: normal;
   font-variant: normal;
   font-weight: bold;
   line-height: normal;
   text-decoration: none;
   color: #D1D1D1;
}


Zuletzt bearbeitet von WurstOderWas am Do 20.01.2005 13:59, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
eye-fx

Dabei seit: 24.10.2002
Ort: -
Alter: 40
Geschlecht: Männlich
Verfasst Do 20.01.2005 14:17
Titel

Antworten mit Zitat Zum Seitenanfang

Und was genau will nicht so ganz klappen? Das das Bild da unten hängt?
Gib mal mehr Infos.

Ansonsten ist mir nur spontan aufgefallen das Du statt mit DIV IDs mit Klassen (#content, statt .content und dann <div id="content" statt class="content">) arbeitest. Ist z.b. zum editieren in Dreamweaver einfacher.

Zwar OT aber was mir auch auf gefallen ist: Du brauchst nicht dauernd Deine Font-Formatierung wiederholen. Gib die allgemeingültige, sozusagen globale Formatierung, für den body Tag an. Alles andere, was davon abweichen soll, kannst dann wo anders definieren... z.b. dann nur noch die color Eigenschaft in den navi Klassen.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
kaputt

Dabei seit: 08.05.2003
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Do 20.01.2005 14:19
Titel

Antworten mit Zitat Zum Seitenanfang

Hat eigentlich nix mit Programmierung zu tun...

edit:

classen benutzt man, wenn mehrere elemente die eigenschaften der class annehmen sollen. (also .name)
ids, wenn nur ein element die eigenschaften annehmen soll (also #name)

<div class="bla">
<div id="blupp">


Zuletzt bearbeitet von kaputt am Do 20.01.2005 14:24, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
WurstOderWas
Threadersteller

Dabei seit: 26.03.2003
Ort: -
Alter: 36
Geschlecht: Männlich
Verfasst Do 20.01.2005 14:25
Titel

Antworten mit Zitat Zum Seitenanfang

eye-fx hat geschrieben:
Und was genau will nicht so ganz klappen? Das das Bild da unten hängt?
Gib mal mehr Infos.

Ansonsten ist mir nur spontan aufgefallen das Du statt mit DIV IDs mit Klassen (#content, statt .content und dann <div id="content" statt class="content">) arbeitest. Ist z.b. zum editieren in Dreamweaver einfacher.

Zwar OT aber was mir auch auf gefallen ist: Du brauchst nicht dauernd Deine Font-Formatierung wiederholen. Gib die allgemeingültige, sozusagen globale Formatierung, für den body Tag an. Alles andere, was davon abweichen soll, kannst dann wo anders definieren... z.b. dann nur noch die color Eigenschaft in den navi Klassen.


mit der globalen font-geschichte haste recht, werd ich ändern, aber bei der anderen geschichte... hatte irgendwo gelesen(frag mich nicht mehr wo), dass es besser sei mit class anstatt mit IDs zu arbeiten.

Watt is denn nu besser? is ja kein Problem das umzuändern sonst.
  View user's profile Private Nachricht senden
kaputt

Dabei seit: 08.05.2003
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Do 20.01.2005 14:34
Titel

Antworten mit Zitat Zum Seitenanfang

WurstOderWas hat geschrieben:
eye-fx hat geschrieben:
Und was genau will nicht so ganz klappen? Das das Bild da unten hängt?
Gib mal mehr Infos.

Ansonsten ist mir nur spontan aufgefallen das Du statt mit DIV IDs mit Klassen (#content, statt .content und dann <div id="content" statt class="content">) arbeitest. Ist z.b. zum editieren in Dreamweaver einfacher.

Zwar OT aber was mir auch auf gefallen ist: Du brauchst nicht dauernd Deine Font-Formatierung wiederholen. Gib die allgemeingültige, sozusagen globale Formatierung, für den body Tag an. Alles andere, was davon abweichen soll, kannst dann wo anders definieren... z.b. dann nur noch die color Eigenschaft in den navi Klassen.


mit der globalen font-geschichte haste recht, werd ich ändern, aber bei der anderen geschichte... hatte irgendwo gelesen(frag mich nicht mehr wo), dass es besser sei mit class anstatt mit IDs zu arbeiten.

Watt is denn nu besser? is ja kein Problem das umzuändern sonst.


Na wie ich oben schon geschrieben habe... was mehrfach genutzt werden soll in eine Klasse, sonst halt als ID
  View user's profile Private Nachricht senden
eye-fx

Dabei seit: 24.10.2002
Ort: -
Alter: 40
Geschlecht: Männlich
Verfasst Do 20.01.2005 14:45
Titel

Antworten mit Zitat Zum Seitenanfang

Wenn Dein Layout so wie es ist mit Klassen funzt, lass es so. Ansonsten bin ich der Meinung, zumindest für die Zukunft, das man für flexible Layouts ausschliesslich IDs mit floats verwenden sollte.

Ich selbst benutze IDs im Moment aber auch nur für die Content-Formatierung. Um die Seite an sich "in Form zu pressen" verwende ich noch klassisch Tabellen für das Drumherum, da dies einfach noch kompatibler (ich denke da nur an die CSS Unterschiede Explorer<->Opera<->Mozilla) und unkomplizierter ist. Allerdinsg dann auch weniger flexibel.

Sicherlich gibts da verschiedene Herangehensweisen.
Wenn Dich das CSS-Layout interessiert hier mal ein paar Links.

CSS layout Seiten:
http://glish.com/css/home.asp
http://www.meyerweb.com/eric/css/edge/
http://css-discuss.incutio.com/
http://www.csszengarden.com/

syntax und befehle:
http://www.w3schools.com/css/default.asp
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
WurstOderWas
Threadersteller

Dabei seit: 26.03.2003
Ort: -
Alter: 36
Geschlecht: Männlich
Verfasst Do 20.01.2005 14:45
Titel

Antworten mit Zitat Zum Seitenanfang

Hab das jetzt mal so bereinigt:

http://www.gigantolum.de/csstest

Code:
html, body{
   margin: 0px;
   margin-top: 5px;
   padding: 0px;
   font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
   font-size: 10px;
   font-style: normal;
   font-variant: normal;
   font-weight: normal;
   line-height: normal;
   background-image: url(../images/bg.gif);
}
#corpus{
   text-align:center;
}
#wrapper{
   text-align: left;
   margin:auto;
   padding:0px;
   width: 767px;
   height: 565px;
   background-color: #FFFFFF;
   border: 1px solid #0D377A;
}
#face{
   background-image: url(../images/main_03.jpg);
   background-repeat: no-repeat;
   top:0px;
   left:0px:
   width: 219px;
   height: 223px;
}
#headline{
   position:relative;
   background-image: url(../images/main_04.gif);
   background-repeat: no-repeat;
   width:548px;
   height:101px;
   top: -223px;
   left: 217px;
}
#navi{
   position:relative;
   background-color: #FFFFFF;
   width:546px;
   height:21px;
   left:219px;
   top: -223px;
}
#navi a{
   text-decoration: none;
   color: #0D377A;
}
#navi a:hover{
   text-decoration: none;
   color: #1E90FF;
}
#hako{
   position:relative;
   background-image: url(../images/main_07.jpg);
   width:546px;
   height:101px;
   left:219px;
   top:-223px;
}
#content{
   position:relative;
   width:374px;
   top:-223px;
}
#content p{
   margin:10px;
   margin-top:10px;
}
#content a{
   text-decoration: none;
   color: #0D377A;
}
#content a:hover{
   text-decoration: none;
   color: #1E90FF;
}
#content h1{
   margin:10px;
   margin-top:10px;
   font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
   font-size: 10px;
   font-style: normal;
   font-variant: normal;
   font-weight: bold;
   line-height: normal;
   color: #0D377A;
}
#impression{
   position:relative;
   background-image: url(../images/main_09.jpg);
   background-repeat: no-repeat;
   width:393px;
   height:148px;
   left:372px;
}
#notlinks{
   width:767px;
   background-color: Aqua;
   text-align:right;
}
#notlinks a{
   text-decoration: none;
   color: #000000;
}
#notlinks a{
   text-decoration: none;
   color: #D1D1D1;
}
  View user's profile Private Nachricht senden
eye-fx

Dabei seit: 24.10.2002
Ort: -
Alter: 40
Geschlecht: Männlich
Verfasst Do 20.01.2005 14:49
Titel

Antworten mit Zitat Zum Seitenanfang

Moment... für sowas wie Textformatierung also z.B. "navi_a", "content_p", "content_a" ... solltest Du Klassen benutzen. Für Positionierungselemente bzw. Bereiche(!) z.B. "headline" oder "navi" solltest Du IDs verwenden.

Berichtigt mich, falls ich Schmarrn erzähle - bin selbst noch nicht 100% fit mit CSS Layout.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen [CSS] vertical-align XHTML oder auch: bin ich doof?
CSS Problem, bitte helfen
[CSS]Hilfe: Navigation verhackts im IE, wer kann mir helfen?
PHP zu doof?
mal wieder zu doof. Hintergrund (Photoshop)
Wo liegt hier der fehler? Ist doof nichts geht. :-(
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.