2 Spalten, 3 Fotos, 1 Foto genau auf Grenze zwischen Spalte

mj23 · 30. Juni 2009

Hallo alle zusammen,

kann mir jemand sagen wie ich das Gerüst einer Seite, so wie es hier:

<a class="postlink" href="http://www.html.de/attachments/html-und-xhtml/994d1246263474-2-spalten-3-fotos-1-foto-genau-auf-grenze-zwischen-spalte-1-und-2-unbenannt-1-kopie.jpg">http://www.html.de/attachments/html-und ... -kopie.jpg</a>

zu sehen ist, hinbekomme?

Thank´s a lot!!!

PS: Ich weiß das man eigentlich zuerst mit dem Inhalt anfangen sollte und danach mit dem Design, dennoch wäre ich für jede Hilfe dankbar!

Talwin · 30. Juni 2009

Hi,

deinen Link kann man nicht öffnen, wenn man in dem Forum nicht registriert ist.

Aber warum schaust Du Dir nicht einfach den Quelltext dieser Seite an? Was sind Deine konkreten Fragen dazu? Was verstehst Du nicht?

Gruß Talwin

mj23 · 30. Juni 2009

Hi,

daran habe ich garnicht gedacht das der Link als unregistrierter Nutzer nicht lesbar ist, sorry!

Also hier ist der HTML-Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<link href="steuerung.css" type="text/css" rel="stylesheet" />
<div id="steuerung">
Hier Steuerung
</div>
<div id="zweite_spalte">
Hier unser Inhalt
</div>

</body>
</html>

Und hier der CSS-Code:
body {
font-family: Arial, Helvetica, sans-serif;
}
#steuerung {
background-color: yellow;
}
#zweite_spalte {
background-color: green;
}
#steuerung {
background-color: yellow;
width: 300px;
float:left;
padding: 60px 0; /* Innenabstand: oben/unten 4px, li/re 0 */
}
#zweite_spalte {
background-color: green;
margin-left: 300px;
padding: 60px 0; /* Innenabstand: oben/unten 4px, li/re 0 */
}

td {
font-family: Arial, Helvetica, sans-serif;
}

th {
font-family: Arial, Helvetica, sans-serif;
}

Als Ergebnis solltet ihr rechts und links jeweils eine Spalte erhalten, wobei die linke schmaler ist als die rechte.

Meine Fragen lauten nun:
1. Wie bekomme ich die beiden Spalten gleich breit?
2. Ich habe vor in beiden Splaten jeweils ein Foto zu platzieren plus ein genau in der Mitte, d. h. genau auf der Grenze der beiden Spalten

Es wäre wirklich großartig wenn du mir helfen könntest!!!

Vielen Dank!

Gruß
Sven

Talwin · 30. Juni 2009

Hi,

Du weist ja mit:

Code

width: 300px;

der linken Spalte eine feste Breite zu. Die rechte Spalte nimmt sich dann einfach den Rest der Breite.

Schau mal dieses Beispiel, bin bei dem Mittelbild aber noch nicht sicher, ob das der beste Weg ist:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test</title>
    <style type="text/css">
      #eins {
        float: left;
        width: 50%;
        border: 1px solid blue;
      }
      #zwei {
        border: 1px solid red;
        margin-left: 50%;
      }
      #BildMitte {
        position: absolute;
        width: 100px;
        height: 100px;
        margin-left: -50px; // Haelfte der width-Angabe
      }
    </style>
  </head>
  <body>
    <div id="eins">
      Lorem ipsum dolor sit amet 
      Consectetuer magna In Cras Nulla 
      Mauris pellentesque faucibus Vestibulum elit 
      Ac consectetuer Curabitur Vestibulum vitae 
      Vitae condimentum auctor sollicitudin accumsan 
      Lorem Nam semper Lorem hendrerit 
      Urna velit mauris dapibus Morbi 
      Curabitur eget tristique quis Curabitur 
      Mattis Quisque velit Nulla lacinia 
      Sem urna tincidunt Lorem adipiscing 
      Nibh id est dolor est 
      Rhoncus ut felis nascetur sit 
      Integer tincidunt eu nunc et 
      Sem ut Pellentesque id nulla
    </div>
    <img src="bild.jpg" id="BildMitte" />
    <div id="zwei">
      Lorem ipsum dolor sit amet 
      Consectetuer magna In Cras Nulla 
      Mauris pellentesque faucibus Vestibulum elit 
      Ac consectetuer Curabitur Vestibulum vitae 
      Vitae condimentum auctor sollicitudin accumsan 
      Lorem Nam semper Lorem hendrerit 
      Urna velit mauris dapibus Morbi 
      Curabitur eget tristique quis Curabitur 
      Mattis Quisque velit Nulla lacinia 
      Sem urna tincidunt Lorem adipiscing 
      Nibh id est dolor est 
      Rhoncus ut felis nascetur sit 
      Integer tincidunt eu nunc et 
      Sem ut Pellentesque id nulla
    </div>
  </body>
