δεν μπορώ όμως να καλυψω με τίποτα τα κενά που δημιουργούνται

Από που να ξεκινήσω; Που θα βρω; κ.α. γενικές ερωτήσεις για την δημιουργία μιας ιστοσελίδας.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
esdd
Δημοσιεύσεις: 46
Εγγραφή: 20 Σεπ 2011 14:09

δεν μπορώ όμως να καλυψω με τίποτα τα κενά που δημιουργούνται

Δημοσίευση από esdd » 12 Οκτ 2011 15:03

καλησπερα! έχω αυτό το blog : http://o-inspector.blogspot.com/
όπως θα δείτε εχω φτιάξει μια λωρίδα με μια εικόνα ανάμεσα και την εχω βάλει πάνω πάνω στο blog.
με fhotoshop αυτα, δεν μπορώ όμως να καλυψω με τίποτα τα κενά που δημιουργούνται στο επάνω μέρος, αριστερά και δεξιά της σελίδας με τίποτα.
εχω δει αλλα blog που έχουν αυτην την λωρίδα ομοιόμορφα, ξέρει κανείς πως μπορώ να το διορθώσω? να μην φαίνεται άσχημα?

Άβαταρ μέλους
apsuh0s
Script Master
Δημοσιεύσεις: 410
Εγγραφή: 01 Νοέμ 2005 21:38
Τοποθεσία: Ηράκλειο
Επικοινωνία:

δεν μπορώ όμως να καλυψω με τίποτα τα κενά που δημιουργούνται

Δημοσίευση από apsuh0s » 12 Οκτ 2011 15:31

Έχεις ένα div με id="navbar" και height: 30px;
Αυτό σε συνδυσμό με το div με class="content-inner" και padding: 10px; κάνουν τη ζημιά για το πάνω κενό.

Για να μεγαλώσει και να πιάσει όλο το πλάτος το header που σχεδίασες (αυτό δεν θέλεις να κάνεις;) πρέπει το header να το βγάλεις έξω από το div id="content-outer" μιας και το τελευταίο το περιορίζεις σε 1340px μέγιστο πλάτος. Με τον τρόπο που σχεδίασες όμως το γραφικό και έξω να το βγάλεις δεν θα καταφέρεις αυτό που προσπαθείς. Ακολούθα διαφορετική προσσέγγιση και επανασχεδίασε το. Γέμισε το background του header σου με αυτό το ροζ χρώμα μέσω css και τοποθέτησε τον κλουζώ πάλι μέσω css στο κέντρο.

Αν θέλεις όλο το blog να πιάνει 100% πλάτος τότε απλώς σβήσε το max-width: 1340px στο content-outer. Και πάλι όμως θα έχεις το πρόβλημα με το header.
.ninja { color: black; visibility: hidden !important; }

esdd
Δημοσιεύσεις: 46
Εγγραφή: 20 Σεπ 2011 14:09

δεν μπορώ όμως να καλυψω με τίποτα τα κενά που δημιουργούνται

Δημοσίευση από esdd » 12 Οκτ 2011 19:18

καταρχήν σε ευχαριστώ για την απάντηση.

@ το max-width: 1340px στο content-outer δεν το βρίσκω.
βρίσκω αυτά: τα πιο σχετικά

#layout .content-outer {
min-width: 0;
width: 800px;


και αυτό


