✔ Falsche Anzeige bei geringer Auflösung

Status
Nicht offen für weitere Antworten.
B

buddha

Erfahrenes Mitglied
Hi,
Meine Testwebsite wird bei einer geringen Auflösung fehlerhaft dargestellt, die Navileiste ist fixiert damit diese bei einem grösseren content nicht mit verschoben wird, eigentlich klappt auch alles, mir geht es nur um die fehlerhafte Darstellung bei einer geringen Auflösung - deshalb hier
Code: 
/* CSS Document */
html { 
	padding:0px;
  	margin:0px;
}

body {
  	font-size: 14px;
  	font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
  	color: #FFFFFF;
  	padding:0px;
  	margin:0px;
	background-color: maroon;/*6F0000*/
	background-image:url(../images/kachel11.jpg); 
	background-repeat:repeat-x; 
}

#content { 
	width: 901px; 
	font-weight: 300; 
	font-size:13px; 
	top:0px;
  	position:relative; 
  	margin:auto;
  	left: auto;
  	right: auto;
  	height: 650px;
  	overflow: auto; 
	background-color:#FFFFFF; 
	color: #000000;
	background-image:url(../images/logocontent.jpg); 
	background-position:center; 
	background-attachment:fixed; 
	background-repeat:no-repeat;
  	
}

p { 
	padding-left:30px; 
	padding-right:30px;
	font-style: oblique; 
	font-size:12px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
}
p.top {
	 margin-top: 70px;
}
.navi {
	width:901px;
	position: fixed; 
}

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>TEST</title>
<link href="css/layout.css" rel="stylesheet"  type="text/css" />
<link href="css/navigation.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.Stil1 {font-size: 9px}
-->
</style>
</head>
<body>
<div align="center" id="logo" ><img src="http://www.tutorials.de/forum/images/header1.jpg" alt="header" width="900" height="100" /></div>
<div id="content">
  <div class="navi">
    <div id="tabs11">
      <ul>
        <!-- CSS Tabs -->
        <li id="current"><a href="Start.html"><span>Start</span></a></li>
        <li><a href="leistung.html"><span>Leistungen</span></a></li>
        <li><a href="Referenzen.html"><span>Referenzen</span></a></li>
        <li><a href="Kontakt.html"><span>Kontakt</span></a></li>
        <li><a href="Impressum.html"><span>Impressum</span></a></li>
        <li><a href="AGB.html"><span>AGB</span></a></li>
      </ul>
    </div>
  </div>
  <p class="top"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p>
 <div align="center" class="Stil1">&copy;RMPC-Internet </div>
</body>
</html>

Danke
 
Zuletzt bearbeitet:
Hi,

das Einzige, was mir beim Verkleinern des Browserfensters auffällt, ist, dass die "vollständige" Seite im Anzeigebereich gescrollt werden kann/muß, was letzlich an der Breiten- und Höhengaben für das DIV #content liegt, und somit bei verkleinertem Anzeigebereich auch völlig natürlich ist.

Naja, beim Scrollen sieht es dann halt ein bischen "strange" aus, wenn die komplette Seite, und nicht wie angedacht das DIV #content, trotz wenig Inhalts gescrollt werden kann, die Navigation aber "stehen" bleibt.
 
Ok, werde es anders lösen, mal schaun. Die Developertoolleiste ist ja eine feine Sache aber mit der Änderung der Auflösunge speziell bei Breitbild nicht so toll. Habe mir die Maße von einem 19" CRT nachgetragen damit ich wenigsten einen Anhaltspunkt habe.

Gruss Rico

Eine Frage am Rande - ist es möglich mittels CSS eine Border "transparent" zu gestalten
 
Code: 
border: transparent solid 100px;
Funktioniert in allen mir zur Verfügung stehenden Browsern, nur nicht in den Vorgängerversionen des IE7.
 
HI,
Bei der Border habe ich mich verkehrt ausgedrückt. Ich meine eine Border so ähnlich wie in der Grafik.
 

Anhänge

  • border.jpg
    border.jpg
    2,2 KB · Aufrufe: 21
Und was du meinst jetzt konkret? Etwa einen Farbverlauf, der ins transparante übergeht? :confused:

Mit CSS bekommst du das nicht hin. Hierfür wirst du dir entsprechende Grafiken (evtl. halbtransparente PNGs) erstellen, und diese als Hintergrundbilder einsetzen müssen.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück