nicht angemeldet
Layout mit CSS, iframe und Ausrichtung
Hi,
ich hab meine HP redesigned und das gesamte Layout mit CSS gemacht (keine Frames oder Tables). Als Überschrift/Logo für die HP hab ich einfach ein <h1> Tag genommen. Das hat aber zur Folge, dass sich die Überschrift ein wenig nach links verschiebt, wenn eine Seite der HP einen Scrollbalken hat. Wie kann ich das verhindern, ohne einen Layer zu verwenden?
Das Gästebuch habe ich mit einem iframe integriert. Gibt es eine Möglichkeit, dass sich das iframe automatisch an die grösse der Seite des Gästebuchs anpasst, ohne dafür JavaScript zu verwenden?
Viele Dank im voraus!
Grüße
Christian
-
Hi,
Als Überschrift/Logo für die HP hab ich einfach ein <h1> Tag genommen. Das hat aber zur Folge, dass sich die Überschrift ein wenig nach links verschiebt, wenn eine Seite der HP einen Scrollbalken hat.
Die h1 hat damit absolut nichts zu tun. Zeige doch mal, wie Du die Seite aufgebaut hast.
Das Gästebuch habe ich mit einem iframe integriert. Gibt es eine Möglichkeit, dass sich das iframe automatisch an die grösse der Seite des Gästebuchs anpasst, ohne dafür JavaScript zu verwenden?
Nein.
freundliche Grüße
Ingo-
Hi, danke für deine Antwort. Hier der Quelltext:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style1.css">
<!--[if lt IE 7]><style type="text/css">
@media screen {
html, body {
height: 100%; overflow-y: hidden;
}
#Scrollbereich {
height: 100%; width: 100%; overflow: auto;
}
#Inhalt {
position: static;
}
}
</style><![endif]-->
</head><body>
<div id="Scrollbereich">
<h1><font color="#999999" face="Comic Sans MS">christian's guitar stuff</font></h1>
<div id="Inhalt">
<p align="center"><img src="Fotos/Page/chris_title2.jpg" width="306" height="460"></p>
<br></div>
</div><div id="fixiert">
<ul id="Navigation">
<li><a href="about_me.html" target="_self">steckbrief</a></li>
<li><a href="band.htm">band / projekte</a></li>
<li><a href="gigs.htm" target="_self">live termine</a></li>
<li><a href="cds.htm" target="_self">tonträger</a></li>
<li><a href="Fotos/Gallery/Fotos_Chris1.htm">bilder</a></li>
<li><a href="fav_links.htm" target="_self">links</a></li>
<li><a href="contact.htm" target="_self">kontakt</a></li>
<li><a href="guestbook.htm" target="_self">gästebuch</a></li>
<li><a href="index.html" target="_self">home</a></li>
</ul>
</div>
</body>
</html>Das Gästebuch habe ich dann einfach im Layer "Inhalt" mit einem iframe eingebunden, aber, die Grössenanpassung werde ich wohl über Javascript lösen müssen. Zu H1 hier noch die Entsprechende Definition aus der CSS-Datei:
H1 {
BORDER-RIGHT: silver 2px ridge; PADDING-RIGHT: 0.3em; BORDER-TOP: silver 2px ridge; PADDING-LEFT: 0.3em; FONT-SIZE: 1.5em; PADDING-BOTTOM: 0.3em; MARGIN: 0.5em 0.5em 0.5em 5em; BORDER-LEFT: silver 2px ridge; PADDING-TOP: 0.3em; BORDER-BOTTOM: silver 2px ridge; BACKGROUND-COLOR: #660000; TEXT-ALIGN: center
}Grüße
ChristianHi,
Als Überschrift/Logo für die HP hab ich einfach ein <h1> Tag genommen. Das hat aber zur Folge, dass sich die Überschrift ein wenig nach links verschiebt, wenn eine Seite der HP einen Scrollbalken hat.
Die h1 hat damit absolut nichts zu tun. Zeige doch mal, wie Du die Seite aufgebaut hast.Das Gästebuch habe ich mit einem iframe integriert. Gibt es eine Möglichkeit, dass sich das iframe automatisch an die grösse der Seite des Gästebuchs anpasst, ohne dafür JavaScript zu verwenden?
Nein.freundliche Grüße
Ingo-
Hi,
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Das Beispiel war für den standardkompatiblen Modus erstellt, wozu ein kompletter DOCTYPE erforderlich ist.
<h1><font color="#999999" face="Comic Sans MS">christian's guitar stuff</font></h1>
<div id="Inhalt">
<p align="center"><img src="Fotos/Page/chris_title2.jpg" width="306" height="460"></p>
<br>ohje... warum verschandelst Du den Code nur so? :-(
Nutze doch bitte CSS zur Formatierung - die übrigen Angaben für h1 z.B. hast Du doch auch bereits im CSS angegeben.<li><a href="about_me.html" target="_self">steckbrief</a></li>
Diese target-Angaben sind übrigens völlig überflüssig.
H1 {
BORDER-RIGHT: silver 2px ridge; PADDING-RIGHT: 0.3em; BORDER-TOP: silver 2px ridge; PADDING-LEFT: 0.3em; FONT-SIZE: 1.5em; PADDING-BOTTOM: 0.3em; MARGIN: 0.5em 0.5em 0.5em 5em; BORDER-LEFT: silver 2px ridge; PADDING-TOP: 0.3em; BORDER-BOTTOM: silver 2px ridge; BACKGROUND-COLOR: #660000; TEXT-ALIGN: center
}also vereinfacht und übersichtlich:
h1 {
margin:0.5em 0.5em 0.5em 5em;
padding:0.3em;
border:2px silver ridge;
text-align:center;
background:#660000;
}
Damit ist die Box 5em vom linken Rand entfernt und der Inhalt hierin zentriert.
Wo ist nun das Problem?freundliche Grüße
Ingo-
Hallo Ingo,
danke, hast recht, die Formatierung von h1 gehört zur Gänze in die CSS. Hab herum probiert und vergessen, es in die CSS zu übertragen.
Damit ist die Box 5em vom linken Rand entfernt und der Inhalt hierin zentriert.
Wo ist nun das Problem?Die Ausrichug vom linken Rand ist ok. Was mir nicht gefällt ist, dass sich der Inhalt von h1 nach links verschiebt, wenn eine Seite meiner HP rechts einen Scrollbalken hat. Damit ist die Überschrift der HP nicht immer exakt in derselben Position, sondern verschiebt sich ein wenig, je nachdem, ob eine Seite einen Scrollbalken hat oder nicht.
Viele Grüße
ChristianHi,
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Das Beispiel war für den standardkompatiblen Modus erstellt, wozu ein kompletter DOCTYPE erforderlich ist.<h1><font color="#999999" face="Comic Sans MS">christian's guitar stuff</font></h1>
<div id="Inhalt">
<p align="center"><img src="Fotos/Page/chris_title2.jpg" width="306" height="460"></p>
<br>ohje... warum verschandelst Du den Code nur so? :-(
Nutze doch bitte CSS zur Formatierung - die übrigen Angaben für h1 z.B. hast Du doch auch bereits im CSS angegeben.<li><a href="about_me.html" target="_self">steckbrief</a></li>
Diese target-Angaben sind übrigens völlig überflüssig.H1 {
BORDER-RIGHT: silver 2px ridge; PADDING-RIGHT: 0.3em; BORDER-TOP: silver 2px ridge; PADDING-LEFT: 0.3em; FONT-SIZE: 1.5em; PADDING-BOTTOM: 0.3em; MARGIN: 0.5em 0.5em 0.5em 5em; BORDER-LEFT: silver 2px ridge; PADDING-TOP: 0.3em; BORDER-BOTTOM: silver 2px ridge; BACKGROUND-COLOR: #660000; TEXT-ALIGN: center
}
also vereinfacht und übersichtlich:
h1 {
margin:0.5em 0.5em 0.5em 5em;
padding:0.3em;
border:2px silver ridge;
text-align:center;
background:#660000;
}
Damit ist die Box 5em vom linken Rand entfernt und der Inhalt hierin zentriert.
Wo ist nun das Problem?freundliche Grüße
Ingo-
Hi,
Damit ist die Überschrift der HP nicht immer exakt in derselben Position, sondern verschiebt sich ein wenig, je nachdem, ob eine Seite einen Scrollbalken hat oder nicht.
Du hast definiert, daß der Text *im Fenster* zentriert sein soll - das ist er doch. Nimm die Verschiebung hin, sorge ständig für einen Scrollbalken oder verzichte auf die Zentrierung.
Hi,
und lösche bitte überflüssige Zitate.
freundliche Grüße
Ingo
-
-
-
-
Hier noch die gesamte CSS-Datei für den Aufbau der Seite:
body {
font: normal 100.01% Arial Narrow;
color: #FF9900; background-color: black;
scrollbar-face-color: #000000;
min-width: 40em; /* Mindestbreite verhindert Anzeigefehler in modernen Browsern */
}
p {
margin: 3em 0 0 3em;
}html {
padding: 0;
}
body {
margin: 0; padding: 0;
}#fixiert {
position: absolute;
top: 2.8em; left: 0em;
width: 12em;
background-color: black;
border: 0;
}
html>body #fixiert { /* nur fuer moderne Browser! */
position: fixed;
}
#fixiert2 {
position: absolute;
top: 25em; left: 8em;
width: 15em; padding: 0.3em;
background-color: #660000;
font-size: 1em;
border: 2px ridge silver;
}
html>body #fixiert2 { /* nur fuer moderne Browser! */
position: fixed;
}
#fixiert img {
height: 6.8em; float: right;
}
#Inhalt_Gallery {
margin-left: 20em; margin-top: 0.4em; padding: 0 1em;
border-left: 2px ridge silver; border-top: 2px ridge silver; border-bottom: 2px ridge silver;
}
#Inhalt {
margin-left: 20em; margin-top: 0.4em; margin-bottom: 1em; padding: 0 1em;
border-left: 2px ridge silver; border-top: 2px ridge silver; border-bottom: 2px ridge silver;
}
* #Inhalt, #Inhalt_Gallery { /* versteckt vor Netscape 4 */
background-color: #333333;
}
#Inhalt h2, #Inhalt_Gallery h2 {
font-size: 1.2em;
margin: 2em 5% 2em;
color: maroon;
border-bottom: 2px ridge silver;
}
#Inhalt p, #Inhalt_Gallery p {
font-size: 1em;
margin: 1em 0;
}
#Inhalt a:link, #Inhalt_Gallery a:link {
color:#FFFFFF;
}
#Inhalt a:visited, #Inhalt_Gallery a:visited {
color:#FFFFFF;
}
#Inhalt a:hover, #Inhalt_Gallery a:hover {
color:#FFFFFF;
}
#Inhalt a:active, #Inhalt_Gallery a:active {
color:#FFFFFF;
}
#Inhalt a:focus, #Inhalt_Gallery a:focus { color:#FFFFFF;
}
#Inhalt #Fusszeile {
font-size: 0.9em;
margin: 200em 0 0; padding: 0.1em;
text-align: center;
background-color: #fed; border: 2px ridge silver;
}h1 {
font-size: 1.5em;
margin: 0.5em; margin-left: 5em; padding: 0.3em;
text-align: center;
background-color: #660000;
border: 2px ridge silver;
}#Navigation {
font-size: 0.83em;
margin: 0 0 1.2em; padding: 0;
}
#Navigation li {
list-style: none;
margin: 0; padding: 0.5em;
}ul#Navigation {
width: 12em;
margin: 0; margin-left: 5em; padding: 0.8em;
border: 2px ridge silver;
background-color: #660000;
}
* html ul#Navigation { /* Korrekturen fuer IE 5.x */
width: 13.92em;
margin-left: 5.8em;
w\idth: 10em;
padding-left: 0;
padd\ing-left: 0.8em;
}
ul#Navigation li {
list-style: none;
margin: 0.4em; padding: 0;
}
ul#Navigation span {
display:block;
padding: 0.2em;
display: block;
padding: 0.2em;
text-decoration: none; font: normal 100.01% Verdana, Arial, Helvetica, sans-serif; font-weight: bold;
border: 2px ridge silver;
font-weight: bold;
font-size: 15px;
color: white; background-color: black;
}
ul#Navigation a {
display:block;
padding: 0.2em;
text-decoration: none; font: normal 100.01% Verdana, Arial, Helvetica, sans-serif; font-weight: bold;
border: 2px ridge silver;
border-left-color: white; border-top-color: white;
color: maroon; background-color: #ccc;
}
* html ul#Navigation a, ul#Navigation span { /* Breitenangaben nur fuer IE */
width: 100%;
w\idth: 10.56em;
}ul#Navigation a {
display: block;
padding: 0.2em;
font-weight: bold;
font-size: 15px;
}
ul#Navigation a:link {
color: white; background-color: #333333;
}
ul#Navigation a:visited {
color: white; background-color: #333333;
}
ul#Navigation a:hover {
color: white; background-color: gray;
}
ul#Navigation a:active {
color: white; background-color: #333333;
}Grüße
ChristianHi,
Als Überschrift/Logo für die HP hab ich einfach ein <h1> Tag genommen. Das hat aber zur Folge, dass sich die Überschrift ein wenig nach links verschiebt, wenn eine Seite der HP einen Scrollbalken hat.
Die h1 hat damit absolut nichts zu tun. Zeige doch mal, wie Du die Seite aufgebaut hast.Das Gästebuch habe ich mit einem iframe integriert. Gibt es eine Möglichkeit, dass sich das iframe automatisch an die grösse der Seite des Gästebuchs anpasst, ohne dafür JavaScript zu verwenden?
Nein.freundliche Grüße
Ingo
-