• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

homepage "einteilen"

Status
Für weitere Antworten geschlossen.
tarpi

tarpi

Neues Mitglied
Hallo,

ich fange gerade an html etc. zu lernen und will für unseren Clan eine hp machen.
Nun würde ich gerne die hp teilen so wie auf der Alten ( The Perfect Ability | Design by www.Gamer-Designs.de ) .
Ich meine damit das es an der seite nur weis ist (und wie man die farbe bestimmt) und in der Mitte die eigentliche Homepage.
Ich hoffe jmnd. hat verstanden was ich meine ;)

mfg tarpi
 
Danke erstmal für die Antwort.
Doch leider werde ich daraus nicht schlau.
Habe eigentlich alles gemacht was dort stand aber passiert ist nichts ausser einem Text. (Ich bin ein horizontal zentrierter Container.
Falls keine Höhenangabe definiert ist, wächst meine Länge mit dem Inhalt.)

Kann vllt mal jmnd. einen kompletten Code posten und sagen wo ich darin die Hintergrundfarbe des Containers ändern kann.
Danke.

mfg tarpi
 
tarpi schrieb:
Kann vllt mal jmnd. einen kompletten Code posten und sagen wo ich darin die Hintergrundfarbe des Containers ändern kann.
Zum Vergrößern anklicken....

Vllt kannst du auch deinen Code posten und wir überprüfen ihn und zeigen dir die eventuellen Fehler auf. Nur so lernt man, wenn man immer alles vor die Füße geschmissen bekommt, lernt mans nie :-)

Grüße
Loon3y
 
Habe den Code von der von prm gepostetesn seite genommen:


body
{
margin: 0;
padding: 0;
width:100%;
height:100%;
}

#center
{
width: 700px;
border: 1px solid blue;
margin: 30px auto;
}

<body>
<div id="center">
<p>
Ich bin ein horizontal zentrierter Container.
Falls keine Höhenangabe definiert ist, wächst meine Länge mit dem Inhalt.
</p>
</div>
</body>



doch da dabei nur der Text auf der hp steht habe ich am Anfang des css teils <p? und an das ende <?gestetzt was allerdings auh nicht das erwünschte resultat brachte.

Daraufhin habe ich gegoogelt und in wikipediadiesen gefunden:

CSS:
p.note {
position: relative;
left: 15%;
width: 80%;
padding: 30px;
padding-bottom: 45px;
border: 1px solid black;
line-height: 1.5em;
color: black;
font-weight: bold;
text-align: justify;
background-color: #eeeeee
}
​
HTML:
<p class="note">
Dies ist ein kleiner Testabsatz. Dies ist ein kleiner Testabsatz. ...
</p>
​
Das p-Tag macht den dazwischen stehenden Text zu einem Absatz. Da ihm die Klasse „note“ zugewiesen wird, wird er von einem CSS-kompatiblen Browser wie folgt dargestellt:


Doch wenn ich genau das selbe mache kommt wieder etwas anderes herraus.
 
tarpi schrieb:
Habe den Code von der von prm gepostetesn seite genommen:
Zum Vergrößern anklicken....
Der funktioniert auch wunderbar. Bis auf die Tatsache, dass das div eigentlich unnötig ist ;-)

Vermutlich brauchst Du noch einen Doctype für den Standards Mode. Ältere IEs werden das sonst nicht zentrieren können.

doch da dabei nur der Text auf der hp steht habe ich am Anfang des css teils <p? und an das ende <?gestetzt was allerdings auh nicht das erwünschte resultat brachte.
Zum Vergrößern anklicken....
Den Satz hab ich nicht verstanden, insbesondere wegen der "<p?" und "<?gesetzt"!?

Daraufhin habe ich gegoogelt und in wikipediadiesen gefunden:
Zum Vergrößern anklicken....
Viel zu kompliziert. Man braucht keine relative Positionierung, um ein Block-Element horizontal zu zentrieren.
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

body
{
margin: 0;
padding: 0;
width:100%;
height:100%;
background-color: #eeeeee
}

