getreidemuehlen
-


Hinweise


Antwort
 
LinkBack Themen-Optionen Thema durchsuchen Thema bewerten
Alt 18.01.2005, 12:11   #1
TP-Senior
 
Registriert seit: Nov 2004
jackie_o macht alles soweit korrekt

definition (list) term gestalten


Moin!

Habe meine css Linkboxen gerade schick fertig gestellt.
Funktioniert gut, skaliert auch im ie dank em, ist aber leider nicht valide...
Meldung:
document type does not allow element "div" here; missing one of "object", "ins", "del", "map", "button" start-tag
bezieht sich auf:
HTML-Code:
<dt><div class="servbox_topli">&nbsp;</div><div class="servbox_topmi">
die dt-div verschachtelung kam mir schon etwas seltsam vor, aber anders hab ich die Skalierung mitsamt der Hintergrundgrafiken nicht hinbekommen.

Der Header (dt) meiner Linkboxen besteht aus drei Hintergrundbildchen: links ne dunkelblaue ecke, rechts ne hellblaue ecke, dazwischen ein verlauf sowie der boxheadertext.

Hat jemand ne Idee wie man das ganze valide hinbekommt?

Gruß Jackie

zum anschauen:
http://jackie-o.gmxhome.de/layouttes...boxtest_2.html

code:

HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <title>serviceboxtest</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    
    <style type="text/css">
<!--
/* allgemein */

* {
   font-size: 100%;
   margin:0;
   padding:0;
   }
  
html {
    height:100%;
    width: 100%
    } 

body {
    text-align:center;
    font-family: Verdana, Arial, Sans-Serif;
    background-color:#ABC2E5;
    padding: 0;
    margin: 0;
    color:#fff;
    font-size : 1em;
    height: 100%;
	}


/* ab hier .......................... */
#marginboxservice {
    float: right;
    text-align: left;
    width: 11.9375em;
    color: #fff;
    voice-family: "\";
    }\"";
    voice-family:inherit;
    width: 11.9375em;
    }
html>body #marginboxservice {
    width: 11.9375em;
    }
  
  
  /* margin innereien */
  .smallLinkbox_right {
    text-align: left;
    width: 11.75em;
    margin: 0 0 0.1875em 0.1875em;
    padding: 0;
    voice-family: "\"}\"";
    voice-family:inherit;
    width: 11.75em;
    }
html>body .smallLinkbox_right {
    width: 11.75em;
    } 
 
 /* linkbox definierte Listen */
 
dl {
    width: 11.75em;
    margin: 0;
    padding: 0;
    background: #99AECD; 
    }

dt {
    width: 100%;
    height: 2em;
    margin: 0 0 0.7em 0;
    padding: 0;
    font-size: 0.70em;
    font-weight: bold;
    border-bottom: 0.0625em solid #fff;
    background: #6C81BA;
    }
	
dd {
      clear: right;
    margin: 0 0 0 0.625em;
    padding: 0 1.25em 0.3125em 1em; 
    font-size: 0.70em;
    background: #99AECD url(images/arrow.gif) no-repeat 0 0.3125em;
    background-position:0.25em 0.35em;   
    }
  
  .servbox_topli {
    width: 10px;
    height: 2em;
    float: left;
    background: #40529A url(images/servbox_topli.jpg) no-repeat top left;
  }
  
  .servbox_topmi {
  padding: 0 0 0 0;
    width: auto;
    height: 2em;
    line-height: 2em;
    float: left;
    background: #6C81BA url(images/servbox_topbg.jpg) repeat-y top left;
  }
  
  .servbox_topre {
    width: 10px;
    height: 2em;
    float: right;
    background: #6C81BA url(images/servbox_topre.jpg) no-repeat top right;
  }
  

  
  .boxkantebot {
    display: block;
    padding: 0;
    margin: 0;
    border:0;
    width: 11.75em;
    height: 0.3125em;
  }  

//-->
</style>
    
  </head>
  <body style="background: #FFFFFF;">
  <!-- Servicebox 1 //-->
    <div id="marginboxservice">         
      <div class="smallLinkbox_right">
        <dl>
	        <dt><div class="servbox_topli">&nbsp;</div><div class="servbox_topmi">Servicelinks1</div><div class="servbox_topre">&nbsp;</div></dt>
            <dd>Lorem ipsum dolor sit amet</dd>
	    <dd>Link 2</dd>
            <dd>Link 3</dd>
            <dd>Link 4</dd>
            <dd>Link 2</dd>
            <dd>Link 3</dd>
            <dd>Link 4</dd>
        </dl><img class="boxkantebot" src="images/servbox_unten.jpg" alt="" /></div>
        
  <!-- Servicebox 2 //-->
       <div class="smallLinkbox_right">
        <dl>
	        <dt><div class="servbox_topli">&nbsp;</div><div class="servbox_topmi">Servicelinks2</div><div class="servbox_topre">&nbsp;</div></dt>
            <dd>Lorem ipsum dolor sit amet</dd>
	    <dd>Link 2</dd>
            <dd>Link 3</dd>
            <dd>Link 4</dd>
            <dd>Link 2</dd>
            <dd>Link 3</dd> 
            <dd>Link 4</dd>
          </dl><img class="boxkantebot" src="images/servbox_unten.jpg" alt="" /></div>
      
  <!-- Servicebox 3 //-->
       <div class="smallLinkbox_right">
        <dl>
	        <dt><div class="servbox_topli">&nbsp;</div><div class="servbox_topmi">Servicelinks3</div><div class="servbox_topre">&nbsp;</div></dt>
            <dd>Lorem ipsum dolor sit amet</dd>
	    <dd>Link 2</dd>
            <dd>Link 3</dd>
            <dd>Link 4</dd>
            <dd>Link 2</dd>
            <dd>Link 3</dd> 
            <dd>Link 4</dd>
          </dl><img class="boxkantebot" src="images/servbox_unten.jpg" alt="" /></div>
    </div>
  </body>
</html>

Geändert von jackie_o (18.01.2005 um 12:16 Uhr).
jackie_o ist offline   Mit Zitat antworten


Alt 18.01.2005, 14:35   #2
TP-Greis
 
Benutzerbild von Boris
 
Registriert seit: Mar 2001
Ort: Berlin, Germany
Boris ist ein richtiges Arbeitstier - DANKEBoris ist ein richtiges Arbeitstier - DANKEBoris ist ein richtiges Arbeitstier - DANKEBoris ist ein richtiges Arbeitstier - DANKEBoris ist ein richtiges Arbeitstier - DANKEBoris ist ein richtiges Arbeitstier - DANKE
Wie wärs damit, die Navigation ganz simpel mit LI Elementen zu erstellen? Zudem sehen Deine .em Werte auch Gänsehauserregend aus ...
__________________
My software never has bugs. It just develops random features ...

» DevShack - die Website des freien Webentwicklers Boris
Boris ist offline   Mit Zitat antworten
Alt 18.01.2005, 14:38   #3
TP-Insider
 
Benutzerbild von HoRnominatoR
 
Registriert seit: Dec 2003
Ort: nienburg (raum hannover)
HoRnominatoR ist auf einem guten Weg
wie waers mit inlineelementen als block dargestellt.
__________________
in eile kam er,
in schwarzem gewand,
aus den tiefen des waldes,
ein einsamer mann, ein geschoepf der freiheit,
ein geschoepf ohne furcht,
doch alle nannten sie ihn nur T O D
HoRnominatoR ist offline   Mit Zitat antworten
Alt 18.01.2005, 18:00   #4
TP-Senior
 
Registriert seit: Nov 2004
jackie_o macht alles soweit korrekt
Hallo zusammen!
@adagio: freut mich, dir Gänsehaut zu machen ! Die krummen Werte sind allerdings für mein skalierbares pixelgenaues Layout bestimmt, dass sieht nur so kompliziert aus, is' eignetlich ganz einfach.
Ansonsten denke ich auch, dass ich ne normale Liste nehmen werde. Dann muss der Boxtitel eben in nen extra div. Ich fands irgendwie strukturell sinnvoll einen Themenblock so mit dl aufzubauen, und mit nem nicht skalierenden bg-Bild find ich's auch nach wie vor ne gute Sache.

@HoRnominatoR: deinen Tipp hab ich leider nicht ganz verstanden. Meinst du dem dt ein display: block mitzugeben? Ich fürchte nur das das an der Validität nichts ändert. Müsste ich mal ausprobieren.

Gruß Jackie
jackie_o ist offline   Mit Zitat antworten
Alt 19.01.2005, 01:07   #5
TP-Greis
 
Benutzerbild von Boris
 
Registriert seit: Mar 2001
Ort: Berlin, Germany
Boris ist ein richtiges Arbeitstier - DANKEBoris ist ein richtiges Arbeitstier - DANKEBoris ist ein richtiges Arbeitstier - DANKEBoris ist ein richtiges Arbeitstier - DANKEBoris ist ein richtiges Arbeitstier - DANKEBoris ist ein richtiges Arbeitstier - DANKE
Skalierbar und pixelgenau? Das ist paradox ;-)
__________________
My software never has bugs. It just develops random features ...

» DevShack - die Website des freien Webentwicklers Boris
Boris ist offline   Mit Zitat antworten
Alt 19.01.2005, 08:29   #6
TP-Senior
 
Registriert seit: Nov 2004
jackie_o macht alles soweit korrekt
ja hast natürlich recht, hab mich da vielleicht etwas ungenau ausgdrückt. Ich zoome quasi meine pixel.
Durch die Massangaben in em (umgerechnet aus meinen "Photoshop-Pixeln") skaliert auch der IE das komplette Layout mitsamt Bildern (wie operas zoom von der Wirkung in etwa) bei Veränderung der Schriftgröße. Die entstehende Unschärfe der Bilder ist mir dabei lieber als die Lücken im Layout.

Gruß Jackie
jackie_o ist offline   Mit Zitat antworten
Alt 19.01.2005, 12:36   #7
TP-Senior
 
Registriert seit: Nov 2004
jackie_o macht alles soweit korrekt
Hab hier noch mal meine geänderte Version hochgeladen.

Eins stört noch ein wenig:
der ie macht den servicebox-footer ca. doppelt so hoch wie alle anderen.
Kann ich in diesem Fall mit leben, aber neugierig wieso er das macht bin ich natürlich trotzdem...
hier nochmal der link:
http://jackie-o.gmxhome.de/layouttes...boxtest_3.html

Gruß Jackie
jackie_o ist offline   Mit Zitat antworten
Antwort

  Aktuelles Thema
  TP Hilfe Forum > Web-Editoren & Coding > HTML Puristen
definition (list) term gestalten definition (list) term gestalten
« Problem mit Firefox | Bannerrotation »

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)
 
Themen-Optionen Thema durchsuchen
Thema durchsuchen:

Erweiterte Suche
Thema bewerten
Thema bewerten:

Forumregeln
Es ist dir nicht erlaubt, neue Themen zu verfassen.
Es ist dir nicht erlaubt, auf Beiträge zu antworten.
Es ist dir nicht erlaubt, Anhänge hochzuladen.
Es ist dir nicht erlaubt, deine 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 an
Gehe zu

Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
preloaders gestalten meshsmooth Flash 3 31.10.2004 12:07
iFrame selber gestalten????????????? fine Dreamweaver 3 27.04.2004 14:00
Property List Editor Melmac Mac OS 2 03.12.2003 13:48
definition von css? nüchtern Dreamweaver 6 15.07.2003 13:23
Menü mit weniger Aufwand gestalten? kenny Dreamweaver 8 05.03.2003 10:56


Alle Zeitangaben in WEZ +2. Es ist jetzt 20:33 Uhr.

Powered by: vBulletin Version 3.7 (Deutsch)
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd. / Search Engine Friendly URLs by vBSEO 3.2.0 ©2008, Crawlability, Inc.
Traum-Projekt.com | Suchen | Archiv | Impressum | Kontakt | | | Nach oben |



1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67