| Autor | Zpráva | ||
|---|---|---|---|
| vojtech Profil |
#1 · Zasláno: 17. 3. 2011, 13:01:57 · Upravil/a: vojtech
Zdravím. Úkol zněl jasně - doplnit na stávající web německou mutaci a podle vize klienta změnit strukturu webu.
Původní web na: http://farenovace.cz Část nového na: http://farenovace.cz/cs/o-spolecnosti.html Původně jsem chtěl jen doplnit německou mutaci a změnit strukturu, ale jelikož jednotlivé jazykové mutace byly kopie mutace české a to včetně cca 20 MB fotografii (což jsem částečně vyřešil přes .htaccess), ale asi 3 úrovně vnoření tabulek mne odradily od doplnění stávajícího kódu. V domnění, že design zůstane plus mínus nedotčen když udělám jednu velkou tabulku a jednotlivé oblasti si udělám poslučováním buňek, jsem to předělal a nakonec i odladil pro aktuální verze prohlížečů dodržujících standardy (ff 3.6, Chromium 11, Opera 11.01). IE se mi nepodařilo nainstalovat, takže jsem to viděl až teď. Nemáte někdo nápad jak by se to co nejjednodušší cestou (ideálně jen změnou css) mohlo alespoň přiblížit vzhledu ve standardy podporujících prohlížečích? Hlavní problém vidím v tom, že tři vnitřní sloupce (v nejvyšším řádku tr identifikované jako #gPageMarginTopLeft, #gPageMarginTopCenter a #gPageMarginTopRight) nemají šířku, kterou po nich v css chci/žádám/očekávám. Dnes je tuším nejpoužívanější IE7, následované IE8, takže aby to jelo +- správně alespoň těchto dvou. Každopádně předem děkuji za každý tip;) CSS z nového webu: body {
margin: 0px;
background-color: #F4F4F4;
color:#222;
font-family: Arial, sans-serif;
font-size: 12px;
}
h1,h2,h3,h4,h5 {
font-family: Verdana, Arial, sans-serif;
color:#FE9900;
}
a, a:link {
/*font-weight:bold;*/
text-decoration: none;
color:#FE9900;
}
a:active {
color:#FFEED6;
}
a:hover {
color:#7D4400;
}
/**
* geez *
**/
#gBodyTable {
width:100%;
height: 100%;
padding:0;
border-width:0;
border-spacing: 0px 0px;
}
#gPageMarginLeft {
width: 80px;
background-image: url('/style/images/masterPageLeft.jpg' );
margin:0;
padding:0;
}
#gPageMarginRight {
width: 80px;
background-image: url('/style/images/masterPageRight.jpg' );
margin:0;
padding:0;
}
#gPageMarginTopLeft {
padding:0;
width:150px;
height:100%;
}
#gPageMarginTopCenter {
padding:0;
height:100%;
}
#gPageMarginTopRight {
padding:0;
width:200px;
height:100%;
}
#gHeaderLogo {
background-image: url('/style/images/AlogoBg.jpg' );
background-repeat: repeat-x;
padding: 0;
height:150px;
}
#gHeaderLogo object {
margin:0;
border-width:0;
padding:0;
width:570px;
display:block;
height:150px;
overflow:hidden;
}
#gHeaderRight {
background-image: url('/style/images/AlogoObrazek.jpg' );
background-repeat: no-repeat;
text-align: right;
width: 200px;
height:150px;
padding:0;
}
#gMenuContainer {
margin:0;
padding:0;
width:150px;
}
#gMenu {
margin:0;
width:150px;
list-style-type: none;
padding:0;
}
#gMenu li {
font-size:1.4em;
font-weight:bold;
line-height: 30px;
background-position: 0px;
width: 150px;
height: 30px;
background-image: url('/style/images/BtlacitkaCenter.jpg' );
}
#gMenu a, #gMenu a:link {
padding-left: 1em;
display:block;
/*color:#FFCA82;/* lighter one */
/*color:#D47300; /* darker one */
color:#7D4400;
}
#gMenu a:active {
color:#FFEED6;
}
#gMenu a:hover {
color:#FFF;
text-decoration:none;
}
.gDumbSpace {
background-image: url('/style/images/BtlacitkaUp.jpg' );
background-repeat: repeat-y;
height: 30px;
width: 150px;
}
#gLanguages {
width:150px;
height:30px;
background-image: url('/style/images/BtlacitkaKontakty.jpg' );
background-repeat: repeat-y;
font-size: 11px;
padding:0;
margin:0;
line-height:30px;
text-align:center;
}
#gLanguages li {
display:inline;
}
#gLanguages img {
border:0;
width:18px;
height:12px;
}
#gDumbAnim {
height:105px;
width:150px;
background-image: url('/style/images/BtlacitkaBottom.jpg' );
background-repeat: repeat-y;
}
#gDumbAnim object {
width:150px;
height:100px;
}
#gCounter {
height:120px;
width:150px;
text-align:center;
background-image: url('/style/images/BtlacitkaBottom.jpg' );
background-repeat: repeat-y;
}
#gCounter img {
width:88px;
height:120px;
border-width:0;
}
#gContent {
height: 100%;
padding:0 20px;
margin:0;
vertical-align:top;
background-image: url('/style/images/bodyBg.jpg' );
font-size:14px;
line-height:150%;
}
.gObjects > * {
float:left;
}
#gTitleObjects {
height:250px;
margin-left:-1px;
overflow:hidden;
}
#gTitleObjects div {
float:right;
width:150px;
height:248px;
border:1px solid #666;
margin-left:-1px;
background-color:#fff;
}
#gTitleObjects h3 {
text-align:center;
margin:0.5em 0;
}
#gDumbElastic {
height: 100%;
background-image: url('/style/images/BtlacitkaBottom.jpg' );
background-repeat: repeat-y;
width:150px;
}
#gContent > *:first-child {
margin-top:0.25em;
}
#gContent h1, #gContent h2 {
clear:both;
}
li img {
border:1px solid #777;
}
#gContentBottom {
height: 100%;
background-image: url('/style/images/bodyBg.jpg');
}
#gGallery {
text-align:center;
width: 600px;
height: 600px;
}
.galleria-container {
margin:0 auto;
}
.gVisitcard {
background:#FFF;
margin:1em 0.5em;
padding:1em;
-moz-border-radius: 15px;
border-radius: 15px;
}
.gVisitcard img, .gVisitcard ul {
float: left;
}
.gVisitcard img, .gBorder {
border: 2px solid #FE9900;
}
.gVisitcard ul {
margin-top:0;
}
.gVisitcard li {
list-style-type: none;
}
.gVisitcard h2 {
margin-top:0.2em;
}
.gVisitcard h3 {
margin-top:0;
}
.gClear {
clear:both;
}
#gBottom {
height: 1.1em;
/* background-image: url('/style/images/masterPageBotom.jpg' );*/
border:1px solid #777;
border-width:1px 0;
font-size: 10px;
margin:0;
padding:3px 1em 1px;
} |
||
| vojtech Profil |
#2 · Zasláno: 17. 3. 2011, 18:18:02
tákže vyřešeno. Vyskytly se následující problémy:
1) nastavit stránce ie7 compatibility mode pomocí: <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 2) ie7 a asi i následující používají jiný table layout než standartdní prohlížeče, čili přepnout: table {table-layout:fixed;} 3) bylo potřeba nastavit table {border-collapse:collapse;} aby nezůstávaly mezery mezi td 4) pseudo třída first-child a nejspíš i ostatní matchují i <!-- html komentáře -->, takže pravidlo #gContent > *:first-child {margin-top:0.25em;} nebylo vůbec použito. 5) x dalších věcí, ale ty už nebyly tak důležité |
||
| ShiraNai7 Profil |
#3 · Zasláno: 17. 3. 2011, 22:00:59
vojtech:
6) nepoužívat tabulkový layout? |
||
| vojtech Profil |
#4 · Zasláno: 18. 3. 2011, 16:36:32
ShiraNai7:
Díky za konstruktivní nápad;) I když na druhou stranu, když o tom tak přemýšlím, tak by možná bylo snažší udělat to klasicky. Ale kdo mohl vědět, že s tím bude tolik práce. A jestli chceš jít do detailu, tak tvá 6) už byla zahrnuta v mé 5). |
||
|
Časová prodleva: 13 let
|
|||
0