Text vor Grafik setzen

Stuck · 22. Juni 2013

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.

lauras · 22. Juni 2013

Warum sollten wir dich zerpflücken? Jeder hier hat mal klein angefangen
Warum der Validator Fehler zeigt:
- du hast da versehentlich einen <head> reingeschrieben (Zeile 10)
- Zeile 7 kannst du löschen
- du kannst einfach nur <!DOCTYPE html><html> schreiben, das ist neuer Standard (es kann sein dass das im Kurs noch veraltet ist).. habs jetzt nicht getestet aber danach sollten die meisten Fehler weg sein

Zu deinem Problem: Der * den du in deinem CSS in der ersten Zeile verwendest, selektiert quasi alle Elemente, das heißt jedes Element bekommt die Hintergrundfarbe, wenn weiter unten im Quellcode nichts anderes mehr definiert wird.
Tu das einfach bei html, body mit rein, dann wird es nur dem body zugewiesen

Falls dann noch irgendwas nicht tut, immer her damit

lg

Stuck · 22. Juni 2013

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

lauras · 23. Juni 2013

Ich steig durch deinen Code nicht wirklich durch..
- ganz am Anfang von deinem CSS sollte

CSS

* { 
margin: 0;
padding: 0;
}

stehen.. Damit setzt du alle Abstände mal default auf 0.
- Du hast da lis, die nicht in nem ul sind. Das ist nicht erlaubt
- Wozu hast du diese ganzen haupt, haupt1 usw. Bereiche? Sinnvoll wäre, wenn du einen Bereich hättest, in dem du deinen kompletten Inhalt reinpackst.
- Was soll denn </br> sein? Falls du einen Zeilenumbruch machen willst, heißt es <br> oder <br />, allerdings rate ich dir davon ab, die da in deinen Text zu machen - i.d.R. lässt man den Text automatisch umbrechen, so dass er sich den verschiedenen Auslösungen anpassen kann.
- Dein Footer hängt mitten im Bild rum, sobald man scrollen muss. position: absolute; und bottom:0; reichen da nicht aus. Schau dir mal den "footer stick alt" an, da wird erklärt wie man den unten hält

Weiterhin, bevor du hier postest, validiere doch deinen Code - wenn du die Fehler die dort angezeigt werden schon verbesserst, hast du eventuell manche Probleme schon nicht mehr. Falls du eine Meldung bekommst die du nicht verstehst, kannst du sie ja hier posten

lg

Stuck · 23. Juni 2013

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

Text vor Grafik setzen

Jetzt mitmachen!

Teilen