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

div boxen? ich komme nicht klar...

S

Soulgrafix

Neues Mitglied
Mahlzeit..

ich muss für die Berufsschule eine Website gestalten+programmieren (mit HTML+CSS), aber ich komme nicht klar...

Folgende Probleme sind aufgetreten:

- meine Hintergrundgrafik ist nur im Dreamweaver zu sehen, nicht im Browser
- es verschiebt sich alles, sobald ich ein Bild einfüge...
- die div box vom Impressum reagiert nicht auf margin veränderungen...

joa das sind so die Hauptprobleme zur zeit.. :|

Hier der Quellcode vom HTML + CSS

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" />
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>MySummer 2010 - Soulgrafix' Portfolio</title>
</head>
<body>


<div id="navi"><a href="index.html">Home</a><br>
<a href="about.html">Über mich</a><br>
<a href="kontakt.html">Kontakt</a><br>
<a href="design.html">Design</a><br>
<a href="musik.html">Musik</a><br>
<a href="film.html">Film</a></div>

<div id="content"><h1>Überschrift</h1><br>
inhalt...
</div>

<div id="footer"><a href="impressum.html">Impressum</a></div>

</body>
</html>
Zum Vergrößern anklicken....


CSS
@charset "UTF-8";
/* CSS Document */

#navi a {
color:#d6d6d6;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
margin-left: 175px;
margin-top: 102px;
line-height: 24px;
text-decoration:none;

}

#navi a:hover {
color:#d6d6d6;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
margin-left: 175px;
margin-top: 102px;
line-height: 24px;
text-decoration:underline;
}

#content {
color:#d6d6d6;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
margin-left: 270px;
margin-top: -143px;
line-height: px;
}

h1{
color:#d6d6d6;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
margin-left: 0px;
margin-top: -143px;
line-height: 24px;
font-style:eek:blique;
}

body {
background-image: url(/images/backgroundtest.jpg);
background-color:black;
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
width: 1024px;
}


#footer a {
color:#d6d6d6;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
margin-left: 175px;
margin-top: 200px;
line-height: 24px;
text-decoration:none;
}

#footer a:hover {
color:#d6d6d6;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
margin-left: 175px;
margin-top: 800px;
line-height: 24px;
text-decoration:underline;
}
Zum Vergrößern anklicken....


Bin für jede Hilfe dankbar..


greetz
 
Werbung:
Hallo.

Zu deinem Background Problem: In welchem Verzeichnis , relativ zum CSS liegt deine Grafik? Wenn deine CSS in einem eigenen Verzeichnis liegt musst du erst aus diesem Verzeichnis raus bevor du in das images Verzeichnis rein kannst.

Das würde dann so aussehen:
Code: 
background-image: url(../images/backgroundtest.jpg);
Dein Problem mit dem Bild: Das sich alles verschiebt wenn du ein Bild einfügst ist klar, schliesslich braucht das Bild ja Platz damit es angezeigt werden kann.
Bitte erkläre das etwas genauer.

Noch einige Ratschläge:
HTML und CSS sind keine Programmiersprachen, du kannst also nichts programmieren.

Deine Navi ist eine Liste von Links. Zeichne es bitte auch als Liste aus, dann kannst du auch gleich den div wegschmeissen.

Dei Footer ist ein Absatzt, zeichne ihn bitte auch als solchen aus, dann kannst du auch gleich den div wegschmiessen.

Gruss
Elroy
 
Erstmal vielen Dank für deine Antwort..

Das mit dem Hintergrund hat perfekt geklappt, da bin ich ja schonmal happy.. ^^

Ja nur wie verhinder ich das sich alles verschiebt? Das Bild ist ein kleines bild von 165x120 Pixeln, das recht neben dem Text im Content zu sehen sein soll.

Okay, ich bin totaler Anfänger in diesem Gebiet. Dank dir.

Was bringt es mir denn, wenn ich es als Liste auszeichne? Und den div benötige ich doch um im CSS die schriftart etc. zu bestimmen?..

