Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów
CSS i html poprawność kodu - Wersja do druku

+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: CSS i html poprawność kodu (/thread-css-i-html-poprawno%C5%9Bc-kodu)

CSS i html poprawność kodu - sunrise - 22-08-2012

Witajcie Panowie, przebywam tu z paląca prośba. Mam problem z moim kodem css i html. Stworzyłem na zlecenie pewna grafikę: w chrome, firefox, ie9 "na sucho" poza stroną działa bez problemu, ale kiedy wrzucę już ja na portal - do dyspozycji mam tylko WYSWIG (z mozliwość wklejania html), to rozjeżdża mi się wszystko. Czy to wina kodu czy powinienem poprosić admina o dostęp do serwera i normalnie wkleić kod do dokumentu?

Wklejam kod grafiki:

Kod:
div id="graphic_wrap">
    <div id="main_hd">
        <div id="left_head">
            <div id="lh_logo">
                <a href="op"><img src="graphics/ebook/images/logo.png" alt="optymeo.pl" /></a>
            </div>
        </div>
        <div id="right_head">
            <div id="text_frst">
            <p><a class="strng" href="#">Rejestrując</a> się na optymeo</p>
            </div>
            <div id="but_zarejestruj">
            <a href="#"><img src="graphics/ebook/images/but_zarejestruj.png" alt="zarejestruj" /></a>
            </div>
        </div>
    </div>
    <div id="middle">
        <div id="text_scnd">
            <p>Otrzymasz od nas <a class="strng" href="#">darmowego ebooka</a></p>
        </div>
        <div id="but_pobierz">
            <a href="#"><img src="graphics/ebook/images/but_pobierz.png" alt="pobierz ebooka" /></a>
        </div>
        <div id="post_middle">
            <div id="ico">
                <div id="icopdf">
                    <a href="#"><img src="graphics/ebook/images/ico_pdf.png" alt="E-book" /></a>
                </div>
            </div>
            <div id="text_prepm">
                <div id="text_pm">
                    <p class="txt">Poświęconego optymalizacji<br/> podatkowej i prawnej</p>
                </div>
            </div>
        </div>
    </div>
</div>

Kod:
@font-face {
    font-family: 'Conv_HelveticaNeueLTPro-Roman';
    src: url('graphics/ebook/fonts/HelveticaNeueLTPro-Roman.eot');
    src: local('☺'), url('graphics/ebook/fonts/HelveticaNeueLTPro-Roman.woff') format('woff'), url('graphics/ebook/fonts/HelveticaNeueLTPro-Roman.ttf') format('truetype'), url('graphics/ebook/fonts/HelveticaNeueLTPro-Roman.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Conv_HelveticaNeueLTPro-Bd';
    src: url('graphics/ebook/fonts/HelveticaNeueLTPro-Bd.eot');
    src: local('☺'), url('graphics/ebook/fonts/HelveticaNeueLTPro-Bd.woff') format('woff'), url('graphics/ebook/fonts/HelveticaNeueLTPro-Bd.ttf') format('truetype'), url('graphics/ebook/fonts/HelveticaNeueLTPro-Bd.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

.strng {
    font-family: 'Conv_HelveticaNeueLTPro-Bd';
    }
    
a {
    color:#605f5f;
    font-style:none;
    text-decoration:none;
    border:0px;
    outline:none;
    }

#graphic_wrap {
    outline:none;
    color:#605f5f;
    font-family: 'Conv_HelveticaNeueLTPro-Roman';
    font-weight:100;
    font-size:1.4em;
    letter-spacing:1.6px;
    width:654px;
    height:400px;
    background:url(graphics/ebook/images/main_bg.png) no-repeat;
    }
    
#main_hd {
    overflow:hidden;
    width:654px;
    height:135px;
    background:rgba(70,0,0,0.3);
    }
    
#left_head {
    float:left;
    width:233px;
    height:135px;
    background:rgba(10,0,0,0.3);
    }
    
#lh_logo {
    position:relative;
    left:20px;
    top:35px;
    }
    
#right_head {
    float:right;
    width:421px;
    height:120px;
    }
    
#text_frst {
    position:relative;
    left:20px;
    top:25px;
    background:rgba(3,30,21,0.3);
    }
    
#but_zarejestruj {
    position:relative;
    left:150px;
    top:5px;
    }
    
#middle {
    width:654px;
    height:90px;
    background:rgba(70,675,321,0.3);
    }
    
#text_scnd {
    position:relative;
    left:70px;
    top:18px;
    }
    
#but_pobierz {
    position:relative;
    left:208px;
    top:-3px;
    }
    
#post_middle {
    overflow:hiddgen;
    margin-top:67px;
    width:654px;
    height:90px;
    background:rgba(0,0,384,0.3);
    }

#ico {
    width:120px;
    height:90px;
    float:left;
    background:rgba(0,700,0,0.3);
    }
    
#icopdf {
    position:relative;
    top:2px;
    left:75px;

    }
    
#text_prepm {
    width:100%;
    height:90px;
    background:rgba(700,0,10,0.3);
    }
    
#text_pm {
    position:relative;
    top:3px;
    left:5px;
    line-height:1.0em;
    }
Pozdrawiam
Marcin

RE: CSS i html poprawność kodu - camelrafal - 23-08-2012

a masz linka do strony? bo tak to sie nie chce tego sciągać zapisywać i dopiero firebugiem/drygonfly'em testować
z reguły jak slysze o wysiwygowych edytorach to mi ręce opadają i nawet nie chce mi się tłumaczyć już dlaczego

RE: CSS i html poprawność kodu - sunrise - 23-08-2012

Nie mam adresu strony, bo jest to projekt który jeszcze nie wystartował. Rozumiem, od początku nie podobał mi sie pomysł wklejania kodu do wyswigu. W takim razie poproszę o bezpośredni dostęp do plików. Dzięki za podpowiedź.


Problem rozwiązany z pomocą firebug'a. CO prawda sytuacja jest odwrótna - na portalu wygląda ok, a w czystym dokumencie w firefox jest rozjechana na boki. Najważniejsze, że cel osiągnięty.

Pozdrawiam