zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Verflixte 20 Pixel zwischenraum

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 29.01.2012, 17:11
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.01.2012
Beiträge: 3
ikiksen befindet sich auf einem aufstrebenden Ast
Ausrufezeichen 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 29.01.2012, 17:36
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

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.
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 19.03.2012, 23:08
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.01.2012
Beiträge: 3
ikiksen befindet sich auf einem aufstrebenden Ast
Standard Ich komme leider nicht weiter

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;
}
Angehängte Grafiken
Dateityp: png Bildschirmfoto 2012-03-19 um 23.06.44.png (156,1 KB, 6x aufgerufen)
Dateityp: png Bildschirmfoto 2012-03-19 um 23.08.23.png (111,0 KB, 5x aufgerufen)
Mit Zitat antworten
  #4 (permalink)  
Alt 19.03.2012, 23:12
Benutzerbild von Praktikant
Semantikbremse.
XHTMLforum-Kenner
 
Registriert seit: 22.04.2008
Beiträge: 4.985
Praktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz sein
Standard

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!
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade!

Geändert von Praktikant (20.03.2012 um 18:44 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 20.03.2012, 07:08
EvT EvT ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.09.2006
Ort: Bad Wildungen
Beiträge: 2.220
EvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekannt
Standard

Zitat:
Zitat von ikiksen Beitrag anzeigen
ich habe so gut wie keine Ahnung was ich da das ganze WE so programmiert hab
'Programmiert' wohl eher nicht sondern vermutlich in Dreamweaver zusammengeklickt.

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.
Mit Zitat antworten
  #6 (permalink)  
Alt 20.03.2012, 08:27
Benutzerbild von Praktikant
Semantikbremse.
XHTMLforum-Kenner
 
Registriert seit: 22.04.2008
Beiträge: 4.985
Praktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz sein
Standard

Zitat:
Zitat von EvT Beitrag anzeigen
'Programmiert' wohl eher nicht sondern vermutlich in Dreamweaver zusammengeklickt.
Mal ganz davon abgesehen, dass man HTML nicht programmieren, sondern nur schreiben kann, weil es eine Markup Language und keine Programmiersprache ist.
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade!
Mit Zitat antworten
  #7 (permalink)  
Alt 20.03.2012, 12:03
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.01.2012
Beiträge: 3
ikiksen befindet sich auf einem aufstrebenden Ast
Standard

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?
Mit Zitat antworten
  #8 (permalink)  
Alt 20.03.2012, 18:34
Standardkatze
XHTMLforum-Kenner
 
Registriert seit: 06.02.2007
Beiträge: 1.821
gato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nett
Standard

Zitat:
Zitat von ikiksen Beitrag anzeigen
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?
Selbsterkenntnis ist der erste Schritt zur Besserung. So lange zu den Vorgang, HTML zu schreiben, inkorrekt als "Programmierung" bezeichnest, hast du eben nicht verinnerlicht, dass HTML ganz einfach "geschrieben" wird. Wir wollen dich nur auf deinem Weg unterstützen.

Zitat:
Zitat von ikiksen Beitrag anzeigen
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.
Bitte spar dir deine Beiträge, wenn du freiwilligen, unbezahlten Helfern, die es nur gut mit dir meinen und dir verschiedene sehr gute Hinweise gegeben haben, nicht mit genug Respekt gegenübertreten kannst.

Schließlich verhält sich dir gegenüber auch niemand respektlos. Auch dann nicht, wenn du auf Fehler hingewiesen wirst.
__________________
Über Internet Explorer 8:
Noch bis 8. April 2014 wird der Internet Explorer 6 mit Sicherheitsupdates versorgt.
Bereits jetzt kann dieser Browser aber vollständig durch den IE8 ersetzt werden. Ältere Betriebssysteme und Browserversionen werden von Microsoft nicht mehr unterstützt.
Auch Programme, die den IE7 benötigen, sind kein Argument gegen IE8, da dieser über entsprechende Kompatibilitätsschichten verfügt.
Ab sofort gilt daher der Internet Explorer 8 als vorausgesetzer Mindeststandard.
Mit Zitat antworten
Antwort

Stichwörter
css, luft, positionierung, zwischenraum

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
1 Pixel Bild ohne CSS Rahmen RingoD CSS 7 29.12.2010 16:43
Dynamische Navigationsleiste horizontal, vertikal Faven CSS 6 28.06.2010 15:06
1 Pixel Linie unten bei <li> churchill (X)HTML 2 26.04.2007 10:37
Zwischenraum - aber woher??? Mrdk CSS 2 23.08.2005 15:35
grafik links und rechts unten ohne zwischenraum einbinden ? Kurt CSS 2 08.06.2004 15:04


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:11 Uhr.