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

fragen zum "skalieren" u. verschieben

Status
Für weitere Antworten geschlossen.
R

robby12

Neues Mitglied
hi,


vorab:
eigendlich hatte ich vor meine 3 fragen in den thread zu posten den ich vorhin eröffnet hatte.bloß hab ich dann bemerkt dass ich vom thema html in das thema css abweiche und das will ich nicht ;)


also ich hab mich jetzt mal mit css beschäftigt und hab eine gute seite gefunden wo sehr gut erklärt wurde wie css funtzt.


ich hab mich dann auch gleich mal an meinem ersten layout gemacht.jedenfalls hab ich dann auch gleich meine links schön faziert.nur hab ich jetzt das problem dass jetzt meine navi leiste etwas verrutscht ist.

ich hab mal gekennzeichnet wie ichs gerne haben würde:
ImageShack - Image Hosting :: fragesx0.jpg

1.die navi leiste soll hinten an den hintergrund da ran
2.ich würde den link mit dem rahmen in der mitte des navi hintergrunds haben
3.die navi seite soll weiter tiefer auf die höhe der inhalt seite(die mittlere blaue)

könnr ihr mir da helfen?
ich hab hier nochmal den design.css quellcode:

HTML: 
body {
 
 text-align:center;
 
 }
 
#seitenbereich {
 
 text-align:left;
 
 margin: 0 auto; 
 
 width:780px;
 
 background-color:silver;
 
 }
 
 #kopfzeile {
 background-color:blue;
 border: 1px solid black;
 
}
#inhalte {
  margin-left: 14em;
  background-color:lightblue;
}
#navi {
width:200px;
text-align:left;
margin-top:10px;
margin-bottom:10px;
margin-left:20px;
margin-right:20px;
float:left;
width:13em;
background-color:thistle;
}
#navi ul {
list-style:none; 
}
#navi li {
background-color:green;
border-top:1px solid black;
border-left:25px solid orange;
border-right:1px solid black;
margin-top:10px;
padding-top:8px;
padding-bottom:8px;
padding-left:8px;
padding-right:8px;
}


PS:also ich musste noch oft gucken wie denn der code heißt.aber ich denke das ich schon recht weit bin dafür das ich heut damit angefangen habe^^



könnt ihr mir da helfen?


würde mich sehr freuen


mfg.
 
Nur der css-code bringt leider nichts, wenn man die dazügehörigen Elemente nicht kennt ;)
Es wird aber wohl an einem "margin-left" oder einem "padding-left" liegen.
Setz diese Werte mal auf null, dann wirdt du sehen, ob es daran liegt.
(Am besten immer nur einen auf null setzen, damit du den richtigen findest)
 
ah ok danke dir.jetzt hab ich es erstmal geschafft das
es links gleich ist und nicht zu wenig.

also ich hab jetzt noch einen header gemacht.jetzt hab ich mal gleich im bild die fragen gestellt^^:
http://img207.imageshack.us/img207/2112/fragenf0.jpg

mit dem verschieben und so komm ich noch net so richtig klar.
also würde mich wieda über eine antwort freuen.


mfg.
 
Zuletzt bearbeitet:
Das ist wie gesagt schwer zu sagen, wenn man deinen Code nicht kennt.
Für den Abstand nach oben ist "margin-top" (oder padding-top) verantwortlich
 
Lenchen schrieb:
Das ist wie gesagt schwer zu sagen, wenn man deinen Code nicht kennt.
Für den Abstand nach oben ist "margin-top" (oder padding-top) verantwortlich
Zum Vergrößern anklicken....


hm ok ich hab jetzt nochmal geguckt die stelle aber noch imma net gefunden.hier ist mal der dazugehörige html code:


PHP: 
<html>
<head>
<link rel="stylesheet" type="text/css"
 media="screen" href="design.css" />
</head>
<body>
<title>NoW-News of Warcraft
<div  id="seitenbereich">
<div id="kopfzeile">
 
</div>
<div id="navi">
<ul>
<li><a href="http://www.buffed.de/"> Buffed</a> </li>
<li><a href="http://www.giga.de/">GIGA</a> </li>
</ul>
 
</div>
<div id="inhalte">
<h1>Hallo und Wilkommen auf meiner HP</h1>
</div>
</div>
  </body>
  <html>


PS:krieg den code hier iwie net untereinander gepostet.


mfg.
 
Zuletzt bearbeitet:
hi,
ich habe noch eine frage:roll:
undzwar folgendes:
Tutorial: Website-Vorlage basteln - gimpusers.de

hier sieht man das jemand mit gimp ein layout gestaltet.aber mal eine frage macht man das nur um zu schaun wie das aussehen soll oder werden später die einelnen teile(bilder) richtig eingefügt in den code???

und wenn das so ist kennt wer ein guide oder tut oder sowas dazu????


-mfg-
 
robby12 schrieb:
hier sieht man das jemand mit gimp ein layout gestaltet.aber mal eine frage macht man das nur um zu schaun wie das aussehen soll oder werden später die einelnen teile(bilder) richtig eingefügt in den code???
Zum Vergrößern anklicken....
Es gibt Leute, die machen sowas. Dann wird das fertige Image zerschnitten (slicen) und in eine Tabelle gepackt.

Nur ist das leider keine Vorgehensweise für das WWW. Denn dabei kommt die logische Auszechnung mit HTML zu kurz. Außerdem ergibt das ganze dann ein statisches Layout, das sich nicht in der Größe verändern kann. Aber die Größe des Viewports und die Schriftgröße der Nutzer sind zwei Variablen, die so ein Layout ganz schnell zerstören können und dann wird das Benutzen der Site zur Qual. Folge ist, die Besucher bleiben aus.

Das ist eine gute Vorgehensweise für Print-Layout, wo der Designer die Papiergröße bestimmen kann, der Leser die Schriftgröße nicht verstellen kann und man keine Fonts installieren muss. Aber ins WWW passt sowas nicht.

Ich kann nur davon abraten und empfehle die sinnvolle Vorgehensweise:

1. Inhalt aufschreiben
2. Inhalt mit HTML semantisch (logisch) auszeichnen.
3. Layout und Design mit CSS erstellen.
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben