fatmike182
Agnotologe
|
Hallo, Es geht um eine Seite die mittig mit der Breite von 900px (der top-Banner steht absichtlich wenige px nach links) aufgebaut ist. Darunter kommt das Hauptmenü hin und links davon dann das Submenü. Getestet wurde bis jetzt leider erst auf MacOS mit Firefox (3.0.3), Opera (6.0) und Safari (3.2.1). Der einzige Fehler der mir aufgefallen ist liegt im Hauptmenü: Opera: aktiver Link färbt hintergrund rot, schwarzer Rahmen soll nch sichtbar sein. Die Menüpunkte sind übers ganze Menü verteilt  Firefox: aktive links rot, Rahmen vollständig sichtbar (besser als beim opera), aber rechts ist so viel Platz  Safari: Rahmen nicht ganz sichtbar, rechts noch mehr Platz  Anm.: die Dicke des hauptmenüs hab ich nicht mit line-height festgelegt sondern über einen Border oben und unten, da sich bei line-height trotzdem nur der unmittelbare Bereich in der Hintergrundfarbe färbt, ich aber eben das Menü von oben bis unten rot haben möchte. <!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>blaaaa</title>
<style type="text/css">
body {font-family:Helvetica, Arial, sans-serif;}
#header {
width:900px;
margin-left: auto;
margin-right:auto;
position:relative; left:-10px;}
#menu {
width:653px;
position:relative; left:244px;
padding-left:2px;
border:solid #000000;
border-width: 1px thin 2px 0px;}
#menu ul {
list-style-type:none;
padding:0px;
margin:0px;
line-height:25px;}
#menu li {
display:inline;}
#menu a {
color:#293391;
font-size:11px;
font-weight:700;
text-decoration:none;
border:solid #FFFFFF;
border-width:6px 0 7px 0;}
#menu a:hover, #menu a:active {
color:#FFFFFF;
background:#901414;
border:solid #901414;
border-width:8px 0 7px 0;}
div.leftbar {
width:223px;
height:400px;
margin-left:auto;
margin-right:auto;
position:relative; left:-328px; top:-29px;}
#submenu {
background:#293391;
border-right:solid 1px #000000;}
#submenu ul {
width:214px;
list-style:none;
padding:0px;
margin:0px;
line-height:25px;
border-right:solid 1px #CCCCCC;}
#submenu li {
display:block;
border-top:dotted 1px #CCCCCC;}
#submenu a {
color:#ffffff;
font-size:11px;
font-weight:700;
text-decoration:none;
margin-left:5px;}
#subtitle {
color:#ffffff;
font-size:11px;
font-weight:700;
padding: 10px 0 5px 0px;
margin:0 7px 0 0;
border-right:solid 1px #FFFFFF;}
div.contentbox {
width:640px;
margin-left:auto;
margin-right:auto;
position:relative; left:120px; top:-390px;}
div.content {
margin:10px 0px 10px 3px;}
span.headline {
font-family:Georgia, "Times New Roman", Times, serif;
color:#293391;
font-size:16px;
font-weight:bold;
letter-spacing:-1px;}
div.news {
background:#cfcfcf;
margin:5px 0px 15px 10px;
font-size:12px;
min-height:160px;
text-align:justify;
padding: 5px;}
img.newspic {
width: 215px;
height: 160px;
background:#FF0000;
float:right;
margin-left:7px;}
</style>
</head>
<body>
<div id="header">
<div style="width:900px; height:175px; background:#FF0000;">
<img id="headerpic" src="pics/logo_header.png" alt="header" />
</div>
<div id="menu">
<ul>
<li><a href="">HOME</a></li>
<li><a href="">DER CLUB</a></li>
<li><a href="">TERMINE</a></li>
<li><a href="">MENTORING</a></li>
<li><a href="">STIPENDIEN</a></li>
<li><a href="">DaVINCI ZIRKEL</a></li>
<li><a href="">KOOPERATIONEN</a></li>
<li><a href="">PUBLIC RELATIONS</a></li>
</ul>
</div>
</div>
<div class="leftbar">
<div id="submenu">
<div id="subtitle"><a href="">HOME</a></div>
<ul>
<li><a href="">Sub 1</a></li>
<li><a href="">Sub 2</a></li>
<li><a href="">Sub 3</a></li>
<li><a href="">Sub 4</a></li>
</ul>
</div>
</div>
<div class="contentbox">
<div class="content">
<span class="headline">Hasadsf dfasf sfasdfaj sdsdsdsd</span>
<div class="news">
<img src="pics/velden.jpg" class="newspic" alt="Event-pic" />
Had dg gsdgf hdfh fdhdfhfg jghkghj hsgsh gjfgcvb xcvvgfhd jfkhkfg xvbvdsg sfhdgjfg jfhj fjgh gdsg sfjkfhkgk loul ,gmölm k k jgj jhf hgd fhdffdgsfh dhghgh fdhfshsg dagdagsdgdf hdgj fgjfghdfgsfvycv bdgfjf hfsgsdfgadfa gdgfcmgmg ,,iluilizktzj dfdvycsdeg rhethrt hjrz jzfjzju ktuktu fngdsg sfjkfhkgk loul ,gmölm k k jgj jhf hgd fhdffdgsfh dhghgh fdhfshsg dagdagsdgdf hdgj fgjfghdfgsfvycv bdgfjf hfsgsdfgadfa gdgfcmgmg ,,iluilizktzj dfdvycsdeg rhethrt hjrz jzfjzju ktuktu fngdsg sfjkfhkgk loul ,gmölm k k jgj jhf hgd fhdffdgsfh dhghgh fdhfshsg dagdagsdgdf hdgj fgjfghdfgsfvycv bdgfjf hfsgsdfgadfa gdgfcmgmg ,,iluilizktzj dfdvycsdeg rhethrt hjrz jzfjzju ktuktu fn gdsg sfjkfhkgk loul ,gmölm k k jgj jhf hgd fhdffdgsfh dhghgh fdhfshsg dagdagsdgdf hdgj fgjfghdfgsfvycv bdgfjf hfsgsdfgadfa gdgfcmgmg ,,iluilizktzj dfdvycsdeg rhethrt hjrz jzfjzju ktuktu fn
</div>
</div>
<div class="content">
<span class="headline">Hasadsf dfasf sfasdfaj sdsdsdsd</span>
<div class="news">
<img src="pics/velden.jpg" class="newspic" alt="Event-pic"/>
v bdgfjf hfsgsdfgadfa gdgfcmgmg ,,iluilizktzj dfdvycsdeg rhethrt hjrz jzfjzju ktuktu fngdsg sfjkfhkgk loul ,gmölm k k jgj jhf hgd fhdffdgsfh dhghgh fdhfshsg dagdagsdgdf hdgj fgjfghdfgsfvycv bdgfjf hfsgsdfgadfa gdgfcmgmg ,,iluilizktzj dfdvycsdeg rhethrt hjrz jzfjzju ktuktu fn gdsg sfjkfhkgk loul ,gmölm k k jgj jhf hgd fhdffdgsfh dhghgh fdhfshsg dagdagsdgdf hdgj fgjfghdfgsfvycv bdgfjf hfsgsdfgadfa gdgfcmgmg ,,iluilizktzj dfdvycsdeg rhethrt hjrz jzfjzju ktuktu fn v bdgfjf hfsgsdfgadfa gdgfcmgmg ,,iluilizktzj dfdvycsdeg rhethrt hjrz jzfjzju ktuktu fngdsg sfjkfhkgk loul ,gmölm k k jgj jhf hgd fhdffdgsfh dhghgh fdhfshsg dagdagsdgdf hdgj fgjfghdfgsfvycv bdgfjf hfsgsdfgadfa gdgfcmgmg ,,iluilizktzj dfdvycsdeg rhethrt hjrz jzfjzju ktuktu fn gdsg sfjkfhkgk loul ,gmölm k k jgj jhf hgd fhdffdgsfh dhghgh fdhfshsg dagdagsdgdf hdgj fgjfghdfgsfvycv bdgfjf hfsgsdfgadfa gdgfcmgmg ,,iluilizktzj dfdvycsdeg rhethrt hjrz jzfjzju ktuktu fn.
</div>
</div>
<div class="content">
<span class="headline">Hasadsf dfasf sfasdfaj sdsdsdsd</span>
<div class="news">
<img src="pics/velden.jpg" class="newspic" alt="Event-pic"/>
gfcmgmg ,,iluilizktzj dfdvycsdeg rhethrt hjrz jzfjzju ktuktu fngdsg sfjkfhkgk loul ,gmölm k k jgj jhf hgd fhdffdgsfh dhghgh fdhfshsg dagdagsdgdf hdgj fgjfghdfgsfvycv bdgfjf hfsgsdfgadfa gdgfcmgmg ,,iluilizktzj dfdvycsdeg rhethrt hjrz jzfjzju ktuktu fn gdsg sfjkfhkgk loul ,gmölm k k jgj jhf hgd fhdffdgsfh dhghgh fdhfshsg dagdagsdgdf hdgj fgjfghdfgsfvycv bdgfjf hfsgsdfgadfa gdgfcmgmg ,,iluilizktzj dfdvycsdeg rhethrt hjrz jzfjzju ktuktu fn v bdgfjf hfsgsgfcmgmg ,,iluilizktzj dfdvycsdeg rhethrt hjrz jzfjzju ktuktu fngdsg sfjkfhkgk loul ,gmölm k k jgj jhf hgd fhdffdgsfh dhghgh fdhfshsg dagdagsdgdf hdgj fgjfghdfgsfvycv bdgfjf hfsgsdfgadfa gdgfcmgmg ,,iluilizktzj dfdvycsdeg rhethrt hjrz jzfjzju ktuktu fn gdsg sfjkfhkgk loul ,gmölm k k jgj jhf hgd fhdffdgsfh dhghgh fdhfshsg dagdagsdgdf hdgj fgjfghdfgsfvycv bdgfjf hfsgsdfgadfa gdgfcmgmg ,,iluilizktzj dfdvycsdeg rhethrt hjrz jzfjzju ktuktu fn v bdgfjf hfsgs. dasfag sdgsfggh erhethteh fhdfhx bsgdsfadf sdvxbvbd hethethrwgw fadffe fwegethf fgnz db fsvdsfef gvvf bdbreg efeafeqfwegwrtwr twe eqrwe trwtrgfb cvvadae fsr rbebetb etbrnrznzrznrznrzn rnrzrzn rznrznc kh ugzfuz td rdrt et wt hbkbbjhz t zrt retrerte cc f gre gc bn t jff gbfd gfr e fc gert etre fghf
</div>
</div>
</div>
</body>
</html>
und so siehts in Opera aus:  wäre super, wenn wer mit dem IE oder einem anderen Browser auf Windows screens posten könnte und/oder sogar gegen andere bugs eine Lösung kennt! Tia, Michi
|
Lord Wyrm
topquote owner since '17
|
damn, ich kaufs mir hauptsächlich wegen dem schönen bench zeugs. das game ist eher nebensächlich 
Dazu fehlt der Link  So, habs nu Lokal gemacht, 2 Screens 1x FF2  1x IE7 
Bearbeitet von Lord Wyrm am 23.10.2008, 11:09
|
fatmike182
Agnotologe
|
ist nur das eine file von dem ich den code gepostet hab.
als .html speichern und mit dem Browser öffnen
|
kleinerChemiker
Here to stay
|
wenn dus online stellst kannst du mit browsershots.org von allen möglichichen browsern bilder machen lassen.
|
fatmike182
Agnotologe
|
Bearbeitet von fatmike182 am 23.10.2008, 13:03
|
fatmike182
Agnotologe
|
pfusch:
Habs so "gelöst", dass ichd as Menü im ul-Tag zentriert hab (text-align) und den bottom-border im a vom Hauptmeü um 1px runtergestellt hab.
Wünschenswert wäre gewesen: verteilen der Elemente wie beim Table, sowas wie z-index für den Rahmen.
Neue Bugs:
- beim FF hat er zwischen top-banner & left-bar einen 1-px Abstand.
- IE 6 stellt den rechten weißen Strich neben "HOME" der Left-bar nicht dar
- überall: ~400px unten Platz, da ich Content relativ um 390px raufrücken musste... wie kann ich da was ändern?
|
Anmeldung