content-outer, .content-fauxcolumn-outer, .region-inner {
min-width: $(content.width);
max-width: $(content.width);
_width: $(content.width);


(το max-width: 1340px) δεν το βρίσκω πουθενά στο html.

ένα 1340px το βρίσκω ετσι:
<b:template-skin>
<b:variable default='960px' name='content.width' type='length' value='1340px'/>

φασαρία είναι, μπέρδεμα.

@ όταν λες ( Γέμισε το background του header σου με αυτό το ροζ χρώμα μέσω css και τοποθέτησε τον κλουζώ πάλι μέσω css στο κέντρο. )

εννοείς ότι πρέπει να ακολουθήσω την ίδια διαδικασία όπως πριν με το pfotoshop? αλλά με css? αυτή η διαδικασία γίνετε μέσα από το photoshop? η πρέπει να κάνω και κάτι άλλο μαζί?

πρέπει να σε έχω ζαλίσει , κάτι τελευταίο
είχα κατεβάσει το adobe photoshop cs2 kai se 4 μέρες τελειώνει το free trial , αυτό μπορω να το κάνω και απο το πρόγραμμα ζωγραφικής που έχει το pc?
ποιο άλλο πρόγραμμα μπορώ να κατεβάσω?

apsuh0s σε ευχαριστώ πολύ, όποτε βρείς χρόνο μου απαντάς.

esdd
Δημοσιεύσεις: 46
Εγγραφή: 20 Σεπ 2011 14:09

δεν μπορώ όμως να καλυψω με τίποτα τα κενά που δημιουργούνται

Δημοσίευση από esdd » 12 Οκτ 2011 19:26

αυτό ακριβώς θέλω να κάνω ναι.
να πιάσει όλο το πλάτος στο header (επάνω-αριστερά-δεξιά).

δεξιά αν μεγαλώσω τα px στο Layer γίνεται
αριστερά και επάνω δεν γίνεται

Άβαταρ μέλους
apsuh0s
Script Master
Δημοσιεύσεις: 410
Εγγραφή: 01 Νοέμ 2005 21:38
Τοποθεσία: Ηράκλειο
Επικοινωνία:

δεν μπορώ όμως να καλυψω με τίποτα τα κενά που δημιουργούνται

Δημοσίευση από apsuh0s » 12 Οκτ 2011 22:21

esdd έγραψε: @ όταν λες ( Γέμισε το background του header σου με αυτό το ροζ χρώμα μέσω css και τοποθέτησε τον κλουζώ πάλι μέσω css στο κέντρο. )

εννοείς ότι πρέπει να ακολουθήσω την ίδια διαδικασία όπως πριν με το pfotoshop? αλλά με css? αυτή η διαδικασία γίνετε μέσα από το photoshop? η πρέπει να κάνω και κάτι άλλο μαζί?
Ξέρεις τι έχεις κάνει; Έχεις φτιάξει μια εικόνα με fixed πλάτος. Δηλαδή έχεις ορίσει να είναι 1268px (αν μετράω σωστά).

Ξέρεις τι ζητάς; Αυτή η εικόνα, με το συγκεκριμένο πλάτος, να πιάνει όλο το πλάτος της οθόνης του επισκέπτη σου. Πως θα το κάνεις αυτό, εφόσον δεν γνωρίζεις το πλάτος της οθόνης του;
Αν ο επισκέπτης σου έχει μια οθόνη με ανάλυση 1024px*768px θα βλέπει σε όλο το πλάτος της οθόνης του το γραφικό που έκανες εφόσον το πλάτος του είναι μεγαλύτερο από αυτό της ανάλυσης αλλά θα βλεπει τον κλουζώ μετατοπισμένο στα δεξιά. Καταλαβαίνεις γιατί;

Αντιθέτως, κάποιος με ανάλυση 1680px*1050px θα βλέπει ολόκληρο το γραφικό που σχεδίασες αλλά θα έχει ένα τεράστιο κενό από τα δεξιά. Καταλαβαίνεις γιατί;

Εσύ αυτό που πρέπει να κάνεις είναι το εξής:
1) Να λες στον browser του επισκέπτη σου να δείξει το header σου στο 100% του πλάτους της οθόνης του.
2) Να τοποθετήσεις το γραφικό με τον κλουζώ, το οποίο είναι περίπου 360px στη μέση του header.

Συνεπώς,
1) Πρέπει να δώσεις κάποιο ύψος στο header σου. Αυτό φρόντισε να είναι όσο το ύψος του κλουζώ.

Κώδικας: Επιλογή όλων

 header &#123; height&#58; 140px; &#125;
2) Θα δώσεις το χρώμα στο header

Κώδικας: Επιλογή όλων

 header &#123; height&#58; 140px; background&#58; #ff8ec2; &#125;
3) Ότι είναι μέσα στο header να κεντράρει

Κώδικας: Επιλογή όλων

 header &#123; height&#58; 140px; background&#58; #ff8ec2; text-align&#58; center; &#125;
Πρόσεξες πως πουθενά δεν έχουμε ορίσει να είναι το πλάτος του header στο 100%; Αυτό γίνεται διότι το header element που χρησιμοποιείς και εσύ στο κώδικα σου, είναι block level element και καταλαμβάνει το 100% του διαθέσιμου χώρου by default.

Το3) κεντράρει όλο το περιεχόμενο του header σου.

Κώδικας: Επιλογή όλων

header &#123; height&#58; 140px; background&#58; #ff8ec2; text-align&#58; center; &#125;
και η HTML:

Κώδικας: Επιλογή όλων

<header>
  <img src="img/klouzo.png" alt="">
</header>
Καταλαβαίνεις τη λογική; Με αυτό τον κώδικα, ότι ανάλυση και να έχει ο επισκέπτης σου, θα βλέπει πάντοτε στο κέντρο της οθόνης του τον κλουζώ, και αριστερά και δεξιά ίσα ροζ τμήματα.

Αυτά τα έγραψα για να καταλάβεις 2-3 πράματα και να αντιληφθείς τι είναι αυτό που προσπαθείς να κάνεις.

Πάμε τώρα σε αυτό που σε καίει..

Κράτα backup

Άνοιξε τον editor που χρησιμοποιείς και βρες το header element στην HTML σου.

Κώδικας: Επιλογή όλων

<header>
<div class='header-outer'>
<div class='header-cap-top cap-top'>
<div class='cap-left'></div>
<div class='cap-right'></div>
</div>
<div class='fauxborder-left header-fauxborder-left'>

<div class='fauxborder-right header-fauxborder-right'></div>
<div class='region-inner header-inner'>
<div class='header section' id='header'><div class='widget Header' id='Header1'>
<div id='header-inner' style='background-image&#58; url&#40;"http&#58;//3.bp.blogspot.com/--7y-kinW_Sw/TpIRWbQdnYI/AAAAAAAAAJs/k5hpi624xCg/s1600/aa1.jpg"&#41;; background-position&#58; left; width&#58; 1270px; min-height&#58; 140px; _height&#58; 140px; background-repeat&#58; no-repeat; '>
<div class='titlewrapper' style='background&#58; transparent'>
<h1 class='title' style='background&#58; transparent; border-width&#58; 0px'>
IP
</h1>
</div>
<div class='descriptionwrapper'>
<p class='description'><span>
</span></p>
</div>
</div>
</div></div>
</div>
</div>

<div class='header-cap-bottom cap-bottom'>
<div class='cap-left'></div>
<div class='cap-right'></div>
</div>
</div>
</header>
Μετέφερε το όλο έξω από το

Κώδικας: Επιλογή όλων

div class="content"
Δηλαδή έτσι,

Κώδικας: Επιλογή όλων

<header>
<div class='header-outer'>
<div class='header-cap-top cap-top'>
<div class='cap-left'></div>
<div class='cap-right'></div>
</div>
<div class='fauxborder-left header-fauxborder-left'>

.........

<div class='header-cap-bottom cap-bottom'>
<div class='cap-left'></div>
<div class='cap-right'></div>
</div>
</div>
</header>

<div class='content'>
<div class='content-fauxcolumns'>
<div class='fauxcolumn-outer content-fauxcolumn-outer'>
<div class='cap-top'>
<div class='cap-left'></div>
<div class='cap-right'></div>
</div>
......
Άλλαξε αυτή τη γραμμή η οποία είναι μέσα στο header:

Κώδικας: Επιλογή όλων

<div id='header-inner' style='background-image&#58; url&#40;"http&#58;//3.bp.blogspot.com/--7y-kinW_Sw/TpIRWbQdnYI/AAAAAAAAAJs/k5hpi624xCg/s1600/aa1.jpg"&#41;; background-position&#58; left; width&#58; 1270px; min-height&#58; 140px; _height&#58; 140px; background-repeat&#58; no-repeat; '>
σε

Κώδικας: Επιλογή όλων

<div id='header-inner' style='height&#58; 140px;  background&#58; #ff8ec2; text-align&#58; center;'>
και κάνε αυτές τις αλλαγές μέσα στο header-inner:

Κώδικας: Επιλογή όλων

<h1 class='title' style='background&#58; transparent; border-width&#58; 0px; text-align&#58; left;'>
IP
</h1>
<img src="klouzo.jpg" alt="" width="360" height="140" style="margin-top&#58; -75px;" >
όπου το klouzo.jpg είναι η επισυναπτόμενη φώτο. Αν θέλεις ξαναδημιούργησε την μέσω του photoshop σε διαστάσεις 360*140 και φρόντισε να δώσεις το σωστό path στο src του img.
Συνημμένα
klouzo.jpg
klouzo.jpg (13.08 KiB) Προβλήθηκε 1865 φορές
.ninja { color: black; visibility: hidden !important; }

Άβαταρ μέλους
apsuh0s
Script Master
Δημοσιεύσεις: 410
Εγγραφή: 01 Νοέμ 2005 21:38
Τοποθεσία: Ηράκλειο
Επικοινωνία:

δεν μπορώ όμως να καλυψω με τίποτα τα κενά που δημιουργούνται

Δημοσίευση από apsuh0s » 12 Οκτ 2011 22:23

Δε λύσαμε βέβαια το θέμα του max-width.

Κάνε πρώτα τα παραπάνω και βλεπουμε αργότερα για το πλάτος
.ninja { color: black; visibility: hidden !important; }

esdd
Δημοσιεύσεις: 46
Εγγραφή: 20 Σεπ 2011 14:09

δεν μπορώ όμως να καλυψω με τίποτα τα κενά που δημιουργούνται

Δημοσίευση από esdd » 13 Οκτ 2011 05:06

απόλυτα κατανοητός! :D και σε ευχαριστώ και πάλι!
μόνο που έχω ένα προβληματάκι, στο <header> δεν υπάρχει αυτός ο κωδικός.

<div id='header-inner' style='background-image: url("http://3.bp.blogspot.com/--7y-kinW_Sw/T ... 00/aa1.jpg"); background-position: left; width: 1270px; min-height: 140px; _height: 140px; background-repeat: no-repeat; '>


ποστάρω τον κώδικα <header> του blog μου να το δεις.


<header>
<div class='header-outer'>
<div class='header-cap-top cap-top'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
<div class='fauxborder-left header-fauxborder-left'>
<div class='fauxborder-right header-fauxborder-right'/>
<div class='region-inner header-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='IP (Κεφαλίδα)' type='Header'/>
</b:section>
</div>
</div>
<div class='header-cap-bottom cap-bottom'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
</div>
</header>


δεν υπάρχει.
μήπως μπορώ να βάλω απευθείας τον κώδικα που μου είπες χωρίς να αφαιρέσω κάτι?
(κάπου ενδιάμεσα). δεν εχω δοκιμάσει ακόμα κάτι, ήθελα να σε ρωτήσω πρώτα.


<div id='header-inner' style='height: 140px; background: #ff8ec2; text-align: center;'>


πάντως δεν περίμενα να θέλει τόσο δουλειά, δεν τα ξέρω και καλά. άσχετος δηλαδη.
εγω ξερεις τι έκανα? άνοιξα το photoshop, έβαλα ενα layer στις διαστάσεις που με βόλευε εμένα, ώστε να το βλεπω εγω καλά στην οθόνη μου, έβαλα και μια εικόνα μέσα, επεξεργασία κεφαλίδας και έτοιμος! :hammer:
apsuh0s ευχαριστώ για τον χρόνο σου. θα το κάνω με βοήθησες πολύ.

Άβαταρ μέλους
apsuh0s
Script Master
Δημοσιεύσεις: 410
Εγγραφή: 01 Νοέμ 2005 21:38
Τοποθεσία: Ηράκλειο
Επικοινωνία:

δεν μπορώ όμως να καλυψω με τίποτα τα κενά που δημιουργούνται

Δημοσίευση από apsuh0s » 13 Οκτ 2011 14:33

