XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Verflixte 20 Pixel zwischenraum (http://xhtmlforum.de/showthread.php?t=66753)

ikiksen 29.01.2012 18:11

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

hubspe 29.01.2012 18:36

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. ;)

ikiksen 20.03.2012 00:08

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;
}

Praktikant 20.03.2012 00:12

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!

EvT 20.03.2012 08:08

Zitat:

Zitat von ikiksen (Beitrag 510487)
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.

Praktikant 20.03.2012 09:27

Zitat:

Zitat von EvT (Beitrag 513029)
'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.

ikiksen 20.03.2012 13:03

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?

gato 20.03.2012 19:34

Zitat:

Zitat von ikiksen (Beitrag 513057)
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 513057)
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.


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