Beiträge von sejuma

sejuma

Stimmt, container muss mindestens so hoch wie das Bild sein, damit es vollständig erscheint.

sejuma

Also verschiedene Grafiken für unterschiedliche Auflösungen würde ich nicht hinterlegen.
Entweder also wie von driver vorgeschlagen eine fixe Breite nehmen und zentrieren,
oder flexibles CSS-Layout mit Prozentwerten für die Container-Breiten.
Mit der Hintergrundgrafik würde ich dann (horizontal) so "trixen", dass ich zur Grafik noch ne passende bg-color gebe, die dann im div den restlichen Platz bei Bedarf ausfüllt.

Code

#container
 {
  background-image:url(deinbild.gif);
  background-repeat:no-repeat;
  background-position:center;
  background-color:red;
  height:50px;
 }

Bei direkter Einbindung als img kann man die Grafikmaße auch in Prozent statt Pixel angeben (z.b. width:100%; height; 65%;). Kann aber zu Verzerrungen und Qualitätsverlusten führen.

sejuma

Zitat von BeeF

Hallo,

Ich habe ein Problem.
Ich möchte mir eine eigene Homepage erstellen, weiß aber nicht wie!
Ich habe mit dem adobe Photoshop schon die Backgrounds für:

Forum, News, Clan, Misc., Bout us und Gästebuch gemacht.

Ich brauche einfach nur HILFE!
euer BeeF

Nach dem Wetterbericht soll es heute Nacht solch tolle Websites regnen.
Mal im Ernst: Wie soll dir jemand helfen, wenn du Null Ahnung hast?
Kannst du einem Dreijährigen helfen Prozentrechenaufgaben zu lösen, wenn er noch nicht mal die Grundrechenarten beherrscht?

Dies ist ein Hilfe-Forum und kein Mach-mir-Forum. Um das alles zu realisieren bedarf es schon fundierter Kenntnisse, die hier vermutlich selbst noch nicht mal die alteingesessenen Mitglieder auf sich vereinen.

Sieh dir mal die FAQ's an. Da sind einige interessante Links enthalten, wo man sich entsprechendes Wissen erwerben kann.

sejuma

Die CSS-Style-Angaben müssen in den head-Bereich.
Dieser ist zweimal geöffnet und zweimal geschlossen. Es kann aber nur einen head-Bereich geben.
Dann fehlt noch ein doctype.

sejuma

Probier's nochmal damit:

Code

body
{margin:0;
padding:0;}




#wrapper
{
width:700px;
margin:0 50px;
background: #CAFF70;
border-right: 210px solid #98F5FF;
}


#innenbox
{
margin-left: -50px;
padding: 5px;


}


#rechtsbox
{
position: relative;
left:10px;
float: right;
width: 200px;
margin-right: -200px;
}


#contentbox
{


height: 1%;
margin-left:50px;


}


.clear
{
clear:both;
}
</style>


</head>
<body><h1 style="text-align:center;">header</h1>
<div id="wrapper">
        <div id="innenbox">




                <div id="rechtsbox">


erste Zeile Rechtsbox</p>


zweite Zeile Rechtsbox</p>


dritte Zeile Rechtsbox</p></div>


                <div id="contentbox">


erste Zeile Contentbox</p>


zweite zeile Contentbox</p>




erste Zeile Contentbox</p>


zweite zeile Contentbox</p>


                </div>


                <div class="clear"></div>


</div>

Alles anzeigen

Wichtig ist, dass die Seite einen doctype hat.

Das clear brauchst du, wenn du unter den div's z.B. noch einen footer anbringen möchtest, da vorher mit float gearbeitet wurde. http://css-technik.de/css-examples/219_9/

sejuma

Der übergeordnete div nimmt die Höhe der untergeordneten an, sofern dessen Höhe nicht durch einen height-Wert begrenzt wird.
begrenzt wird.

Bei variablem Text zweier div's kannst du mit Faux columns arbeiten.

Eine weitere Möglichkeit bietet dieser Code:
CSS

Code

body
{margin:0;
padding:0;}




#wrapper
{
width:900px;
margin:0 50px;
background: #CAFF70;
border-right: 210px solid #98F5FF;
}