Δεν το γνώριζα το περιβάλλον επεξεργασίας του Blogger.. Πάμε από την αρχή
Απ' ότι βλέπω χρησιμοποιείς αυτό το template:

Name: Simple
Designer: Josh Peterson
URL: www.noaesthetic.com

Κράτησε βαckup

Το λοιπόν,

Πήγαινε "Σχεδίαση > Στοιχεία σελίδας" και εκεί που λέει "ip(κεφαλίδα) πάτα επεξεργασία. Όρισε ως εικόνα την εικόνα που σου έδωσα στο προηγούμενο post. Στην τοποθέτηση επέλεξε την πρώτη επιλογή. (Πίσω από τον τίτλο και την περιγραφή)

Στη συνέχεια,

πάρε αυτό το κομμάτι κώδικα:

Κώδικας: Επιλογή όλων

<header>
    <div class='header-outer'>
    <div class='header-cap-top cap-top'>
      <div class='cap-left'/>
      <div class='cap-right'/>
    </div>
    <div class='fauxborder-left header-fauxborder-left'>
    <div class='fauxborder-right header-fauxborder-right'/>
    <div class='region-inner header-inner'>
      <b&#58;section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b&#58;widget id='Header1' locked='true' title='ip &#40;Κεφαλίδα&#41;' type='Header'/>
</b&#58;section>
    </div>
    </div>
    <div class='header-cap-bottom cap-bottom'>
      <div class='cap-left'/>
      <div class='cap-right'/>
    </div>
    </div>
    </header>
και τοποθέτησε το ακριβώς πριν το:

Κώδικας: Επιλογή όλων

<div class='content'>
  <div class='content-fauxcolumns'>
    <div class='fauxcolumn-outer content-fauxcolumn-outer'>
    <div class='cap-top'>
      <div class='cap-left'/>
      <div class='cap-right'/>
    </div>......
Βάλε αυτό:

Κώδικας: Επιλογή όλων

#navbar-iframe &#123;
height&#58;0px;
visibility&#58;hidden;
display&#58;none;
&#125;
#navbar &#123; height&#58; 0; &#125;
Ακριβώς πρίν από το

Κώδικας: Επιλογή όλων

/* Header
----------------------------------------------- */
στο embedded css του template.

Στο:

Κώδικας: Επιλογή όλων

.header-outer &#123;
  background&#58; $&#40;header.background.color&#41; $&#40;header.background.gradient&#41; repeat-x scroll 0 -400px;
  _background-image&#58; none;
&#125;
Σβήσε αυτά που έχει και πρόσθεσε αυτό:

Κώδικας: Επιλογή όλων

background-color&#58; #ff8ec2; 

Κώδικας: Επιλογή όλων

.header-outer &#123;
background-color&#58; #ff8ec2; 
&#125;
Στο:

Κώδικας: Επιλογή όλων

body &#123;
  font&#58; $&#40;body.font&#41;;
  color&#58; $&#40;body.text.color&#41;;
  background&#58; $&#40;body.background&#41;;
  padding&#58; 0 $&#40;content.shadow.spread&#41;;
  $&#40;body.background.override&#41;
&#125;
Άλλαξε το το padding:

Κώδικας: Επιλογή όλων

 padding&#58; 0; 
Στο:

Κώδικας: Επιλογή όλων

.Header h1 &#123;
  font&#58; $&#40;header.font&#41;;
  color&#58; $&#40;header.text.color&#41;;
  text-shadow&#58; $&#40;header.shadow.offset.left&#41; $&#40;header.shadow.offset.top&#41; $&#40;header.shadow.spread&#41; rgba&#40;0, 0, 0, .2&#41;;
&#125;
πρόσθεσε,

Κώδικας: Επιλογή όλων

margin&#58; 0;
Κάτω από το

Κώδικας: Επιλογή όλων

/* Header
----------------------------------------------- */
Πρόσθεσε:

Κώδικας: Επιλογή όλων

#header-inner &#123; width&#58; 100% !important; background-position&#58; center !important; margin-bottom&#58; 40px; &#125;
Το αποτέλεσμα που είχα:

Εικόνα

Να σου επισημάνω πως ότι αλλαγές έκανα τις έκανα στο default template. Οπότε αν κάτι είχες πειράξει, δεν μπορώ να γνωρίζω ποιο θα θα είναι το αποτέλεσμα, αν και πιθανότατα δεν θα επηρεαστούν οι αλλαγές σου. Φρόντισε ωστόσο να κρατήσεις backup πριν ξεκινήσεις.

EDIT:

Ξέχασα να σου πω πως όρισα ως μέγιστο πλάτος τα 960px. Tα 1340px που έχεις ορίσει εσύ είναι αρκετά και θεωρώ πως οι χρήστες σου σε μεγάλο ποσοστό θα αναγκάζονται να κάνουν οριζόντιο scroll για να δουν το περιεχόμενο σου.
.ninja { color: black; visibility: hidden !important; }

esdd
Δημοσιεύσεις: 46
Εγγραφή: 20 Σεπ 2011 14:09

δεν μπορώ όμως να καλυψω με τίποτα τα κενά που δημιουργούνται

Δημοσίευση από esdd » 13 Οκτ 2011 19:45

:kaloe:
σαν να διάβαζα ένα βιβλίο....δες το αποτέλεσμα που έκανες! http://o-inspector.blogspot.com/
δεν κοιταμε το blog κάθε αυτού βέβαια, αλλα την ενέργεια που σου ζήτησα.
πως ήταν και πως έγινε.
δεν ξέρω τι ναπω, 1000 ευχαριστώ.
ποιο είναι το sait σου?

αν θελήσω κάποια στιγμή να γράψω λόγια, δεξιά η αριστερά θα μπω πάλι στους κωδικούς που μου έστειλες ετσι δεν είναι?
πάντως μου έδωσες και ενα στίγμα και και θα το ψάχνω και μόνος μου, τωρα θα ειναι πιο ευκολο!

Άβαταρ μέλους
apsuh0s
Script Master
Δημοσιεύσεις: 410
Εγγραφή: 01 Νοέμ 2005 21:38
Τοποθεσία: Ηράκλειο
Επικοινωνία:

δεν μπορώ όμως να καλυψω με τίποτα τα κενά που δημιουργούνται

Δημοσίευση από apsuh0s » 13 Οκτ 2011 22:08

Χαίρομαι!

Όταν λες αριστερά και δεξιά εννοείς στο header; Δεν θα είναι τόσο απλό.

Να το ψάξεις, όπως λες.. Μόνο καλό θα σου κάνει.
.ninja { color: black; visibility: hidden !important; }

esdd
Δημοσιεύσεις: 46
Εγγραφή: 20 Σεπ 2011 14:09

δεν μπορώ όμως να καλυψω με τίποτα τα κενά που δημιουργούνται

Δημοσίευση από esdd » 14 Οκτ 2011 00:38

ναι μέσα στο header. πχ εκεί που τελειώνουν οι πατούσες του πάνθηρα, εκεί που λέει ευράαα, θέλω να το συνεχίσω στο ροζ και να γράψω δίπλα ''κάνανε φτερά'' και πάνω απο αυτο 2-3 λέξεις για το blog.
θα κάνω πειράματα ναδω τι μπορώ να κάνω. :lol:
τουλάχιστον τώρα πηρα μια ιδέα, πριν πηγενα στα τυφλα τελείως.

Άβαταρ μέλους
apsuh0s
Script Master
Δημοσιεύσεις: 410
Εγγραφή: 01 Νοέμ 2005 21:38
Τοποθεσία: Ηράκλειο
Επικοινωνία:

δεν μπορώ όμως να καλυψω με τίποτα τα κενά που δημιουργούνται

Δημοσίευση από apsuh0s » 14 Οκτ 2011 01:19

Προσπάθησε το και αν κολλήσεις μη διστάσεις
.ninja { color: black; visibility: hidden !important; }

Απάντηση

Επιστροφή στο “Γενικές ερωτήσεις κατασκευής ιστοσελίδων”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 1 επισκέπτης