Antworten auf deine Fragen:
Neues Thema erstellen

Website zu klein!

Poki29

Poki29

Ps-ler ;-)

AW: Website zu klein!

Was genau passt dir daran nicht? Wenn central sein soll ist die eleganteste Lösung das Bild als Bg eines Divs zu definieren und diesen mittig auszurichten
 

D

djlars

Noch nicht viel geschrieben

AW: Website zu klein!

Ich hab jetzt erstmal das weiße transparent gemacht..
mit css und divs und sowas bin ich leider nicht so ganz fit..
Wie kann ich denn den header so definieren oder so, dass er in der Mitte ist?
 
T

timmeythe1st

nichtswissender

AW: Website zu klein!

bei mir wird der header in der mitte angezeigt...
unabhängig davon:
<div id="header"><img src="headersource.jpg" alt="beschreibung" /></div>

und zwischen den <head></head>-tags:
<style type="text/css">
#header {
position:relative;
margin:auto;
}
</style>
 
D

djlars

Noch nicht viel geschrieben

Hast recht, der Header ist jetz in der Mitte..lag am Cache

Poki29 schrieb:
Naja hab ich dich geschrieben: Pack de Inhalt einen Div welchen du mittig anordnest. Wie das geht ist wohl eine der am häufigst gestelltesten Fragen im Bereich Html, daher versuch es einfach mal mit google oder bei selfhtml.
Zum Vergrößern anklicken....
EDIT:
einfach mit text-align:center;
 
Zuletzt bearbeitet von einem Moderator:
Poki29

Poki29

Ps-ler ;-)

AW: Website zu klein!

Natürlich geht das auch mit center, denoch empfehle ich dir wirklich dich mit dem Boxmodell vetraut zu machen. Oder wie genug möchtest du dein layout erstellen, mit Tabellen?!

<style type="text/css">
html {
background:url("pic/bggg.png") repeat-x;
}
</style>
<center><style type="text/css">
#header {
position:relative;
margin:auto;
text-align: center;
}
</style></center>
Zum Vergrößern anklicken....

Du kannst den center Befehl nicht in der CSS-Datei anwenden.
 
Zuletzt bearbeitet:
T

timmeythe1st

nichtswissender

AW: Website zu klein!

nein, da hat er recht
meine variante ist definitiv die bessere
und sie ist auch noch css-valide
ausserdem bewirkt das margin:auto; doch schon die zentrierung
wenn du dich mit der materie css beschäftigst, wird deine seite sowieso besser, sauberer, übersichtlicher, usw.
deswegen ist es nur zu empfehlen
auchja und browser interpretieren css auch noch besser
 
tamai

tamai

section9

AW: Website zu klein!

benutze firefox und installiere das addon 'firebug' dann kannst du dir den code von andern seiten ansehen und auch dadurch direkt html und css elemente lernen die dich interessieren.


dein vorhaben ist ähnlich wie eine meiner ersten seiten
(als vorgabe war hier eine seite in html und css mit intro und mindestens drei folge seiten, ohne inhaltlich den anspruch auf vollständigkeit zu haben, natürlich könnte man über die aufteilung und ästhetik diskutieren - aber das ist hier nicht das thema)

