Jump to content
Sign in to follow this  
Followers 0
florinbad

Cum Fac Un Un Blog Mai Lataret ?

By florinbad, in Cafenea

Recommended Posts

florinbad   

florinbad
Posted

(N-am mai gasit rubrica "Despre Calculatoare" asa ca scriu aici.)

Cum naiba pot sa-mi "latesc" si eu blog-ul, la 1024 x 768 ?

Cred ca este setat din start pe 800 x 600 si arata ca naiba pe orice PC l-as vizualiza. Parca este ciuntit in partea dreapta...

http://florinbad.blogspot.com/

 

Daca se pripece cineva, ii dau bucata de cod unde poate sa umble.

Am intrat in setarile HTML, dar nu ma pricepesc sa-i modific latimea.

Share this post

Link to post

VAXXi   

VAXXi
Posted

Tre' sa modifici in CSS, mai exact sectiunea de mai jos. Outer-wrapper este containerul mare (740 px), main-wrap1 si main sunt pentru continut, .main.blog si .main.widget sunt pentru a ajusta diverse elemente de prin containerul main (va trebui sa le latesti si pe ele daca latesti containerul), iar sidebar-wrap este pentru bara din dreapta.

 

485+240 = 725, cu paddingurile si ce mai e p-acolo ajungi la 740 pixeli ai wrapperului mare. Daca vrei sa proiectezi pentru un monitor cu rezolutie de 1024x768, lasa containerul mare la 990 pixeli. Daca vrei layout fluid (sa se lateasca pe tot spatiul disponibil) inlocuiesti valorile in pixeli cu procente, adica ceva gen width:90% in loc de width:740px. Si-n rest, ti le ajustezi cum vrei pana dau bine.

 

#outer-wrapper {
width:740px;
margin:0 auto;
text-align:left;
font: normal normal 100% 'Trebuchet MS',Verdana,Arial,Sans-serif;
}
#main-wrap1 {
width:485px;
float:left;
background:#eeeecc url("http://www1.blogblog.com/rounders3/corners_main_bot.gif") no-repeat left bottom;
margin:15px 0 0;
padding:0 0 10px;
color:#333333;
font-size:97%;
line-height:1.5em;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
}
#main-wrap2 {
float:left;
width:100%;
background:url("http://www1.blogblog.com/rounders3/corners_main_top.gif") no-repeat left top;
padding:10px 0 0;
}
#main {
background:url("http://www.blogblog.com/rounders3/rails_main.gif") repeat-y left;
padding:0;
width:485px;
}
#sidebar-wrap {
width:240px;
float:right;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
}
.main .widget {
margin-top: 4px;
width: 468px;
padding: 0 13px;
}
.main .Blog {
margin: 0;
padding: 0;
width: 484px;
}

Share this post

Link to post

florinbad   

florinbad
Posted

Multumesc !

 

Am facut cateva modificari si a iesit un fel de struto-camila-dinozaur #-o !

Mai testez acasa, aici la job sta Big Brother cu ochii pe mine.

 

Multumesc inca o data :osanale: !

Share this post

Link to post

VAXXi   

VAXXi
Posted

Posteaza aici cu ce mai ai nevoie de-ajutor :)

Share this post

Link to post

florinbad   

florinbad
Posted

Am pus partea cu pixelii:

 

/* Page Structure

----------------------------------------------- */

/* The images which help create rounded corners depend on the

following widths and measurements. If you want to change

these measurements, the images will also need to change.

*/

#outer-wrapper {

width:740px;

margin:0 auto;

text-align:$startSide;

font: $bodyFont;

}

#main-wrap1 {

width:485px;

float:$startSide;

background:$mainBgColor url("http://www1.blogblog.com/rounders3/corners_main_bot.gif") no-repeat $startSide bottom;

margin:15px 0 0;

padding:0 0 10px;

color:$mainTextColor;

font-size:97%;

line-height:1.5em;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}

#main-wrap2 {

float:$startSide;

width:100%;

background:url("http://www1.blogblog.com/rounders3/corners_main_top.gif") no-repeat $startSide top;

padding:10px 0 0;

}

#main {

background:url("http://www.blogblog.com/rounders3/rails_main.gif") repeat-y $startSide;

padding:0;

width:485px;

}

#sidebar-wrap {

width:240px;

float:$endSide;

margin:15px 0 0;

font-size:97%;

line-height:1.5em;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}

 

.main .widget {

margin-top: 4px;

width: 468px;

padding: 0 13px;

}

 

.main .Blog {

margin: 0;

padding: 0;

width: 484px;

}

 

/* Links

----------------------------------------------- */

a:link {

color: $mainLinkColor;

}

a:visited {

color: $mainVisitedLinkColor;

}

a:hover {

color: $mainVisitedLinkColor;

}

a img {

border-width:0;

}

 

 

/* Blog Header

----------------------------------------------- */

#header-wrapper {

background:$titleBgColor url("http://www2.blogblog.com/rounders3/corners_cap_top.gif"'>http://www2.blogblog.com/rounders3/corners_cap_top.gif") no-repeat $startSide top;

margin-top:22px;

margin-$endSide:0;

margin-bottom:0;

margin-$startSide:0;

padding-top:8px;

padding-$endSide:0;

padding-bottom:0;

padding-$startSide:0;

color:$titleTextColor;

}

#header {

background:url("http://www.blogblog.com/rounders3/corners_cap_bot.gif"'>http://www.blogblog.com/rounders3/corners_cap_bot.gif") no-repeat $startSide bottom;

padding:0 15px 8px;

}

#header h1 {

margin:0;

padding:10px 30px 5px;

line-height:1.2em;

font: $pageTitleFont;

}

#header a,

#header a:visited {

text-decoration:none;

color: $titleTextColor;

}

#header .description {

margin:0;

padding:5px 30px 10px;

line-height:1.5em;

font: $descriptionFont;

}

 

 

/* Posts

----------------------------------------------- */

h2.date-header {

margin-top:0;

margin-$endSide:28px;

margin-bottom:0;

margin-$startSide:43px;

font-size:85%;

line-height:2em;

text-transform:uppercase;

letter-spacing:.2em;

color:$dateHeaderColor;

}

.post {

margin:.3em 0 25px;

padding:0 13px;

border:1px dotted $borderColor;

border-width:1px 0;

}

.post h3 {

margin:0;

line-height:1.5em;

background:url("http://www2.blogblog.com/rounders3/icon_arrow.gif") no-repeat 10px .5em;

display:block;

border:1px dotted $borderColor;

border-width:0 1px 1px;

padding-top:2px;

padding-$endSide:14px;

padding-bottom:2px;

padding-$startSide:29px;

color: $postTitleColor;

font: $postTitleFont;

}

.post h3 a, .post h3 a:visited {

text-decoration:none;

color: $postTitleColor;

}

a.title-link:hover {

background-color: $borderColor;

color: $mainTextColor;

}

.post-body {

border:1px dotted $borderColor;

border-width:0 1px 1px;

border-bottom-color:$mainBgColor;

padding-top:10px;

padding-$endSide:14px;

padding-bottom:1px;

padding-$startSide:29px;

}

html>body .post-body {

border-bottom-width:0;

}

.post-body {

margin:0 0 .75em;

}

.post-body blockquote {

line-height:1.3em;

}

.post-footer {

background: #ffffff;

margin:0;

padding-top:2px;

padding-$endSide:14px;

padding-bottom:2px;

padding-$startSide:29px;

border:1px dotted $borderColor;

border-width:1px;

font-size:100%;

line-height:1.5em;

color: #666666;

}

/*

The first line of the post footer might only have floated text, so we need to give it a height.

The height comes from the post-footer line-height

*/

.post-footer-line-1 {

min-height:1.5em;

_height:1.5em;

}

 

.post-footer p {

margin: 0;

}

html>body .post-footer {

border-bottom-color:transparent;

}

 

.uncustomized-post-template .post-footer {

text-align: $endSide;

}

 

.uncustomized-post-template .post-author,

.uncustomized-post-template .post-timestamp {

display: block;

float: $startSide;

text-align:$startSide;

margin-$endSide: 4px;

}

 

.post-footer a {

color: #456;

}

.post-footer a:hover {

color: #234;

}

a.comment-link {

/* IE5.0/Win doesn't apply padding to inline elements,

so we hide these two declarations from it */

background/* */:/**/url("http://www.blogblog.com/rounders/icon_comment_$startSide.gif") no-repeat $startSide 45%;

padding-$startSide:14px;

}

html>body a.comment-link {

/* Respecified, for IE5/Mac's benefit */

background:url("http://www.blogblog.com/rounders3/icon_comment_$startSide.gif"'>http://www.blogblog.com/rounders3/icon_comment_$startSide.gif") no-repeat $startSide 45%;

padding-$startSide:14px;

}

.post img, table.tr-caption-container {

margin-top:0;

margin-$endSide:0;

margin-bottom:5px;

margin-$startSide:0;

padding:4px;

border:1px solid $borderColor;

}

.tr-caption-container img {

border: none;

margin: 0;

padding: 0;

}

blockquote {

margin:.75em 0;

border:1px dotted $borderColor;

border-width:1px 0;

padding:5px 15px;

color: $dateHeaderColor;

}

.post blockquote p {

margin:.5em 0;

}

 

#blog-pager-newer-link {

float: $startSide;

margin-$startSide: 13px;

}

 

#blog-pager-older-link {

float: $endSide;

margin-$endSide: 13px;

}

 

#blog-pager {

text-align: center;

}

 

.feed-links {

clear: both;

line-height: 2.5em;

margin-$startSide: 13px;

}

 

/* Comments

----------------------------------------------- */

#comments {

margin:-25px 13px 0;

border:1px dotted $borderColor;

border-width:0 1px 1px;

padding-top:20px;

padding-$endSide:0;

padding-bottom:15px;

padding-$startSide:0;

}

#comments h4 {

margin:0 0 10px;

padding-top:0;

padding-$endSide:14px;

padding-bottom:2px;

padding-$startSide:29px;

border-bottom:1px dotted $borderColor;

font-size:120%;

line-height:1.4em;

color:$postTitleColor;

}

#comments-block {

margin-top:0;

margin-$endSide:15px;

margin-bottom:0;

margin-$startSide:9px;

}

.comment-author {

background:url("http://www.blogblog.com/rounders3/icon_comment_$startSide.gif") no-repeat 2px .3em;

margin:.5em 0;

padding-top:0;

padding-$endSide:0;

padding-bottom:0;

padding-$startSide:20px;

font-weight:bold;

}

.comment-body {

margin:0 0 1.25em;

padding-top:0;

padding-$endSide:0;

padding-bottom:0;

padding-$startSide:20px;

}

.comment-body p {

margin:0 0 .5em;

}

.comment-footer {

margin:0 0 .5em;

padding-top:0;

padding-$endSide:0;

padding-bottom:.75em;

padding-$startSide:20px;

}

.comment-footer a:link {

color: #333;

}

.deleted-comment {

font-style:italic;

color:gray;

}

.comment-form {

padding-$startSide:20px;

padding-$endSide:5px;

}

#comments .comment-form h4 {

padding-$startSide:0px;

}

 

/* Profile

----------------------------------------------- */

.profile-img {

float: $startSide;

margin-top: 5px;

margin-$endSide: 5px;

margin-bottom: 5px;

margin-$startSide: 0;

border: 4px solid $topSidebarTextColor;

}

 

.profile-datablock {

margin-top:0;

margin-$endSide:15px;

margin-bottom:.5em;

margin-$startSide:0;

padding-top:8px;

}

 

.profile-link {

background:url("http://www.blogblog.com/rounders3/icon_profile_$startSide.gif") no-repeat $startSide .1em;

padding-$startSide:15px;

font-weight:bold;

}

 

.profile-textblock {

clear: both;

margin: 0;

}

 

.sidebar .clear, .main .widget .clear {

clear: both;

}

 

#sidebartop-wrap {

background:$topSidebarBgColor url("http://www.blogblog.com/rounders3/corners_prof_bot.gif") no-repeat $startSide bottom;

margin:0px 0px 15px;

padding:0px 0px 10px;

color:$topSidebarTextColor;

}

 

#sidebartop-wrap2 {

background:url("http://www2.blogblog.com/rounders3/corners_prof_top.gif") no-repeat $startSide top;

padding: 10px 0 0;

margin:0;

border-width:0;

}

 

#sidebartop h2 {

line-height:1.5em;

color:$topSidebarHeaderColor;

border-bottom: 1px dotted $topSidebarHeaderColor;

font: $headerFont;

margin-bottom: 0.5em;

}

 

#sidebartop a {

color: $topSidebarLinkColor;

}

 

#sidebartop a:hover {

color: $topSidebarVisitedLinkColor;

}

#sidebartop a:visited {

color: $topSidebarVisitedLinkColor;

}

 

#sidebar a {

color: $bottomSidebarLinkColor;

}

#sidebar a:hover,

#sidebar a:visited {

color: $bottomSidebarVisitedLinkColor;

}

 

/* Sidebar Boxes

----------------------------------------------- */

 

.sidebar .widget {

margin:.5em 13px 1.25em;

padding:0 0px;

}

 

.widget-content {

margin-top: 0.5em;

}

 

#sidebarbottom-wrap1 {

background:$titleBgColor url("http://www.blogblog.com/rounders3/corners_side_top.gif") no-repeat $startSide top;

margin:0 0 15px;

padding:10px 0 0;

color: $titleTextColor;

}

 

#sidebarbottom-wrap2 {

background:url("http://www1.blogblog.com/rounders3/corners_side_bot.gif") no-repeat $startSide bottom;

padding:0 0 8px;

}

 

.sidebar h2 {

margin-top:0;

margin-$endSide:0;

margin-bottom:.5em;

margin-$startSide:0;

padding:0 0 .2em;

line-height:1.5em;

font:$headerFont;

}

 

.sidebar ul {

list-style:none;

margin:0 0 1.25em;

padding:0;

}

 

.sidebar ul li {

background:url("http://www2.blogblog.com/rounders3/icon_arrow_sm.gif") no-repeat 2px .25em;

margin:0;

padding-top:0;

padding-$endSide:0;

padding-bottom:3px;

padding-$startSide:16px;

margin-bottom:3px;

border-bottom:1px dotted $borderColor;

line-height:1.4em;

}

.sidebar p {

margin:0 0 .6em;

}

 

#sidebar h2 {

color: $bottomSidebarHeaderColor;

border-bottom: 1px dotted $bottomSidebarHeaderColor;

}

 

/* Footer

----------------------------------------------- */

#footer-wrap1 {

clear:both;

margin:0 0 10px;

padding:15px 0 0;

}

#footer-wrap2 {

background:$titleBgColor url("http://www2.blogblog.com/rounders3/corners_cap_top.gif") no-repeat $startSide top;

color:$titleTextColor;

}

#footer {

background:url("http://www.blogblog.com/rounders3/corners_cap_bot.gif") no-repeat $startSide bottom;

padding:8px 15px;

}

#footer hr {display:none;}

#footer p {margin:0;}

#footer a {color:$titleTextColor;}

#footer .widget-content {

margin:0;

}

 

/** Page structure tweaks for layout editor wireframe */

body#layout #main-wrap1,

body#layout #sidebar-wrap,

body#layout #header-wrapper {

margin-top: 0;

}

 

body#layout #header, body#layout #header-wrapper,

body#layout #outer-wrapper {

margin-$startSide:0,

margin-$endSide: 0;

padding: 0;

}

 

body#layout #outer-wrapper {

width: 730px;

}

Share this post

Link to post

florinbad   

florinbad
Posted (edited)

'Neata !

Am reusit sa construiesc struto-camila, insa acum am o linie pe mijloc iar marginile rotunjite sunt vizibile.

Cred ca trebuie sa redimensionez si fotografia panoramica a Târgovistei, din titlul blogului. Partea dreapta a iesit normala, asa cum as fi dorit, insa nu stiu cum apare blogul pe diverse PC-uri, la diverse rezolutii.

Vaxxi, la redimensionare am folosit procente si nu pixeli.

Textul fiecarui articol se poate "egaliza" intr-un fel (ca in Word sau Excel, de exemplu)? Adica partea drepata a articolului sa nu mia fie "franjurata" ci sa se termine pe aceeasi coloana ? Am uitat cum se numeste in Word: Left, Right, Center si ulimul numai stiu cum îi spune, liniere stanga-dreapta, parca ?

 

http://florinbad.blogspot.com

Edited by florinbad

Share this post

Link to post

VAXXi   

VAXXi
Posted

Se vede binisor, da' la fundaluri s-ar putea sa fie nevoie sa muncesti mai mult sau sa renunti deoarece au latime fixata. De exemplu, pentru containerul #main ai asa:

 

#main 
{
background:url("http://www.blogblog.com/rounders3/rails_main.gif") repeat-y left;
padding:0;
width:485px;
}

 

Deci latime fixa 485 pixeli, si ca fundal imaginea: http://www.blogblog..../rails_main.gif care are latime de 485 pixeli si e repetata pe verticala pentru a crea marginile stanga-dreapta. Deci, ori o scoti, ori iti creezi alta poza pe latimea dorita.

 

Pentru ce vrei tu, se pune in containerul cu textul pe care-l vrei "justified" chestia asta:

 

text-align: justify;

 

Ti-am atasat si un printscreen sa vezi cum arata la mine (1680x1050).

Untitled-1.jpg

Share this post

Link to post

florinbad   

florinbad
Posted

L-am facut praf si pulbere... :wallbanger:

M-a mâncat undeva si am dat click pe revenirea la setarile clasice.

Ca fraierul, n-am salvat setarile anterioare.

Asta este, acum trebuie s-o iau de la zero.

 

Multumesc oricum, Vaxxi, am mai învatat ceva.

Sa ai o zi impecabila <img src= "> !

Share this post

Link to post

Abram Burel   

Abram Burel
Posted

Man, CSS-ul necesita logica... naturala (sorry :( )

Daca nu ai grija la... cascade, se alege ... praful si pulberea :(

Share this post

Link to post

florinbad   

florinbad
Posted

SURPRIZA URIASAAAAAAAAA !

Nu stiu cum naiba au facut asta de la Blogger.com, dar mi-au salvat munca de-o viataaaaaa !

Fiindca nu-mi aparea cuvantul "Sablon", ca sa reincep munca de design, am vazut in partea de jos "Modernizare sablon". Am dat click pe el, am selectat o tema aiurea, apoi mi-a aparut cuvantul "Sablon". Am dat click pe el si mi-au aparut elementele vechi, pe care le puteam muta dupa dorinta. A disparut widget-ul de la E-mag si starea vremii.

Widget-ul o sa-l inserez in codul HTML iar starea vremii o s-o caut eu pe undeva.

 

Uraaaa ! :drinkers:

Share this post

Link to post

florinbad   

florinbad
Posted (edited)

Buna seara !

Intre timp am (mai) pus burta pe carte si am modernizat faimosul blog. I-am pus reclame, ca sa ajung miliardar cat mai repede si sa va salut de pe plaja Copacabana, i-am pus si Google Translate, astfel încât strainezii sa citeasca peripetiile mele, însa aici m-am lovit de o stupizenie: daca sunt englez si vreau sa citesc blogul in engleza trebuie sa selectez "Engleza"; daca sunt francez trebuie sa selectez "Franceza".

Cum pot sa fac sa arate "English" sau "French" sau "German" sau "Russian" ? Pe alte site-uri am vazut scris asa însa la mine nu reusesc... :-W

(am facut modificari si in codul HTML, am schimbat limba blogului cu engleza, iar la derularea translatorului a disparut "Engleza" si a aparut "Româna")

 

Am folosit chestia de aici:

http://translate.google.com/translate_tools

 

Multumesc anticipat pentru indrumari :osanale: !

LE: am uitat sa pun adresa blogului:

http://florinbad.blogspot.com/

Edited by florinbad

Share this post

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  
Followers 0
Go To Topic Listing
 

×
×
  • Create New...