</html>

Alles anzeigen

Gruß Talwin

lauras · 30. Juni 2009

Wenn du alles absolut positionierst, dann geht als CSS-Attribut der z-index.

Damit legst du fest, in welcher Reihenfolge übereinander positionierte Elemente angezeigt werden. Das Bild hätte den z-index: 1; und der Rest z-index: 0;

Geht aber nur bei absoluter Positionierung.

mj23 · 30. Juni 2009

OK ihr habt mir schon mal enorm weiter geholfen. es sieht jetzt in etwa so aus wie ich es mir vorgestellt habe.

Bliebt nur noch die Positionierung der Bilder in der rechten und linken Spalte.

Ich habe es mit verschiedenen Codes aus dem Internet versucht bekomme es aber nicht hin!

Hier ist jetzt der aktuelle Quellcode:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>




<title>Startseite</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="navigation.css" type="text/css" rel="stylesheet" />




<ul id="navibereich">
  <li id="navi01"><a href="index.html">News</a></li>
  <li id="navi02"><a href="ck.html">CK</a></li>
  <li id="navi03"><a href="mediathek.html">Mediathek</a></li>
  <li id="navi04"><a href="kontakt.html">Kontakt</a></li>
</ul>




</head>




<body>




<body id="startseite">
<div align="center">
  <style>
body { margin: 0; padding: 0;}
</style>
</div>




<style type="text/css">
      #eins {
	  position: absolute;top:140px; left:0px;
        float: left;
        width: 600px;
		height: 480px;
		background-color: #7F0E0E;
      }
      #zwei {
	  position: absolute;top:140px; left:180px;
        margin-left: 420px;
		width: 600px;
		height: 480px;
		background-color: #EEDBA5;
      }
      #BildMitte {
        position: absolute;top:140px; left:420px;
      }
    </style>
  <body>
  <br><br>
    <div id="eins">
    <img class="img150" src="108.jpg" width="320" height="222" border="0">
    </div>
    <img class="img150" src="dsc_0029.jpg" id="BildMitte" width="320" height="222" border="0">
    <div id="zwei">
    <img class="img150" src="dsc_0029.jpg" width="320" height="222" border="0">
	</div>
  </body>
</html> 




</body>
</html>

Alles anzeigen

Talwin · 30. Juni 2009

Hi,

hast Du ohne zju verstehen, was Du da machst, einfach mal Code kopiert? So sieht es zumindest aus. Ich sehe auf Anhieb HTML Code im Head Bereich, dazu mehrere <body> usw. Bitte versuche erst mal sauberen Code zu produzieren, und versuche das gefundene zu verstehen. So wird das sonst nix.

Gruß Talwin

mj23 · 30. Juni 2009

hi,

kopiert habe ich nichts, es macht aber wahrscheinlich den Eindruck, weil ich noch nicht so den Durchblick habe.

Du glaubst das ich was kopiert habe wegen dem Teil des Codes:

Code

<ul id="navibereich">
<li id="navi01"><a href="index.html">News</a></li>
<li id="navi02"><a href="ck.html">CK</a></li>
<li id="navi03"><a href="mediathek.html">Mediathek</a></li>
<li id="navi04"><a href="kontakt.html">Kontakt</a></li>
</ul>

vermute ich mal. Ich habe es aber selbst gemacht.

Wenn ich nur wusste wie man sauberen Code schreibt???

Gruß
Sven

lauras · 30. Juni 2009

Da hat Talwin Recht. Versuch außerdem den Code en bisschen zu strukturieren, am besten lagerst du die CSS noch aus und postest zwei Codes.

Achja, wo genau sollen die Bilder denn positioniert werden? So wie auf dem Bild?

LG
Laura

PS.: Um uns die Hilfe ine bisschen zu erleichtern, pack doch den Code demnächst zwischen

Code

, dann kann man ihn besser lesen und vom restlichen Text unterscheiden.

mj23 · 30. Juni 2009

OK ,

Ich hoffe ich bekomme es jetzt was besser hin!!!

Der CSS-Code:

Code

body {
  font-size: 15px;
  font-weight: bolder;
  font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
}




#navibereich li {
  display: inline; /* Listenelemente nebeneinander */
  list-style-type: none; /* Aufzählungszeichen entfernen */
}




#navibereich {
  background-color: #F7FFC3; /* Hintergrundfarbe für die Navigation */
  padding: 4px 0; /* Innenabstand: oben/unten 4px, li/re 0 */
  border-bottom: 3px solid #EEDBA5; /* Rahmenlinie unten */
  margin: 0; /* Keinen Außenabstand */
  background: url(schwarzerbalken.jpg) no-repeat center;
  height: 88px;
}




#navibereich a {
  color: #EEDBA5;                  /* Schriftfarbe beige */ 
  text-decoration: none;         /* Unterstreichung entfernen */ 
  padding: 4px;              /* oben/unten 4px, re/li 15px */
  margin: 60px;
}




#navi01 {
	position:relative;top:45px; left: 270px;
	}

#navi02 {
	position:relative;top:45px; left: 170px;
	}

#navi03 {
	position:relative;top:45px; left: 70px;
	}

#navi04 {
	position:relative;top:45px; left: -30px;
	}




#navibereich a:hover, #News #navi01 a, #CK #navi02 a, #Mediathek #navi03 a, #Kontakt #navi04 a




.img150
{
float: none;
padding: 4px;
}




td {
	font-family: Arial, Helvetica, sans-serif;
}




th {
	font-family: Arial, Helvetica, sans-serif;
}

Alles anzeigen

Der HTML-Code:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>




<title>Startseite</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="navigation.css" type="text/css" rel="stylesheet" />




<ul id="navibereich">
  <li id="navi01"><a href="index.html">News</a></li>
  <li id="navi02"><a href="ck.html">CK</a></li>
  <li id="navi03"><a href="mediathek.html">Mediathek</a></li>
  <li id="navi04"><a href="kontakt.html">Kontakt</a></li>
</ul>




</head>




<body>




<body id="startseite">
<div align="center">
  <style>
body { margin: 0; padding: 0;}
</style>
</div>




<style type="text/css">
      #eins {
	  position: absolute;top:140px; left:0px;
        float: left;
        width: 600px;
		height: 480px;
		background-color: #7F0E0E;
      }
      #zwei {
	  position: absolute;top:140px; left:180px;
        margin-left: 420px;
		width: 600px;
		height: 480px;
		background-color: #EEDBA5;
      }
      #BildMitte {
        position: absolute;top:140px; left:420px;
      }
    </style>
  <body>
  <br><br>
    <div id="eins">
    <img class="img150" src="108.jpg" width="320" height="222" border="0">
    </div>
    <img class="img150" src="dsc_0029.jpg" id="BildMitte" width="320" height="222" border="0">
    <div id="zwei">
    <img class="img150" src="dsc_0029.jpg" width="320" height="222" border="0">
	</div>
  </body>
</html> 




</body>
</html>

Alles anzeigen

Talwin · 30. Juni 2009

Hi,

der HTML Teil ist immer noch wirr.

Code

<ul id="navibereich">
  <li id="navi01"><a href="index.html">News</a></li>
  <li id="navi02"><a href="ck.html">CK</a></li>
  <li id="navi03"><a href="mediathek.html">Mediathek</a></li>
  <li id="navi04"><a href="kontakt.html">Kontakt</a></li>
</ul>

muss nach <body> rein und nicht zwischen <head></head>.
Pro HTML Seite ist nur genau ein body und nur genau ein head Bereich erlaubt. Daher sehe ich hier schon Fehler:

Code

</head>




<body>




<body id="startseite">
<div align="center">
  <style>
body { margin: 0; padding: 0;}

Alles anzeigen

Hier werden schon mindestens 3 body Bereiche geöffnet... Außerdem vermischst Du HTML mit CSS hier.
Das kommt mit Sicherheit vom Kopieren von verschiedenen Quellen.
Bitte erst mal aufräumen.

Gruß Talwin

lauras · 30. Juni 2009

Drei body-Bereiche sind zwei zuviel, aufräumen solltest du das am besten als erstes. Am besten lädst du dir einen Editor herunter (ich benutze Scriptly) der dir dieses Grundgerüst am Anfang erstellt, das erspart Arbeit und diese Fehler. (Trotzdem solltest du den Aufbau einer Seite kennen

Ich habe dir mal einen Beispiel-Code gemacht, versuch mal, ihn zu verstehen. Ist jedoch ungetestet, müsste jedoch gehen,

index.html:

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" xml:lang="de" lang="de">




<head>
    <link href="style.css" type="text/css" rel="stylesheet" />
</head>




<body>




<div id="inhaltsbox"><img class="pic_klein1"/></div>
<img class="pic_klein2"/>
<div id="inhaltsbox2"><img class="pic_klein1"/></div>




</body>
</html>

Alles anzeigen

Wie du siehst, ist der HTML-Code sehr kurz. Die Sachen, die das DEsign betreffen sind komplett im CSS-Code:

style.css:

Code

.pic_klein1 {
    height: 50px;
    width: 70px;
    position: relative;
    margin-top: 225px;
    margin-left: 115px;
}




.pic_klein2 {
    height: 50px;
    width: 70px;
    position: absolute;
    z-index: 1;
    margin-left: 340px;
    margin-top: 250px;




}




#inhaltsbox {
    width: 300px;
    height: 500px;
    border: solid 1px black;
    background-color: lime;
    position: absolute;
    z-index: 0;
    margin-left: 75px;
    margin-top: 25px;
}




#inhaltsbox2 {
    width: 300px;
    height: 500px;
    border: solid 1px black;
    background-color: lime;
    position: absolute;
    z-index: 0;
    margin-left: 375px;
    margin-top: 25px;
}

Alles anzeigen

Vielleicht schaust du dir auch mal den Aufbau des Codes an und erkennst, wie viel einfacher es ist, Fehler zu finden, wenn der Code übersichtlich ist!

LG

mj23 · 30. Juni 2009

Vielen Dank an euch!!!

Ich werde mich mit dem dem Aufräumen beschäftigen und die Änderungen morgen hier posten, in der Hoffnung das es übersichtlicher geworden ist!

Gruß

Sven

mj23 · 1. Juli 2009

Hi,

also ich hab jetzt mal aufgeräumt :wink:

Was halt ihr jetzt davon?

index2.html

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>Startseite</title>
	</head>




	<body>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">




		<link href="navigation.css" type="text/css" rel="stylesheet" />
				<ul id="navibereich">
				  <li id="navi01"><a href="index.html">News</a></li>
				  <li id="navi02"><a href="ck.html">CK</a></li>
				  <li id="navi03"><a href="mediathek.html">Mediathek</a></li>
				  <li id="navi04"><a href="kontakt.html">Kontakt</a></li>
				</ul>




		<div align="center">
  			<style> body { margin: 0; padding: 0;} </style>
		</div>




		<br>
		<br>

		<link href="pictures.css" type="text/css" rel="stylesheet" />
   			 	<div id="eins">
   					<img class="img150" src="108.jpg" width="320" height="222" border="0">
    			</div>
				<div id="BildMitte">
    				<img class="img150" src="dsc_0029.jpg" width="320" height="222" border="0">
				</div>
				<div id="zwei">
					<img class="img150" src="dsc_0029.jpg" width="320" height="222" border="0">
				</div>
  </body>
</html>

Alles anzeigen

navigation.css

Code

body {
  font-size: 15px;
  font-weight: bolder;
  font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
}




#navibereich li {
  display: inline; /* Listenelemente nebeneinander */
  list-style-type: none; /* Aufzählungszeichen entfernen */
}




