Verflixte 20 Pixel zwischenraum
Hallo Community,
Gleich vorweg, ich habe so gut wie keine Ahnung was ich da das ganze WE so programmiert habt, bin dafür aber schon recht weit gekommen finde ich. Leider Ist nun folgendes Problem aufgetreten, ich habe zwischen Kopf, Mittelteil und Abschluss dummerweise immer so 20px Luft die da nicht hin sollten. Anschauen kann man sich das Dilemma unter: www.grünografie.de/Vorlage.html Ich bin mir ziemlich sicher das ich mein Problem nicht alt zu elegant gelöst habe und nun hab ich den Salt. Über ein bisschen Hilfe währe ich echt dankbar! Auch schon mal Sorry falls ich wieder mal "DAS Standardproblem" beim Suchen im Forum nicht gefunden haben sollt und schon an anderer Stelle geholfen wurde. Der CSS Code: body { font-family: 'Ropa Sans', serif; font-size: 120%; background-image: url(Bilder/Hintergrund.png); } body,td,th { font-family: "Ropa Sans", serif; } IMG.displayed { display: block; margin-top: 0px; margin-left: auto; margin-right: auto } .text { text-align:justify; display: block; position:relative; top:0px; width:500px; margin-top: 0px; margin-left: auto; margin-right: auto; } .hintergrund{ position:relative; width:1000px; height:1000px; margin-left: auto; margin-right: auto; background-image: url(Bilder/Hintergrund_schreibfläche.png); background-repeat: repeat-y; } .abschluss{ position:relative; width:1000px; height:60px; margin-left: auto; margin-right: auto; background-image: url(Bilder/abschluss_schreibfläche.png); background-repeat: no-repeat; } Und die Einbindung: <div class="hintergrund"> <div class="text"> <p> Grünografie ist eine Marke die aus 100% recycelten Materialien ............ die Gurte dazu waren entweder von C. oder von N.</p> </div> </div> <div class="abschluss"> <p> </p> </div> Ich habe mir den Kopf von Photoshop als Tabelle übernommen, diese Zentriert und dann unten sich immer wieder holende "Streifen" anhängen lassen. Ganz unten soll dann noch der Abschlussstreifen dran mit den Rundungen. Aber wo kommen nun die 20px Abstand her die ich nirgends eingegeben hab und sie Dreamweaver nicht anzeigt, aber der Browser dann dummerweise? Vielen Dank schon mal. Kilian |
da hilft erstmal die CSS-FAQ (CSS-Prolog oben!) weiter.
Dem Dokument fehlt ein Doctype, Stichwort Quirksmode. Tabellen sind für tabellarische Daten da, im Webdesign ist das seit mind. zehn Jahren aus guten Gründen megaout. Schau dir mal Little Boxes an, damit du siehst wie man sowas heutzutage macht. ;) |
Ich komme leider nicht weiter
Liste der Anhänge anzeigen (Anzahl: 2)
Hallo Community,
nach nun langem lesen und noch viel mehr basteln bin ich nun zwar viel weiter, aber jedoch kurz vor dem aufgeben. Ich schaffe es einfach nicht meine Navigationsleiste mit CSS zu formatieren. Ich glaub ich bin einfach zu dumm dazu. Position relative, absolut???? Da rutscht einfach alles auseinander. Ich Kriegs nicht hin ein paar Knöpfe nebeneinander zu setzen. Kann mir vielleicht jemand sagen wo mein Denkfehler liegt? Es geht speziell um den Bereich "Kopfbereich, wo ich nicht weis wie ich mein Layout zusammenfügen soll? die html Datei: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Grünografie</title> <link href="bildschirm.css" rel="stylesheet" type="text/css" media="screen" /> <link href='http://fonts.googleapis.com/css?family=Ropa+Sans' rel='stylesheet' type='text/css'> <script type="text/javascript"> <!--Ich glaube das vorrausladen der Navi.Leiste --> function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } </script> </head> <body id="startseite"> <div id="wrapper"> <div id="kopfbereich"> <div style="position:relative;float: left;"> <img src="Bilder/Logo.png" width="401" height="102" alt=""> </div> <div style="position:relative; float: left;"> <img src="Bilder/Platzoben1.jpg" width="559" height="66" /> </div> <div style="position:relative; float: left; "> <img src="Bilder/Platzhalter2.png" width="84" height="36" /> </div> <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver= "MM_swapImage('Story','','Bilder/Story_g.png',1)"> <img src="Bilder/Story.png" width="79" height="36" alt=""></a> <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Grünograf','','Bilder/Gruenograf_werden_g.png',1)"> <img src="Bilder/Gruenograf_werden.png" width="188" height="36" alt=""></a> <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Kontakt','','Bilder/Kontakt_g.png',1)"> <img src="Bilder/Kontakt.png" width="92" height="36" alt=""></a> <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Impressum','','Bilder/Impressum_g.png',1)"> <img src="Bilder/Impressum.png" width="116" height="36" alt=""></a> <img src="Bilder/Topbild.jpg" width="960" height="484" alt=""> </div> <!-- Ende kopfbereich --> <div id="textbereich"> <div> Textbereich, Textbereich, Textbereich, Textbereich, Textbereich, Textbereich, Textbereich, Textbereich, Textbereich, Textbereich, Textbereich, Textbereich, Textbereich, Textbereich,Textbereich, Textbereich, Textbereich, Textbereich, Textbereich, Textbereich, Textbereich, Textbereich, Textbereich, Textbereich, Textbereich, Textbereich, Textbereich, Textbereich,Textbereich, Textbereich, Textbereich, Textbereich, Textbereich, Textbereich, Textbereich, Textbereich, Textbereich, Textbereich, Textbereich, Textbereich, Textbereich, Textbereich,Textbereich, Textbereich, Textbereich, Textbereich, Textbereich, Textbereich, Textbereich, Textbereich, Textbereich, Textbereich, Textbereich, Textbereich, Textbereich, Textbereich,Textbereich, Textbereich, Textbereich, Textbereich, Textbereich, Textbereich, Textbereich, Textbereich, Textbereich, Textbereich, Textbereich, Textbereich, Textbereich, Textbereich,Textbereich, Textbereich, Textbereich, Textbereich, Textbereich, Textbereich, Textbereich, Textbereich, Textbereich, Textbereich, Textbereich, Textbereich, Textbereich, Textbereich,Textbereich, Textbereich, Textbereich, Textbereich, Textbereich, Textbereich, Textbereich, Textbereich, Textbereich, Textbereich, Textbereich, Textbereich, Textbereich, Textbereich, </div> </div> <!-- Ende textbereich --> <div id="randbereich"> Randbereich, Randbereich, Randbereich, Randbereich, Randbereich, Randbereich, Randbereich, Randbereich, Randbereich, Randbereich, Randbereich, Randbereich, Randbereich, Randbereich, Randbereich, Randbereich, Randbereich, Randbereich, Randbereich, Randbereich,Randbereich, Randbereich, Randbereich, Randbereich, Randbereich, Randbereich, Randbereich, Randbereich, Randbereich, Randbereich, Randbereich, Randbereich, Randbereich, Randbereich, Randbereich, Randbereich, Randbereich, Randbereich, Randbereich, Randbereich, Randbereich, Randbereich, Randbereich, Randbereich, Randbereich, Randbereich, Randbereich, Randbereich, Randbereich, Randbereich, Randbereich, Randbereich, Randbereich, Randbereich, Randbereich, Randbereich, Randbereich, Randbereich, Randbereich, Randbereich, Randbereich, Randbereich, Randbereich, Randbereich, Randbereich, Randbereich, Randbereich, Randbereich, Randbereich, Randbereich, Randbereich, Randbereich, Randbereich, Randbereich, Randbereich, Randbereich, Randbereich, Randbereich, Randbereich, Randbereich, </div> <!-- Ende randbereich --> <div id="fussbereich"> <div>Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, Fußbereich, </div> </div> <!-- Ende fussbereich --> </div> <!-- Ende wrapper --> </body> </html> Und CSS: @charset "UTF-8"; /* CSS Document */ html { height: 100%; margin-bottom: 1px; } * { padding: 0; margin: 0; } /* Abstand nach unten */ h2, p, ul, ol { margin-bottom: 1em; } /* Verschachtelte Listen ohne Abstand */ ul ul { margin-bottom: 0; } /* Abstand von links */ li { margin-left: 1em; } h1 { font-size: 150%; } /*Überschriften Formatieren */ h2 { font-size: 130%; } a { text-decoration: none; } /* Unterstreichung entfernen */ body { font-family: 'Ropa Sans', serif; font-size: 120%; background-image: url(Bilder/Hintergrund.png); text-align:center; margin: 0; padding: 0; } div#wrapper { margin: 0 auto; width: 960px; text-align:left; background-image: url(Bilder/Hintergrund_schreibfläche.png); } div#kopfbereich{ height:586; } div#textbereich{ width: 593px; } div#randbereich{ width: 367px; } div#fussbereich{ width: 960px; } |
Der Editor des Forums hat Code-Tags. Man kann Sie anklicken. Sie sind über dem Editor, rechts. An einem davon steht "HTML Code". Nutze sie. Danke!
|
Zitat:
Erster Tipp: Lass erstmal die Finger von dem Programm, denn zum Verstehen von HTML und CSS sind solche WYSIWYG-Editoren denkbar ungeeignet. Wesentlich sinnvoller ist das Arbeiten mit einem guten normalen Editor. Empfehlungen welche Editoren geeignet sind, finden sich hier bei uns im Forum (--> Suchfunktion). Zweiter Tipp: Um 'Ahnung' von der Thematik zu bekommen, arbeitest Du Dich besser anhand von Little Boxes ein. Hubspe hatte Dir die Site bereits empfohlen. |
Zitat:
|
Bitte spart euch doch euer Forum wenn ihr den Tag nichts anderes zu tun habt Anfänger blöd von der Seite an zu machen. Das man HTML nicht programmiert sonder schreibt wusste ich nebenbei auch schon, nur das mich diese Information um keinen Deut schlauer macht. Was bringen also Informationen deren Informationsgehalt gleich 0 ist?
|
Zitat:
Zitat:
Schließlich verhält sich dir gegenüber auch niemand respektlos. Auch dann nicht, wenn du auf Fehler hingewiesen wirst. |
Alle Zeitangaben in WEZ +2. Es ist jetzt 12:16 Uhr. |
Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.
© Dirk H. 2003 - 2023