Jetzt wo der Hintergrund auch im Browser zu sehen ist, ist mir aufgefallen, das sich der Hintergrund zwar beim Skalieren des Browserfensters mitbewegt, jedoch die Navi und der Content an ihrer Position stehen bleiben. Wie kann ich das verhindern?

greetz
 
Werbung:
Soulgrafix schrieb:
Was bringt es mir denn, wenn ich es als Liste auszeichne?
Zum Vergrößern anklicken....
Dass du dann HTML für das verwendest, wofür es gedacht ist, nämlich um deinem Inhalt eine Bedeutung zu geben.
Ein Menü ist eine Auflistung von Links, das ist aus deinem Code aber nicht ersichtlich. Es ist nur dann eine Liste, wenn du es auch als solche auszeichnest.

Und den div benötige ich doch um im CSS die schriftart etc. zu bestimmen?..
Zum Vergrößern anklicken....
Wer hat dir denn diesen Unsinn erzählt?
Du kannst jedes Element mit CSS formatieren, nicht nur divs.
 
du kannst das garnit verhindern das es sich verschiebt, aber du kannst nacher alles wider zurück verschieben wenn den bild auf der richtigen position ist.

du kannst auch der liste eine id geben du brauchst kein div um einem tag ein css befehl zugeben. die liste bringt dir das du alles untereinander hast ohne das du alles einzeln positionieren musst. eine liste fängt man mit in deinem fall mit <ul><li an und hört mit </li></ul> wider auf. denke daran das jeder menu punkt ein li bekommt.
 
Werbung:
patrick1988 schrieb:
die liste bringt dir das du alles untereinander hast ohne das du alles einzeln positionieren musst.
Zum Vergrößern anklicken....
Das ist nicht richtig, eine Liste bringt dir nur, dass es von allen Geräten auch als Liste erkannt wird. Ein einfaches
Code: 
li {display: inline;}
wirft deine Argumentation über den Haufen.

Ein Tag wird nach der Bedeutung des Inhaltes gewählt, nicht nach dessen Aussehen im Browser.

HTML hat nichts mit dem Aussehen zu tun, HTML ist nur für die Semantik zuständig.
 
Soulgrafix schrieb:
Ja nur wie verhinder ich das sich alles verschiebt? Das Bild ist ein kleines bild von 165x120 Pixeln, das recht neben dem Text im Content zu sehen sein soll.
Zum Vergrößern anklicken....

Wenn der Text neben deinem Bild zu sehen sein soll kannst du das mit CSS float: left; einstellen.

Soulgrafix schrieb:
Jetzt wo der Hintergrund auch im Browser zu sehen ist, ist mir aufgefallen, das sich der Hintergrund zwar beim Skalieren des Browserfensters mitbewegt, jedoch die Navi und der Content an ihrer Position stehen bleiben. Wie kann ich das verhindern?
Zum Vergrößern anklicken....

Kannst du deine Seite mal irgedwo hochladen.
Ich steh wahrscheinlich grad auf dem Schlauch, aber ich weiss wirllich nicht was du meinst.

Gruss
Elroy
 
Werbung:
Hochladen ist schlecht
Zum Vergrößern anklicken....
Warum?

Das ist wieder einer der typischen Fälle von "Ich mach mir mal ein Layout und versuch den Inhalt dort reinzuquetschen". So funktioniert das nicht. Wenn sich jemand in seinem Browser eine andere Schriftgröße einstellt, sprengt es dein gesamtes Layout.

Bei einer Webseite fängt man immer mit dem Inhalt an, zeichnet diesen sinnvoll aus und erstellt sich hinterher ein Layout. Die Elemente in denen der Inhalt steht müssen flexibel auf unterschiedliche Schriftgrößen reagieren können. Eine Grafik (solange es keine SVG ist) kann das nicht, ist also als Hintergrund für einen Text ungeeignet.
 
Das lässt sich aber leider nichtmehr ändern, da ich die Seite am Dienstag abzugeben habe..

