Προς το περιεχόμενο

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

rafinos

Από τον rafinos
στο Web Design - Development

 Share

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

rafinos Grand Master

rafinos

Δημοσ.
Δημοσ.

Γεια σας...

Φτιάχνω μια ιστοσελίδα και έχω ένα κεντρικό 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>
Συνδέστε για να σχολιάσετε
Κοινοποίηση σε άλλες σελίδες
argate7 Mentor

argate7

Δημοσ.
Δημοσ.

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

 

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

 

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

 

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

Συνδέστε για να σχολιάσετε
Κοινοποίηση σε άλλες σελίδες
sougiasdj Proficient

sougiasdj

Δημοσ.
Δημοσ.

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

 

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

Συνδέστε για να σχολιάσετε
Κοινοποίηση σε άλλες σελίδες
rafinos Grand Master

rafinos

Δημοσ.
  • Μέλος
Δημοσ.

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

 

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

 

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

 

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

 

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

 

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

Συνδέστε για να σχολιάσετε
Κοινοποίηση σε άλλες σελίδες
sougiasdj Proficient

sougiasdj

Δημοσ.
Δημοσ.

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

 

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

 

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

Συνδέστε για να σχολιάσετε
Κοινοποίηση σε άλλες σελίδες
rafinos Grand Master

rafinos

Δημοσ.
  • Μέλος
Δημοσ.

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

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

Συνδέστε για να σχολιάσετε
Κοινοποίηση σε άλλες σελίδες
sougiasdj Proficient

sougiasdj

Δημοσ.
Δημοσ.

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

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

 

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

 

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

 

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

 

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

 

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

Συνδέστε για να σχολιάσετε
Κοινοποίηση σε άλλες σελίδες
sougiasdj Proficient

sougiasdj

Δημοσ.
Δημοσ.

Ακριβώς το ίδιο πρόβλημα πάλι... σε 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. έτσι δε μπορεί κάτι να το επικαλύψει.

Συνδέστε για να σχολιάσετε
Κοινοποίηση σε άλλες σελίδες

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

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

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

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

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

Σύνδεση

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

Συνδεθείτε τώρα
 Share
Προς την λίστα θεμάτων
  • Δημιουργία νέου...