ComputerBase Menü
Aktuelles

CSS Divs machen Party bei strg + scrollen

Tockra

Tockra

Lt. Commander
Registriert
Dez. 2008
Beiträge
1.063
Hallo Leute,

Ich habe mir gerade folende Tutorial angeschaut und mitgemacht: http://www.peterkropff.de/tutorials/html_css_1/html_css_1.htm

Mein Endprodukt sieht so aus:
http://host.ungaming.de/site/schloesser/urquhart.html

An sich nicht schlecht, allerdings ist die Webseite nur bei einer bestimmten Bildgröße richtig aufgebaut. Hat man nicht nahe genug mit Strg+ Scrollen herangescrollt, so sind die Links nicht rechts und die "Besuchten Castles" nicht links.

Ich glaube auch, dass das so richtig ist und noch gar nicht gewollt ist, dass man am ende dieser Tutorial die Webseite so hat, dass es beim Strg+ Scrollen keine Probleme gibt, aber mich würde einfach mal interessieren wie man es "richtig" machen würde.

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">

<html>

	<head> 
		<meta name="author" content="Tim Tannert">	
	
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="language" content="de" >
		<meta http-equiv="content-language" content="de" >
		<meta http-equiv="content-type" content="text/html";
			charset="ISO-8859-1">
			
		<title>Schottlandurlaub - Schlösser - Urquhart Castle</title>
		
		<link rel="stylesheet" href="../../styles.css" type="text/css">
		
	</head>
	
	<body>
		<div class="rahmen">
			<div class="Schmuck">
				<img src="../../pics/schloesser/head_urquhart.jpg"
					width="740" height="100" alt="Urquart Castle">
			</div>
			<div class="navi">
				<a href="#">Home</a>
				<a href="#">Geschichte</a>
				<a href="#">Landschaft</a>
				<a href="#" class="activ">Schlösser</a>
				<a href="#">Wiskey</a>
				<a href="#">Tiere</a>
				<a href="#">Menschen</a>
			</div>
			<div class="subnavi">
				<ul>
				  <li>
					<a href="#">Besuchte Castles</a>
					<ul>
					  <li><a href="#">Braemar Castle</a></li>
					  <li><a href="#" class="aktiv">Urquhart Castle</a></li>
					  <li><a href="#">Edinburgh Castle</a></li>
					  <li><a href="#">Eilean Donan Castle</a></li>
					  <li><a href="#">Inverness Castle</a></li>
					  <li><a href="#">Dunvegan Castle</a></li>
					</ul>
				  </li>
				  <li><a href="#">Muss ich noch hin</a></li>
				</ul>
			</div>
			<div class="inhalt">	
				<h1>Urquhart Castle</h1>
				<h2>Ruine am Loch Ness</h2>
				<p>
				  Malerische Trümmerlandschaft an den Ufern des Loch Ness bla bla.
				  Das dumme Nessie-Monster, viele Betrunkene, irgendein dummer
				  Saurier blubb blubber.
				</p>
				
				<p>
				  <img src="../../pics/schloesser/loch_ness.jpg"
					width="250" height="250"  alt="Loch Ness">
				  Loch Ness mit Urquhart Castle vom Boot aus gesehen
				</p>
				<p class="bild">
					<img src="../../pics/schloesser/urquhart.jpg"
						width="150"height="250" alt="Turm">
					Urquart Castle vom Turm aus gesehen
				</p>

				<h3>Geschichte</h3>
				<ul>
				  <li>1230 -
					  Alan Durward wird Lord von Urquhart</li>
				  <li>1275 -
					  König Edward I. von England nimmt die Burg in Besitz</li>
				  <li>1297 -
					  Die Burg wird von den Schotten zurückgewonnen.</li>
				  <li>1303 -
					  Die Burg wird von König Edward I. von England erobert dann
					  wieder von Robert the Bruce (der aus Braveheart).</li>
				  <li>14. Jhdt - 16. Jhdt. -
					  Die Burg wechselt häufig den Besitzer, da
					  verschiedene Clans darum kämpfen, insbesondere
					  die MacDonalds</li>
				  <li>1692 -
					  Die letzte Besatzung sucht das Weite, nachdem die Burg
					  nahezu vollständig zerstört worden ist</li>
				</ul>
				<p>
				  Hach die schöne Landschaft, und die vielen Schafe, ständig hat
				  man eins am Kühlergrill kleben.
				</p>
				<p>
				  Der Sonnenschein. Hab mir im September(!) dort den schlimmsten
				  Sonnenbrand seit  Jahren zugezogen. Wer denkt auch daran, um
				  diese Jahreszeit Sonnencreme mitzunehmen, nach Schottland!
				</p>
			</div>
			<div class="info">
				<h4>Links</h4>
				<a href="#">Link A</a>
				<a href="#">Link B</a>
				<a href="#">Link C</a>
				<a href="#">Link D</a>
			</div>
			<div class="abschluss">
				Copyright 2011 Ikke
			</div>
		</div>
	</body>
	
</html>

Code: 
body
{
  margin: 0px;
  padding: 0px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
}

.rahmen
{
	width: 740px;
	margin: 0px auto;
	
}

.schmuck
{
	wigth: 740px;
	height: 100px;
	
}

.navi
{
	width: 740px;
	height: 27px;
	background-color:#002274;
}

.subnavi
{
	width: 128px;
	margin-top: 10px;
	margin-right:10px;
	margin-bottom: 10px;
	float: left;
}

.inhalt
{
	width: 440px;
	margin-top: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
	float: left;
}

.info
{
	width: 140px;
	margin-top: 10px;
	float: left;
}

.abschluss
{
	clear: left;
	border-top: 1px solid #000;
	padding: 5px;
	font-size: 8px;
	font-style: italic;
	text-align: right;
}

a 
{
	text-decoration: none;
}
.navi a
{
	display: block;
	float: left;
	color: #fff;
	background-color: #002274;
	border: 1px solid #002274;
	
	font-size: 12px;
	font-weight: bold;
	padding: 5px 10px 5px 10px
}
.navi a:hover
{
	color: #002274;
	background-color: #fff;
}

.navi .activ
{
	color: #002274;
	background-color: #fff;
}

.subnavi ul
{
	 margin-top: 0px;
	 list-style-type: none;
}

.subnavi li
{
	
	margin-left: -40px;
}

.subnavi li li
{
	margin-left: -30px;
	border-bottom: 1px solid #eee;
}

.subnavi a
{
	display: block;
	background-color: #eee;
	color: #000;
	padding: 5px 10px 5px 20px;
	border-bottom: 1px solid #fff;
}

.subnavi a:hover
{
	background-color: #DDE8F3;
	background-image: url(pics/menue/marker.gif);
	background-repeat: no-repeat;
	background-position: 6px 6px;
}

.subnavi .aktiv
{
	background-color: #DDE8F3;
	background-image: url(pics/menue/marker.gif);
	background-repeat: no-repeat;
	background-position: 6px 6px;
}

h1
{
	font-size: 14px;
	margin-top: 0px;
	margin-bottom: 5px;
	color: #002274;
}

h2
{
	font-size: 13px;
	margin-top:0px;
	margin-bottom: 5px;
	color: #002274;
}

h3
{
	font-size: 12px;
	margin-top: 0px;
	margin-bottom: 5px;
}

h4
{
	font-size: 11px;
	margin-top: 0px;
	margin-bottom: 5px;
}
.inhalt ul
{
	margin-top: 0px;
	margin-bottom: 0px;
}

.inhalt li
{
	margin-left: -25px;
}

.inhalt img
{
	display: block;
}

.bild
{
  color: #555;
  margin-bottom: 10px;
}

p
{
  margin-top: 5px;
  margin-bottom: 5px;
}
.info
{
	border: 1px solid #002274;
	background-color: #DDE8F3;
	padding: 5px;
}

.info a
{
	color: #002274;
	display: block;
	margin-bottom: 5px;
}

.info a:hover
{
	color: #000;
	text-decoration: underline;
}

Gruß
T.
 
Code: 
<div class="navi">
	<a href="#">Home</a>
	<a href="#">Geschichte</a>
	<a href="#">Landschaft</a>
	<a href="#" class="activ">Schlösser</a>
	<a href="#">Wiskey</a>
	<a href="#">Tiere</a>
	<a href="#">Menschen</a>
</div>
[B]<div style="clear: both;"></div>[/B]
<div class="subnavi">
	<ul>
		<li>
 
Ein paar anregungen:

-img tags brauchen kein div rundrum- sind schon selbst block elemente und können adressiert werden
-navigationen IMMER als ul deklarieren, niemals als links in einem div
-verwende UTF-8 als doctype, das erspart dir viele probleme was das character encoding betrifft

ansonsten schon ein guter anfang. sofern du des englischen mächtig bist würde ich dir empfehlen w3schools durch zu arbeiten, danach sollte dir einiges klar sein :)

mfg
 
wigth ist falsch. Heißt width.


Ausserdem
Code: 
.subnavi {
	[B]clear:both;[/B] width: 128px; margin-top: 10px; margin-right: 10px; margin-bottom: 10px; float: left;

.inhalt {
	[B]width: 430px;[/B] margin-top: 10px; margin-right: 10px; margin-bottom: 10px; float: left;
}
}

Springt dann zwar nix mehr, ist aber immer noch nicht ganz sauber.
z.B. wird navi immer eine Höhe von 27px zugewiesen, die dann natürlich auch skaliert wird.
Dies aber im Zweifelsfall bei sehr kleinen Größen auch so, dass sie weniger hoch als die Navigationspunkte ist. Würde auf den Border bei .navi a verzichten. Dieser wird nicht kleiner als 1px skaliert, so dass Höhe der Navigationspunkte und der blauen Leiste irgendwann bei sehr kleinem Zoom nicht mehr zueinander passen.
Braucht es den Border zwingend, würde ich darüber nachdenken, ihn an navi zu binden.

Sauberer fände ich evtl. noch der Info Box Float:right zu verpassen, aber das ist Geschmackssache.
 
Zuletzt bearbeitet:
Ich würd subnavi, inhalt und info gemeinsam in einen Container packen. Außerdem kann man an der Reihenfolge im Code und den Styles etwas optimieren:
subnavi -> info -> inhalt statt subnavi -> inhalt -> info...

subnavi: float:left, feste breite
info: float:right, feste breite
inhalt: float: left; feste breite; margin-left: breite von subnavi + etwas luft; margin-right: breite von info + etwas Luft

Schon fließt alles Hübsch in allen Zoomstufen.

OT: Urquhart Castle wär viel hübscher ohne amerikanische Reisegruppen...
 
Leute vielen Dank für die vielen Anregungen, aber mir ging es an sich nur um das eine Problem. Das war ja von der entsprechenden Seite nur die Beginner Tutorial und der Author sagte selbst, dass einige Sachen bewusst etwas "vereinfacht" gemacht wurden, um den lernenden (in dem Falle mir) an die Materie heran zu führen.
Ich werde nochmal nachdem ich die ganze Seite von ihm durchgearbeitet habe hier einen Beitrag rein schreiben, der für genau das gedacht ist, was ihr gerade gemacht habt (Verbesserungsvorschläge).

Gruß
T.
 
Ok, dann benutze eine der clear:both Lösungen und setze die Breite von .inhalt etwas herab. Dann ist das Problem auf jeden Fall weg. Korrigiere dann evtl. noch den Rechtschreibfehler im CSS, damit Dich das nicht später bei irgendwas anderem einholt, wenn Du es weiterverwenden willst.
 
Mexxim schrieb:
-img tags brauchen kein div rundrum- sind schon selbst block elemente und können adressiert werden
Zum Vergrößern anklicken....
Genau genommen sind Bilder Ersetzte Inline-Elemente (inline-block).
Mexxim schrieb:
-verwende UTF-8 als doctype, das erspart dir viele probleme was das character encoding betrifft
Zum Vergrößern anklicken....
Der Doctype hat nichts mit dem Zeichensatz zu tun.

Mexxim schrieb:
sofern du des englischen mächtig bist würde ich dir empfehlen w3schools durch zu arbeiten, danach sollte dir einiges klar sein :)
Zum Vergrößern anklicken....
Lieber nicht, w3schools ist Mist.

Tockra schrieb:
Okay doch noch eine kleine Sache. Setze ich die Kodierung auf UTF 8 indem ich einfach die .html in UTF8 speicher oder muss ich das so machen?
Zum Vergrößern anklicken....
Die Datei muss als UTF-8 gespeichert und auch ausgeliefert werden. Hier gibt es noch Infos.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben

Willkommen auf ComputerBase!

Mit Werbung weiterlesen

Besuche ComputerBase wie gewohnt mit Werbung und Tracking. Die Zustimmung ist jederzeit widerrufbar.

Details im Privacy Center und in der Liste unserer Partner. Ein Widerruf ist möglich in der Datenschutzerklärung.

… oder ComputerBase Pro bestellen

Nutze ComputerBase ohne Werbebanner, Video-Ads und Werbetracking schon für 4 €/Monat oder 36 €/Jahr.

Mehr zu ComputerBase Pro

Bereits Pro-Nutzer? Hier anmelden.

Tracking: Wir und unsere 160 Partner verarbeiten personenbezogene Daten, indem wir mit auf Ihrem Gerät gespeicherten Informationen (z. B. eindeutige Kennungen in Cookies) ein Nutzungsprofil erstellen, um z. B. Anzeigen zu personalisieren. Verarbeitungszwecke: Genaue Standortdaten und Abfrage von Geräteeigenschaften zur Identifikation, Informationen auf einem Gerät speichern und/oder abrufen, Personalisierte Anzeigen und Inhalte, Anzeigen- und Inhaltsmessungen, Erkenntnisse über Zielgruppen und Produktentwicklungen.

Impressum Kontakt Datenschutz