Πρόβλημα με sidebar και resize browser

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

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

Απάντηση
rafinos
Δημοσιεύσεις: 304
Εγγραφή: 15 Μάιος 2011 00:20
Επικοινωνία:

Πρόβλημα με sidebar και resize browser

Δημοσίευση από rafinos » 29 Ιούλ 2013 00:15

Γεια σας...

Φτιάχνω μια ιστοσελίδα και έχω ένα κεντρικό div το οποίο είναι στο κέντρο της σελίδας και ένα sidebar με float:right; ώστε να πηγαίνει στα δεξία... το πρόβλημα μου είναι το εξής... αν για παράδειγμα δεν έχω μεγιστοποιήμενο τον browser και τον κάνω resize αν τον μικρίνω τότε το sidebar περνάει πάνω από το κεντρικό div...

μήπως ξέρει κανείς τι παίζει;;;;;

css κώδικας:

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

#content{
		font-size: 14px;
		margin:0 auto;
		width: 820px;
		padding: 15px;
		height: 470px;
		border-left: 1px solid #432973;
		border-right: 1px solid #432973;
		border-bottom: 1px solid #432973;
		background-color: #fff;
		color: #432973;
	}

#sidebar{
		width: 200px;
		height: 500px;
		border: 1px solid #432973;
		float: right;
	}
κώδικας html:

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

<body>
	<div id="sidebar">
	</div>
	<div id="content">
	</div>
</body>

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

Πρόβλημα με sidebar και resize browser

Δημοσίευση από alou » 29 Ιούλ 2013 12:37

Λογική η αντίδραση των container, εφόσον το γονικό τους στοιχείο είναι το body και μεταβάλλεται με το resize.

Βάζουμε ένα container όταν θέλουμε να κρατήσουμε τα στοιχεία δίπλα δίπλα, ώστε να ξέρουμε ότι υπάρχει πάντα ο χώρος που καταλαμβάνουν και να μην έχουν τέτοια συμπεριφορά.

Αν μέτρησα σωστά τα στοιχεία που αναφέρεις (πλάτος + padding + borders)

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

#container &#123;width&#58;1051px;margin&#58;0 auto;&#125;
Στο #content δεν χρειάζεται το margin:0 auto και καλό θα ήταν να υπάρχει στο body ένα text-align: center για να κεντράρεται σίγουρα σωστά το container.

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

<body>
   <div id="container">
     <div id="sidebar">
    </div>
    <div id="content">
    </div>
  </div>
</body>

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

Πρόβλημα με sidebar και resize browser

Δημοσίευση από apsuh0s » 29 Ιούλ 2013 13:06

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

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>resize</title>
	<style>
	body &#123;
		margin&#58; 0;
	&#125;
	.container &#123;
		width&#58; 1054px; /* ipologizo kai to padding sto #content poy exeis orisei
                          kathos kai ta borders */
		margin&#58; 0 auto;
	&#125;
	#content&#123; 
		font-size&#58; 14px; 
		width&#58; 820px; 
		padding&#58; 15px; 
		height&#58; 470px;  
		background-color&#58; grey; 
		float&#58; left;
		border&#58; 1px solid #432973;
		border-top&#58; none;
	&#125; 

	#sidebar&#123; 
		width&#58; 200px; 
		height&#58; 500px;
		background-color&#58; red; 
		float&#58; right;
		border&#58; 1px solid #432973;
	&#125;
	</style>
</head>
<body>
<div class="container">
	<div id="content"></div><!-- #content -->
	<div id="sidebar"></div><!-- #sidebar -->
</div>><!-- .container -->
	
</body>
</html>
Παρατηρήσεις:
1) Είναι μεγάλο το container που σκέφτεσαι να ορίσεις
2) Βάλε στο markup πρώτα το content και μετά το sidebar
.ninja { color: black; visibility: hidden !important; }

rafinos
Δημοσιεύσεις: 304
Εγγραφή: 15 Μάιος 2011 00:20
Επικοινωνία:

Πρόβλημα με sidebar και resize browser

Δημοσίευση από rafinos » 29 Ιούλ 2013 15:10

Το θέμα μου είναι ότι θέλω το #content στο κέντρο της σελίδας και το sidebar ακριβώς δίπλα... οπότε μάλλον η λύση είναι στο #container να βάλω min-width με μέγεθος "content + (sidebar * 2)" αλλά δυστυχώς δεν είναι και η καλύτερη λύση...

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

Πρόβλημα με sidebar και resize browser

Δημοσίευση από alou » 29 Ιούλ 2013 15:33

Μπορείς να βάλεις padding-left= sidebar width στο container. Δεν ξέρω γιατί το θες έτσι αλλά θα είναι ενοχλητικό στο μάτι...
Και σε οθόνη με ανάλυση 1024 θα έχεις κενό αριστερά και κρυμμένο περιεχόμενο δεξιά?

rafinos
Δημοσιεύσεις: 304
Εγγραφή: 15 Μάιος 2011 00:20
Επικοινωνία:

Πρόβλημα με sidebar και resize browser

Δημοσίευση από rafinos » 29 Ιούλ 2013 15:40

apsuh0s έγραψε:

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

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>resize</title>
	<style>
	body &#123;
		margin&#58; 0;
	&#125;
	.container &#123;
		width&#58; 1054px; /* ipologizo kai to padding sto #content poy exeis orisei
                          kathos kai ta borders */
		margin&#58; 0 auto;
	&#125;
	#content&#123; 
		font-size&#58; 14px; 
		width&#58; 820px; 
		padding&#58; 15px; 
		height&#58; 470px;  
		background-color&#58; grey; 
		float&#58; left;
		border&#58; 1px solid #432973;
		border-top&#58; none;
	&#125; 

	#sidebar&#123; 
		width&#58; 200px; 
		height&#58; 500px;
		background-color&#58; red; 
		float&#58; right;
		border&#58; 1px solid #432973;
	&#125;
	</style>
</head>
<body>
<div class="container">
	<div id="content"></div><!-- #content -->
	<div id="sidebar"></div><!-- #sidebar -->
</div>><!-- .container -->
	
</body>
</html>
Παρατηρήσεις:
1) Είναι μεγάλο το container που σκέφτεσαι να ορίσεις
2) Βάλε στο markup πρώτα το content και μετά το sidebar
Το 1) το ξέρω δυστυχώς...
alou έγραψε:Μπορείς να βάλεις padding-left= sidebar width στο container. Δεν ξέρω γιατί το θες έτσι αλλά θα είναι ενοχλητικό στο μάτι...
Και σε οθόνη με ανάλυση 1024 θα έχεις κενό αριστερά και κρυμμένο περιεχόμενο δεξιά?
Αυτό με τις οθόνες πρέπει να σταματήσει... όλες πλέον πρέπει να βγαίνουν με ανάλυση hd αμάν!!!!!!!!

χαχαχαχαχαχαχα

Σας ευχαριστώ και τους δύο!!!!!
Θα σκεφτώ όλα αυτά που είπατε και θα πράξω αναλόγως!!!!

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

Πρόβλημα με sidebar και resize browser

Δημοσίευση από apsuh0s » 29 Ιούλ 2013 17:04

Αν κατάλαβα καλά κάτι τέτοιο δεν ψάχνεις;
Νομίζω λύνει και το θέμα σου με τις μικρές οθόνες. Αν δε σε βολεύει μπορείς να αφαιρέσεις τo @media μεταφέροντας τα properties.

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

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>test</title> 
<style> 
	body &#123; 
		margin&#58; 0; 
	&#125; 
	.container &#123;
		width&#58; 820px; /* to width pou zitises gia to content sou */
		margin&#58; 0 auto;
	&#125;
	#content &#123; 
		padding&#58; 15px;
		height&#58; 1600px; /* agnohse to. Gia na to deis to orizo */
		background-color&#58; grey; 
	&#125; 
	#sidebar &#123;
		height&#58; 500px; /* agnohse to. Gia na to deis to orizo */
		background&#58; red;
		&#125;
	@media screen and &#40;min-width&#58; 1220px&#41; &#123; 
		#sidebar &#123;
			width&#58; 200px; /* to width pou zitises gia to sidebar sou */
			position&#58; absolute; /* an to theleis na kollaei kanto fixed */
			top&#58; 0; 
			right&#58; 50%; 
			margin-right&#58; -610px; /* &#91;&#40;width #container&#41; / 2&#93; + &#40;width #sidebar&#41;
			                         an to theleis apo aristera allazeis ta "right" se "left" */
		&#125; 
	&#125; 
</style> 
</head> 

<body> 
	<div class="container">
		<!-- agnohse ta inline styles -->
		<div id="content" style="font-size&#58; 40px; text-align&#58; center; color&#58; white;">content</div>
      	<div id="sidebar" style="font-size&#58; 40px; text-align&#58; center; color&#58; white;">sidebar content</div>
	</div>
</body> 
</html> 
.ninja { color: black; visibility: hidden !important; }

rafinos
Δημοσιεύσεις: 304
Εγγραφή: 15 Μάιος 2011 00:20
Επικοινωνία:

Πρόβλημα με sidebar και resize browser

Δημοσίευση από rafinos » 29 Ιούλ 2013 22:10

Ωραίος!!!!
Ευχαριστώ πολύ!!!! :)

Απάντηση

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

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

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