#center
{
width: 700px;
border: 1px solid blue;
margin: 30px auto;
background-color: #eeeeee <--- funktioniert das um die Farbe zu ändern?
}


Was fehlt bei diesem Code jetzt noch damit etwas passiert?


zu: Den Satz hab ich nicht verstanden, insbesondere wegen der "<p?" und "<?gesetzt"!?

Ich habe mal gelesen das man um einen css in html einzubinden vor den code <p? und ans Ende <? setzten muss. Kann aber auch sein das das php war oder ich es nichtmehr richtig weis.

mfg
 
das mit den <? und ?> ist php und hat jetzt ersteinmal nichts mit html und css zu tun. Das ist eine serverseitige Programmiersprache.

Bezgülich den rest von dir:

Deine html-datei sieht so aus: ( z.B. index.htm )

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

[B]Metaangaben[/B]

<title> dein titel </title>

<link href="deinecssdatei.css" rel="stylesheet" type="text/css">

</head>
</body>

<div id="center">
  <p> Ich bin ein horizontal zentrierter Container.
        Falls keine Höhenangabe definiert ist, wächst meine Länge mit dem Inhalt.
  </p>
</div>

</body>
</html>
bei den fettgedruckten Metaangaben kommen, wie nicht ander szu erwarten, die metangaben rein.

desweiteren erstellst du dir noch eine datei mit der endung .css und da kommt alles wa smit css zu tun hat rein. dieser verlinkst du über (wie oben)

Code: 
<link href="deinecssdatei.css" rel="stylesheet" type="text/css">
Diese css-datei (hier deinecssdatei.css benannt) sieht dann inhaltlich so aus:

Code: 
body
{
margin: 0;
padding: 0;
width:100%;
height:100%;
background-color: #eeeeee[B];[/B]
}
 
#center
{
width: 700px;
border: 1px solid blue;
margin: 30px auto;
background-color: #eeeeee[B];[/B]   
}
Natürlich kannst du die css-datei benennen, wonach dir ist.

Edit: wenn du natürlich statt dem #eeeeee; (nicht den strichpunkt vergessen!) eine anderen farbcode hinschreibst, hat dein container auch eine andere farbe.


Gruß
Loon3y
 
Zuletzt bearbeitet:
Vielen dank soweit klappt alles.
Jetzt habe ich noch eine letzte Frage wie bekomm ich das gaze auf die seite der hp?
 
Nein ich meine wie ich den Container auf die Linke und rechte Seite der homepage bekomme.
Habe alle "Center" durch right oder left ersetzt aber passiert ist nichts, wie es sonst gehen sollt weis ich nicht.
 
Was denn jetzt? Zentrieren oder links und rechts?

Ein Block-Element links oder rechts neben ein anderes Block-Element geht ganz anders als Zentrieren.

Das machst Du per CSS mit "float".

Ich habe das Gefühl, es wäre besser für Dich, Dich erstmal ein wenig in die Materie HTML und CSS einzuarbeiten, Deine Vorgehensweise scheint mir doch etwas chaotisch. Letztendlich sparst Du damit ne Menge Zeit, auch wenn Du jetzt erstmal etwas Zeit investieren musst.
 
Ok, versuch mal css zu lernen kenn jmnd. vllt ne gute seite?
Danke an alle die geholfen haben.
Melde mich bei weiteren Fragen wieder.

mfg tarpi
 
CSS 4 You - The Finest in Stylesheets
Zum Vergrößern anklicken....
Seite scheint nicht schlecht zu sein. Danke.

Bei deiner ursprünglich genannten Beispielseite handelt es sich um ein dreispaltiges, zentriertes Layout.
Hierzu gibt es sicher mehrere Beispiele, aber auch verschiedene Möglichkeiten, das zu erreichen.
Hier mal einige Demos:
Dreispaltiges Layout, zentriert mit fixen Breiten
Layout Gala: a collection of 40 CSS layouts based on the same markup and ready for download!
Zum Vergrößern anklicken....
Danke. Hat alles funktioniert! :)
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben