zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden Teile der Website verschieben sich bei Auflösung

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 18.06.2010, 13:14
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.05.2010
Beiträge: 5
Panamajack befindet sich auf einem aufstrebenden Ast
Standard Teile der Website verschieben sich bei Auflösung

Hallo zusammen,

Ich bin recht neu in der XHTML und CSS Welt und muss gerade für mein Studium eine Website erstellen.
Ich habe das Buch von Michael Jendryschick durchgelesen und auch halbwegs verstanden (denke ich).

Jetzt habe ich allerdings mehrere Probleme und ich habe leider absolut keine Ahnung wie ich da weiterkomme.

Kurz zu meiner Umgebung:

Auflösung: 1920*1080

Die Website sieht so aus wie geplant, alles sitzt so wie ich wollte.
(Siehe Bild: http://www.bilder-hochladen.net/files/7it4-4-jpg.html)

Danach wollte ich die Website unetr der Auflösung 800*600 ansehen und musste feststellen, dass sie total verzogen ist.
(Siehe Bild: http://www.bilder-hochladen.net/file...-5-jpg-nb.html )


Ich verstehe, dass es an der Auflösung liegt. Jetzt frage ich mich als Neuling nur:

Wie kriegen das andere Websites hin, dass diese in jeder Auflösung( und Fenstergröße ) gleich gut aussehen?

Wieso haut mir mein Content (bei den Bildern :"SCHÖN DASS SIE VORBEI SCHAUEN!) nach rechts ab, wenn ich eine kleinere Auflösung nehme ?

Wieso wird das Bild über dem Menüeintrag "Veranstaltungen" kleiner, aber nicht die anderen Teile der Website ?

Und zu guter letzt:

Ich habe schon nach meinem Fehler gegoogelt und habe gelesen, dass es wahrscheins daran liegt, dass ich
Code:
position: absolute
und
Code:
position: relative
benutze.

In dem Beispiel meines Buches, nutzt Herr Jendryschick allerdings auch diese Angaben und bei ihm sieht die Website in jeder Auflösung gleichgut aus, was mache ich also falsch?

So, nach meinem ganzen Geschwalle kommt jetzt noch mein Code, da ihr mir ja sonst schlecht helfen könnt *g*.

Ausschnitt aus meiner Index.html:

HTML-Code:
<!-- Navigationsleiste oben -->
			<div class="menu" [B]id="topm[/B]">
			<ul>	
				<li class="zwischen"> <strong title="Hier befinden Sie sich gerade." id="start">Startseite</strong>
					

<!-- Navigationsleiste an der Seite -->
			<div class="menu" [B]id="sidem"[/B]>
			
			<ul>
				<li><a href="Veranstaltungen.html">Veranstaltungen</a>
					

<!-- Hintergrund überhalb der Sidebar -->
<div id=[B]"log"[/B]></div>


<!-- Inhalt -->
		<div id=[B]"content[/B]">
			<h2>Schön, dass Sie vorbei schauen!</h2>

Inhalt meiner default.css (nur Ausschnitt für das Sidemenü!)

HTML-Code:
/**
* Länge auf 250 pixel setzen ( bündig mit dem image oben drüber)
* 1 pixel großer weißer Rand zwischen den einzelnen "Buttons"
* Text ausrichtung rechts.
*
*/

#sidem { 
	width: 250px; 
	background-color: #93d50d;
	
}

#sidem  ul{ 
	list-style: none; 
	margin: 0; 
	padding: 0; 
}


#sidem a {
      font: normal 100%/100% Georgia, Palatino, "Times New Roman", serif;
      display: block;
      border-width: 1px 0px 1px 0px;
      border-style: solid;
      border-color: #ffffff;
      margin: 0; padding: 8px 12px; 
	  text-align: right;
	  background: #fff;

}

#sidem a{
	color: #93d50d;
	text-decoration: none;
}
/**
* die ausgeklappten Puntke werden absolut an den Überpuntken positioniert
*
*/
#sidem li {
	position: relative;
}

#sidem ul ul{
	position: absolute;
	top: 0%;
	left: 100%;
	width: 100%;
	border-width: 0px 0px 0px 2px;
	border-color: #ffffff;
	border-style: solid;
}
Default.css Ausschnitt für Position

HTML-Code:
div#head {
	width: 932px;
	margin: auto;
	position: relative;
}


#head h1 {
	margin: 0;
	padding: 0;
	background: #EBE9DF  url(pics/bg_logo.gif) left bottom no-repeat;
	text-align: right;
}

/**
* @section Topmenü
*
*/
#topm  ul {
	position: absolute;
	bottom: 80px;
	left: 0px;
	z-index: 2;
}

/**
* @section Sidemenü
*
*/

#sidem ul  {
	position: absolute;
	margin: 0;
	padding: 0;
	text-align: right;
	width: 250px;
	top: 265px;
	z-index: 2;
		
}

Oh mann, das ist ganz schön viel... ich weiß wieviel ich euch da zumute -.-
Hoffe aber trotzdem mir kann jemand helfen.

Allein schonmal fürs Durchlesen vielen Dank!

Gruß
Panama
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 18.06.2010, 15:57
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.05.2010
Beiträge: 5
Panamajack befindet sich auf einem aufstrebenden Ast
Standard

So,

hat sich erledigt, hab es durch länegre probieren, nachdenken, etc selbst hingekriegt

Nur so lernt man ja

Kann geclosed werden =)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 18.06.2010, 17:42
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.378
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

Und wie hast du es geschafft das Problem zu lösen?!
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?
Mit Zitat antworten
  #4 (permalink)  
Alt 19.06.2010, 03:48
Benutzerbild von Korasu
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 16.05.2007
Beiträge: 106
Korasu befindet sich auf einem aufstrebenden Ast
Standard

darf ich fragen was die [B]-tags vor jeder id bewirken sollen?
Mit Zitat antworten
  #5 (permalink)  
Alt 19.06.2010, 11:31
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.867
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Ich schätze, er wollte diese Code-Teile in seinem Post hervorheben.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
  #6 (permalink)  
Alt 19.06.2010, 13:10
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.05.2010
Beiträge: 5
Panamajack befindet sich auf einem aufstrebenden Ast
Standard

So,

also die IDs wollte ich nur herovrheben, deswegen die [B]'s .

Nun zur Problemlösung: Ich habe mir im Netz noch ein paar Tutorials durchgelesen zu dem Thema "position", da ich der Meinung war, dass der Fehler wohl dort lag und in dem Buch von Michael Jendryschik dieser Teil, meiner Meinung nach, nicht sehr gut erklärt wird ( zumidnest für totale Anfänger).

Nach mehreren Tutorials bin ich dann auf die Idee gekommen folgendes zu machen:

in der Index.html:

HTML-Code:
body {

<div id=[B]"website"[/B]>

<!-- Website inhalt, Navigation, etc -->

</div>  <!-- Ganz am Ende das div schließen -->

In der css Datei habe ich danach dieses div auf eine feste Größe gesetzt und
da der Rest der Website innerhalb dieses divs ist, verschiebt sich auch nichts mehr, egal welche Auflösung ich habe und wie groß ich das Browserfenster ziehe.

Jetzt hätte ich nur noch eine Frage an euch:

Ist das eine "gute" Lösung oder gibt es eine bessere?

Zuerst bin ich auch noch auf die Idee gekommen alles in mehrere Tabellen zuordnen, aber davon rät Jendryschick in seinem Buch ab. (Tabellenmurks halt )


P.S.:

Da ich meistens sehr große Textblöcke in Foren schreib, markiere ich meistens meine Fragen kursiv und wichtige Aussagen oder ähnliches mit fettschrift *g* . So werdet ihr mich halt ertragen müssen :P
Mit Zitat antworten
  #7 (permalink)  
Alt 19.06.2010, 15:34
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.867
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von Panamajack Beitrag anzeigen
In der css Datei habe ich danach dieses div auf eine feste Größe gesetzt und da der Rest der Website innerhalb dieses divs ist, verschiebt sich auch nichts mehr
Ja, das ist der übliche Weg. Horiz. zentr. wird das Ganze dann per margin: 0 auto; für das umgeb. div.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
  #8 (permalink)  
Alt 19.06.2010, 15:53
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.05.2010
Beiträge: 5
Panamajack befindet sich auf einem aufstrebenden Ast
Standard

Ok danke schön für die Bestätigung =)
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Hintergrundgrafik verschieben bei Änderung der Auflösung Trixi CSS 3 30.03.2009 17:38
ie 6 seite: einige teile der Seite verschieben sich! unicorn CSS 10 13.02.2009 16:20
Positionierung von Bildern bei geringerer Auflösung verschieben sich tetrismaster (X)HTML 4 25.04.2007 13:48
IE verschiebt Teile der Website phpX CSS 1 04.05.2006 11:29


Alle Zeitangaben in WEZ +2. Es ist jetzt 05:15 Uhr.