#innenbox
{
margin-left: -50px;
margin-right: -160px;
padding: 5px;


}


#rechtsbox
{
position: relative;
left:5px;
float: right;
width: 200px;
margin-right: -200px;
}


#contentbox
{
width:px;
height: 1%;
margin-left:50px;


}


.clear
{
clear:both;
}

Alles anzeigen

HTML

Code

<body><h1 style="text-align:center;">header</h1>
<div id="wrapper">
        <div id="innenbox">




                <div id="rechtsbox">


erste Zeile Rechtsbox</p>


zweite Zeile Rechtsbox</p>


dritte Zeile Rechtsbox</p></div>


                <div id="contentbox">


erste Zeile Contentbox</p>


zweite zeile Contentbox</p>




erste Zeile Contentbox</p>


zweite zeile Contentbox</p>


                </div>


                <div class="clear"></div>


</div>
</body>

Alles anzeigen

sejuma

Weshalb hast du denn für jede Seite eine eigene CSS-Datei hinterlegt? Das ist total überflüssig. Eine CSS-Datei reicht für alle Seiten aus.
Ebenso kannst du dann auf jeder Seite den gleichen Link zur CSS-Datei verwenden.
Bei Kontakt weicht die CSS-Referenz

Code

templates/default_black/style_include.css

von den anderen ab. Vermutlich sind in dieser Datei nicht alle backgrounds/Links definiert.

Nimm auf jeder Seite immer die gleiche CSS, dann sollte es auch keine Abweichungen geben.

sejuma

... und irgendwo ist dann sicher noch ein "Zauberknopf", der eine tolle Homepage mit sämtlichen Features generiert und einen sauberen Quelltext liefert.

Mal im Ernst: Wenn du dauerhaft Spaß an einer HP haben willst, wirst du um einige Grundkenntnisse in HTML nicht umhin kommen. Schließlich wollen die Seiten ja auch gepflegt und verändert werden.
Jeder Beruf erfordert eine Ausbildung, wer Auto fährt braucht nen Führerschein, nur beim Homepagebasteln solls immer schnell, komfortabel und ohne jegliche Vorkenntnisse gehen.
Lernt HTML und CSS. Alles andere für den Homepagebau wie Editor, Uploader bekommt ihr kostenlos.

sejuma

Zitat

obwohl ich die höhe und breite angeb, nicht der gesamte hintergrund dargestellt.

Wie meinst du das?
Passt die Grafik nicht in .menu1?
Dann könnte es daran liegen, dass die Grafik größer ist als der div. Dieser ist 78px hoch. Wenn die Grafik höher ist, dann passt sie auch nicht rein.

sejuma

Link oder der dazugehörige HTML-Quelltext könnten hilfreich sein.

sejuma

div's sollten nur einmal auf der Seite vorkommen. Dein content erscheint jedoch zweimal. Das solltest du ändern.
Setz mal in der Reihenfolge das menue nach dem header und danach den content. Diesen versehe mal noch mit einem float:left;.
Beim footer gib noch clear:both; ein.
Wenn's dann noch nicht hinhaut poste nochmal den CSS und HTML Code.

sejuma

Zitat von Elvis
Code
a { 
width: 50px; 
}
Dafür braucht man aber keine Tabelle. Oder sejuma?

Nee, dafür brauchste keine Tabelle, Elvis. Nützt in diesem Fall jedoch überhaupt nichts!

a ist ein Inline-Element. Deshalb hat die Breitenangabe erst dann eine Wirkung, wenn du noch ein "display: block;" hinzufügst. Das führt aber wiederum dazu, dass die Links untereinander und nicht nebeneinander dargestellt werden.
Verwendest du noch eine Hintergrundfarbe, stehen die Links trotzdem dicht beieinander, da sich selbst bei deinem vorherigen padding-Vorschlag dieser auf den Innenabstand bezieht. Ganz so einfach isses also doch nicht.

sejuma

Mensch Leute, macht doch gleich ein ordentliches Listenmenue, so wie es sich mit CSS gehört. Hier mal ein Beispiel:

CSS:

Code

ul
{
 list-style-type:none;
 margin:0px;
 padding:0px;
 font-family: Verdana;
 font-size: 1em;
}