Es ist halt meine erste Seite und da bitte ich um Verständnis, das ich solche Kenntnisse leider nicht habe...


greetz
 
Werbung:
Soulgrafix schrieb:
Das lässt sich aber leider nichtmehr ändern, da ich die Seite am Dienstag abzugeben habe..
Zum Vergrößern anklicken....
Das ist ja noch fast ne Woche, da lässt sich noch alles mögliche machen.

Es ist halt meine erste Seite und da bitte ich um Verständnis, das ich solche Kenntnisse leider nicht habe...
Zum Vergrößern anklicken....
Deswegen erwähne ich es ja, damit du diesen Fehler bei der nächsten Seite nicht wieder machst.
 
Ja mit deinen Kenntnissen bestimmt.. ^^
Ich wüsste nicht wie es anders machen sollte.. und würde auch gern dabei bleiben..
Es wird ja irgendwie möglich sein..
 
Werbung:
Ich meine nicht RapidShare, ich meine einen Webserver. Jetzt müsste jeder der dir helfen möchte diese 1.4MB runterladen, bei sich entpacken und auf nen Server schieben, wenn du das machst, brauchen wir nur die Seite im Browser zu öffnen. Glaub mir, du wirst mehr Hilfe erhalten, wenn du die Seite auf einen Webserver lädst.
 
_Thor_ schrieb:
Das ist wieder einer der typischen Fälle von "Ich mach mir mal ein Layout und versuch den Inhalt dort reinzuquetschen"
Zum Vergrößern anklicken....

Das ist doch nichts schlimmes.. das machen viele heutzutage wenn man ein fixes design macht geht das doch wunderbar, wie sonst kann man ein so tolles design realisieren wen nicht im photoshop und danach zusammensetzen?
 
Werbung:
patrick1988 schrieb:
Das ist doch nichts schlimmes.. das machen viele heutzutage
Zum Vergrößern anklicken....
Und weil es viele machen muss es gut sein?

wenn man ein fixes design macht geht das doch wunderbar
Zum Vergrößern anklicken....
Angenommen du erstellst eine Seite mit fixem Layout für einen Viewport von 1000 x 800px, dann sieht das bei einem Viewport dieser Größe vielleicht gut aus, was ist aber mit einen Viewport von 1900 x 1000 oder 320 x 280 oder 500 x 500? Dann passt sich die Seite nicht dem Viewport an und die Besucher müssen unter Umständen seitlich scrollen, um den ganzen Inhalt sehen zu können. Mich stört sowas immer ungemein und ich such mir dann eine Seite, auf der die Informationen besser bereitgestellt werden.

Ein anderes Thema ist die variable Schriftgröße. Hast du einen Textabsatz, der immer 300 x 200 px groß ist, dann mag der Text dort reinpassen, wenn die vom Autor vorgegebene Schriftgröße verwendet wird. Viele User ändern aber die Schriftgröße im Browser, weil sie eine größere Schrift benötigen um alles lesen zu können. Dann passt der Text nicht mehr in den Textabsatz und ragt darüber hinaus. Vielleicht sogar in anderen Text hinein. Das lässt sich dann nicht mehr lesen.

Und bevor du jetzt sagst, das sind ja eher die Ausnahmen, sie sind es nicht. Gerade mit den ganzen Smartphones, Netbooks, Subnotebooks gibt es keinen Standardviewport mehr (und hat es auch noch nie gegeben). Alle Ausmaße sind möglich und eine Webseite muss auf diese reagieren können. Ebenso wie auf unterschiedliche Schriftgrößen.

Eine Seite mit fixem Layout kann das alles nicht.

wie sonst kann man ein so tolles design realisieren wen nicht im photoshop und danach zusammensetzen?
Zum Vergrößern anklicken....
Eine Webseite dient in erster Linie der Übertragung von Informationen, also sollte der Schwerpunkt darauf liegen, diese Informationen allen Interessierten zur Verfügung zu stellen. Das Layout darf nicht zum Hindernis werden.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben