πρόβλημα με css σελίδας

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

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

Απάντηση
argate7
Δημοσιεύσεις: 233
Εγγραφή: 30 Σεπ 2009 02:38

πρόβλημα με css σελίδας

Δημοσίευση από argate7 » 18 Σεπ 2012 12:38

Καλησπέρα συμφορουμίτες,

Έχω ένα πρόβλημα σε μια σελίδα που δοκιμάζω να φτιάξω. Το πρόβλημα μου ποιο είναι??

Λοιπόν, τρέχω τη σελίδα σε 4 pc, 2 mac, ένα ipad ακόμα και σε 2 iphone και η σελίδα αυτή εμφανίζεται κομπλέ. Όταν όμως ένας φίλος πήγε να μπει από το netbook δεν τα κατάφερε.

Που εντοπίζεται το πρόβλημα? Έχω χωρίσει τη σελίδα σε 2 μέρη (αριστερά - το μενού και το λογότυπο, δεξιά - το περιεχόμενο). Το αριστερό μέρος είναι πάντα σταθερό και το δεξί έχει scrolling. Το πρόβλημα στο netbook είναι ότι δεν εμφανίζεται όλο το μενού παρά μόνο 2-3 επιλογές από αυτό. Οι υπόλοιπες είναι κρυμμένες.

Τί κάνω? Παίζω με το overflow και το hidden σε αυτή την περίπτωση? Δε θέλω όμως το αριστερό μέρος να κινείται όταν ο χρήστης κάνει scrolling για να δει τη σελίδα (το δεξί μέρος όπου και βρίσκεται το περιεχόμενο της).


Ευχαριστώ εκ των προτέρων για την πολύτιμη βοήθεια σας!!

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

Cretan1986
Δημοσιεύσεις: 79
Εγγραφή: 14 Απρ 2012 13:57

πρόβλημα με css σελίδας

Δημοσίευση από Cretan1986 » 18 Σεπ 2012 13:02

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

argate7
Δημοσιεύσεις: 233
Εγγραφή: 30 Σεπ 2009 02:38

πρόβλημα με css σελίδας

Δημοσίευση από argate7 » 18 Σεπ 2012 13:09

Κοίταξε να δεις φίλε μου,

Γενικότερα το κάνει αυτό. Ανεξαρτήτου browser και ανάλυση οθόνης.

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

Cretan1986
Δημοσιεύσεις: 79
Εγγραφή: 14 Απρ 2012 13:57

πρόβλημα με css σελίδας

Δημοσίευση από Cretan1986 » 18 Σεπ 2012 13:43

το έχεις κάπου live να το δούμε;

argate7
Δημοσιεύσεις: 233
Εγγραφή: 30 Σεπ 2009 02:38

πρόβλημα με css σελίδας

Δημοσίευση από argate7 » 18 Σεπ 2012 17:45

Δεν το έχω σε κάποιο server. Τοπικά το έχω μόνο. Τέλος πάντων. Μπορεί κάποιος να μου πει τί πρέπει να κάνω για να μην μπαίνει το ένα sidebar μέσα ή κάτω από το άλλο?

argate7
Δημοσιεύσεις: 233
Εγγραφή: 30 Σεπ 2009 02:38

πρόβλημα με css σελίδας

Δημοσίευση από argate7 » 18 Σεπ 2012 17:51

Βάζοντας και στα 2 sidebars την εντολή

position:static; κάνει αυτό που θέλω. Αλλά το πρόβλημα είναι ότι η αριστερή πλέον sidebar ανεβαίνει όταν κάνω scrolling ενώ εγώ δεν το θέλω αυτό. Μπορεί κάποιος να βοηθήσει?

Άβαταρ μέλους
Christianago
Δημοσιεύσεις: 332
Εγγραφή: 12 Νοέμ 2009 13:36

πρόβλημα με css σελίδας

Δημοσίευση από Christianago » 18 Σεπ 2012 17:55

ειναι σημαντικο να δουμε τον κωδικα σου. μπορει το προβλημα να βρισκεται σε αλλο σημειο.

argate7
Δημοσιεύσεις: 233
Εγγραφή: 30 Σεπ 2009 02:38

πρόβλημα με css σελίδας

Δημοσίευση από argate7 » 18 Σεπ 2012 18:07

Σας παραθέτω τον κώδιακα του css

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


@charset "UTF-8";
/* CSS Document */

body{
	background-color: #fff;
	padding:0;
	margin:0;
	width:1200px;
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	height:100%;
}

#leftside{
	float: left;
	height: 100%;
	width: 400px;
	position:static;
	background: -moz-linear-gradient(left, #000, #fff);
	background: -webkit-gradient(linear, left center, right center, from(#000), to(#fff));
}

#rightside{
	float: right;
	height: 100%;
	width: 800px;
	position:static;
}

#logocontainer{
	float: none;
	height: 200px;
	width: 260px;
	background-image: url(logotypo.png);
	margin-right: auto;
	margin-left: auto;
	margin-top: 100px;
}

#menucontainer{
	margin-left: auto;
	height: auto;
	margin-top: 100px;
	clear: both;
	float: right;
	margin-right: auto;
	overflow: auto;
	visibility: visible;
}

ul.navigation {
	height:auto;
	list-style: none;
	padding: 0;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}

ul.navigation li {
	margin: 0;
	padding: 0;
}

ul.navigation a {
	display: block;
	float: none;
	margin-bottom: 5px;
	font-size: 18px;
	font-weight: 400;
	text-decoration: none;
	color: #FFF;
	text-align: right;
	margin-right: 100px;
	padding-top: 8px;
	padding-right: 15px;
	padding-bottom: 8px;
	padding-left: 15px;
}

ul.navigation a:hover, ul.navigation a.selected {
	font-style: oblique;
	font-weight: bolder;
	color: #F09;
}

ul.navigation a:focus {
    outline: none;
}


#slidercontainer{
	height: 300px;
	width: 550px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 20px;
	-moz-box-shadow: 0px 0px 5px 5px #888;
	-webkit-box-shadow: 0 0 5px 5px#888;
	box-shadow: 0 0 5px 5px #888;
	background-color: #999;
}

ul.cubeslider2-navarea{
	list-style: none;
	overflow: hidden;
}

ul.cubeslider2-navarea li{
	display: block;
	float: left;
	cursor: pointer;
	padding: 7px;
margin:right: 5px;
}

ul.cubeslider2-navarea li:hover{
background: lightyellow;
}

#contentcontainer{
	height: auto;
	width: auto;
	min-height: 400px;
	margin-top: 50px;
	margin-right: auto;
	margin-left: auto;
}

#title{
	font-size: 24px;
	color: #F09;
	clear: both;
	height: 40px;
	width: 100%;
	margin-top: auto;
	margin-bottom: auto;
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}

#content{
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-size: 16px;
	color: #333;
	margin-top: 10px;
	background-image: url(contentbg.png);
	background-position: center;
	background-repeat: no-repeat;
}
και εδώ τον κώδικα της σελίδας

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



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http&#58;//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>aaa</title>
<link rel="stylesheet" href="mycss.css" type="text/css"/>
<script type='text/javascript' src='https&#58;//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script type='text/javascript' src='js/modernizr.custom.13303.js'></script>
<script type='text/javascript' src='js/jquery.shockwave.js'>

/***********************************************
* Shockwave 3D slideshow script- © Dynamic Drive &#40;www.dynamicdrive.com&#41;
* This notice MUST stay intact for legal use
* Visit http&#58;//www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

</script> 
<script type='text/javascript' src='js/jquery.shockwave.effects.js'></script>


<script>

var imagesDataArray = &#91; //For demos, define a single set of images to be used in all of the demos below
   &#123;
      src&#58; 'images/1.jpg'
   &#125;,
   &#123;
      src&#58; 'images/2.jpg'
   &#125;,
   &#123;
      src&#58; 'images/3.jpg'
   &#125;,
   &#123;
      src&#58; 'images/4.jpg'
   &#125;
&#93;;


jQuery&#40;function&#40;&#41;&#123;

	$&#40;'#cubeslider2'&#41;.shockwave&#40;imagesDataArray, &#123;
   'slider-type'&#58; 'CubeSlider',
   'rotation-duration'&#58; 600,  // in ms
   'tiles-in-x'&#58; 5,
   'tiles-in-y'&#58; 1,
   'wave-fixed-origin'&#58; &#91;0, 0&#93;,
	'standard-control-buttons-area'&#58; null,
   'autostart-slideshow'&#58; true,
   'viewport-dimension'&#58; &#123;width&#58; 550, height&#58; 300&#125;
	&#125;&#41;;

&#125;&#41;

</script>
</head>

<body>

<div id="leftside">
	<div id="logocontainer"></div>
    <div id="menucontainer">
    		<ul class="navigation">
				<li><a href="a.php" class="selected">ααααααααααα</a></li>
				<li><a href="b.php">βββββββββ</a></li>
				<li><a href="c.php">γγγγγγγγγγγ</a></li>
				<li><a href="d.php">δδδδδδδδδ</a></li>
				<li><a href="e.php">εεεεεεεεεε</a></li>
				<li><a href="f.php">ζζζζζζζζζζζ</a></li>
        	</ul>
    </div>
</div>

<div id="rightside">
	<div id="slidercontainer">
    	<div id='cubeslider2'></div>
		<ul class="cubeslider2-navarea"></ul>
    </div>
    <div id="contentcontainer">
    	<div id="title">Τίτλος</div>
        <div id="content">
          Εδώ είναι το περιεχόμενο....
        </div>
    </div>
</div>
</body>
</html>

Cretan1986
Δημοσιεύσεις: 79
Εγγραφή: 14 Απρ 2012 13:57

πρόβλημα με css σελίδας

Δημοσίευση από Cretan1986 » 18 Οκτ 2012 16:34

δοκίμασε να αφαιρέσεις το height:100%; από το #leftside

Απάντηση

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

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

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