CSS Rahmen platzieren

Joe Petts

Hi Leute,

ich bin ein totaler Anfänger in CSS und habe mir ein paar Tutorials dazu angesehen
und bin jetzt dabei eigene Seite zu erstellen. Aber Leider habe ich ein Problem.

Und zwar habe ich einen Hintergrund in CSS erstellt und möchte in diesen Hintergrund
noch einen Platzhalter reinmachen um da Buttons einzufügen.

So sieht meine CSS aus:

Code

@charset "utf-8";
/* CSS Document vom Joe Petts Seite */


#content { background-image:url(../Bilder/Hintergrund.png);
    background-repeat:no-repeat;
    margin-left:auto;
    margin-right:auto;
    margin-top:0px;
    width:700px;
    height:800px;}

#head { margin-top:207px;
background-repeat:no-repeat;
margin-top:260px;
margin-left:228px;
margin-right:auto;
width:151px;
height:26px;}


.bilder {margin-left:300px;
margin-right:auto;
margin-top:500px
width:300px;
height:300px;}

Alles anzeigen

Hier soll das Fenster ".bilder" in dem "#content" Rahmen so platziert werden. Aber jedes mal
wenn ich in HTML (Dreamweaver) Div-Tag einfügen mache, hat der Rahmen ".bilder" ganz andere Massen und ist keine 500px von dem oberen Rand entfernt.
Könnt ihr mir vielleicht erklären wie man die richtig platziert? Wäre echt hilfreich.
(Ich habe im Forum nach einer Lösung gesucht, aber fand leider kein passendes Thread. Kann vielleicht daran liegen, dass ich die richtige Begriffe nicht kenne.)

Danke schonmal!

Grüße.

Kämpfer

Zitat von Joe Petts
Hi Leute,

ich bin ein totaler Anfänger in CSS und habe mir ein paar Tutorials dazu angesehen
und bin jetzt dabei eigene Seite zu erstellen. Aber Leider habe ich ein Problem.

Und zwar habe ich einen Hintergrund in CSS erstellt und möchte in diesen Hintergrund
noch einen Platzhalter reinmachen um da Buttons einzufügen.

So sieht meine CSS aus:
Code
@charset "utf-8";
/* CSS Document vom Joe Petts Seite */
 
#content { background-image:url(../Bilder/Hintergrund.png);
    background-repeat:no-repeat;
    margin-left:auto;
    margin-right:auto;
    margin-top:0px;
    width:700px;
    height:800px;}
 
#head { margin-top:207px;
background-repeat:no-repeat;
margin-top:260px;
margin-left:228px;
margin-right:auto;
width:151px;
height:26px;}
 
.bilder {margin-left:300px;
margin-right:auto;
margin-top:500px
width:300px;
height:300px;}
Alles anzeigen
Hier soll das Fenster ".bilder" in dem "#content" Rahmen so platziert werden. Aber jedes mal
wenn ich in HTML (Dreamweaver) Div-Tag einfügen mache, hat der Rahmen ".bilder" ganz andere Massen und ist keine 500px von dem oberen Rand entfernt.
Könnt ihr mir vielleicht erklären wie man die richtig platziert? Wäre echt hilfreich.
(Ich habe im Forum nach einer Lösung gesucht, aber fand leider kein passendes Thread. Kann vielleicht daran liegen, dass ich die richtige Begriffe nicht kenne.)

Danke schonmal!

Grüße.
Alles anzeigen

Mach mal im #content margin: 0 auto; und im #head das zweite margin-top raus, das ganze an sich ist voll durcheinander

Joe Petts

Danke erstmal für die Antwort.
Meine CSS sieht jetzt so aus:

Code

@charset "utf-8";
/* CSS Document vom Joe Petts Seite */


#content { background-image:url(../Bilder/Hintergrund.png);
    background-repeat:no-repeat;
    margin-left:auto;
    margin-right:auto;
    margin: 0 auto;
    width:700px;
    height:800px;}

