zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Was übersehe ich?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 15.10.2008, 22:30
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 31.05.2008
Beiträge: 14
Psyclown befindet sich auf einem aufstrebenden Ast
Standard Was übersehe ich?

LiquiStyle

Ich suche schon wieder n paar Tage, finde aber meinen Fehler nicht: der Menüpunkt "Leistungen" besitzt Childs, der Childblock, erstreckt sich aber hinter dem Content-Bereich, im IE kann man das sogar sehen, in dem Moment, wenn die Seite aufgerufen wird, schimmert er hinterm Content durch. Der Content soll sich aber natürlich nach unten verschieben, wenn der Bereich mit den Childs erscheint. Ich hatte das ganze auch schonmal so, aber da mal wieder was im Template geändert wurde, ist das jetzt leider hinfällig...

Wäre also prima, wenn mir jemand nen Tipp geben könnte, was ich übersehe...

Anbei noch das Stylesheet sowie der Quelltext, wenn der Menüpunkt "Leistungen" geklickt wurde:

Zitat:
Stylesheet main.css

html, body, p, ul, h1, h2, ul ul, ul li, ul li a{
margin: 0;
padding: 0;
}

#clearing { clear: both; }

#body{
background-color: #eeeeee;
color: black;
height: 101%;
margin: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
}

#wrapper {
position: relative;
margin: 10px auto;
width: 984px;
background-color: white;
}

#header {
position: relative;
top: 1px;
background: url(../images/header_bg.png);
height: 168px;
width: 982px;
color: black;
margin-top: -10px;
border: 1px solid black;
}

#header h3 {
background: url(../images/logo.png);
height: 168px;
width: 334px;
position: relative;
top: -10px;
left: 0px;
}

#menu-top {
height: 1px;
width: 984px;
position: relative;
background: url(../images/menu-top-bottom.png);
top: 0px;
border-top: 1px solid black;
}

#menu-middle{
color: black;
min-height: 40px;
width: 982px;
border-left: 1px solid black;
border-right: 1px solid black;
background: url(../images/menu-middle.png);
position: relative;
top: -1px;
}

#menu-bottom {
height: 1px;
width: 984px;
position: relative;
background: url(../images/menu-top-bottom.png);
top: 0px;
}

#menu-middle span {
position: relative;
left: 0,5px;
text-decoration: none;
color: black;
display: inline;
top: 2.5px;
}

#menu-middle span a {
position: relative;
border-left: 1px #fff solid;
border-right: 1px #aaa solid;
text-decoration: none;
color: black;
background: transparent;
font-family: Verdana;
font-size: 14px;
font-weight: bold;
padding: 3px 1px;
padding-bottom: 4px;
margin-right: -4px;
margin-bottom: -3px;
}

#menu-middle a:hover,
#menu-middle a:focus,
#menu-middle a.current,
#menu-middle a:active { background: #eee; color: #333; text-decoration: none; border-top: 1px solid black; }

/*################################################# #############################
######################################CHILDS###### ##############################
################################################## ############################*/

#childs {
min-height: 0px;
background-color: red;
position: relative;
top: 10px;
}

#menu-middle span.child {
position: relative;
text-decoration: none;
color: black;
display: inline;
margin-bottom: 5px;
padding: 0px;
left: 0,5;
}

#menu-middle span.child a {
position: relative;
border-left: 1px #fff solid;
border-right: 1px #aaa solid;
text-decoration: none;
color: black;
background: transparent;
font-family: Verdana;
font-size: 14px;
font-weight: bold;
margin-right: -4px;
padding: 1,5px 1px;
padding-bottom: 0,5px;
top: -0,5;
}

#menu-middle span.child a:hover,
#menu-middle span.child a:focus,
#menu-middle span.child a.current,
#menu-middle span.child a:active { background: #eee; color: #333; text-decoration: none; }

/*################################################# #############################
###################################CHILDS-ENDE#################################
################################################## ###########################*/

#content {
min-height: 346px;
position: relative;
}

/*#content-top {
background: url(../images/content-top.png);
position: absolute;
width: 984px;
height: 10px;
top: 50%;
border-top: 1px solid black;
}*/

#content-middle {
position: relative;
color: black;
background: url(../images/content-middle.png);
width: 984px;
min-height: 409px;
top: -19px;
margin-bottom: 20px;
border-top: 1px solid black;
}

#content-text {
position: relative;
width: 900px;
top: -10px;
left: 50px;
}

#content-bottom {
background: url(../images/content-bottom.png);
position: absolute;
width: 984px;
height: 30px;
top: 100%;
margin-bottom: 120px;
}

#FrontArticle,
#FrontArticleOv,
#FrontContent,
#FrontDate,
#FrontDateOv,
#FrontGallery,
#FrontGalleryOv ,
#GB {
margin: 5px;
}

form.guestbook td {
height:21px;
left:250px;
width:380px;
text-align:left;
vertical-align:middle;
background-color:#FFFFFF;
padding:10px;
}

table.guestbook {

}

form.guestbook input {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
background-color:#ffffff;
border-color:#000000;
border-style:solid;
border-width:thin;
}

form.guestbook input.error {
border-color:#FF0000;
border-left-width:2px;
}


a:link {
color: #333333;
text-decoration: none;
}
a:visited {
color: #333333;
text-decoration: none;
}
a:hover {
color: #be0000;
text-decoration: underline;
}
a:active {
color: #0000CC;
}

Zitat:
Stylesheet ie.css

html, body, p, ul, h1, h2, ul ul, ul li, ul li a{
margin: 0;
padding: 0;
}

#clearing { clear: both; }

#body{
background-color: #eeeeee;
color: black;
height: 101%;
margin: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
}

#wrapper {
position: relative;
margin: 10px auto;
width: 984px;
background-color: white;
}

#header {
position: relative;
top: 1px;
background-color: #af0303;
height: 168px;
width: 982px;
color: black;
margin-top: -10px;
border: 1px solid black;
}

#header h3 {
background: url(../images/logo.png);
height: 168px;
width: 334px;
position: relative;
top: 0px;
left: 0px;
}

#menu-top {
height: 1px;
width: 984px;
position: relative;
background: url(../images/menu-top-bottom.png);
top: 0px;
border-top: 1px solid black;
}

#menu-middle{
color: black;
min-height: 40px;
width: 982px;
border-left: 1px solid black;
border-right: 1px solid black;
background: url(../images/menu-middle.png);
position: relative;
top: -1px;
}

#menu-bottom {
height: 1px;
width: 984px;
position: relative;
background: url(../images/menu-top-bottom.png);
top: 0px;
}

#menu-middle span {
position: relative;
left: 0,5px;
text-decoration: none;
color: black;
display: inline;
top: 2.5px;
}

#menu-middle span a {
position: relative;
border-left: 1px #fff solid;
border-right: 1px #aaa solid;
text-decoration: none;
color: black;
background: transparent;
font-family: Verdana;
font-size: 14px;
font-weight: bold;
padding: 2px 1px;
padding-bottom: 4px;
margin-right: -4px;
margin-bottom: -3px;
}

#menu-middle a:hover,
#menu-middle a:focus,
#menu-middle a.current,
#menu-middle a:active { background: #eee; color: #333; text-decoration: none; border-top: 1px solid black; }

/*################################################# #############################
######################################CHILDS###### ##############################
################################################## ############################*/

#childs {
min-height: 0px;
background-color: red;
position: relative;
top: 10px;
}

#menu-middle span.child {
position: relative;
text-decoration: none;
color: black;
display: inline;
margin-bottom: 5px;
padding: 0px;
left: 0,5;
}

#menu-middle span.child a {
position: relative;
border-left: 1px #fff solid;
border-right: 1px #aaa solid;
text-decoration: none;
color: black;
background: transparent;
font-family: Verdana;
font-size: 14px;
font-weight: bold;
margin-right: -4px;
padding: 1,5px 1px;
padding-bottom: 0,5px;
top: -0,5;
}

#menu-middle span.child a:hover,
#menu-middle span.child a:focus,
#menu-middle span.child a.current,
#menu-middle span.child a:active { background: #eee; color: #333; text-decoration: none; }

/*################################################# #############################
###################################CHILDS-ENDE#################################
################################################## ###########################*/

#content {
min-height: 346px;
position: relative;
}

/*#content-top {
background: url(../images/content-top.png);
position: absolute;
width: 984px;
height: 10px;
top: 50%;
border-top: 1px solid black;
}*/

#content-middle {
position: relative;
color: black;
background: url(../images/content-middle.png);
width: 984px;
min-height: 409px;
top: -19px;
margin-bottom: 20px;
border-top: 1px solid black;
}

#content-text {
position: relative;
width: 900px;
top: -10px;
left: 50px;
}

#content-bottom {
background: url(../images/content-bottom.png);
position: absolute;
width: 984px;
height: 30px;
top: 99%;
margin-bottom: 120px;
}

#FrontArticle,
#FrontArticleOv,
#FrontContent,
#FrontDate,
#FrontDateOv,
#FrontGallery,
#FrontGalleryOv ,
#GB {
margin: 5px;
}

form.guestbook td {
height:21px;
left:250px;
width:380px;
text-align:left;
vertical-align:middle;
background-color:#FFFFFF;
padding:10px;
}

table.guestbook {

}

form.guestbook input {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
background-color:#ffffff;
border-color:#000000;
border-style:solid;
border-width:thin;
}

form.guestbook input.error {
border-color:#FF0000;
border-left-width:2px;
}


a:link {
color: #333333;
text-decoration: none;
}
a:visited {
color: #333333;
text-decoration: none;
}
a:hover {
color: #be0000;
text-decoration: underline;
}
a:active {
color: #0000CC;
}

Zitat:
Quelltext


<!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" lang="de" xml:lang="de">

<head>
<title>LiquiStyle</title>

<script src="modules/jquery-1.2.6.js" type="text/javascript"></script>

<link href="modules/facebox/facebox.css" media="screen" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<script src="modules/facebox/facebox.js" type="text/javascript"></script>

<script type="text/javascript">
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox({
loading_image : 'modules/facebox/loading.gif',
close_image : 'modules/facebox/closelabel.gif'
})
})
</script>


<link href="templates/cms_front/liquistyle/css/main.css" rel="stylesheet" type="text/css">
<!--[if IE]>
<style type="text/css">
@import url(templates/cms_front/liquistyle/css/ie.css);
</style>
<![endif]-->
</head>

<body id="body"></a>
<div id="wrapper">

<div id="header" class="head">
<img align="left" src="templates/cms_front/liquistyle/images/logo.png" />
<img align="right" src="templates/cms_front/liquistyle/images/header_slogan.png" />

</div>

<div id="casing">

<div id="menu-top"> </div>
<div id="menu-middle">


<span><a href="index.php?langId=1&actElem=1&page=31&content Id=1" >&nbsp;Home&nbsp;</a></span>




<span><a href="index.php?langId=1&actElem=24&page=31&conten tId=22" >&nbsp;Slimp&nbsp;</a></span>




<span><a href="index.php?langId=1&actElem=11&page=31&conten tId=14" class="current" >&nbsp;Leistungen&nbsp;</a></span>












<span><a href="index.php?langId=1&actElem=4&page=31&content Id=5" >&nbsp;Referenzen&nbsp;</a></span>




<span><a href="index.php?langId=1&actElem=17&page=31&conten tId=2" >&nbsp;Kontakt&nbsp;</a></span>




<span><a href="index.php?langId=1&actElem=5&page=31&content Id=4" >&nbsp;Impressum&nbsp;</a></span>




<div id="childs">






<span class="child">
<a href="index.php?langId=1&actElem=19&page=31&conten tId=15" >&nbsp;Webdesign&nbsp;</a>
</span>



<span class="child">
<a href="index.php?langId=1&actElem=20&page=31&conten tId=16" >&nbsp;Printmedien&nbsp;</a>

</span>



<span class="child">
<a href="index.php?langId=1&actElem=22&page=31&conten tId=17" >&nbsp;Webhosting&nbsp;</a>
</span>



<span class="child">
<a href="index.php?langId=1&actElem=23&page=31&conten tId=18" >&nbsp;Programmierung&nbsp;</a>
</span>





</div> </div>
<div id="menu-bottom"> </div>

<div id="content">
<div id="content-top">
</div>
<div id="content-middle" class="content">
<div id="content-text">
<br />

<br />
<div id="FrontContent">
<p>&nbsp;</p>

<p><div style="text-align: center;"><span style="font-size: small;"><span style="font-family: Verdana;">Hier bieten wir Ihnen nun eine kurze &Uuml;bersicht unserer Leistungen. </span></span></div>
<div style="text-align: center;"><span style="font-size: small;"><span style="font-family: Verdana;">Sollten Sie nicht f&uuml;ndig werden oder etwas ganz spezielles w&uuml;nschen so scheuen Sie sich nicht uns einfach zu fragen!</span></span></div>
<div style="text-align: center;">&nbsp;</div>
<div style="text-align: center;">&nbsp;</div>
<div style="text-align: center;">&nbsp;</div>

<div style="text-align: center;">&nbsp;</div>
<p style="text-align: center;"><span style="font-family: Verdana;"> <img height="207" border="0" width="628" src="http://www.liquistyle.de/images/content/Bilder/Baum.png" alt="" usemap="#Leistungen" /><br />
<map name="Leistungen">
<area shape="rect" coords="0,55,130,75" href="index.php?langId=1&amp;actElem=20&amp;page=3 1&amp;contentId=16" alt="Printmedien" title="Printmedien" />
<area shape="rect" coords="138,0,255,15" href="index.php?langId=1&amp;actElem=19&amp;page=3 1&amp;contentId=15" alt="Webdesign" title="Webdesign" />
<area shape="rect" coords="323,0,450,20" href="index.php?langId=1&amp;actElem=22&amp;page=3 1&amp;contentId=17" alt="Webhosting" title="Webhosting" />
<area shape="rect" coords="440,60,628,80" href="#" alt="Programmierung" title="Programmierung" /> </map> </span></p></p>
</div> </div>

<div id="content-bottom" class="clearing">
</div>

</div>
</div>
</div>

</div>

</body>
</html>

Wie gesagt, wär toll, wenn mir jemand sagen könnte, was ich übersehen habe, in diesem Sinne, vielen Dank im vorraus,

Psyclown
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 16.10.2008, 11:06
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.034
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

Ich habe mir die Seite mal angeschaut mit FF 3.x und IE 7.x

Wo sollen die "Childs" liegen? Ich sehe beim Menüpunkt "Leistungen" nur einen einfachen Link. Unter childs verstehe ich: in einem HTML-Element enthaltene weitere Elemente ( Kindelemente).

Ich sehe jedoch nur ein div #childs, welches ausserhalb des Menüs liegt.

Du kannst aber mit CSS nicht das Verhalten von beliebigen Elementen (durch andere Elemente) in einem Dokument steuern. Deswegen funktioniert das bei dir nicht.

Die HTML-Elemente müssen einen Bezug zueinander haben, den ich mangels eines besseren Begriffs mal "HTML-Kaskade oder -Verschachtelung von Elementen" nennen möchte:

Code:
 Element > Kindelement > noch ein Nachfahre > usw.

Beispiel in Form einer Verschachtelung:

<div>           / Element
<p>             /Kindelement
<span>        /Nachfahre (Enkel)
<a href="x.html">text      / Nachfahre (Urenkel)
</a></span></p><div>
Genau genommen müsste ich die Buchstabenfolge "text" auch noch als Nachfahre deklarieren, aber das spare ich mir hier.

Du kannst mit CSS immer nur HTML-Elemente ansprechen. Und das, wenn das Erscheinungsbild anderer Elemente mitbeeinflusst werden soll, auch nur in der Form der Kaskade (Kindelemente) ( Cascading Style Sheets !! )
Den Nachbarselektor lasse ich mal aussen vor...

Es gibt aber eine Lösung für dein Problem: Lege dein Menü in Form einer Liste an und verschachtele die Elemente ( ul, li)

Hierzu empfehle ich Dir die FAq Nr. 8 und vorher 10 und 11
durchzuarbeiten. Ist kein Hexenwerk und sollte nach zwei Stunden Lernen und Coden erledigt sein.

Viel Spass dabei

Edit: Da es bei Dir noch am grundlegenden Verständnis für das Zusammenwirken von CSS und HTML zu fehlen scheint, empfehle ich weiter die Lektüre von Peter Müllers "Little Boxes" und später "Fortgeschrittene CSS-Techniken inkl. CSS-Debugging" von Corina Rudel und Ingo Chao. Beides zusammen wird Dir hunderte von Stunden sparen und unnötiges Kopfzerbrechen.
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte

Geändert von andir (16.10.2008 um 11:13 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 19.10.2008, 14:00
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 31.05.2008
Beiträge: 14
Psyclown befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von andir Beitrag anzeigen
Du kannst aber mit CSS nicht das Verhalten von beliebigen Elementen (durch andere Elemente) in einem Dokument steuern. Deswegen funktioniert das bei dir nicht.
es ist ja auch nicht nur html und css, da sitzt auch noch einiges an php dahinter, welches eben dafür sorgt, dass das div="childs" nur dann auftaucht, wenn auch elemente da sind, die den gegebenen Eigenschaften entsprechen.

Vielleicht ist "childs" der falsche begriff und es wäre angebrachter "Unterpunkte" zu sagen, was aber das eigentliche Problem nicht löst. Der Contentbereich soll eben entsprechend der Größe des div="childs" nach unten rücken, wenn dieses auftaucht. Wie gesagt, hatte ich das ganze schonmal so, aber es gab änderungen im CMS, genauer gesagt im Template für das Menü und es passte alles hinten und vorne nicht. Und ich finde eben einfach nicht den grund dafür, dass das ganze nicht so passiert, wie ich mir das vorstelle, denn der bereich "Menu-Middle" in dem das div="childs" liegt streckt sich auch entsprechend, das einzige problem ist, das das ganze HINTER dem Content passiert...
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
Alternative zu Float? Oder was übersehe ich Ice-eye CSS 5 09.03.2008 16:34


Alle Zeitangaben in WEZ +2. Es ist jetzt 09:26 Uhr.