wenn du diese seite nimmst, maße und farben an deine bedürfnisse anpaßt
( '<tr class_"top">' und '<tr class="footer-b high="69" rausschmeißen, den footer in der höhe auf ca. 113 (?) pixel stellen, für deine sportfritzen, alaign:right - was du willst) und den part zwischen '<body>' und '</body>' nochmal komplet in eine tabelle schnickst indem du den modifizierten code komplett kopierst, dann die stelle '&nbsp;' in dem CODE unten markierst und den inhalt deiner seite einfügst sollte die geschichte klappen.
in dem folgenden code ist der vorschlag mit dem 'repeat-x' integriert - dein hintergrundbild muß dabei nicht bildschirmfüllend sein, es reicht in deinem fall ein schmaler vertikaler streifen von 1x1000 pixeln.
so hast du deinr bildgröße fett reduziert un dadurch auch eine schnellere ladezeit! übrigens gilt das auch für den BG des menüs, ein vertikaler streifen von 1x64 pix auf 'repeat-x' in dem '<tr>' für den menü!

bsp-seite: eine einfache seite ohne überlauf



- CODE -
______________

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title>xx-titel-xx (wird im browser-tab angezeigt)</title>

<style type="text/css">
<!--
body {background:ulr("ordner_x/bild_x.jpg") repeat-x;
}
-->
</style>
</head>

<body>
<table width="100%" height="100%" cellspacing="0" cellpadding="0" border="0" style="margin-left:auto; margin-right:auto;">
<tr>
<td>

&nbsp;

</td>
</tr>
</table>

- CODE ENDE -
______________

'style' ist 'n bissel eingebundenes css, body ist für den hintergrund und 'a' ist für die links - 'a:hover' und 'a:active' ist für mouse over link und für das aktivieren des links.
die '100%' sorgen dafür das die site, egal bei welche auflösung immer! bildschirmfüllend angezeigt wird.
'cellspacing', 'cellpadding' und 'border' würde ich überal mit NULL angeben (besser in der css-datei) da es meines eindrucks/erfahrung browser gibt die bei keinen angaben ungefragt 'n pix reinrechnen was dir dann die ganze site verhexelt (safari).


die unsgeschlagene referenz:
SELFHTML - Die bekannte Dokumentation zu HTML, JavaScript und CGI/Perl - Tutorial und Referenz, mit etlichen Zusatztips zu Design, Grafik, Projektverwaltung usw.:
SELFHTML 8.1.2 (HTML-Dateien selbst erstellen)

ein sehr guter editor für den code (html und css ...) ist Notepad++ Portable, den kannste dir dann auch den usb-stick packen:
Notepad++ Portable - Download - CHIP Online

in hoffnung dat es dich nicht direkt abschreckt, wünsch ich ersteinmal viel erfolg bei der umsetzung ;)

lg tamaki
 
D

djlars

Noch nicht viel geschrieben

AW: Website zu klein!

Wie bekomme ich es denn so hin, dass die Homepage nur so groß ist, wie ich sie brauche?
Also wenn ich beispielsweise nen langen Text schreibe, dass die Homepage dann ne Scrollbar hat und der Hintergrund auch da bleibt.
Wird der Hintergrund nur nach rechts oder auch nach unten wiederholt mit repeat-x?
 
Poki29

Poki29

Ps-ler ;-)

AW: Website zu klein!

Naja die Homepage ist immer so groß wie der Inhalt, d.h. wenn der Inhalt die Größe des Browserfensters übersteigt werden Scrollbars angezeigt.

Repeat-x wiederholt den Hintergrund an der x-Achse, sprich nach rechts und links. Repeat-y an der y-Achse was nach oben und unten ist.

Tu dir selbst den Gefallen und lerne das Boxmodell ;-) Das hier führt nämlich zu nichts!
 
D

djlars

Noch nicht viel geschrieben

Bin jetzt dabei CSS zu lernen..

Jetzt habe ich das mal mit repeat-y versucht, es klappt aber irgendwie nicht.

Hier der Quellcode
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">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sean's Sheep - Home</title>
<style type="text/css">
html {
background:url("pic/bggg.png") repeat-y;    

}

</style>
<style type="text/css">
html {
background:url("pic/bggg.png") repeat-x;
}
<center><style type="text/css">
#header {
position:relative;
margin:auto;
text-align: center;
}
</style></center>
</head>

<body>
<div id="header"><img src="pic/header4.png" alt="Header" /></div>



</style>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>Hallo  </p>
<p>test</p>
<p>TEEEESTZ</p>
</body>
</html>
 
Zuletzt bearbeitet von einem Moderator:
Poki29

Poki29

Ps-ler ;-)

AW: Website zu klein!

Teste das mal:

Code: 
<style type="text/css">
html {
background:url("pic/bggg.png") repeat;
}
#header {
position:relative;
margin:auto;
text-align: center;
}
</style>
</head>

<body>
<div id="header"><img src="pic/header4.png" alt="Header" /></div>
<!-- Hier kommt dann der Rest -->
Noch ein paar Tipps:
-<center> Befehler haben in der CSS nichts zu suchen!
-Warum schließt due mittels </style> um dann direkt wieder <style> zu öffnen? --->Unnötig und unschön
-Bg einmal definieren reicht
-<style> im Headbereich öffnen und im Bodybereich schließen = Müll!

Und nun der Mastertipp:
Such dir mal ein richtig gutes Tutorial und lern Html/Css mal ordentlich, weil wenn das so weitergeht kann ich dir direkt die Seite coden, das macht dann auch keinen Unterschied mehr...

*Edit* Hättest du mal Tanta Google bemüht wärst du vermutlich auf das gestoßen:
http://forums.digitalpoint.com/showthread.php?t=597484
 
Zuletzt bearbeitet:
D

djlars

Noch nicht viel geschrieben

AW: Website zu klein!

Eine wirklich allerletzte Frage noch:
Wie bekomme ich die Strichmännchen( unten rechts)
ans komplette bildende, also immer da unten hin, wo die Seite mit Inhalt zu Ende ist
 
Poki29

Poki29

Ps-ler ;-)

AW: Website zu klein!

Das ist ja schon wieder ein verdammter ImageSlice....

Nimm doch einfach mal unsere Tipps an dann hättest du diese Probleme nicht.
 
D

djlars

Noch nicht viel geschrieben

AW: Website zu klein!

Also soll ich CSS lernen ?!
Hat einer ein gutes "Tut"?


ist das buch auch "geeignet"?
 
Zuletzt bearbeitet:
T

timmeythe1st

nichtswissender

AW: Website zu klein!

ja, lerne css
und übrigens bedeutet der befehl repeat-x "nur auf der x-Achse wiederholen"
und der befehl repeat-y "nur auf der y-Achse wiederholen"
no-repeat bedeutet "garnicht wiederholen"
und wenn du den befehl komplett weglässt, bedeutet das "auf y- und x-Achse wiederholen"
das männchen müsste als erstes ein png-oder gif-bild (für die tranzparenz) sein
dieses muss das als bild eingebunden und mit einer id versehen werden (<img src="" id="bild" alt="" />), um es per css ansprechen zu können
dann im stylesheet:
#bild {
position:absolute;
bottom:0;
right:0;
}
das position:absolute steht dafür, dass das bild vom keinem anderen element beeinflusst werden kann und quasi "freisteht"
bottom:0 bedeutet, dass der abstand zum unteren rand 0 groß sein soll
und bei right:0 genauso
 
tamai

tamai

section9

AW: Website zu klein!

hallo djlars,

sieht doch erstmal nicht ganz so verkehrt aus.
wegen dem "Tut"? schau bitte noch einmal in mein erstes comment > Stichwort : SelfHTML
uuund du sollt kein css lernen! du tust es wenn du willst :- ) (besser ist das)

das wiederholte
HTML: 
<p>&nbsp;</p>
ist natürlich unnötig.
please check:

HTML: 
<!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>Sean's Sheep, Grass ist unser Element - home</title>
<style type="text/css">
html {
background:url("pic/bggg.png") repeat-y;    

}

</style>
<style type="text/css">
html {
background:url("pic/bggg.png") repeat-x;
}
</head>
<body>
<table width="100%" height="100%" cellspacing="0" cellpadding="0" border="0" style="margin-left:auto; margin-right:auto;">
<tr>
<td>

<!-- deine seite, die tabellenwerte (maße, position, etc.) musst du selbst einfügen und an deine bedürfnisse anpassen ! //-->
<center>
<table>
 <!-- 00 headspace fuer dein schaf ! //-->
    <tr>
        <td>
            00.1 links oben
        </td>
        <center>
        <td>
            00.2 mitte oben, fuer dein schaf
        </td>
        </center>
        <td>
            00.3 rechts oben
        </td>
    </tr>
 <!-- 00 headspace ende ! //-->

 <!-- 01 head menue ! //-->
    <tr>
        <td>
            01.1 links oben
        </td>
        <!-- menue ! //-->
                <table>
                <tr>
                    <td>&nbsp;</td><!-- space //-->
                    <td>
                        HOME
                    </td>
                    <td>
                        -
                    </td>
                    <td>
                        TURNIERE
                    </td>
                    <td>
                        -
                    </td>
                    <td>
                        BILDER
                    </td>
                    <td>&nbsp;</td><!-- space //-->
                </tr>
            </table>

        <td>
            01.3 rechts oben
        </td>
    </tr>
<!-- 01 menue ende ! //-->

<!-- 02 content ! //-->
    <tr>
        <td>
            02.1 links mitte (left side menue)
        </td>
        <td>
            02.2 mitte mitte (inhalte)
        </td>
        <td>
            02.3 rechts mitte
        </td>
    </tr>
<!-- 02 content ende //-->

<!-- 03 footer ! //-->
    <tr>
        <td>
            03.1 links unten
        </td>
        <td>
            03.2 mitte unten (Impressung, haftungsausschlußerklärung, ...)
        </td>
        <td>
            03.3 rechts unten, fue deine maenekens (als .png, bei bedarf zweiteilen linken teil in 03.2 und rechten teil hier rein)
        </td>
    </tr>
<!-- 03 footer ende //-->

</table>
</center>

</td>
</tr>
</table>

und mein guter, wenn du mit 'meta' anfängst lösch deine zeile und versuch es hiermit (natürlich auch wieder editierbar):

HTML: 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type"/>
<meta content="Sean's Sheep, Rasenmähdienst mit sportlichen Ambitionen" name="description"/>
<meta content="Sean's Sheep, Grass ist unser Element" name=""/>
<meta content="Sean's Sheep, Grass ist unser Element" name="title"/>
<meta content="rasen, mähen, sport, gras, grass, element, sheep, schaf" name="subject"/>
<meta content="Rasenmähdienst mit sportlichen Ambitionen" name="source"/>
<meta content="de" name="language"/>
<meta content="Text, Image" name="type"/>
<meta content="text/html" name="format"/>
<meta content="2010-02-28" name="date"/>
<meta content="Sean's Sheep" name="company"/>
<meta content="djlars" name="publisher"/>
<meta content="djlars and psd-tutorials" name="creator"/>
<meta content="djlars and psd-tutorials" name="author"/>
<meta content="global" name="distribution"/>
<meta content="index,follow" name="robots"/>
<meta content="rasen, mähen, sport, gras, grass, element, sheep, schaf, schafe, rasensport, ninjaschaf, grasskiller" name="Keywords"/>

die 'keywords' auch in englisch wen du von englischsprechenden humanoiden gefunden werden möchtest.

und los gehts :)

lg tamaki
 
D

djlars

Noch nicht viel geschrieben

AW: Website zu klein!

timmeythe1st schrieb:
ja, lerne css
und übrigens bedeutet der befehl repeat-x "nur auf der x-Achse wiederholen"
und der befehl repeat-y "nur auf der y-Achse wiederholen"
no-repeat bedeutet "garnicht wiederholen"
und wenn du den befehl komplett weglässt, bedeutet das "auf y- und x-Achse wiederholen"
das männchen müsste als erstes ein png-oder gif-bild (für die tranzparenz) sein
dieses muss das als bild eingebunden und mit einer id versehen werden (<img src="" id="bild" alt="" />), um es per css ansprechen zu können
dann im stylesheet:
#bild {
position:absolute;
bottom:0;
right:0;
}
das position:absolute steht dafür, dass das bild vom keinem anderen element beeinflusst werden kann und quasi "freisteht"
bottom:0 bedeutet, dass der abstand zum unteren rand 0 groß sein soll
und bei right:0 genauso
Zum Vergrößern anklicken....

Dann sieht das bei mir so aus:


Edit: Lesen!!!
 
Zuletzt bearbeitet von einem Moderator:
T

timmeythe1st

nichtswissender

AW: Website zu klein!

ahh ja, daran habe ich nicht gedacht...
ich würde ein div machen, dass den gesamten content enthält
also z.b.
<div id="content">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<img src="" id="bild" alt="M�nnchen" />
</div>

dann ist der bottom eigendlich das ende der webseite
bin mir aber im mom nicht sicher
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden
Zu den Gratis-Inhalten

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Gesamt: 86 (Mitglieder: 2, Gäste: 84)
Robots: 874

Statistik des Forums

Themen
118.619
Beiträge
1.538.363
Mitglieder
67.540
Neuestes Mitglied
Alex Weidner
Oben