Beiträge von Stuck

Stuck

Hab die Seite überarbeitet und es funktioniert nun alles so wie es vorgesehen ist.
Hehehe und nicht einen Fehler mehr.

Stuck

Vielen Dank für die Hilfe.^^ Nun hab ich die nächsten Probleme 2 an der Zahl.^^
1. Wenn ich jetzt ranzoome wird die Hintergrundgrafik (diese blau-weiße) nicht mehr vollständig angezeigt. Es steht dann ein Teil auf dem beschrifteten Hintergrund.
2. Und wenn ich rauszoome verzieht sich das Layout aber nur im Google Chrome.

HTML

<!DOCTYPE html>







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




<head>
  <meta charset="UTF-8" />
  <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
  <title>Übung 2</title>
  <link rel="stylesheet" href="design.css" type="text/css" />




</head>
<body>	




  	<div id="main">




        	<div id="header">
          	<h2 style="color:white">Tubingen anders sehen</h2>
        	</div>
        	<div id="navi">

          	<li class="none">Startseite</li>
          	<li class="none">Geschichte Tübingens</li>
          	<li class="none">Tübingen anders sehen</li>



        	<ul>
          	<li><a href="http://lion.share-tube.eu/convert/6796182"/>Stiftskirche</a></li>
          	<li> <a href="https://www.google.de/webhp?hl=de&tab=ww"/>Neckarbrücke</a></li>
          	<li><a href="https://www.google.de/webhp?hl=de&tab=ww"/>Friedhof</a></li>
          	<li><a href="https://www.google.de/webhp?hl=de&tab=ww"/>Marktplatz</a></li>
          	<li><a href="https://www.google.de/webhp?hl=de&tab=ww"/>alte Aula</a></li>




       	</ul>

        	</div>
        	<div id="haupt">
          	<h2>Tübingen anders sehen
            	</br> -eine Stadt wie keine andere!
          	</h2>
            	<p>Die Universitätsstadt Tübingen ist weithin bekannt und hat doch so viele unbekannte
           	</br>Facetten. Zum einen ist sie die alte Stadt, die ehrwürdige Alma Mater mit der Alten Aula, der 
           	</br>Burse, der Stiftskirche, seit 1476 hier die Anfänge der Universität gelegt wurde - eine der 
           	</br>ältesten in Deutschland!
         	</p>
        	</div>
        	<div id="haupt1">
           	<h2>Alte Tradition in neuem Gewand</h2>

    	<img id="bild"src="bilder/bild.jpg" width="250" height="167" />
     	Das Stocherkahnrennen1 in Tübingen ist
     	einzigartig - das beweist schon der Blick 
     	in wikipedia. Stocherkähne sind eine Tübinger 
     	Spezialität, kleine flache Boote für bis zu 20
      	Mitfahrer, die im Normalfall sich gemütlich von
      	einem Stocherer fahren lassen - am Ende des
      	Bootes steht ein Gondoliere, der allerdings
      	selten singt, dafür aber mit dem 7 m langen
      	Stocherer das Boot vom Grund des Neckars
     	abstößt.


   	<div id="haupt2">
      	<h2>benötigt wird für ein Stocherkahnrennen</h2>
      	<ul>
        	<li>11 Stocherkahn mit</li>




        	<li>1 Stocherer</li>




        	<li>1 Mannschaft</li>




      	</ul>




      	<ul class="tab2">
        	<li>1x Motivation</li>
        	<li>28x Trainingseinheiten</li>
      	</ul>
   	</div>







      	<div id="haupt3">
        	<img id="bild2"src="bilder/bild.jpg" width="250" height="167" />
        	Die Gemütlichkeit ist dahin, wenn dies nun aber 50 Stocherkähne gleichzeitig machen, dabei die Mitfahrer mit den Händen mitpaddeln und versuchen, um die Neckarinsel herum, in einer liegenden Acht um die Neckarbrücke und wieder zurück zu gelangen - doch beim Schnittpunkt der Route, dem Nadelöhr, sind auch die anderen Boote eindeutig im Weg. <br />
        	Motivation, nicht nur Sieger, sondern vor allem Nicht-Verlierer zu werden, ist zum einen das Fass Bier für die Sieger, mehr aber noch der halbe Liter Lebertran für jeden der Letztplazierten! Ein großes Spektakel im Sommersemester.
      	</div>




        	<div id="haupt4">
          	<h2>Alt & Jung verbinden</h2>
          	<br />Und dieses Alter hat gleichzeitig eine jugendliche Seite - die Studenten prägen das Gesicht
           	<br />der Stadt, und die wunderschöne Stadt und Landschaft lassen die Akademiker hier bleiben.
            	<br />Schon jetzt hat Tübingen den niedrigsten Altersdurchschnitt aller Städte in Deutschland 
            	<br />(38,3 Jahre am 31.12.2007).
            	<p>
              	Alt und jung, Universität und Stadt, Professoren und Gogen, Industrie und Weinberge, all
              	<br/> dies lässt immer neues und altes entdecken. Universität Tübingen
            	</p> 
            	<p>
              	Zum Entdecken der Universität schauen Sie einfach auf den Internetauftritt
              	<br/> www.uni-tuebingen.de
            	</p>




        	</div>
        	</div>
        	<div id ="footer">
         	bsb
        	</div>




  	</div>
















 </body>
</html>

Alles anzeigen

CSS

body, html{
	background-color:orange;
	height: 100%;
	margin:0;







}




#main{
	width:900px;
	min-height:100%; 
	margin: 0 auto;
	background:url(bilder/inhalt.jpg) ;
	padding:0px;
	position:relative;




}




#header{
	width:900px;
	height:205px;
	background-image:url(bilder/kopfbereich.jpg);
}
#header h2{
	margin:0;
	float:right;
	margin-right:20px;
	margin-top:10px;

}




#haupt{
float:left;
margin-left:100px;
font-size:16px;
font-family




}







#haupt1{
 	margin-left:270px;   
 	float: right;


}




#haupt2{
	margin-top:70px;




	
}




#bild {
   float:right;
	width: 250px;
	height: 167px;
	margin-left: 20px;
   margin-right: 10px;


}
#navi{
	color:white;
	float:left;
}




#bild2{
	float:left;
	width: 250px;
	height: 167px;
	margin-left: 20px;
   margin-right: 10px;
}
















.none{




	list-style:none;
	margin-left:25px;
}




#navi a:link{color: blue; text-decoration:none;}
#navi a:visited{text-decoration:none; color:white;}
#navi a:focus{color: red; text-decoration: none;}
#navi a:hover{color:blue; text-decoration: none;}
#navi a:active{color:white; text-decoration:none;}







#footer{







	position:absolute;
	bottom:0px;
	width:100%;
	background-color:black;
	height:3em;
   }

Alles anzeigen

Stuck

Schönen guten Tag zusammen.
Ersteinmal ein dickes Dankeschoen an den Seminar-Leiter und das Team. Tolle Seite^^
Zu meinem Problem: Versuche mich gerade an den Beispielwebseiten und bin bei Tübingen anders sehen angekommen. Habe nun auch schon Header-Grafik,
Hintergrund-Grafik und die Inhalts-Grafik eingebunden (ohh ohh nun kommt das Problem), nur wenn ich versuche jetzt eine Tabelle oder eine Text auf die Grafik zu bringen, kommt jedes mal der blaue Hintergrundbereich mit durch. Immer da wo dann etwas stehen soll wird ein Block von der Grafik freigelassen und packt mir das geschriebene dann auf den blauen Hintergrund.

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 charset="UTF-8" />
  <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
  <title>Übung 2</title>
  <link rel="stylesheet" href="design.css" type="text/css" />
<head>
</head>
<body>




<div id="seite">
 	<div id="kopfbereich">
   	<p>Tübingen anders sehen<p>
  	</div>
   <div id="navi">
 	</div>




 	<div id="inhalt">
  	</div>




  	<div id="fusszeile">
  	</div>
</div>
 </body>
</html>

Alles anzeigen

CSS

*{
	background-color: #92C6ED;
	margin: 0;
	padding: 0;
}




html, body{
	height: 100%;
}
#kopfbereich{
background: url(bilder/kopfbereich.jpg);
 height: 205px;
}




#kopfbereich p{

}




#seite{
	position: relative;
	min-height: 100%;
	width: 800px;
	margin: 0 auto;
	background: url(bilder/inhalt.jpg);

}




#navi{
 margin-top: 40px;
 margin-left: 40px;
}

Alles anzeigen

Verstehe auch nicht warum mir http://validator.w3.org/check 10 Fehler anzeigt.
Zerpflückt mich bitte nicht zu doll bin erst 2 Wochen dabei.

Beiträge von Stuck

Text vor Grafik setzen

Text vor Grafik setzen

Text vor Grafik setzen