li
{
display:inline;
margin-left: 5px; 
}


a:link, a:visited
{
padding: 3px 10px;
line-height:2em;
color:#00008b;
font-weight:bold;
text-decoration:none;
background-color:#FFA500;
}


a:hover
{
color:#00008b;
text-decoration:none;
background-color:#CDC8B1;
font-weight:bold;
}

Alles anzeigen

Der Abstand zwischen den Links wird mit dem Wert von margin-left: 5px; bei "li" gesteuert.

HTML:

Code

<ul>
[*][url='#']Link 1[/url]
[*][url='#']Link 2[/url]
[*][url='#']Link 3[/url]
[/list]

Raute durch Referenzadresse ersetzen.

sejuma

Probier's mal so:
Statt

Code

<div style="text-align: left;">

nimm

Code

<div style="float:left; text-align: left;">

sejuma

Oh je, immer der IE!
Wo hast du in der CSS denn deine class "footer"? Find ich nicht, obwohl in HTML darauf Bezug genommen wird.

sejuma

FAQ's III/4
Gilt ebenso für andere Inhalte.

sejuma

Mir ist der Kontrast in der Navi und auf den Link-Buttons noch etwas zu gering (schlecht lesbar). Ebenso die Schrift im linken Block zu klein.
Ansonsten ordentlich und übersichtlich gegliedert.

sejuma

Wenn du position-Angaben nicht ganz gezielt einsetzen willst, dann lass besser die Finger davon. Führt meist irgendwann zu Problemen. Positionierungen von div's erreichst du im Normalfall besser mit float- und Margin-Angaben.
http://de.selfhtml.org/css/eigenschaf…ng.htm#position

Den Inhalt eines div's änderst du normalerweise ganz einfach über den HTML-Quelltext. Die Formatierungsangaben über CSS.

Man kann den Inhalt eines div's aber auch in eine gesonderte Datei schreiben und ihn dann in den div per PHP-Script includen, falls du das evtl. meintest.

sejuma

Ja, dann mach mal!
Der aus meiner Sicht wesentlichste Punkt dabei ist folgender:
Viele Anfänger meinen offensichtlich, dass es wunderschöne Websites mit allen möglichen Features wie Block, GB, Forum, Kontaktformular etc. (dazu noch möglichst viel Geld verdienen) vom Himmel regnet oder dass man sie per Knopfdruck erhält.
Wenn dann noch dazu kommt, dass weder Lernbereitschaft noch Einsicht vorhanden sind, dass es eben ohne fundierte Grundkenntnisse dauerhaft doch nicht geht (schließlich muss eine aktuelle HP auch ständig gepflegt werden), dann ist in diesen Fällen Hopfen und Malz verloren.
Aber ein paaar grundsätzliche Tipps wie z.B.
* was muss ich lernen
* was brauche ich (Domain, Webspace, Traffic)
* wie kommt die Seite online

können sicher nicht schaden. Zum Teil sind hierzu bereits Links in den angepinnten FAQ's enthalten.

sejuma

Ne Jojo, position absolute ist ne Positionsangabe und hat mit der Breite nichts zu tun.
a ist ein Inlineelement. Wenn man es zu block deklariert nimmt's auch die gewünschte Breite an.

Beiträge von sejuma

hintergrundbild passend für alle gängigen auflösungen

hintergrundbild passend für alle gängigen auflösungen

Brauche hilfe beim Homepage bau!

im ff alles okay im IE nicht

div der grösse des übergeordneten divs anpassen

div der grösse des übergeordneten divs anpassen

CSS Gibt keine Bilder bei Opera ... aus. Beim IE ist OK

Dreamweaver Ersatz ?

css link hintergrund

css link hintergrund

Homepage mit CSS

<hr>

<hr>

Adsense-Anzeigen richtig einfügen

Anlauf Nr. 2 (EDIT: 3) - DarkDogWeb - [url]www.eikehoerding.de[/url]

div verändern

Anlauf Nr. 2 (EDIT: 3) - DarkDogWeb - [url]www.eikehoerding.de[/url]

div verändern

Erste Website FAQ

Problem mit Hintergrundbild und Link