Diverse Fragen zu Design

Status
Nicht offen für weitere Antworten.
Danke hat funktioiert. Ich bin schon auf das nächste Problem gestossen:
der #contentright , also die rechte Spalte in dem #container soll immer gleich hoch sein wie das umgebende Div #container.(<- da dieser, wie auch auf dem Bild (das als Vorlage dient), eine andere Hintergrundfarbe hat wie der #contentleft)

Ist dies mit divs überhaupt möglich, dass ein Div in einem anderen immer 100% des umgebendes Divs annimmt?
 
Da es sich um ein Layout mit fixen Breiten handelt, dürfte dir hier die Fauxcolumns-Technik weiterhelfen, bei der ein senkrecht wiederholendes Hintergrundbild im übergeordneten DIV #container den Spaltenhintergrund erzeugt, und es so den Anschein erweckt, als wäre das Kindelement so hoch, wie sein Elternelement.

Weitere Links zu alternativen Techniken für "Equal-Height-Columns" findest du in dem Artikel AnyColumnLongest.
 
So ich hab ein wenig weitergearbeitet und bin schon wieder auf ein paar Probleme gestossen(Der Aufabu immer noch wie auf dem oberen Bild)
1.) Die Navigation soll aus <ul><li> elementen bestehen die durch CSS ausgerichtet werden. Gleichzeitig soll es aber auf der Seite später Aufzählungen geben (auch mit <ul><li> Elementen), die allerdings anders aussehen soll als die Navigation (da Navigation horizontal)
So wie man im Quelltext unten sieht besitzen die Aufzählungs <ul>'s und die <li>'s einen grauen unteren Rahmen, der leider allerdings auch bei den <ul>'s und die <li>'s auftaucht (was nicht erwünscht ist)
2.) Das gleiche Problem gibts bei den <a>-tags. Diese sollen auch in der Navigation anders aussehen als die anderen im Inhalt (Inhalt: Hintergrundfarbe bei hover)
Leider besitzt die Navigation nun einen störenden Rahmen und eine störende Hintergrundfarbe beim hovern.
Meine Frage nun: Kann man zwei unterschiedliche a-tag bzw <ul>'s und die <li>'s Aussehen (durch CSS) auf der gleichen Seite haben? Wie? (<- Quelltext unten)

3.) Für mich unerklärlich ist auch die Tatsache das die Links in der Navigation im IE nichts funktionieren. Man kann sie werde anklicken noch verändert sich das Aussehen beim Hover. Im FF funktionieren sie einwandfrei.

Nun der Quelltext(alles in einer Datei)
Code: 
<!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=utf-8" />
<title>Website</title>
<style type="text/css">
a, a:visited {
	font-family: Helvetica, Verdana, Arial, sans-serif;
	font-size: 12px;
	color: #aaba1f;
	line-height: 16px;
	text-decoration:none;
	padding: 2px;
}
a:hover {
	font-family: Helvetica, Verdana, Arial, sans-serif;
	font-size: 12px;
	color: #fff;
	line-height: 16px;
	text-decoration: line-through;
	padding: 2px;
}
html, body {	
	padding:0;
	margin:0;
	border:0;
	font-family: Helvetica, Arial, Verdana, sans-serif;
	font-size: 12px;
	color: #333333;
	background-image:url(back.png);
}
#box {
	padding-top: 20px;
	padding-left:20px;
	padding-bottom:20px;
	margin: 0 auto;
	margin-top: 100px;
	width: 830px;
	/*nur Internet Explorer*/
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='75p_white.png');
}
/*nur Mozilla Firefox*/
#box[id] {
	background-image:url(75p_white.png);
}
#container {
	width: 810px;
	background-color:#FFFFFF;/*background-image:url(containerback.png);*/
}
/*Navigation*/
#navigation {
	height: 35px;
	width: 585px;
	padding-left:15px;
	background-image:url(navback.png);
	padding-top:15px;
}
#navigation ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}
#navigation ul li {
	display: inline;
	margin: 0px;
	padding: 0px;
}
#navigation ul li a {
	font-family: Helvetica, Verdana, Arial, sans-serif;
	text-decoration: none;
	font-size: 14px;
	margin: 0 8px;
	color: #FFFFFF;
	font-weight: normal;
}
#navigation ul li a:hover {
	font-family: Helvetica, Verdana, Arial, sans-serif;
	text-decoration: none;
	font-size: 14px;
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #FFFFFF;
}
/*links*/
#contentleft {
	float: left;
	width: 600px;
}
#maincontent {
	width: 585px;
	padding-bottom:10px;
	padding-top:10px;
	padding-left:15px;
}
/*rechts*/
#contentright {
	float:right;
	width:210px;
	background-color:#f7f7f7;
	height:100%;
}
#headright {
	background-color:#d1ea59;
	height:50px;
	width:210px;
}
#foot {
	padding-top:10px;
	padding-left:15px;
	width:795px;
	clear:both;
	height:40px;
	background-color:#d1ea59;
	background-image:url(footback.png);
	background-repeat: no-repeat;
	background-position: right;
}
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
ul {
	font-family: Helvetica, Verdana, Arial, sans-serif;
	font-size: 12px;
	color: #252222;
	margin: 0px;
	padding: 0px;
}
ul li {
	list-style-type: none;
	padding-top:5px;
	padding-bottom:5px;
	border-bottom: 1px solid #ececec;
}
.clearfix {
	display: inline-block;
}
/* Hides from IE-mac \*/
* html .clearfix {
	height: 1%;
 .clearfix {
display: block;
}
/* End hide from IE-mac */
</style>
</head>
<body>
<div id="box">
  <div id="container" class="clearfix">
    <div id="contentleft">
      <div id="navigation">
        <ul>
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
          <li><a href="#">Link 3</a></li>
          <li><a href="#">Link 4</a></li>
          <li><a href="#">Link 5</a></li>
          <li><a href="#">Link 6</a></li>
          <li><a href="#">Link 7</a></li>
        </ul>
      </div>
      <div id="maincontent"> Inhalt
        <ul>
          <li>Aufzählung</li>
          <li>Aufzählung</li>
          <li>Aufzählung</li>
          <li>Aufzählung</li>
          <li>Aufzählung</li>
          <li>Aufzählung</li>
        </ul>
      </div>
    </div>
    <div id="contentright">
      <div id="headright"></div>
    </div>
  </div>
  <div id="foot"></div>
</div>
</body>
</html>
 
Hi,

so wie du die Liste für die Navigation im Stylesheet über deren ID #navigation formatierst, machst du es eben für die Liste innerhalb des DIVs #maincontent.

Globale Einstellungen für die Listen, wie z.B. ihre Polsterungseigenschaften zurücksetzen, Bullet deaktivieren, usw. solltest du dann im Stylesheet vor den individuellen Formatierungen notieren, damit sie von denen ggfs. überschrieben werden können, und nicht umgekehrt.

Die Links kannst du entweder ebenfalls über den ID-Bezeichner des übergeordneten Elements unterschiedlich formatieren, oder sie selbst mit unterschiedlichen Klassennamen ansprechen, respektive formatieren.

Die Links lassen sich bei mir im IE problemlos anklicken.

Wie soll denn überhaupt in der Navigation eine "störende" Hintergrundfarbe beim Hovern erscheinen, wenn sich in keinem der beiden a:hover-Selektor diesbezüglich eine Angabe findet? Und wenn dich der "Hover"-Rahmen in der Navigation stört, entfernst du eben im entsprechenden Selektor die Regel.
 
Danke normalerweise war eine background-color für hover zugeweisen. Leider hab ich oben den Code gepotet bei dem ich gerade gestetet habe ob es an der hintergrundfarbe liegt.

Aber im IE6 lassen sich bei mir die Links nicht anklicken Sie werden vom IE6 nicht als Links erkannt. Der Mauszeiger z.b. verändert sich nicht und es gibt keinen hover-status.
 
Wie gesagt, ich kann die Links im IE problemlos nutzen, und damit der Rahmen im IE angezeigt wird, müssen die Links "Block-Level-Charakteristika" erhalten - in diesem Fall mit der float-Eigenschaft:

Code: 
#navigation ul li a {
        font-family: Helvetica, Verdana, Arial, sans-serif;
        text-decoration: none;
        font-size: 14px;
        margin: 0 8px;
        color: #FFFFFF;
        font-weight: normal;
        float:left;
}
Damit man auf dem Screenshot überhaupt was erkennt, hab ich die weiße Schrift- und Rahmenfarbe auf schwarz umgestellt, nur dummerweise wird beim Shooting der Mauszeiger nicht abgelichtet, um dir auch noch zu zeigen, dass auch er sich über einem Link standesgemäß verändert, also hab ich mal den Rechtsklick auf den Link ausgeführt :)

ie6.jpg
 
Also ich hab das mit den Links nochmal auf 2 anderen Computern angeschaut und dort funktioniert es im Internet Explorer 6 genauso wenig wie bei mir. Man kann nicht mal die Schrift markieren. Es ist so als ob das nur ein Bild wäre.
In deinem Bild oben ist es dort mit dem IE 7 oder IE 6? Weil mit dem IE 6 kann dies eigentlich nicht sein.
Was kann falsch sein am Aufbau das nichts im IE6 angeszeigt wird. Irgendein Div oder so muss wahrscheinlich schief liegen oder so was man aber nicht sieht, da die ganze #box eine feste Breite hat.
Eigentlich wäre es schon sehr wichtig dass im IE 6 wenigstens die Links funktionieren, bei anderen kleineren Fehler macht dies wenigere was aus, weil die meist nur optisch sind.

EDIT: Hab den Fehler endeckt, konnte aber leider nicht rausfinden warum. Es liegt an dem #div box - ohne dieses Div werden auch bei mir im Internet Explorer die Links richtig erkannt. Was ist an dem div #box fehlerhaft? Liegt es an dem durchsichtigen Hintergrund?

EDIT 2: Liegt an dem durchsichtigen Hintergrund der #box (filter...)
 
Zuletzt bearbeitet:
Dann nenn mal bitte den Link zu der Seite, denn dein gestriger geposteter Quellcode funktioniert bzgl. der Links in allen mir zur Verfügung stehenden IE-Versionen (bis einschliesslich IE7) einwandfrei, und vermutlich stimmen auch hier wieder die Quellcodes nicht überein, wie schon bei der "störenden" Hover-Hintergrundfarbe.

Mein Screenshot ist im IE6 (WinXP Prof.) entstanden.
 
Hab dir den Link per pm geschickt. Das es bei dir ging liegt ganz einfach daran, dass du die durchsichtige png nicht hattest. Ohne png funktioniert nämlich bei mir im IE auch. Was gibts noch für Möglichkeiten unsichtbare .pngs darzustellen im IE und FF
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück