Html/Css - Position festlegen

07/04/2011 14:00 .Moskito#1
Heyho.
Ich habe gestern angefangen, mich mit css/html zu beschäftigen und eine kleine Homepage anzufangen. (s. screen)

Jetzt hab ich allerdings das Problem...
Die 3 Grafiken "Coding, Grafik & Webdesign" sollen genau auf dem braunem Holzhintergrund sein, siehe screen im Anhang.

Bei mir passt es, aber sobald jemand mit einer größeren Auflösung auf die Seite geht, passt es wieder nicht, da sich die bilder nach links bzw rechts verschieben.


Ich hoffe, ihr könnt mir weiterhelfen.
07/04/2011 14:16 NotEnoughForYou#2
Dein Code wäre nützlich sonst kann man dir schlecht helfen
07/04/2011 14:30 .Moskito#3
Quote:
Originally Posted by NotEnoughForYou View Post
Dein Code wäre nützlich sonst kann man dir schlecht helfen

Quote:
<center>
<head>
<title>MF - Startseite</title>
<img src="http://moskito.***********/Uploads/header_mf.png" alt="Moskito's"></img>
</head>

<body>
<div style="text-align: center;"><a><img style="border: 0px solid ; width: 200px; height: 27px;"src="http://moskito.***********/Uploads/leiste2.png"></a><a href="Hp1.htm"><img style="border: 0px solid ; width: 102px; height: 27px;"src="http://moskito.***********/Uploads/button_start.png"></<a><a href="Hp2.htm"><img style="border: 0px solid ; width: 102px; height: 27px;"src="http://moskito.***********/Uploads/button2.png"></<a><a href="Hp3.htm"><img style="border: 0px solid ; width: 102px; height: 27px;"src="http://moskito.***********/Uploads/button3.png"></<a><a href="Hp4.htm"><img style="border: 0px solid ; width: 102px; height: 27px;"src="http://moskito.***********/Uploads/button4.png"></<a><a href="Hp5.htm"><img style="border: 0px solid ; width: 102px; height: 27px;"src="http://moskito.***********/Uploads/button5.png"></<a><a><img style="border: 0px solid ; width: 200px; height: 27px;"src="http://moskito.***********/Uploads/leiste.png"></a></div>
<br>
<div style="text-align: left; position:relative; top : 0%; left: 14%;"><a href="grafik.htm"><img style="border: 0px solid ; width: 200px; height: 75px;"src="http://moskito.***********/Uploads/grafik.png"></<a>
<br>
<a href="coding.htm"><img style="border: 0px solid ; width: 200px; height: 75px;"src="http://moskito.***********/Uploads/coding.png"></<a>
<br>
<a href="webdesign.htm"><img style="border: 0px solid ; width: 200px; height: 75px;"src="http://moskito.***********/Uploads/webdesign.png"></<a>
<br>

<style type="text/css">
body {
background-color: #e4d289;
background-image: url([Only registered and activated users can see links. Click Here To Register...]
background-position: top center;
background-attachment:fixed;
}

</style>


</body>
</center>
wäre nett, wenn du da dann was veränderst, es mir dann auch zu erklären... :)
07/04/2011 14:40 NotEnoughForYou#4
Quote:
<center>
<head>
<title>MF - Startseite</title>
<img src="http://moskito.***********/Uploads/header_mf.png" alt="Moskito's"></img>
</head>

