Anzeige

HTML & CSS Div Problem

HTML & CSS Div Problem | PSD-Tutorials.de

Erstellt von nicovod, 10.11.2008.

  1. nicovod

    nicovod Shichi Fukujin v.1.0

    Dabei seit:
    31.05.2008
    Beiträge:
    80
    Geschlecht:
    männlich
    Software:
    Adobe Photoshop CS3, Notepad++
    Kameratyp:
    Canon Powershot A540
    HTML & CSS Div Problem
    Hallo,
    ich hab ein sagen wir kleines Problem :) Ich möchte gerne lieber meine Seiten mit Divs darstellen anstatt von Tables. Nur ich hab das Problem in der Verbindung von CSS und HTML.

    Beispiel (HTML Datei)

    HTML:
    1.  
    2. <head>
    3. <title>Beispiel</title>
    4. </head>
    5. <body>
    6. <div id="header">
    7. </div>
    8. </body>
    9. </html>
    Beispiel (CSS Datei)

    HTML:
    1.  
    2. header { background-image: url(bilder/header.jpg); width:500px; height:100px; }
    3.  
    So, wenn ich nun also das Div "Header" in der HTML datei erstelle wird an dieser stelle aber nicht wie ich in der CSS Datei angeben habe der Header angezeigt.

    Wo liegt das Problem ? Ich denke ich habe es falsch verstanden oder ?

    Vielen Dank im Vorraus!
     
    #1      
  2. xxsiv

    xxsiv Creative Director

    Dabei seit:
    12.07.2007
    Beiträge:
    230
    Geschlecht:
    männlich
    Ort:
    New York
    HTML & CSS Div Problem
    AW: HTML & CSS Div Problem

    Es sollte lediglich die # vor header fehlen

    HTML:
    1.  
    2. #header { background-image: url(bilder/header.jpg); width:500px; height:100px; }
    3.  
    Universalattribute werden mit einer vorgestellten # definiert.
    HTML-Attribute kannst du einfach so ansprechen, z.B. body ( width:500px; ).
     
    #2      
  3. nicovod

    nicovod Shichi Fukujin v.1.0

    Dabei seit:
    31.05.2008
    Beiträge:
    80
    Geschlecht:
    männlich
    Software:
    Adobe Photoshop CS3, Notepad++
    Kameratyp:
    Canon Powershot A540
    HTML & CSS Div Problem
    AW: HTML & CSS Div Problem

    achso danke! Top, und was hat oft der punkt vor der css klasse zu tun also zum beispiel .body ?
     
    #3      
  4. Tattoomaus78

    Tattoomaus78 nemesis-artgroup.de

    654
    Dabei seit:
    23.08.2005
    Beiträge:
    5.328
    Geschlecht:
    weiblich
    Ort:
    auf und davon
    HTML & CSS Div Problem
    AW: HTML & CSS Div Problem

    Mit dem id-Attribut werden Elemente eindeutig bezeichnet und dürfen nur einmal pro Dokument verwendet werden. Eine Klasse hingegen ist keine eindeutige Bezeichnung, sondern vielmehr eine Zuordnung zu einer Gruppe und kann mehrmals verwendet werden.

    also:
    css
    #header {} = id

    html
    <div id="header"></div> -> darf nur einmal im html-dokument verwendet werden

    css
    .spaltelinks {} = class

    html
    <div class="spaltelinks></div> -> kann mehrfach im html-dokument verwendet werden

    genaure Erklärung schau hier -> Die globale Struktur eines HTML-Dokuments
     
    Zuletzt bearbeitet: 10.11.2008
    #4      
  5. nicovod

    nicovod Shichi Fukujin v.1.0

    Dabei seit:
    31.05.2008
    Beiträge:
    80
    Geschlecht:
    männlich
    Software:
    Adobe Photoshop CS3, Notepad++
    Kameratyp:
    Canon Powershot A540
    HTML & CSS Div Problem
    aso okay danke! Jetzt habe ich es verstanden.

    Irgendwie klappt das ganze einfach nicht, ich hab das komplette layout hier mal auf meinen webspace hochgeladen ihr könnt es euch gerne mal runterladen ist eh nur testweise, ich denke ihr werdet verstehen wie das ganze eigentlich dargestellt werden sollte, tuts aber nicht.

    http://nico-schmitz.s919.netcup.net/files/layout.zip (hier könnt ihrs runterladen)

    hier könnt ihr sehen wie es aussehen sollte : (soll erstmal net großartig gut aussehen nur test :)
    [​IMG]

    (footer hab ich noch nicht eingefügt)
     
    Zuletzt von einem Moderator bearbeitet: 10.11.2008
    #5      
  6. Herr_D

    Herr_D offline

    Dabei seit:
    09.06.2005
    Beiträge:
    8.555
    Geschlecht:
    männlich
    HTML & CSS Div Problem
    AW: HTML & CSS Div Problem

    html

    HTML:
    1.  
    2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    3. <html xmlns="http://www.w3.org/1999/xhtml">
    4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    5. <link rel="stylesheet" href="style.css" />
    6. <title>Layout</title>
    7. </head>
    8. <div id="drumrum">
    9.         <div id="header">header</div>
    10.         <div id="sidebarleft">left</div>
    11.         <div id="sidebarright">right</div>
    12.         <div id="content">content</div>
    13.         <div id="clear"></div>
    14. </div>
    15. </body>
    16. </html>
    17.  
    css
    Code (Text):
    1.  
    2. body {
    3. background-color: #000000;
    4. color:#fff;
    5. text-align:center; /* Zentrierung für alte Browser */ }
    6.  
    7. #drumrum {
    8. width: 811px;
    9. text-align: left;
    10. margin:0 auto;
    11. }
    12.  
    13. #header {
    14. background-image: url(Bilder/header.png);
    15. width: 811px;
    16. height: 184px;
    17. background-repeat:no-repeat;
    18. }
    19.  
    20.  
    21.  
    22. #sidebarleft {
    23. background-color: #242424;
    24. width: 21px;
    25. height: 765px;
    26. background-repeat:repeat-y;
    27. float:left;
    28. }
    29.  
    30. #sidebarright {
    31. background-color: #242424;
    32. widht: 177px;
    33. height: 765px;
    34. background-repeat:repeat-y;
    35. float:right;
    36. }
    37.  
    38. #content {
    39. background-color: #242424;
    40. height: 765px;
    41. background-repeat:repeat-y;
    42. }
    43.  
    44. #clear {
    45. clear:both
    46. }
    47.  


    Du solltest auf Fehler achten, da fehlten ein paar Sachen (px z.B.)


    Ach ja, den Text kannste natürlich löschen, ist nur für mich zum gucken...
     
    Zuletzt bearbeitet: 10.11.2008
    #6      
  7. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    HTML & CSS Div Problem
    AW: HTML & CSS Div Problem

    Du musst einfach etwas sorgfältiger schreiben.
    in der CSS Datei sind einige Fehler (Mal das px vergessen,mal wihdt statt width etc.
    in der Html Datei ist das was eigentlich im <body>(hier!)</body> stehen sollte irgendwo zwischen head und body...
    Um so eine Seite zentriert darzustellen kann man einfach einen div (meinetwegen mit der id="aussen") um das ganze legen, dem die feste Vreite geben, und sein margin auf auto setzen.
    layout.zip
     
    Zuletzt bearbeitet: 10.11.2008
    #7      
  8. nicovod

    nicovod Shichi Fukujin v.1.0

    Dabei seit:
    31.05.2008
    Beiträge:
    80
    Geschlecht:
    männlich
    Software:
    Adobe Photoshop CS3, Notepad++
    Kameratyp:
    Canon Powershot A540
    HTML & CSS Div Problem
    AW: HTML & CSS Div Problem

    ok ich danke euch, nur ehrlich gesagt ich hab mir mehrmals den code angeschaut und nirgends Rechtschreibfehler gefunden, ich glaub ich sollte vielleicht mal einen übersichtlicheren Editor benutzen :)

    ich hätte da jetzt noch so ein paar fragen, in der css datei von sokie findet man diese stelle in der style.css

    HTML:
    1.  
    2. *{
    3.     padding: 0;
    4.     margin: 0;
    5. }
    6.  
    was soll das bewirken ? ich wüsste jetzt kein element was * anspricht.

    HTML:
    1.  
    2. #wrapper{
    3.     width: 820px;
    4.     margin: auto;
    5. }
    6.  
    wrapper ist ja das drumherum, aber hier frage ich mich wie du auf die breite von 820px kommts, die seite ist ja 811 px breit, hast du da einfach eine zufällige breite genommen ?

    Vielen Dank für eure Hilfe.
     
    #8      
  9. Tattoomaus78

    Tattoomaus78 nemesis-artgroup.de

    654
    Dabei seit:
    23.08.2005
    Beiträge:
    5.328
    Geschlecht:
    weiblich
    Ort:
    auf und davon
    HTML & CSS Div Problem
    AW: HTML & CSS Div Problem

    das setzt sämtliche padding- und marginangaben im gesamten Dokument erstmal auf 0 damit du sicher sein kannst, dass jedes element wirklich die von dir eingegebenen Werte hat

    die Breite vom wrapper kannst du auf 811px runtersetzen...ich tippe mal darauf, dass sokie da ne zufällige Breite genommen hat...mE kriegt der wrapper die Breite, die das Layout haben soll...so mache ich es zumindest immer...
     
    #9      
  10. nicovod

    nicovod Shichi Fukujin v.1.0

    Dabei seit:
    31.05.2008
    Beiträge:
    80
    Geschlecht:
    männlich
    Software:
    Adobe Photoshop CS3, Notepad++
    Kameratyp:
    Canon Powershot A540
    HTML & CSS Div Problem
    AW: HTML & CSS Div Problem

    ah okay danke, ich dachte wrapper wär alles um der seite, aber ist also nur wies auch übersetzt heißt eine hülle :)

    ich hätte noch eine frage, ich hab schon ganz css4you durch geschaut aber finde nich das was ich suche, wie kann ich einen text verschieben ? Also es handelt sich nur um eine kleine Größe .
    hier könnt ihr euch das ganze mal ansehen, oben "Willkommen auf NamederSeite" möchte ich nur ein bisschen niedriger bekommen so das es in der mitte von diesem grauen balken oben liegt.
    http://www.cofilew.de/media/bilder/2008/11/desktop.jpg (Screenshot der Seite)
     
    #10      
  11. Tattoomaus78

    Tattoomaus78 nemesis-artgroup.de

    654
    Dabei seit:
    23.08.2005
    Beiträge:
    5.328
    Geschlecht:
    weiblich
    Ort:
    auf und davon
    HTML & CSS Div Problem
    AW: HTML & CSS Div Problem

    indem du die Innenabstände zum Rand mittels padding definierst...

    gib dem Headertext noch einen padding-top Wert

    zB.

    <div id="header">
    <div class="text">Herzlich Willkommen</div>
    </div>


    css:
    .text {
    padding-top: 5px;
    }
     
    #11      
  12. nicovod

    nicovod Shichi Fukujin v.1.0

    Dabei seit:
    31.05.2008
    Beiträge:
    80
    Geschlecht:
    männlich
    Software:
    Adobe Photoshop CS3, Notepad++
    Kameratyp:
    Canon Powershot A540
    HTML & CSS Div Problem
    AW: HTML & CSS Div Problem

    Super danke :)

    Ich hab leider wieder ein Problem..

    wenn ich jetzt per CSS das Aussehen der Links veränder mit :

    hab ich das problem das ja alle links so verändert werde, wie kann ich auch spezielle kategorien für links machen ? ich find einfach nicht dazu hab auch schon freunde gefragt aber nichts kam da wirklich bei raus...

    Weil ich halt in der Navigation etwas Größere Links möchte und im Footer kleinere mit ner anderen farbe...

    Vielen Dank euch allen!
     
    #12      
  13. Herr_D

    Herr_D offline

    Dabei seit:
    09.06.2005
    Beiträge:
    8.555
    Geschlecht:
    männlich
    HTML & CSS Div Problem
    AW: HTML & CSS Div Problem

    Du solltest dich wirklich mal etwas mehr mit den Grundlagen von css beschäftigen ;)


    um unterschiedlich farbige Links zu erzeugen benutzt du .class sprich Klassen für die jeweiligen Links... die class-Angeben baust du in den Link-Tag ein


    Beispiel:


    Code (Text):
    1.  
    2. a.weissblau:link {
    3. font-size: 15px;
    4. color: #FFF;
    5. text-decoration: none;
    6. }
    7. a.weissblau:visited {
    8. font-size: 15px;
    9. color: #FFF;
    10. text-decoration: none;
    11. }
    12. a.weissblau:active {
    13. font-size: 15px;
    14. color: #FFF;
    15. text-decoration: none;
    16. }
    17. a.weissblau:hover {
    18. font-size: 15px;
    19. color: #00F;
    20. text-decoration: underline; }
    21.  
    22.  
    23.  
    24. a.weissgruen:link {
    25. font-size: 15px;
    26. color: #FFF;
    27. text-decoration: none;
    28. }
    29. a.weissgruen:visited {
    30. font-size: 15px;
    31. color: #FFF;
    32. text-decoration: none;
    33. }
    34. a.weissgruen:active {
    35. font-size: 15px;
    36. color: #FFF;
    37. text-decoration: none;
    38. }
    39. a.weissgruen:hover {
    40. font-size: 15px;
    41. color: #0FF;
    42. text-decoration: underline; }
    43.  

    HTML:
    1.  
    2. <a href="linkadresse" class="weissblau">klick mal wird blau</a>
    3.  
    4. <a href="linkadresse" class="weissgruen">klick mal wird grün</a>
    5.  

    Edith sagt: Ach ja, für jede einzelne .class kannst du völlig unterschiedliche css-Angaben definieren... (Größe, Farbe, Schriftart usw. usf.)
     
    #13      
  14. nicovod

    nicovod Shichi Fukujin v.1.0

    Dabei seit:
    31.05.2008
    Beiträge:
    80
    Geschlecht:
    männlich
    Software:
    Adobe Photoshop CS3, Notepad++
    Kameratyp:
    Canon Powershot A540
    HTML & CSS Div Problem
    AW: HTML & CSS Div Problem

    Ah Super danke, ja im CSS Teil hatte ich das genauso! Nur hab dann in html das ganze per <span class> gemacht deswegen hats nicht funktioniert danke!
     
    #14      
  15. Herr_D

    Herr_D offline

    Dabei seit:
    09.06.2005
    Beiträge:
    8.555
    Geschlecht:
    männlich
    HTML & CSS Div Problem
    AW: HTML & CSS Div Problem

    wenn du span einsetzt, dann muß das nach dem link-Tag kommen


    <a href="link"><span class="name">Text</span></a>



    Ist aber eigentlich nicht nötig, wenn der Link durchgehend gleich aussehen soll...


    Wenn du im Linktext etwas anders gestalten willst, dann setzt du span ein



    <a href="link" class="blau">Das ist ein Link <span class="gruen">mit</span> Pepp</a>
     
    #15      
  16. nicovod

    nicovod Shichi Fukujin v.1.0

    Dabei seit:
    31.05.2008
    Beiträge:
    80
    Geschlecht:
    männlich
    Software:
    Adobe Photoshop CS3, Notepad++
    Kameratyp:
    Canon Powershot A540
    HTML & CSS Div Problem
    AW: HTML & CSS Div Problem

    So vielen Dank nochmal das Design ist sozusagen fertig! Ich habe dazu einen Artikel in meinen Blog verfasst dort werdet ihr auch nochmal namentlich erwähnt! Also vorbeischauen und lesen dort könnt ihr auch das "Fertige Design" sehen.

    Vielen Dank!

    Zum Artikel auf meinen Blog!

    /edit : Würde mich natürlich auch über Kommentare eurerseits freuen!
     
    Zuletzt bearbeitet: 10.11.2008
    #16      
  17. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    HTML & CSS Div Problem
    AW: HTML & CSS Div Problem

    richtig getippt, und doch...
    ich mache den wrapper gern ein paar px grösser, weil bei den floats in alten IEs schnell mal das Layout zerlegt wird, wenn die nicht min. 3px Luft haben.
    Dafür habe ich aber (entgegen dem ersten Entwurf) alle floats 'left' gefloatet, damit sie auch bei einem etwas breiteren wrapper nicht nach rechts aussen verspringen.
     
    #17      
  18. Tattoomaus78

    Tattoomaus78 nemesis-artgroup.de

    654
    Dabei seit:
    23.08.2005
    Beiträge:
    5.328
    Geschlecht:
    weiblich
    Ort:
    auf und davon
    HTML & CSS Div Problem
    AW: HTML & CSS Div Problem

    aha..ok...danke schön...wieder was gelernt :)
     
    #18      
  19. nicovod

    nicovod Shichi Fukujin v.1.0

    Dabei seit:
    31.05.2008
    Beiträge:
    80
    Geschlecht:
    männlich
    Software:
    Adobe Photoshop CS3, Notepad++
    Kameratyp:
    Canon Powershot A540
    HTML & CSS Div Problem
    AW: HTML & CSS Div Problem

    *schäm* problem augetaucht, (ich denke aber das letze xD) Das Design ist nicht wirklich dynamisch, also der content bereich und die sidebar erstreckt sich nicht nach unten sobald mehr inhalt reinkommt :(

    Dem Conten / Sidebar / footer habe ich background-repeat: repeat-y; zugewiesen, ändert tut sich aber nichts, in tables hatte das ganze immer so funktioniert bei mir ich weiss jetzt nicht ob das in divs anders geht, finde auch per google oder auf css4you nichts dazu.

    hab grad nochmal was weitergeschaut auf css4you, und position: static; hilft dem ganzen nicht oder hab ich da was falsch verstande? da stand passt sich dem textfluss an...

    Ich sollte mir mal ein Buch dazu kaufen, css4you war bis jetzt nicht wirklich eine hilfe...
     
    #19      
  20. Tattoomaus78

    Tattoomaus78 nemesis-artgroup.de

    654
    Dabei seit:
    23.08.2005
    Beiträge:
    5.328
    Geschlecht:
    weiblich
    Ort:
    auf und davon
    HTML & CSS Div Problem
    AW: HTML & CSS Div Problem

    zeig mal die aktuelle Version von deinem CSS

    in der Version von sokie hat content, rightsidebar und leftsidebar ne feste Höhe von 765px, das liest zB. der FF auch eben als feste Höhe...der IE sollte das jedoch automatisch erweitern wenn mehr Text kommt...

    wenn noch nicht geschehen ändere das mal um in

    min-height: 765px /*moderne Browser*/
    *height: 765px /*IE*/
     
    #20      
x
×
×
teststefan