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

Content-Background erstellen!

Leventus

Leventus

Neues Mitglied
Hey Community =)

Ich bin noch nicht so fit was HTML und CSS betrifft.
Doch dies möchte ich nun ändern.
Dazu lese ich derzeit das Buch: Webseiten erstellen für Einsteiger


Doch jetzt mal zur meiner eigentlichen Fragen.
Wie bekomme ich es hin, dass der Content-Bereich
ein Background bekommt? Wenn ich der Font ein Background verpasse, ist das ja nicht gerade die optimale Lösung oder?

Ich möchte, dass jeder Artikel einen eigenen Background bekommt.
Hab euch mal ein Bild dazu gemacht!

Anhang anzeigen 2634

Wie man gut erkennen kann, ist hinter dem ersten Artikel ein Hintergrundbild.
Dieser soll fixiert werden und beim scrollen nicht mit scrollen.

Die Artikel sollen also kein durchgängigen weißen Hintergrund haben,
sondern die Artikel sollen getrennt voneinander sein.

Wie definiere ich so was am besten?

lg.
 
Hey Cheffchen =)
Danke erst einmal für deine Hilfe.

Hier ist das Bild noch einmal.
Unbenannt-1.jpg

Vielleicht verstehst du jetzt was ich vor haben?

Lg.
 
Hallo,

so ganz ist immer noch nicht klar was möchtest, was ist "jeder Artikel"? oder "Content"?
Meinst das weiße was ändern möchtest?
meinst die einselne textabsätze?
meinst den bereich unterhalbt des des Bildes mit allen texten?

egal was als Antwort kommt ohne link kann dir keiner sagen was dann wo ändern solltest.
Da wir ja nicht die bezeichnungen aus einem bild erkennen oder die struktur.


Cheffchen
 
Okay, dann hab ich das wohl nicht richtig beschrieben.

Ich habe ja mein Content-Bereich.
Wo mein Text/Inhalt drin steht.

Mein Background für den Text soll weiß sein.
Aber nicht durchgehend sondern getrennt.

Also News1 - Trennung - News2 - Trennung - News3.

Vielleicht kann ich es noch nicht so gut erklären, weil ich noch nicht
in der Denkweise von XHTML richtig drin bin.

Wenn ihr das jetzt noch nicht verstanden habt, dann mach ich euch ein Bild. :)

Lg.


EDIT: Hab euch mal ein Bild erstellt =)
Vielleicht kann ich euch damit besser veranschaulichen was ich meine.

Unbenannt-1.jpg


Ich hoffe, ihr könnt mir jetzt helfen =)
lg.
 
Zuletzt bearbeitet:
Hallo,

das mit dem Bild ist schön hilft aber nicht richtig ohne Link.

Denn ohne Link kann die erklärung nur heisen:
- mach ein div mit schwarzem hintergrund mit fester höhe für den trenner
- das mit den anderen hintergründen einfach passende divs ansprechen und per css hintergrund vergeben.

Cheffchen
 
Meinst du denn Links zur Homepage?
Weil ich hab die Seite ja noch gar nicht online... :(

Ich kann die den Quelltext mal hier veröffentlichen.

XHTML DATEI:
Code: 
<!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" xml:lang="de" lang="de">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15"/>

    <title>Sreenplayer</title>
    <link rel="stylesheet" href="css/style.css" type="text/css" />
    
</head>

<body>

<div id="navi">
    <a href="/photoshop.htm">Home</a>
    <a href="/photoshop.htm">PhotoShop</a>
    <a href="/photoshop.htm">Forum</a>
    <a href="/photoshop.htm">Downloads</a>
</div>

<div id="artikel">
    <h1>
    Test!
    </h1>
    <p>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore 
    et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
    </p>
</div>

</body>
</html>



CSS DATEI:
Code: 
Navi {
    

}

body {
    background-color: #000000;
    background-image: url(../img/bg_main.png);
    background-repeat: no-repeat;
    background-position: 150px 0px;
}

artikel {
    
}


Ich hoffe, dass das weiterhilft.
lg.
 
Hallo,

eigentlich nicht aber hast ein fehler deswegen dürfte doch wieder reichen.
Falsch
Code: 
artikel {
    
}
richtiger mit # da id, wenn das generel richtig ist da eine id nur einmal vorkommen darf.
Denn inhalt kannst ja aus body kopieren und anpassen
Code: 
#artikel {
    
}

Cheffchen
 
Ah Okay.

Das heißt IDs müssen mit einem "#" gekennzeichnet werden.
So nenne ich das jetzt einfach mal.