#head { margin-top:207px;
background-repeat:no-repeat;
margin-left:228px;
margin-right:auto;
width:151px;
height:26px;}


.bilder {margin-left:300px;
margin-right:auto;
margin-top:500px
width:300px;
height:300px;}

Alles anzeigen

Und hier ist die HP:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Joe Petts Homepage</title>
<link href="CSS/Hauptseite2.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--
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];}}
}
//-->
</script>
</head>


<body bgcolor="#000000">
<div id="content">
  <div class="bilder" id="head">Raum für den Inhalt von  class "bilder" id "head"</div>
</div>
</body>


</html>

Alles anzeigen

Und trotzdem hat ".bilder" nicht die Größe und Postion die ich in CSS eingegeben habe.

Kämpfer

Zitat von Joe Petts

Danke erstmal für die Antwort.
Meine CSS sieht jetzt so aus:
.......

Du musst auch die anderen sachen rausnehmen, margin-left:auto;
margin-right:auto;
wenn du margin: 0 auto; schreibst bedeutet das 0px von oben und auto beudetet zentritert(mittig), bei allen anderen auch.
Kurzschreibweise von margin, padding etc íst margin: 0 0 0 0; wenn du die letzten drei nullen ersetzt ist es zentriert.

Joe Petts

Ah ok, habs jetzt gemacht.
Aber wie kriege ich den jetzt ".bilder" dazu 300px hoch und 300px breit zu sein und es 500px von oben und 300px von links zu positionieren?

Kämpfer

Ganz ehrlich du hast voll viele fehler drin, etwas mehr musst dich auch etwas damit befassen:D

Nimm erst mal einen korrekten Doctype

Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL]http://www.w3.org/TR/html4/loose.dtd[/URL]">

Deiner ist unvollständig. Das ruft unter anderem auch fehlerursahcne hervor.

Nun zu deinen divs , was soll das sein

HTML

<div id="content">
  <div class="bilder" id="head">Raum für den Inhalt von  class "bilder" id "head"</div>
</div>

Richtig wäre es so

HTML

<div id="content">
  <div id="head">"</div>
   <div class="bilder"></div>
</div>

Eventuell den .bilder noch position: absolute; geben, oder z-index: 1; <-- Ungetestet

P.s. Schau dir die 2 Seiten in meiner Signatur mal an, kennste ja hoffentlich:D

Zudem schreibst du teilweise HTML und XHTML , näheres hierzu siehst du bei deinen Metaangaben />

Mfg

Joe Petts

Oh oh oh, da brauche ich wohl wirklich bisschen mehr Übung.
Ich werde mir das mal in deiner Signatur nochmal durchlesen.

Aber danke für die Tips und die Hilfe!

Grüße!

Kämpfer

Zitat von Joe Petts

Oh oh oh, da brauche ich wohl wirklich bisschen mehr Übung.
Ich werde mir das mal in deiner Signatur nochmal durchlesen.

Aber danke für die Tips und die Hilfe!

Grüße!

Kein Problem, gerne doch:D

Das in meiner Signatur kannst nicht wirklich lesen, zum Anfang ist das hier ganz gut
http://www.html-seminar.de

Die Seite natürlich von Anfang an aber wenn du paar befehle schon kennst, schau dir das Boxmodell mal an http://www.html-seminar.de/boxmodell-anwendung.htm

Mfg

Edit:

Setz mal diese zwei dokumente ein

index.html

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Titel der Seite</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="keywords" content="">
    <link href="css.css" type="text/css" rel="stylesheet">
    <link href="img/favicon.ico" type="image/x-icon" rel="shortcut icon">
</head>
<body>
    <div id="content">
     <div id="header"></div>
     <div class="bilder"></div>
    </div>
</body>
</html>

Alles anzeigen

Css

Code

/*** Dieses Charset für was brauchste das , lass das mal weg. ***/
/**** setz alle Elemente auf 0 ****/
* {margin: 0; padding: 0;}
body {
font-size: 14px;
font-family: consolas, arial;
background-color: #000;
}
/******** Ende Allgemeine Angaben ****/
#content { 
width:700px;
height:800px;
margin: auto; /*** margin: auto reicht auch, du definierst ja oben mit * für alles auf 
null **/
background-color: #ff0000; /*** Das ersetzt du durch deine bildurl **/
}
#head { 
width:151px;
height:26px;
margin: 207px 0 0 228px;
background-color: #ff55ee;
}
.bilder {
width:300px;
height:300px;
margin: 300px 0 0 300px; /*** Margin: oben rechts unten links; verstehst?? * ohne 
Trennzeichen****/
/*** Dieser margin wert verschiebt dir das bild dann an die jeweilige stelle **/
background-color: #ff22ee; /***  durch deine bildurl/angabe ersetzen **/
}

Alles anzeigen

Funktioniert, jetzt tauscht du alle background-color gegen deine pics aus, also background-image: url(img/bild.png) no-repeat; und lalla es funktioniert

Und alles kleinschreiben, ordner, Dokumente, etc... immer klein der besseren Übersicht wegen;)

Joe Petts

Danke dir vielmals Kämpfer!

Jetzt läuft bei mir wieder alles nach Plan! Warst wirklich großartige Hilfe!
Danke, danke, danke, danke!

Kämpfer

Da du schon länger in dem Thread hier anhängst.....PN Antwort gesendet, so müsste der code jetzt funktionieren;)

Joe Petts

Oh man ey, ich bin hier wieder am verzweifeln.. Gerade ging alles so gut und schon gehts wieder runter. Ich habe jetzt alles gemacht so wie es mir gefällt und dann habe ich entdeckt dass bei Firefox oben kleiner Abstand ist im Gegensatz zu normalem Internet Explorer.

Hier die Seite:
http://joepetts.jo.ohost.de/JoesPage/Hauptseite.html

Und hier die CSS

Code

/**** setz alle Elemente auf 0 ****/
* {margin: 0; padding: 0;}
body {
font-size: 14px;
font-family: consolas, arial;
background-color: #000;
}
/******** Ende Allgemeine Angaben ****/
#content { 
width:700px;
height:800px;
margin: auto; /*** margin: auto reicht auch, du definierst ja oben mit * für alles auf 
null **/
background-image:url(../Bilder/Hintergrund.png);
 /*** Das ersetzt du durch deine bildurl **/
}
#head { 
width:151px;
height:26px;
margin: 207px 0 0 228px;
background-color: #ff55ee;
}
.frei {
width:217px;
height:145px;
margin: 10px 0 0 30px; /*** oben rechts unten links ***/
}
.kontakt {
width:199px;
height:163px;
margin: 0px 0 0 110px;
}
.projekte {
width:216px;
height:175px;
margin: 20px 0 0 290px;
}
.bilder3 {
width:196px;
height:136px;
margin: 150px 0 0 500px;
}
.info {
width: 250;
height: 50;
margin:auto;
background-color: #ff55ee;
}

Alles anzeigen

Bitte Hilfee!!

Kämpfer

Hallo,

setz bitte noch in deiner .info klasse pixelwerte hinter die angaben. Sonst erkennt er es nicht. Es gibt ja px, em, % etc... Dieser Rand dürfte eigentlich nicht bestehen, da du am anfang alle werte auf 0 setzt. Wenn du bei .info die px dahiunter hast und es immer noch verschoben ist dann mach bitte doch mal bei #content doch noch eine 0 vor auto (margin: 0 auto;)

Hoffe es klappt, kann mir den abstand im FF anders nicht erklären;)

Mfg

Joe Petts

Hm, das ist noch schlimmer mit dem Rand geworden. Der ist jetzt noch größer. Ich verstehe auch nicht woran das liegt... Aber ich habe bisschen rumprobiert und so wie es aussieht, liegt das nicht an der CSS sondern an dem HTML Code. Ist doch zum verzweifeln das Ganze

Tags