Frage zur Entwicklung für mobile Geräte

Bagheera · #1 (**permalink**) 22.12.2011, 16:05

hallo zusammen,
ich arbeite mich momentan durch das buch "html5-apps für ios und android" von spiering/haiges
..und scheitere schon in einem der ersten kapitel (seite 31, falls es jemand besitzt)
dabei sollen zwei h-elemente mit css modifiziert werden (aber ios-typisch)

hier der quellcode:

HTML-Code:

<html>
<head>
<title>Oldtimer Spiering</title>
<link rel="stylesheet" type="text/css"
      media="screen and (min-width: 961px)" href="computer.css">
<link rel="stylesheet" type="text/css"
      media="only screen and (max-width: 960px)" href="mobile.css">
<link rel="stylesheet" type="text/css"
      media="print" href="drucker.css">
      
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
      
<!-- [if IE]>
<link rel="stylesheet" type="text/css"
      media="all" href="ie.css">
<![endif]-->

body {
	background-color: #ddd;
	color: #222;
	font-family: Helvetica;
	font-size: 14px;
	margin: 0;
	padding: 0;
	}

#kopfbereich h1 {
	background-color: #fcc97d;
	border-bottom: 1px solid #666;
	color: #222;
	display: block;
	font-size: 20px;
	font-weight: bold;
	padding: 10px 0;
	text-align: center;
	text-decoration: none;
	text-shadow: 0px 1px 0px #fff;
	}
			
#kopfbereich h2 {
	margin-left: 12px;
	margin-right: 10px;
	}

</head>
<body>

<div id="kopfbereich">
<h1>Oldtimer Spiering</h1>
<h2>Spitzen-Oldtimer von VW und Porsche</h2>
<p>Wir f&uml;hren und reparieren Old- und Youngtimer der Marken VW und Porsche</p>
</div>

<div id="navigation">
<ul>
<li><a href="angebote.html">Aktuelle Angebote</a></li>
<li><a href="volkswagen.html">Unsere VWs</a></li>
<li><a href="porsche.html">Unsere Porsche</a></li>
<li><a href="preisrechner.html">Preisrechner</a></li>
<li><a href="kontakt.html">Reperaturen</a></li>
</ul>
</div>

<div id="inhalt">
<p>Wir importieren auch aus Kalifornien!</p>
<img src="beispiel_2-0-car.png" alt="Karman Ghia Auto">
<p>Neu im Angebot:Volkswagen Karman Ghia</p>
</div>

<div id="kontakt">
<p><b>Oldtimer Spiering</b><br>Beispielgasse 1, 12345 Bad Beispielstadt</p>
</div>

</body>
</html>

also mein problem sind die css-modifikationen im head-bereich. die zeigts bei mir einfach nicht an bzw. ich seh dann auch beim test im browser den quellcode (der rest ist allerdings als website vorhanden, nur der css-sch*** fehlt)
kann mir jemand weiterhelfen?

jnv · #2 (**permalink**) 22.12.2011, 16:08

Du hast das <style> um die Anweisungen herum nicht drin.

HTML-Code:

<style type="text/css">
body { }
</style>

Besser wäre allerdings, wenn du das CSS in eine externe Datei auslagerst.

Bagheera · #3 (**permalink**) 22.12.2011, 16:11

hier mal das, was es in meinem browser anzeigt

Bagheera · #4 (**permalink**) 22.12.2011, 16:13

Zitat:

Zitat von jnv

Du hast das <style> um die Anweisungen herum nicht drin.

HTML-Code:

<style type="text/css">
body { }
</style>

Besser wäre allerdings, wenn du das CSS in eine externe Datei auslagerst.

oh shit...wie peinlich

danke dir

jnv · #5 (**permalink**) 22.12.2011, 16:14

Ja, was soll der Browser auch mit den Eigenschaften anfangen?

Du musst dem Browser exlpizit sagen, dass es sich hierbei um Style-Anweisungen handelt, sonst wird der Text einfach nur ausgegeben.

Lies dazu meinen ersten Post.

Bagheera · #6 (**permalink**) 22.12.2011, 16:16

ja danke es funktioniert - hab das total vergessen, da ich über 2 monate lang nicht mehr programmiert hab und das buchbeispiel einfach abgeschrieben hab.

jnv · #7 (**permalink**) 22.12.2011, 16:17

So wird es in dem Buch sicher nicht drin gestanden haben

David · #8 (**permalink**) 22.12.2011, 16:26

Edit: Viel zu lahm :/

Bagheera · #9 (**permalink**) 22.12.2011, 16:27

nein, das buch schweigt sich an der stelle aus bzw. setzt voraus, dass man das weiß. da war nicht der komplette code drin, sondern eben nur die css-modifikationen, die man in das code-beispiel vom vorigen kapitel einfügen kann (aber wie gesagt, da waren keine style-tags drin)

neues problem:
ich hab im moment einen orange-farbenen hintergrund im h1-element und will einen ios-typischen farbverlauf

den code den ich hierzu hab ist folgender:

HTML-Code:

background-image: -webkit-gradient(linear, left top, left bottom, from(#fcc97d), to(#fcaf3b);

wo füg ich den ein? ich habs direkt nach background-color bei #kopfbereich h1 gemacht, doch dann bleibt es orange (ich hab den user-agent in safari schon auf iphone umgestellt)

jnv · #10 (**permalink**) 22.12.2011, 16:29

Packs vor background-color.

Der Browser nimmt immer die erste Eigenschaft die er kennt, anschließende werden ignoriert.

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
DIVs tauschen in CSS für mobile Geräte	Jormungand	CSS	5	21.11.2011 10:57
Website für mobile Geräte	gnewmann	CSS	0	08.02.2011 17:11
Unterforen für mobile Geräte?	Robin	Fragen, Konstruktive Kritik, Lob / Bekanntmachungen	15	19.11.2007 16:34
XHTML/CSS für mobile Geräte, Kompendium, Wiki, ...?	Robin	Ressourcen	4	28.10.2007 00:02