 Willkommen auf dem Portal für Mediengestalter
|
|
|
| Autor |
Nachricht |
WurstOderWas
Threadersteller
Dabei seit: 26.03.2003
Ort: -
Alter: 43
Geschlecht: 
|
Verfasst Do 20.01.2005 14:58
Titel [CSS-Design] Zu doof?! Bitte mal helfen ;-) |
  |
|
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  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 14:59, insgesamt 1-mal bearbeitet
|
|
| |
  |
 |
eye-fx
Dabei seit: 24.10.2002
Ort: -
Alter: 48
Geschlecht:
|
Verfasst Do 20.01.2005 15:17
Titel
|
|
|
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.
|
|
| |
 |
|
|
Anzeige
|
|
|
kaputt
Dabei seit: 08.05.2003
Ort: -
Alter: -
Geschlecht:
|
Verfasst Do 20.01.2005 15:19
Titel
|
|
|
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 15:24, insgesamt 1-mal bearbeitet
|
|
| |
|
|
WurstOderWas
Threadersteller
Dabei seit: 26.03.2003
Ort: -
Alter: 43
Geschlecht:
|
Verfasst Do 20.01.2005 15:25
Titel
|
|
|
| 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.
|
|
| |
|
|
kaputt
Dabei seit: 08.05.2003
Ort: -
Alter: -
Geschlecht:
|
Verfasst Do 20.01.2005 15:34
Titel
|
|
|
| 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
|
|
| |
|
|
eye-fx
Dabei seit: 24.10.2002
Ort: -
Alter: 48
Geschlecht:
|
Verfasst Do 20.01.2005 15:45
Titel
|
|
|
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
|
|
| |
|
|
WurstOderWas
Threadersteller
Dabei seit: 26.03.2003
Ort: -
Alter: 43
Geschlecht:
|
Verfasst Do 20.01.2005 15:45
Titel
|
|
|
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;
} |
|
|
| |
|
|
eye-fx
Dabei seit: 24.10.2002
Ort: -
Alter: 48
Geschlecht:
|
Verfasst Do 20.01.2005 15:49
Titel
|
|
|
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.
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
PHP zu doof?
mal wieder zu doof. Hintergrund (Photoshop)
Indesign bug – oder einfach nur zu doof.
[CSS] vertical-align XHTML oder auch: bin ich doof?
Wo liegt hier der fehler? Ist doof nichts geht. :-(
Von CS5 Design Standard auf CS6 Design & Web Premium upgrade
|
|
|
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.
|
|