Ich möchte meinem Text einfach nur ein Background verpassen.
Mir ist aber nicht bewusst, welche Methode dazu am geeignetsten ist.
Soll ich eine Tabelle mit den gewünschten Maßen erstellen und ihr dann einfach ein
Background-Color zuweisen?


Lg.
 
Hallo,

hatte ich doch geschrieben, einfach den in halt vom body nehmen und halt anpassen wie möchtest.
Code: 
body {
    background-color: #000000;
    background-image: url(../img/bg_main.png);
    background-repeat: no-repeat;
    background-position: 150px 0px;
}

#artikel {
    background-color: #666666;    
}
oder was meinst als text?
das wird jetzt grau, musst alt anpassen, beispiel hast ja vom body was noch möglich ist.
Alles was im html in einem id oder classe tag steht kannst so ansprechen und ändern.
(bei class ist das dann ein . anstelle der #)

Cheffchen
 
Hey Cheffchen =)
Ich möchte dir vorweg erst einmal für deine Geduld mit mir danken :)

Bin halt Anfänger und froh, dass mir überhaupt jemand hilft.

Da du die Seite am liebsten Online haben wolltest, hab ich sie hochgeladen.
Sreenplayer

Ich habe schon ein paar Veränderungen vorgenommen.
- Hab den Text jetzt per CSS ausgerichtet.
- h1 und p direkt über CSS angesteuert.
- Und die Navigation angepasst.

Jetzt möchte ich natürlich, dass der Text nicht über die ganze Breite vom Explorer läuft.
Wie kann ich diesen Begrenzen? Sagen wir auf 600px?


HTML Datei:
Code: 
<!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" xml:lang="de" lang="de">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15"/>

    <title>Sreenplayer</title>
    <link rel="stylesheet" href="css/style.css" type="text/css" />
    
</head>

<body>

<div id="navi">
    <a href="/photoshop.htm">Home</a>
    <a href="/photoshop.htm">PhotoShop</a>
    <a href="/photoshop.htm">Forum</a>
    <a href="/photoshop.htm">Downloads</a>
</div>

<div id="artikel">
    <h1>
    Test!
    </h1>
    <p>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore 
    et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
    </p>
</div>

</body>
</html>


CSS Datei:

Code: 
#navi {
    position: absolute;
    left: 900px; top:10px;
}

a {
    font-family: arial;
    font-size: 20px;
    color: #fffff;
}

a:hover {
    font-family: arial;
    font-size: 20px;
    color: #grey;
}

body {
    background-color: #000000;
    background-image: url(../img/bg_main.png);
    background-repeat: no-repeat;
    background-position: 150px 0px;
}

h1 {
    font-family: arial;
    font-size:_16px;
    color: #ffffff;
    position: absolute;
    left: 250px; top: 230px;
}

p {
    font-family: arial;
    font-size:_12px;
    color: #ffffff;
    text-align: justify;
    position: absolute;
    left: 250px; top: 280px;
}


Der HOVER Effekt funktioniert irgendwie noch nicht. Aber ich weiß leider nicht woran es liegt.
Lg.
 
Hallo,

also ich rede nur vom online ding.

vergiss das schnell mit dem position, das macht man nur in ausnahme fällen.
p kannst doch nicht positionieren das kommt doch später öfter vor.
Lösch am besten alles was mit Position zu tun hat.

width:800px suchst aber nicht für p sondern eher für #artikel oder was ganz anderes, die frage ist sieht das Ziel aus und wie soll das verhalten sein?
Laut deinen Bilder soll das ja feste breite haben also musst ein div rum machen um das mittig zu machen und die breit fest zu legen.

css:
#wrapper{width:800px; margin:10px auto;}

html:
direckt hinter <body>
<div id="wrapper>

direckt vor </body>
</div>


damit ist das mittig und hast ein rahmen wo der Inhalt rein kommt.
Wenn dann alles position aus hast wird sich alles darin befinden.

Cheffchen
 
Hey Cheffchen.

Klar, stimmt!
Jetzt wo du es sagt, ist es mehr als einleuchtend und logisch!

Mit den Definitionen komm ich noch nicht wirklich klar.
#wrapper usw.

Vielleicht liegt es auch daran, weil ich im Buch noch nicht so fortgeschritten bin!
Das Thema wird da sicherlich auch noch behandelt. Hoffe ich zumindest.

Ich werde das nachher auf jeden Fall umsetzen, was du mir empfohlen hast.
Mal schauen wie weit ich komme =)


Lg.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben