Προς το περιεχόμενο
  • 0
Συνδεθείτε  
rafinos

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

Ερώτηση

Γεια σας...

Φτιάχνω μια ιστοσελίδα και έχω ένα κεντρικό 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>

Κοινοποιήστε αυτήν την ανάρτηση


Σύνδεσμος στην ανάρτηση
Κοινοποίηση σε άλλες σελίδες

11 απαντήσεις σε αυτή την ερώτηση

Προτεινόμενες αναρτήσεις

  • 0

Πριν φτιάξεις το οτιδήποτε σκέψου να φτιάξεις το site με responsive rules για να είναι συμβατό με όλες τις συσκευές απο όπου θα μπαίνουν οι επισκέπτες της σελίδας σου.

 

Όσον αφορα αυτο που ζητάς, νομίζω πως καλο θα ήταν να παίξεις με το position στο CSS. Για παράδειγμα να βάλεις και στα 2 divs το position:absolute; Και να παίξεις λίγο για να δεις πως ακριβώς θέλεις να είναι.

 

Επίσης δοκίμασε να βάλεις float:right; Και στο content για να δεις τι θα σου βγάλει.

 

Καλη συνέχεια!

Κοινοποιήστε αυτήν την ανάρτηση


Σύνδεσμος στην ανάρτηση
Κοινοποίηση σε άλλες σελίδες
  • 0

Επειδή εκεί που πάει η ανάπτυξη έχει κεντρικό χαρακτηριστικό το mobile καλό θα ήταν πλέον ακόμα και στα αρχικά βήματα να χρησιμοποιείς βιβλιοθήκες και  frameworks.

 

Ένα καλό παράδειγμα ειναι το Bootstrap. Ειναι responsive και αρκετά φιλικό.

Κοινοποιήστε αυτήν την ανάρτηση


Σύνδεσμος στην ανάρτηση
Κοινοποίηση σε άλλες σελίδες
  • 0

Πριν φτιάξεις το οτιδήποτε σκέψου να φτιάξεις το site με responsive rules για να είναι συμβατό με όλες τις συσκευές απο όπου θα μπαίνουν οι επισκέπτες της σελίδας σου.

 

Όσον αφορα αυτο που ζητάς, νομίζω πως καλο θα ήταν να παίξεις με το position στο CSS. Για παράδειγμα να βάλεις και στα 2 divs το position:absolute; Και να παίξεις λίγο για να δεις πως ακριβώς θέλεις να είναι.

 

Επίσης δοκίμασε να βάλεις float:right; Και στο content για να δεις τι θα σου βγάλει.

 

Καλη συνέχεια!

 

με position: absolute; φεύγουν και τα δύο στην αριστερή μεριά χωρίς να κάνω το οτιδήποτε...

 

Επίσης θεωρώ ότι το να χρησιμοποιεί κάποιος "αγνό" κώδικα είναι καλύτερο από τα έτοιμα frameworks ακόμη και όταν αυτός σου κάνει τη ζωή αρκετά δύσκολη :P

Κοινοποιήστε αυτήν την ανάρτηση


Σύνδεσμος στην ανάρτηση
Κοινοποίηση σε άλλες σελίδες
  • 0

με position: absolute; φεύγουν και τα δύο στην αριστερή μεριά χωρίς να κάνω το οτιδήποτε...

 

Επίσης θεωρώ ότι το να χρησιμοποιεί κάποιος "αγνό" κώδικα είναι καλύτερο από τα έτοιμα frameworks ακόμη και όταν αυτός σου κάνει τη ζωή αρκετά δύσκολη :P

 

Όταν θα πρέπει να υλοποιείς σελίδες πέρα απο τη πλάκα σου και ειδικότερα όταν ολοι έχουν ήδη προσαρμοστεί και αναπτύσσουν εφαρμογές τότε εσύ και δε το λέω προσωπικά σε σένα, θα μπορείς να προτείνεις το δικό σου "custom" κώδικα...

Κοινοποιήστε αυτήν την ανάρτηση


Σύνδεσμος στην ανάρτηση
Κοινοποίηση σε άλλες σελίδες
  • 0

Ο custom κώδικας από πότε είναι χειρότερος;;;

Δεν μιλάω προσωπικά για εμένα γιατί όπως κατάλαβες είμαι ολίγο άσχετος από css... αλλά γενικότερα...

Κοινοποιήστε αυτήν την ανάρτηση


Σύνδεσμος στην ανάρτηση
Κοινοποίηση σε άλλες σελίδες
  • 0

Ο custom κώδικας από πότε είναι χειρότερος;;;

Δεν μιλάω προσωπικά για εμένα γιατί όπως κατάλαβες είμαι ολίγο άσχετος από css... αλλά γενικότερα...

 

Δεν είπα οτι είναι χειρότερος. Όπως και τίποτα στον προγραμματισμό δεν είναι απόλυτο έτσι και εδώ δε μπορώ να πώ τι είναι καλύτερο και τι είναι χειρότερο. 

 

Αναφορικά με τι είναι καλύτερο : custom ή όχι κώδικας, αυτο εξαρτάτε απο την εφαρμογή που το θες. 

 

Εγω επισήμανα το που πηγαίνει η τεχνολογία και πως μπορείς και εσυ απο τα πρώτα σου βήματα να επενδύσεις στο να μάθεις κάτι που αρχικά σου φαίνεται πιο δύσκολο ώστε αργότερα να έχει περισσότερες επιλογές. 

 

Ναι αλλα ο custom κώδικας είναι γρήγορος και το θέλω απλά για να κάνω την δουλειά μου.

 

Αμα αυτό που θες να κάνεις δε σε νοιάζει η συντήρηση και πόσο μάλλον αν αντι για ενα project έχεις αλλα 10-20 να τρέχουν τότε θα αναγνωρίσεις την αξία μιας καλά δομημένης βιβλιοθήκης. 

Κοινοποιήστε αυτήν την ανάρτηση


Σύνδεσμος στην ανάρτηση
Κοινοποίηση σε άλλες σελίδες
  • 0

Συμφωνούμε απόλυτα ;)

Απλά ρε παιδιά κάποιος πιο απλός τρόπος στο να κάνω αυτό που θέλω δεν υπάρχει;;; :P

Κοινοποιήστε αυτήν την ανάρτηση


Σύνδεσμος στην ανάρτηση
Κοινοποίηση σε άλλες σελίδες
  • 0

Συμφωνούμε απόλυτα ;)

Απλά ρε παιδιά κάποιος πιο απλός τρόπος στο να κάνω αυτό που θέλω δεν υπάρχει;;; :P

 

Για δες αν αυτό σου κάνει:

http://jsfiddle.net/x6vg7/

Κοινοποιήστε αυτήν την ανάρτηση


Σύνδεσμος στην ανάρτηση
Κοινοποίηση σε άλλες σελίδες
  • 0

Για δες αν αυτό σου κάνει:

http://jsfiddle.net/x6vg7/

Ακριβώς το ίδιο πρόβλημα πάλι... σε resize... μπαίνει πάνω στο content

Κοινοποιήστε αυτήν την ανάρτηση


Σύνδεσμος στην ανάρτηση
Κοινοποίηση σε άλλες σελίδες
  • 0

Ακριβώς το ίδιο πρόβλημα πάλι... σε resize... μπαίνει πάνω στο content

Λογικά κάτι δεν έχω καταλάβει σωστά. Ο πιο κάτω κώδικας δουλεύει.

<html>
  <head>
  <style type='text/css'>
  #wrapper{min-width:1050px;background-color:yellow;}
#content{
		font-size: 14px;
		margin:0 auto;
		width: 500px;
		padding: 15px;
		height: 570px;
		border-left: 1px solid #432973;
		border-right: 1px solid #432973;
		border-bottom: 1px solid #432973;
		background-color: #fff;
		color: #432973;
	}

#sidebar{
		width: 250px;
		height: 500px;
		border: 1px solid #432973;
		float: right;
    background-color:green;
	}
  </style>
    <title></title>
    <meta content="">
    <style></style>
  </head>
<body>
  <div id="wrapper">
	<div id="sidebar">
sidebar
	</div>
	<div id="content">
       main content
	</div>
  </div>
</body>
</html>

Φτιάξε ενα νέο html  αρχείο και κάνε paste. Αν δε θες αυτο το αποτέλεσμα τότε διευκρίνισε καλύτερα ώστε να σε βοηθήσουμε κατάλληλα. 

 

Το 

  #wrapper{min-width:1050px;background-color:yellow;}

To min-width: ουσιαστικά λέει στον  Browser οτι το μάκρος του παραθύρου (div) μπορεί να είναι το μικρότερο μέχρι 1050px. έτσι δε μπορεί κάτι να το επικαλύψει.

Κοινοποιήστε αυτήν την ανάρτηση


Σύνδεσμος στην ανάρτηση
Κοινοποίηση σε άλλες σελίδες
  • 0

Τώρα κατάλαβα τι παίζει!!!

Σε ευχαριστώ πολύ ;)

 

Δεν είχα υπολογίσει σωστά τα pixel tou wrapper :P

Κοινοποιήστε αυτήν την ανάρτηση


Σύνδεσμος στην ανάρτηση
Κοινοποίηση σε άλλες σελίδες

Δημιουργήστε έναν λογαριασμό ή συνδεθείτε για να σχολιάσετε

Πρέπει να είστε μέλος για να αφήσετε σχόλιο

Δημιουργία λογαριασμού

Εγγραφείτε με νέο λογαριασμό στην κοινότητα μας. Είναι εύκολο!

Εγγραφείτε για έναν νέο λογαριασμό

Σύνδεση

Έχετε ήδη λογαριασμό; Συνδεθείτε εδώ.

Συνδεθείτε τώρα
Συνδεθείτε  
×
×
  • Δημιουργία νέου...

Χρήσιμες πληροφορίες

Με την περιήγησή σας στο insomnia.gr, αποδέχεστε τη χρήση cookies που ενισχύουν σημαντικά την εμπειρία χρήσης.