Πρόβλημα με Sidebar

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

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

Απάντηση
giorgos-1000
Δημοσιεύσεις: 30
Εγγραφή: 06 Ιαν 2012 22:11
Τοποθεσία: Θεσσαλονίκη

Πρόβλημα με Sidebar

Δημοσίευση από giorgos-1000 » 26 Ιαν 2012 14:26

Θέλω το περιεχόμενο της σελίδας π.χ. κείμενο να εμφανίζεται δίπλα στην sidebar,όμως όταν βάζω κείμενο η sidebar κατεβαίνει.

Να ο κώδικας του αρχείου index.html

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

<html>

<head>

<title></title>

<link rel="stylesheet" href="style.css" type="text/css">

</head>

<body>

<div id="container">

<div id="header">

</div><!-- end header -->

<div id="navigation">

</div><!-- end navigation -->

<div id="main_content">

</div><!-- end main content -->

<div id="sidebar">

</div><!-- end sidebar -->

<div id="footer">

</div><!-- end footer -->

</div><!-- end container -->

</body>

</html>

Να και ο κώδικας του αρχείου style.css

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

body &#123;
margin&#58; 0;
background-color&#58; #A4E666;
&#125;


#container &#123;
background-image&#58;url&#40;main_back.gif&#41;;
background-repeat&#58;repeat;
margin&#58; 0 auto;
padding&#58; 0px;
width&#58; 900px;
height&#58;800px;
&#125;

#header &#123;
width&#58; 900px; 
height&#58; 117px;
margin&#58; 0;
padding&#58; 0;
background-image&#58;url&#40;main_banner.jpg&#41;;
&#125;

#navigation &#123;
background-color&#58;#4E4F3D;
width&#58; 900px; 
height&#58; 31px;
padding-top&#58;9px;
&#125;

#main_content &#123;
width&#58;900px;
margin&#58;0 auto;
background&#58;#94e24a;
&#125; 

#sidebar &#123;
padding&#58;10px;
margin&#58;10px;
float&#58;right;
width&#58;120px;
background-color&#58;#89CF48;
&#125;

#footer &#123; 
float&#58;left; 
background-color&#58;#4E4F3D;
width&#58; 900px; 
height&#58; 24px; 
padding-top&#58;10px; 
text-align&#58;center; 
font-family&#58;Verdana; 
font-size&#58;11px; 
color&#58;#FFFFFF; 
&#125;

giorgos-1000
Δημοσιεύσεις: 30
Εγγραφή: 06 Ιαν 2012 22:11
Τοποθεσία: Θεσσαλονίκη

Πρόβλημα με Sidebar

Δημοσίευση από giorgos-1000 » 26 Ιαν 2012 14:28

Μήπως πρέπει να βάλω την ετικέτα <div id="sidebar"> μέσα στην <div id="main_content">;

TheELF
Δημοσιεύσεις: 13
Εγγραφή: 25 Ιαν 2012 17:20
Τοποθεσία: βαρδάρης Θεσσαλονίκη

Πρόβλημα με Sidebar

Δημοσίευση από TheELF » 26 Ιαν 2012 16:17

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

#main_content &#123; 
width&#58;900px; 
margin&#58;0 auto; 
background&#58;#94e24a; 
&#125; 

#sidebar &#123; 
padding&#58;10px; 
margin&#58;10px; 
float&#58;right; 
width&#58;120px; 
background-color&#58;#89CF48; 
&#125;
Δοκίμασε στο main_content να προσθέσεις και ένα float:left για να κολλήσει η sidebar από δίπλα, το float:right στην sidebar απλά της λέει να κολλάει δεξιά

giorgos-1000
Δημοσιεύσεις: 30
Εγγραφή: 06 Ιαν 2012 22:11
Τοποθεσία: Θεσσαλονίκη

Πρόβλημα με Sidebar

Δημοσίευση από giorgos-1000 » 26 Ιαν 2012 17:34

Εντάξει το έκανα! :D
Έπρεπε να βάλω την <div id="sidebar"> μέσα στην <div id="main_content"> και το περιεχόμενο της σελίδας να αρχίζει μετά το </div><!-- end sidebar --> !
:D

Απάντηση

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

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

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