Téma: Blog.hu bloghtml és css

Sziasztok!
Készítek egy blogot a blog.hu-n. Próbálom testre-szabni, de ehhez html és css tudás szükséges. Sikerült a hátteret megváltoztatnom, és a fejlécet is. Csak a fejléc túl nagy lett, és az első bejegyzés a fejléc mögül indul.
Nem szívesen kicsinyíteném meg a fejlécet, inkább a blogbejegyzéseket szeretném, hogy lejjebbről induljanak.
Ezt meg lehet valahogy oldani?
Előre is köszönöm a választ.

Biztos meg lehet valahogy oldani, de ennyiből semmit sem tudunk segíteni. Legalább egy linket dobj, és akkor meg tudjuk írni, hogy mit és mire kell átírni.

Az úgy jó, ha a html, és a css forráskódokat ide bemásolom.
Előre is köszönöm a választ.

div#pageHeader {

padding-bottom: 10px;
}

Próbáld meg így, illetve a pixelszámot növeld-csökkentsd a kívántra.

wiesztdani eredeti hozzászólása

Sziasztok!
Készítek egy blogot a blog.hu-n. Próbálom testre-szabni, de ehhez html és css tudás szükséges. Sikerült a hátteret megváltoztatnom, és a fejlécet is. Csak a fejléc túl nagy lett, és az első bejegyzés a fejléc mögül indul.
Nem szívesen kicsinyíteném meg a fejlécet, inkább a blogbejegyzéseket szeretném, hogy lejjebbről induljanak.
Ezt meg lehet valahogy oldani?
Előre is köszönöm a választ.

Sziasztok!
Én még csak most ismerkedek ezzekkel a programozási nyelvekkel, ezért döntöttem, úgy hogy nem csak a sima sablon blogot késszítek, hanem meg próbálok rajta változtatgatni, így gyakorlok.
Sajnos elakadtam.
A Html forráskód ez:

PHP kód:

<blh:head_required />
<blh:body_required />

<div id="container0">
    <div id="container1">

        <div id="header">
            <h1><blh:blog_name /></h1>
            <h2><blh:blog_tagline /></h2>
            <img src="img/Moviesgames3.png" alt="" />
        </div>

        <div id="container2">

            <div class="sidebar sibebar-right">
                <blh:rightboxes />
            </div>

            <div class="sidebar sibebar-left">
                <blh:leftboxes />
            </div>

            <div id="main">

                <blhc:postloop>
                    <div class="entry post vis_{blh:post_visibility}" lang="{blh:post_lang}">
                        <div class="head">
                            <h1><a href="{blh:post_permalink}"><blh:post_title /></a></h1>
                            <h2 class="date"><blh:post_date format="Y.m.d. H:i" /></h2>
                            <div style="clear:right;"></div>
                        </div>
                        
                        <blh:post_content />

                        <div class="more">
                            <blh:post_more class="more" text="tovább&nbsp;ť" />
                        </div>
                        
                        <blh:share />
                        
                        <div class="bottom">
                            <h2 class="author">Szerző:<blh:post_author /></h2>
                            <h2 class="comments">
                                <blh:post_trackbacks />
                                <blh:post_pingbacks />
                                <blh:post_comments />
                                <blh:post_edit />
                            </h2>
                            <h2 class="rovatok">
                                <blh:post_anchor />
                                <blh:post_trbrdf />
                                <blh:post_tags />
                            </h2>
                        </div>
                        <blh:post_related /><blh:post_feedback />
                    </div>
                    <div style="clear:left;"></div>
                </blhc:postloop>
                <blh:pager />

                <blh:nonpost />
            </div>

            <div style="clear:right;"></div>
        </div>

    </div>
</div>

<blh:end /> 


Előre is köszönöm a segítséget.

A Css forráskódok pedig ezek:

PHP kód:



/********** =defaults **********/


/*## Body ## Body class attributes */

* {
margin:0;
padding:0;
vertical-align:top;
}

body, html {
background-image:url(img/news.png);
background-repeat:repeat;
background-color:#eeeded;
font-family:Verdana,sans-serif;
color:#f1f1f1;
font-size: 13px;
}
/*## General tags ##  */

a {
color:#69b4e8;
text-decoration:none;
}

div.pager {
font-weight:normal;
margin-top: 1em;
margin-bottom: 1em;
}

div.prev {
    float: left;
}

div.next {
    float: right;
}

a:hover {
text-decoration:underline;
}

div#navigation a {
margin-right:20px;
}

div#navigation  {
margin-top:30px;
padding-bottom:30px;
text-align:center;
}

a img {
border:none;
}

blockquote {
color:#9cae86;
padding:10px;
font-size: 1em;
background-color:transparent;
border:0;
border-left:2px solid #9cae86;
}
/*## Page Header ## Styles for page header */

div#header {
height:225px;
}

div#header h1 {
font-size:3em;
padding-left:10px;
color:#dce3ac;
font-weight:normal;
}

div#header h1 a {
color:#dce3ac;
}

div#header h2 {
padding-left:10px;
font-size:1.25em;
color:#98cb62;
font-weight:normal;
}

div#header img {
border:5px solid #000;
margin-top:10px;
}
/*## Page Footer ## Styles for page footer */


/*## Page Layout ##  */

div#container0 {
background-image:url(img/white.jpg);
background-position:center;
background-repeat:no-repeat;
margin:0 auto;
}

div#container1 {
width:975px;
* width:976px;
margin:0 auto;
margin-bottom: 2em;
}

input.SearchField {
width:150px;
}

div#container2 {
margin-top:30px;
}


div#main {
width:590px;
float:left;
}
/*## Post ## attributes for blog posts  */

div.post img { text-align: left; float:left; margin: 12px; margin-left: 0px; margin-top: 4px; margin-bottom: 4px; }
div.post img.imgright  { text-align: right; float:right; margin-right: 0px; margin-left: 12px; }
div.post img.imgleft   { text-align: left; float:left; margin-left: 0px; }
div.post img.imgnotext { text-align: middle; float:none; margin: 5px auto; display: block; }

/*div.entry p:first-line {
color:#220903;
text-align:bold;
}*/

div.entry h1 {
font-size:1.7em;
color:#9CAE86;
font-weight:normal;
* margin-left:5px;
}

div.entry img {
border:none;
}

div.entry h2 {
font-size:1.5em;
color:#9CAE86;
font-weight:normal;
* margin-left:5px;
}

div.entry h3 {
font-size:1.3em;
color:#9CAE86;
font-weight:normal;
* margin-left:5px;
}

div.entry ul {margin-left:30px;}
div.entry ul li {margin-bottom:10px;list-style-type:square;}

div.entry div.head h1 {
font-size:1.4em;
padding-left:10px;
font-weight:normal;
color:#9cae86;
}

div.entry div.head h1 a {
color:#9cae86;
}

div.entry h2.date {
font-size:0.85em;
float:right;
vertical-align:middle;
padding-top:10px;
}

div.entry div.bottom h2 {
font-size:0.8em;
font-weight:normal;
}

div.entry h2.rovatok {
padding-left:10px;
padding-right:10px;
padding-top:10px;
font-size:0.9em;
line-height:20px;
clear:both;
}

div.entry h2.rovatok a {
color:#676666;
}

div.entry h2.date {
float:right;
color:#69b4e8;
}

div.entry h2.author {
padding-left:10px;
margin-top:0px;
float:left;
color:#9CAE86;
font-weight:bold;
font-size:0.85em;
}

div.bottom h1 {
padding:5px;
font-size:0.85em;
}

div.entry h2.comments {
margin-top:0px;
float:right;
padding-right:10px;
font-size:0.85em;
}

div.entry img {
border:5px solid #dfd6d2;
margin-top:10px;
margin-bottom:10px;

}



div.entry {
font-family:Verdana,sans-serif;
font-size:1em;
margin:0 0 30px 0;
}

div.entry p {
color:#f0f0f0;
font-size:1em;
line-height:20px;
margin-bottom:10px;
padding-left: 10px;
}

div.more { text-align: right; margin-bottom:8px; margin-right: 10px; }

div.entry div.head, div.entry div.bottom {
background-image:url(img/newspaper.jpg);
background-repeat:repeat;
padding:5px;
}

div.entry div.head {
margin-bottom:10px;
}
/*## Sideboxes ## Styles for sideboxes */

div.sidebar {
float:right;
width:180px;
color:#f1f1f1;
margin-right:5px;
/*background-color:#dfd6d2;*/
}

div.sidebar ul#menu li {
display:inline;
}

div.sidebar ul#menu li.current a {
background-color:#dfd6d2;
color:#f65c38;
padding:5px;
margin-left:-5px;
padding-left:26px;
padding-right:26px;
padding-bottom:7px;
* padding-bottom:6px;
}

div.sidebar ul#menu li a {
font-size:1.4em;
background-color:#ff3000;
color:#fff;
padding:5px;
padding-left:26px;
padding-right:26px;
margin-right:8px;
}

div.sidebar h1, div.sidebar h2, div.sidebar h3, h3.comment {
font-size:1.45em;
font-weight:normal;
padding-left:5px;
margin-bottom:10px;
color:#9cae86;
background-image:url(img/newspaper.jpg);
background-repeat:repeat;
}


div.sidebar p {
color:#f0f0f0;
font-size:0.85em;
line-height:20px;
padding-left:5px;
padding-bottom:10px;
}

div.sidebar div.box {
margin:0 10px 10px 10px;
padding: 0 0 10px 0;
font-size:0.85em;
color:#F0F0F0;
overflow: hidden;
}

div.sidebar select {
    width: 100%;
}

div.sidebar ul {
padding-left:5px;
list-style-type:none;
}

div.sidebar ul li {
font-size:0.85em;
color:#F0F0F0;
}

div.sidebar ul li a {
color:#69B4E8;
}

div.sidebar ul.rov li a span {
color:#6ebef6;
}

div.sidebar div.feed a {
color:#6ebef6;
}

div.sidebar div.feed p {
padding:0;
padding-left:5px;
}

div.sidebar div.feedlist a {
color:#6ebef6;
}

div.sidebar div.feedlist p:first-line {
color:#6ebef6;
text-align:bold;
}



div.sidebar img {
margin-top:10px;
}

.inbox a.promo_inbox {
color:#ffffff;
}

.inbox a.promo_inbox strong {
    color: #000000;
    position: relative;
}

* html .inbox a.promo_inbox strong {
    table-layout: fixed;
}
/*## Calendar ## Styles for calendar */


/*## Comments ## Styles for comment area */

h3.comment {
margin-top:10px;
}

/*div.comment span {
padding:10px;
}*/

form#commentForm {
border:0;
}

div.commentText {
padding:10px;
}

div.comment h1 {
background-color:none;
}

div.commentsBg {
font-size:0.85em;
padding:10px;
/*background-color:#dfd6d2;*/
margin-bottom:10px;
color:#F0F0F0;
}

div.comment h1 {
font-size:1.15em;
}

div.comment {
padding:10px;
}
div.owncomment
{
 /*   background-color: #fff0f0;*/
}

fieldset.input img { margin: 0px; } 


Előre is köszönöm a segítséget.

div#header {
height:225px;
}

Nyilván ez a fejléced magassága, ezt állíthatod a fejléckép magasságához, de az is lehet, hogy félreértettem.

Nehéz tutira menni az ilyen szupertitkos projectek esetében...

Dani, ha CSS-t tanulva szeretnél valamit alkotni, a Blogger a legutolsó, amit választanék a helyedben. Viszonylag sablonos, igen nehéz átírni, mert tele van rakva a kód mindenféle XML-lel és egyéb marhaságokkal. Ehelyett mondjuk a Wordpress-en csinálnád, az tiszta CSS. Vagy ha CMS nélkül csinálnád, az meg még jobb. Persze csak ha van kedved/energiád áttérni valami másra. Ha az elején vagy, még ez nem gond. Tapasztalatból anyázom a Bloggert, másfél évig volt rajta egy blogom, és arra nem alkalmas az egész rendszer, hogy egy sima JS fájlt vagy egy képet normális körülmények között feltölts. Nameg elkészíted a szuper CSS-edet, és inline CSS lesz!! Ergo nem gyorsítótárazhatja senki az égvilágon a látogatók közül, és emiatt akárhogy dizájnolod, lassú lesz az oldalbetöltés.

earnnet eredeti hozzászólása

Dani, ha CSS-t tanulva szeretnél valamit alkotni

Valójában nem tudom, de szerintem nem akar. Ha akarna, akkor nem így kérdezett volna.

earnnet eredeti hozzászólása

a Blogger

Blog.hu. Nem ugyan az.

earnnet eredeti hozzászólása

Ergo nem gyorsítótárazhatja senki az égvilágon a látogatók közül, és emiatt akárhogy dizájnolod, lassú lesz az oldalbetöltés.

What? Ugye nem azt állítod, hogy pár KB CSS-től lesz lassú az oldalbetöltés? Ugye nem? Ez marhaság, már bocsi.

Na, ezt benéztem Szóval bloghu. Ez a gyorsítótár-dolog meg olyan, hogyha az összes állandó design benn van, akkor minimális a letöltendő tartalom mérete: jóformán csak a szöveg. Én 0.4 másodpercet javítottam anno az oldalbetöltésen azzal, hogy blogger oldalnál az inline css-eket külső tárhelyen kezdtem tárolni, és azt linkeltem.