<body>
<div style="text-align: center;"><a><img style="border: 0px solid ; width: 200px; height: 27px;"src="http://moskito.***********/Uploads/leiste2.png"></a><a href="Hp1.htm"><img style="border: 0px solid ; width: 102px; height: 27px;"src="http://moskito.***********/Uploads/button_start.png"></<a><a href="Hp2.htm"><img style="border: 0px solid ; width: 102px; height: 27px;"src="http://moskito.***********/Uploads/button2.png"></<a><a href="Hp3.htm"><img style="border: 0px solid ; width: 102px; height: 27px;"src="http://moskito.***********/Uploads/button3.png"></<a><a href="Hp4.htm"><img style="border: 0px solid ; width: 102px; height: 27px;"src="http://moskito.***********/Uploads/button4.png"></<a><a href="Hp5.htm"><img style="border: 0px solid ; width: 102px; height: 27px;"src="http://moskito.***********/Uploads/button5.png"></<a><a><img style="border: 0px solid ; width: 200px; height: 27px;"src="http://moskito.***********/Uploads/leiste.png"></a></div>
<br>
<div style="text-align: left; position:relative; top : 0%; left: 14%;"><a href="grafik.htm"><img style="border: 0px solid ; width: 200px; height: 75px;"src="http://moskito.***********/Uploads/grafik.png"></<a>
<br>
<a href="coding.htm"><img style="border: 0px solid ; width: 200px; height: 75px;"src="http://moskito.***********/Uploads/coding.png"></<a>
<br>
<a href="webdesign.htm"><img style="border: 0px solid ; width: 200px; height: 75px;"src="http://moskito.***********/Uploads/webdesign.png"></<a>
<br>

<style type="text/css">
body {
background-color: #e4d289;
background-image: url([Only registered and activated users can see links. Click Here To Register...]
background-position: top center;
background-attachment:fixed;
}

</style>


</body>
</center>
Also
1. center tag ist veraltet
2. im head bereich kommt nur title , script einfügungen etc ( kein img oder body zeug )
3. dein <style type="text/css"> kommt in den head und <!-- dein style --> hat gefehehlt .. .normalerweise kommt noch <!-- body { blabla; }--> (besser geht es über ein externes stylesheet dass du über <link rel="stylesheet" type="text/css" href="style.css" /> in den head bereich einfügst
4. inline style ist zwar gut für spezielle sachen die nur 1 mal oder so vorkommen ( wobei da klassen besser geeignet sind ) aber nicht bei allen
5. absolute positinoieren sind veraltet !!!!!
6. Prozentangaben sind ebenfalls veraltet !! macht man über margin und padding ( CSS )
7. Doctype & html tag fehlen
8. eine navi macht man über ein listing für gewöhnlich ( CSS )

so das war das grobe gibt natürlich noch mehr :) aber jeder fängt so an :D


mfg

PS: normaler aufbau einer html seite :

PHP 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>
<
title>Seitentitel</title>
<!-- 
meistens kommen hier dann stylesheet oder javascript o.ä hin ( <!-- --> benutzt man auch zum kommentieren ) -->
</
head>
<
body>
<
h2>blabla</h2>
</
body>
</
html
07/04/2011 15:31 ClOuDy.#5
absolut positionieren und prozentwerte sind überhaupt nicht veraltet. gibt genügen anwendungsgebiete dafür.

der grund warum sich die bilder bei größeren bildschirmen verzieht ist, liegt an der positionierung. mach das mal nur mit margin/padding - "position:" ist als anfänger mal außen vor zu lassen. warum? merkst du selbst gerade.
07/04/2011 15:35 NotEnoughForYou#6
gut protzentwerte nicht zwingend aber absolute macht man so gut wie nirgends mehr
07/04/2011 16:03 .Moskito#7
Quote:
Originally Posted by NotEnoughForYou View Post
gut protzentwerte nicht zwingend aber absolute macht man so gut wie nirgends mehr
Hatte anstatt der Prozentwerte da Pixelwerte stehen.. hat allerdings nicht geklappt, deswegen hab ich es mit % versucht..

das mit den absoluten hat mir ein Kumpel geraten, es zu versuchen, was anscheinend ja auch nicht geklappt hat..

wegen dem margin/padding google ich gleich mal :)
07/04/2011 16:06 NotEnoughForYou#8
wenn du willst kannste mich auch in skype adden und ich geh´s mit dir durch