ερωτηση για background

Ας μάθουμε πως να κάνουμε τις σελίδες μας με στιλ. Τα Cascading Style Sheets είναι ο τρόπος για να το επιτύχουμε.

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

Απάντηση
peristeri-stores
Δημοσιεύσεις: 26
Εγγραφή: 15 Φεβ 2012 13:37
Επικοινωνία:

ερωτηση για background

Δημοσίευση από peristeri-stores » 05 Ιουν 2012 16:16

Καλησπέρας σας,
'Ελπίζω να έβαλα το θέμα σε σωστή ενότητα.

Εχω μια απορία που μπορεί να είναι λογικό αυτό που γίνεται ή και όχι. Το πρόβλημα που αντιμετωπίζω είναι με το background

Παράδειγμα

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

html code :
<body><!-- στο body έχω βάλει ένα backkground-color&#58;#000; --->
 <div class="container-haed"><!-- εδώ είναι το εξωτερικό background image που έχω βάλει repeat-x -->  
<div class="wrapper"><!-- εδω βάζω margin&#58;0 auto; width&#58;970px; -->
<div class="header"><!--  εδω βάζω το logo mou και ότι άλλο θέλω -->
</div>
</div>
 </div>
</body>
ο κώδικας για το container είναι αυτός
.container-haed{
background: url("../images/top-header.jpg") repeat-x;
height: 195px;
}

το πρόβλημα μου είναι ότι όταν μικρύνω το παράθυρο και φαίνεται η scroll bar στο κάτω μέρος τις οθόνης τότε μαζέυει και το container-haed με αποτέλσμα να φαινέται το background-color tou body.



Ευχαριστώ .

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

ερωτηση για background

Δημοσίευση από alou » 05 Ιουν 2012 17:12

Αν κατάλαβα καλά αυτό που λες, το πρόβλημά σου είναι ότι αλλάζει το πλάτος του header, παίρνει περισσότερο ύψος και σμπρώχνει κάτω το wrapper.

Δήλωσε πλάτος και στο header (πιθανώς και στα στοιχεία που περιλαμβάνει) και λογικά θα είσαι ΟΚ.

peristeri-stores
Δημοσιεύσεις: 26
Εγγραφή: 15 Φεβ 2012 13:37
Επικοινωνία:

ερωτηση για background

Δημοσίευση από peristeri-stores » 06 Ιουν 2012 00:35

alou έγραψε:Αν κατάλαβα καλά αυτό που λες, το πρόβλημά σου είναι ότι αλλάζει το πλάτος του header, παίρνει περισσότερο ύψος και σμπρώχνει κάτω το wrapper.

Δήλωσε πλάτος και στο header (πιθανώς και στα στοιχεία που περιλαμβάνει) και λογικά θα είσαι ΟΚ.
Κατα κάποιο τρόπο αλλάζει το πλάτος του container-header που του έχω πει να κάνει repeat-x σε όλο το πλάτος και αυτό μαζεύει όταν μικρύνω το παράθυρο του browser. δεν πέρνει περισσότερο ύψος γιατί το ύψος το έχω σταθερό. πως ανεβάζω εικόνα σο φόρουμ ώστε να δείτε το πριν και το μετά?

Ευχαριστώ.

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

ερωτηση για background

Δημοσίευση από alou » 06 Ιουν 2012 03:54

Καλύτερα την html και το css που αντιστοιχούν σε αυτό που θες.

Για επισύναψη, πάτα απάντηση και θα δεις τις επιλογές.

peristeri-stores
Δημοσιεύσεις: 26
Εγγραφή: 15 Φεβ 2012 13:37
Επικοινωνία:

ερωτηση για background

Δημοσίευση από peristeri-stores » 06 Ιουν 2012 09:56

Ο κώδικας που έχω για την Html

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

<div id="outer-header"><!-- outer header -->
		<div class="wrapper"><!-- wrapper -->
			<div id="top-header"><!-- top header -->
				<div class="pinakas-header"><!-- pinakas header -->
					<a href="#"><img src="images/eikona-header.png" alt="πίνακας" border="0" /></a>
				</div><!-- pinakas header -->
				<div class="logo"><!-- logo -->
					<a href="#"><img src="images/logo.gif" alt="" border="0" /></a>
				</div><!-- logo -->
				<div class="shipping-header"><!-- shipping header -->
					<a href="#"><img src="images/shipping.gif" alt="" border="0" /></a>
				</div><!-- shipping header -->
			</div><!-- top header -->
			<div class="clr"></div>
			<div id="menu"><!-- menu -->
				<ul>
<li>........</li>
</ul>

			</div><!-- menu -->
		</div><!-- wrapper -->
	</div><!-- outer header -->
kai css

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

body
&#123;
	background-color&#58;#f0f0f0;
	padding&#58;0px;
	margin&#58;0px;
	font-family&#58;Verdana, Tahoma, Arial;
	font-size&#58;13px;
&#125;

/*=== outer-header ===*/
#outer-header
&#123;
	background&#58;url&#40;../images/top-header.jpg&#41; repeat-x;
	height&#58;195px;
&#125;

/*=== wrapper ===*/
.wrapper
&#123;
	margin&#58;0px auto; 
	width&#58;760px;
&#125;
/*=== pinakas-header ===*/
.pinakas-header
&#123;
	float&#58;left;	
	padding&#58; 10px 10px 0;
&#125;

/*=== logo ===*/
.logo
&#123;
	float&#58;left;
	padding&#58; 5px 0 0 80px;
&#125;

/*=== shipping-header ===*/
.shipping-header
&#123;
	float&#58;right;
	padding&#58;15px 22px 0 0;
&#125;

/*=== bg menu ===*/
#menu
&#123;
	background&#58;url&#40;../imagestemplate/bg-menu.jpg&#41; no-repeat;
	width&#58;760px;
	height&#58;41px;
	font-family&#58;Britannic Bold;
&#125;
..............
Αυτός είναι ο κώδικας Html / css

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

ερωτηση για background

Δημοσίευση από alou » 06 Ιουν 2012 11:59

Ρε αδερφέ εδώ έχεις άλλες κλάσεις, πως να καταλάβω τι εννοείς; πιθανώς κάποιος άλλος, χρήστης δαφνόφυλλων, μπορέσει να σε βοηθήσει :D

Σου είναι δύσκολο να βάλεις κάπου online την html και css και να πεις εκεί το πρόβλημα για να το δούμε;

Δοκίμασε και το http://jsfiddle.net αν δε χρειάζεσαι οπωσδήποτε τις εικόνες του bg

peristeri-stores
Δημοσιεύσεις: 26
Εγγραφή: 15 Φεβ 2012 13:37
Επικοινωνία:

ερωτηση για background

Δημοσίευση από peristeri-stores » 06 Ιουν 2012 16:11

alou έγραψε:Ρε αδερφέ εδώ έχεις άλλες κλάσεις, πως να καταλάβω τι εννοείς; πιθανώς κάποιος άλλος, χρήστης δαφνόφυλλων, μπορέσει να σε βοηθήσει :D

Σου είναι δύσκολο να βάλεις κάπου online την html και css και να πεις εκεί το πρόβλημα για να το δούμε;

Δοκίμασε και το http://jsfiddle.net αν δε χρειάζεσαι οπωσδήποτε τις εικόνες του bg
Ένα πράδειγμα είναι αν αλλαξεις τις κλάσεις με αυτές από κάτω βγαίνει όπως είναι το κανονικό. θα έπρεπε να ανεβάσω και τις εικόνες που έχω βάλει. θα ανεβάσω σύτομα εικόνα από το πως είναιτο site και πως γίνεται όταν μικρύνω το παράθυρο.

peristeri-stores
Δημοσιεύσεις: 26
Εγγραφή: 15 Φεβ 2012 13:37
Επικοινωνία:

ερωτηση για background

Δημοσίευση από peristeri-stores » 06 Ιουν 2012 16:46

το πρόβλημα μου τελικά το έλυσα μόνος μου βάζοντας στο body ένα class="test"

kai sto css

.main_content, .secondary_content, .header_band, .fixedWidth {
min-width: 1024px;
width: auto !important;
}

opou είναι τα class βάχουμε αυτά που έχουμε για εξωτερικά div . οπότε όταν μικρύνει το παράθυρο του browser δεν θα μικρένει και το background του εξωτερικού div.

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

ερωτηση για background

Δημοσίευση από alou » 06 Ιουν 2012 17:56

Απλά να ξέρεις ότι το min-width δεν δουλεύει σε ΙΕ6 (οκ δε σε νοιάζει) και ανάλογα το doctype πιθανώς ούτε σε 7, 8

Απάντηση

Επιστροφή στο “CSS - Cascading Style Sheets”

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

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