#navibereich {
  background-color: #F7FFC3; /* Hintergrundfarbe für die Navigation */
  padding: 4px 0; /* Innenabstand: oben/unten 4px, li/re 0 */
  border-bottom: 3px solid #EEDBA5; /* Rahmenlinie unten */
  margin: 0; /* Keinen Außenabstand */
  background: url(schwarzerbalken.jpg) no-repeat center;
  height: 88px;
}




#navibereich a {
  color: #EEDBA5;                  /* Schriftfarbe beige */ 
  text-decoration: none;         /* Unterstreichung entfernen */ 
  padding: 4px;              /* oben/unten 4px, re/li 15px */
  margin: 60px;
}




#navi01 {
	position:relative;top:45px; left: 270px;
	}

#navi02 {
	position:relative;top:45px; left: 170px;
	}

#navi03 {
	position:relative;top:45px; left: 70px;
	}

#navi04 {
	position:relative;top:45px; left: -30px;
	}




#navibereich a:hover, #News #navi01 a, #CK #navi02 a, #Mediathek #navi03 a, #Kontakt #navi04 a




.img150
{
float: none;
padding: 4px;
}




td {
	font-family: Arial, Helvetica, sans-serif;
}




th {
	font-family: Arial, Helvetica, sans-serif;
}

Alles anzeigen

pictures.css

Code

#eins {
position: absolute;top:140px; left:0px;
float: left;
width: 600px;
height: 480px;
background-color: #7F0E0E;
}




#zwei {
position: absolute;top:140px; left:180px;
margin-left: 420px;
width: 600px;
height: 480px;
background-color: #EEDBA5;
}




#BildMitte {
position: absolute;top:140px; left:420px;
}

Alles anzeigen

Für mich stellt sich jetzt noch die Frage wie ich die Bilder richtig positionieren kann. Das erste ist momentan ganz links das andere genau in der Mitte (gehört auch dahin) und ein weiteres überdeckt das in der Mitte (sollte natürlich nicht sein). Wie kann ich das lösen? Immer wenn ich was probiere kommt eine falsche Darstellung raus.

Was ich außerdem nicht verstehe ist dies:

Code

<div align="center">
  			<style> body { margin: 0; padding: 0;} </style>
		</div>

Talwin schrieb gestern das dies einen Body-Bereich öffnen würde, nehme ich es aber weg entsteht über und neben dem Header ein weißer Rand, soll natürlich auch nicht sein. Woran kann das liegen?

Gruß
Sven

Talwin · 1. Juli 2009

Hallo,

leider ist dein HTML Code immer noch formal falsch. Alle <meta> Angaben gehören in den head-Bereich. D.h. sowohl die Einbindung der CSS Dateien muss dahin als auch die charset Angabe. Wenn Du das hast, dann geht es weiter.

Du brauchst nur eine CSS Datei, sonst verwirrt es. Also mache bitte nur eine CSS Datei, und binde diese mittels meta tag im Head Bereich ein.

Code

<style> body { margin: 0; padding: 0;} </style>

Dieser Code gehört in Deine CSS Datei und hat im HTML nichts zu suchen.

Danach sieht Deine HTML Datei so aus (noch nicht fertig):

index2.html

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Startseitet</title> 
    <link href="style.css" type="text/css" rel="stylesheet" />
  </head>

  <body>




    <ul id="navibereich">
      <li id="navi01"><a href="index.html">News</a></li>
      <li id="navi02"><a href="ck.html">CK</a></li>
      <li id="navi03"><a href="mediathek.html">Mediathek</a></li>
      <li id="navi04"><a href="kontakt.html">Kontakt</a></li>
    </ul>

    <div align="center">
    </div>

    <br>
    <br>

    <div id="eins">
      <img class="img150" src="108.jpg" width="320" height="222" border="0">
    </div>
    <div id="BildMitte">
      <img class="img150" src="dsc_0029.jpg" width="320" height="222" border="0">
    </div>
    <div id="zwei">
      <img class="img150" src="dsc_0029.jpg" width="320" height="222" border="0">
    </div>

  </body>

</html>

Alles anzeigen

So, weiter gehts:

Code

<div align="center">
</div>

Was soll das da? Da ist nix drin, also weg damit.

Code

<br>
<br>

br tags sind nicht dafür da, um Abstand von Seitenelementen zu simulieren. Dafür gibt es in CSS margin. Also auch weg mit.

Nun kommen die Divs mit den Bildern:

Code

<img class="img150" src="108.jpg" width="320" height="222" border="0">

Vielleicht mal vorweg was Grundlegendes. HTML ist mittlerweile nur noch dazu da, die Seitenelemente korrekt auszuzeichnen (ist erst mal egal wie der Browser das darstellt, hauptsache man sieht schon am HTML tag was es sinngemäß sein soll). Jegliche Formatierung wird dann nur mittels CSS erreicht. Das bedeutet, dass solche Eigenschaften wie hier im img tag wie width height border falsch sind, sondern in der CSS Datei definiert sein sollten.

So, das war jetzt erst mal der HTML Teil. Wenn Du es hast, dann poste mal die neue HTML Datei, dann kümmern wir uns um das CSS. Klingt zwar doof, aber CSS zu verbessern, während der HTML Teil noch wirr ist, bringt halt nix. Immer schön der Reihe nach, dann kommt am Ende auch eine saubere Seite raus, bei der Du auch nach einem halben Jahr noch weißt, was Du da wie gemacht hast. Änderungen sind dann viel leichter.

Gruß Talwin

mj23 · 2. Juli 2009

Hi,

also hier ist jetzt die neue HTML-Datei:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Startseite</title>
		<link href="style.css" type="text/css" rel="stylesheet" />
	</head>




	<body>

		<ul id="navibereich">
			<li id="navi01"><a href="index.html">News</a></li>
			<li id="navi02"><a href="ck.html">CK</a></li>
			<li id="navi03"><a href="mediathek.html">Mediathek</a></li>
			<li id="navi04"><a href="kontakt.html">Kontakt</a></li>
		</ul>




		<div align="center">
		</div>




   		<div id="inhaltsbox_1"><img class="img150" src="108.jpg"></div>

		<img class="img151" src="dsc_0029.jpg"></div>

		<div id="inhaltsbox_2"><img class="img152" src="dsc_0029.jpg"></div>
  </body>
</html>

Alles anzeigen

und hier die neue css-Datei:

Code

body {
  font-size: 15px;
  font-weight: bolder;
  font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
}




#navibereich li {
  display: inline; /* Listenelemente nebeneinander */
  list-style-type: none; /* Aufzählungszeichen entfernen */
}




#navibereich {
  background-color: #000000; /* Hintergrundfarbe für die Navigation */
  padding: 4px 0; /* Innenabstand: oben/unten 4px, li/re 0 */
  margin: 0;
  background: url(schwarzerbalken.jpg) no-repeat center;
  height: 88px;
}




#navibereich a {
  color: #CDB87B;                  /* Schriftfarbe beige */ 
  text-decoration: none;         /* Unterstreichung entfernen */ 
  padding: 4px;              /* oben/unten 4px, re/li 15px */
  margin: 60px;
}




#navi01 {
	position:relative;top:45px; left: 270px;
	}

#navi02 {
	position:relative;top:45px; left: 170px;
	}

#navi03 {
	position:relative;top:45px; left: 70px;
	}

#navi04 {
	position:relative;top:45px; left: -30px;
	}




#navibereich a:hover, #News #navi01 a, #CK #navi02 a, #Mediathek #navi03 a, #Kontakt #navi04 a




<style> body { margin: 0; padding: 0;} </style>




.img150
{
float: none;
padding: 4px;
}




.img150 {
    height: 222px;
    width: 320px;
    position: relative;top:-180px; left:-50px;
	z-index: 1;
    margin-top: 225px;
    margin-left: 115px;
	border: 3px solid #000000;
}




.img151 {
    height: 222px;
    width: 320px;
    position: relative;top:-178px; left:270px;
    z-index: 1;
	margin-top: 225px;
    margin-left: 140px;
	border: 3px solid #000000;
}




.img152 {
    height: 222px;
    width: 320px;
    position: relative;top:-186px; left:-50px;
    z-index: 1;
    margin-top: 230px;
	margin-left: 240px;
	border: 3px solid #000000;
}




#inhaltsbox_1 {
    width: 583.5px;
    height: 568px;
    background-color: #7F0E0E;
    position: absolute;
    z-index: 0;
	float: left;
}




#inhaltsbox_2 {
    width: 575px;
    height: 568px;
    background-color: #CDB87B;
    position: absolute;
    z-index: 0;
    margin-left: 577px;
    margin-top: -453px;
}




td {
	font-family: Arial, Helvetica, sans-serif;
}




th {
	font-family: Arial, Helvetica, sans-serif;
}

Alles anzeigen

Ich hoffe ich habe nichts vergessen!

Gruß
Sven

lauras · 2. Juli 2009

Code

<style> body { margin: 0; padding: 0;} </style>

Dies hier gehört so nicht in den CSS-Code, die Eigenschaften schreibst du einfach zu

Code

body {
  font-size: 15px;
  font-weight: bolder;
  font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
}

dazu.

Ansonsten ist der Code von der Unterscheidung HTML-CSS jetzt richtig, einiges ist jedoch denke ich überflüssig, z.B.

Code

<ul id="navibereich">
         <li id="navi01"><a href="index.html">News</a></li>
         <li id="navi02"><a href="ck.html">CK</a></li>
         <li id="navi03"><a href="mediathek.html">Mediathek</a></li>
         <li id="navi04"><a href="kontakt.html">Kontakt</a></li>
</ul>

Wozu gibst du jedem Listenpunkt eine id?
Da du in der CSS nur die Ausrichtung klärst, ist das doch recht überflüssig. Das kannst du auch für die komplette ul mit margin/padding definieren.

Code

<div align="center">
</div>

Was ist das? Ein leerer div bringt dir gar nichts, also weg damit. Falls du ihn für spätere Code-Planungen reingeschrieben hast - raus damit, der verzerrt nur dein Bild, wenn du den Code zwischendurch testest. Wenn du dir die Stelle nicht merken kannst, schreib einfach einen Kommentar in den Code.

Code

.img150
{
float: none;
padding: 4px;
}




.img150 {
    height: 222px;
    width: 320px;
    position: relative;top:-180px; left:-50px;
   z-index: 1;
    margin-top: 225px;
    margin-left: 115px;
   border: 3px solid #000000;
}

Alles anzeigen

kann man auch in einen Teil zusammenfassen, dann findest du es hinterher leichter wieder

Code

td {
   font-family: Arial, Helvetica, sans-serif;
}




th {
   font-family: Arial, Helvetica, sans-serif;
}

Du hast doch nirgendwo eine Tabelle - weg damit, das verunübersichtlicht (was für ein Wort!) nur den Code.

Ansonsten ist der Code gut, auch wenn man sihc über die Farbgebung streiten kann

LG
Laura

Talwin · 2. Juli 2009

Hi, sorry, hatte heute den Tag über keine Zeit mich zu melden :oops:

Aber lauras hat ja schon geholfen. Ergänzen möchte ich aber folgendes:

Zu den IDs in den Links bei der Navi: Die können schon Ihren Sinn haben, wenn man z.B. die aktuelle Seite im Menu hervorheben möchte, damit der User immer weiß, wo er gerade ist. Ich mache das immer mit IDs in den Menu Links und gebe jeder HTML Seite eine ID in den body, also quasi:

Code

...
<body id="pageContact">
...

Im CSS kann man dann so ganz leicht die aktuelle Seite hervorhen lassen mit:

Code

#pageContact #linkContact {
  background-color: red;
}

Gruß Talwin

lauras · 2. Juli 2009

Da hst du natürlich Recht, aber solange er damit die Links nur positioniert, ist das doch überflüssig, oder?

mj23 · 2. Juli 2009

Hi,

den einzelnen Listenpunkten habe ich eine id gegeben, um, so wie Talwin geschrieben hat einen Effekt zu erzeugen mit dem man Links hervorheben kann. Den Code hatte ich aus irgendeinem Forum und hab ihn dann für mich entsprechend angepasst.

Sag mal wisst ihr wie man in einen Hintergrund wie meinen Struktur reinbekommt, ich meine winzig kleine Karos oder etwas in der Art.

Ich muss euch mal sagen das ihr echt Klasse seid, das war eine riesen Hilfe von euch, tausend Dank.

Gruß
Sven[/code]

2 Spalten, 3 Fotos, 1 Foto genau auf Grenze zwischen Spalte

Jetzt mitmachen!

Teilen