Βοήθεια με το σήσιμο ενος layout..

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

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

Άβαταρ μέλους
dionisis71
Δημοσιεύσεις: 237
Εγγραφή: 04 Μάιος 2009 22:15
Επικοινωνία:

Βοήθεια με το σήσιμο ενος layout..

Δημοσίευση από dionisis71 » 17 Οκτ 2011 17:14

Kypros Lambrou έγραψε:

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

<body>
	<div id="header">
		<div class="top_left_logo"> <!-- LOGO IMAGE HERE -->   </div>
		<div class="top_right_menu"> 
			<!-- ALL MEMBERS MENU HERE -->
		</div>
	</div>

	<div id="main_page">
		<!-- Main Page Content Here -->
	</div>

</body>
σε ευχαριστώ για την απάντηση σου, σε ποιές περιπτώσεις στα divs καλούμε css με class..;

Kypros Lambrou
Δημοσιεύσεις: 96
Εγγραφή: 17 Οκτ 2011 13:29

Βοήθεια με το σήσιμο ενος layout..

Δημοσίευση από Kypros Lambrou » 17 Οκτ 2011 17:17

dionisis71 έγραψε:'Ετσι φαντάζομαι περίπου το header μου, και η πρόταση του Kypros Lambrou είναι η επικρατέστερη από αυτές που σκεφτόμουνα.
Ωραία, άρα το μόνο που χρειάζεσαι τώρα είναι να προσθέσεις ακόμα ένα div μέσα στο header ακριβώς μετά το top_right_menu όπου θα έχεις το μενού για τα μέλη σου.

Με λίγα λόγια το header σου αν ακολουθήσεις το δικό μου παράδειγμα θα έχει περίπου ώς εξής:

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

<div id="header">
      <div class="top_left_logo"> <!-- LOGO IMAGE HERE -->   </div>
      <div class="top_right_menu">
         <!-- MENU FOR EVERYONE HERE -->
      </div>
      <div class="top_right_member_menu">
         <!-- ALL MEMBERS MENU HERE -->
      </div>
   </div> 

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

Βοήθεια με το σήσιμο ενος layout..

Δημοσίευση από apsuh0s » 17 Οκτ 2011 17:20

Μια χαρά είναι του Kypros Lambrou, απλώς και αυτόν τον μπέρδεψε το "από κάτω"..

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

<body>
	<div id="header">
    	<div id="logo"><!-- logo, h1, h2, hgroups --></div>
        <div id="menus">
        	<ul class="forall">
            	<li>..</li>
                <li>..</li>
            </ul>
            <ul class="members">
            	<li>..</li>
                <li>..</li>
            </ul>
        </div>
    </div><!-- #header -->
    <div id="main">
    	<!-- main content -->
    </div><!-- #main -->
</body>
</html>
.ninja { color: black; visibility: hidden !important; }

Kypros Lambrou
Δημοσιεύσεις: 96
Εγγραφή: 17 Οκτ 2011 13:29

Βοήθεια με το σήσιμο ενος layout..

Δημοσίευση από Kypros Lambrou » 17 Οκτ 2011 17:22

dionisis71 έγραψε: σε ευχαριστώ για την απάντηση σου, σε ποιές περιπτώσεις στα divs καλούμε css με class..;
Ουσιαστικά το ID χρησιμοποιείται για να υποδηλώσει κάποια containers (div εδώ) που είναι μοναδικά σε όλη την σελίδα και δεν επαναλαμβάνονται.

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

Γενικά σου προτείνω να χρησιμοποιείς στα εξωτερικά σου containers div και σε όλα τα υπόλοιπα "παρακλάδια" θα ήταν καλύτερο να χρησιμοποιείς class.

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

Βοήθεια με το σήσιμο ενος layout..

Δημοσίευση από apsuh0s » 17 Οκτ 2011 17:25

dionisis71 έγραψε:σε ευχαριστώ για την απάντηση σου, σε ποιές περιπτώσεις στα divs καλούμε css με class..;
Τα ids σε μια σελίδα είναι μοναδικά.. Αντιθέτως οι classes μπρούν να εφαρμόζονται όσες φορές θέλεις στα elements της σελίδας σου. Επομένως είναι θέμα οργάνωσης της δομής και των styles, το τι θα εφαρμόσεις και που.
.ninja { color: black; visibility: hidden !important; }

Άβαταρ μέλους
dionisis71
Δημοσιεύσεις: 237
Εγγραφή: 04 Μάιος 2009 22:15
Επικοινωνία:

Βοήθεια με το σήσιμο ενος layout..

Δημοσίευση από dionisis71 » 17 Οκτ 2011 17:28

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

ευχαριστώ και πάλι..!!

Άβαταρ μέλους
dionisis71
Δημοσιεύσεις: 237
Εγγραφή: 04 Μάιος 2009 22:15
Επικοινωνία:

Βοήθεια με το σήσιμο ενος layout..

Δημοσίευση από dionisis71 » 18 Οκτ 2011 21:19

Το άτιμο&#8230;. μου χει φάει την ψυχή.. το μενου δεν λέει να κατέβει με τίποτα..(χα.. θυμήθηκα ένα ανέκδοτο..). Στο #menudiv έχω δοκιμάσει αρκετά πράγματα αλλά αφού αυτό επιμένει, το άφησα και εγώ κενό&#8230; Στο body δεν έχω βάλει repeat και παίζει μια χαρά.. χρειάζεται να το προσθέσω..;

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

body
&#123;
    background-image&#58; url&#40;'../Images/pattern1.png'&#41;;
    background-color&#58; #736458;
&#125;

#header
&#123;
    width&#58; 100%;
    top&#58; 5px;
    left&#58; 0px;
    position&#58; absolute;
    background-color&#58; #696758;
    -moz-opacity&#58; 0.75;
	opacity&#58;.75;
	filter&#58; alpha&#40;opacity=75&#41;;
&#125;
    
#logodiv
&#123;
    border&#58; thin solid #000000;
    float&#58; left;
&#125;

.logo
&#123;
    margin&#58; 10px;
    /*-moz-opacity&#58; 0.75;
	opacity&#58;.75;
	filter&#58; alpha&#40;opacity=75&#41;;*/
&#125;

#menudiv
&#123;

&#125;

.menu
&#123;
    font-family&#58; Arial;
    font-size&#58; large;
    font-weight&#58; bold;
    margin-left&#58; 5px;
&#125;

.primaryStaticHover
&#123;
   color&#58; #800000;
   background&#58; #f0e7d7;
&#125;
Ευχαριστώ
Συνημμένα
myheader.jpg

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

Βοήθεια με το σήσιμο ενος layout..

Δημοσίευση από apsuh0s » 18 Οκτ 2011 21:27

Δώσε και την HTML

Όσο για το repeat που ρωτάς, κάνει repeat το pattern σου και στους δύο άξονες από default. Συνεπώς δεν χρειάζεται..
.ninja { color: black; visibility: hidden !important; }

Άβαταρ μέλους
dionisis71
Δημοσιεύσεις: 237
Εγγραφή: 04 Μάιος 2009 22:15
Επικοινωνία:

Βοήθεια με το σήσιμο ενος layout..

Δημοσίευση από dionisis71 » 18 Οκτ 2011 21:29

εεεφτασεεεηηηη....

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

<%@ Master Language="VB" CodeFile="site.master.vb" Inherits="site" %>

<!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 runat="server">
    <title></title>
    <asp&#58;ContentPlaceHolder id="head" runat="server">
    </asp&#58;ContentPlaceHolder>
    <link href="Styles/Site.css" rel="stylesheet" type="text/css" />
</head>
<body id="body" runat="server">
    <form id="form1" runat="server">

    <div id="header">
        <div id="logodiv">
            <%--<img id="logo" src="Images/logo.png" alt="logo"/>--%>
            <p style="font-family&#58; Arial, Helvetica, sans-serif; font-size&#58; x-large; font-weight&#58; bold; color&#58; #FFFFFF" class="logo">My Site's</p>
            <p style="font-family&#58; Arial, Helvetica, sans-serif; font-size&#58; x-large; font-weight&#58; bold; color&#58; #FFFFFF" class="logo">Logo</p>
        </div>
        <div id="Menudiv">
            <asp&#58;Menu ID="Menu1" runat="server" Orientation="Horizontal" ForeColor="#C5BC8E" StaticMenuStyle-CssClass="menu">
                <Items>
                    <asp&#58;MenuItem Text="Item1" Value="Welcome"></asp&#58;MenuItem>
                    <asp&#58;MenuItem Text="Item2" Value="Contact"></asp&#58;MenuItem>
                    <asp&#58;MenuItem Text="Item3" Value="Contact"></asp&#58;MenuItem>
                </Items>
            <StaticHoverStyle CssClass="primaryStaticHover"/>   
            <DynamicMenuItemStyle CssClass="primaryDynamicMenuItem"/>
            </asp&#58;Menu>
        </div>
    </div>

    <div id="mainconent">
        <asp&#58;ContentPlaceHolder id="main" runat="server">
        
        </asp&#58;ContentPlaceHolder>
    </div>
    </form>
</body>
</html>

Kypros Lambrou
Δημοσιεύσεις: 96
Εγγραφή: 17 Οκτ 2011 13:29

Βοήθεια με το σήσιμο ενος layout..

Δημοσίευση από Kypros Lambrou » 18 Οκτ 2011 21:41

Όπως σωστά είπε και ο apsuh0s πιο πάνω δεν χρειάζεσαι repeat αφού κάνει από default πάντα όπως το θέλεις.

Για το menudiv για να καταλάβεις πως δουλεύει θα σου πρότεινα προτού αλλάξεις οτιδήποτε να του βάλεις πρώτα προσωρινά ένα background με κάποιο χρώμα για να δεις ότι ξεκινάει από πίσω από την εικόνα σου και όχι απο εκεί που νομίζεις όπως φαίνεται ότι ξεκινάει.
Για να το διορθώσεις βάλε και σε αυτό να κάνει float:left; και μετά με ένα απλό margin-top:10px; ή όσο εσύ το θέλεις θα έρχεται σιγά σιγά προς τα κάτω.

Άβαταρ μέλους
dionisis71
Δημοσιεύσεις: 237
Εγγραφή: 04 Μάιος 2009 22:15
Επικοινωνία:

Βοήθεια με το σήσιμο ενος layout..

Δημοσίευση από dionisis71 » 18 Οκτ 2011 21:55

..και θα είναι συμβατό στους περισσότερους browsers χωρίς repeat..;

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

#menudiv
&#123;
    background-color&#58; #FF0000;
    float&#58;left;
    margin-top&#58;10px;
&#125;
Έχω δοκιμάσει τόσα πολλά που δεν θυμάμαι τι έχω δοκιμάσει και τι όχι... δυστυχώς αγνοεί τα πάντα, ακόμα και το χρώμα.. είχα δοκιμάσει να του βάλω πιο πριν και border και τα αγνοεί επιδεικτικα.. ούτε και με το float left έγινε τίποτα... :roll:

Άβαταρ μέλους
dionisis71
Δημοσιεύσεις: 237
Εγγραφή: 04 Μάιος 2009 22:15
Επικοινωνία:

Βοήθεια με το σήσιμο ενος layout..

Δημοσίευση από dionisis71 » 18 Οκτ 2011 22:02

Θα το πω και το ανέκδοτο...

-Αχ γιατρέ μου είμαι πολύ λιγούρης&#8230; βλέπω γυναίκα και μου φτάνει στο λαιμό μου&#8230; τι να κάνω.. σήμερα έχω να πάω και σε ένα πάρτυ, όλο και με κάποια κοπέλλα θα χωρέψω, δεν θέλω να γίνω ρεζίλι&#8230; καταλαβαίνεις γιατρέ μου..
-Είναι πολύ απλό αγαπητέ μου, πριν πας στο πάρτι θα τον δέσεις πάνω στο πόδι σου&#8230;
-Γιατρέ μου με έσωσες&#8230; σε ευχαριστώ πολύ..

Το βράδυ στην οικία του γιατρού χτυπάει το τηλέφωνο..

-Γιατρέ ελάτε γρήγορα.. εδώ ενός, &#8230;του έχει σηκωθεί το πόδι και δεν λέει να κατέβει με τίποτα&#8230;

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

Βοήθεια με το σήσιμο ενος layout..

Δημοσίευση από apsuh0s » 18 Οκτ 2011 22:03

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

<!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 runat="server">
    <title></title>
    <link href="Styles/Site.css" rel="stylesheet" type="text/css" />
</head>
<style>
body
&#123;
    background-image&#58; url&#40;'../Images/pattern1.png'&#41;;
    background-color&#58; #736458;
&#125;

#header
&#123;
    width&#58; 100%;
    top&#58; 5px;
    left&#58; 0px;
    position&#58; absolute;
    background-color&#58; #696758;
    -moz-opacity&#58; 0.75;
   opacity&#58;.75;
   filter&#58; alpha&#40;opacity=75&#41;;
&#125;
   
#logodiv
&#123;
    border&#58; thin solid #000000;
    float&#58; left;
	width&#58; 10%; /* diamorfose to. na dineis width otan kaneis float*/ 
&#125;

.logo
&#123;
    margin&#58; 10px;
    /*-moz-opacity&#58; 0.75;
   opacity&#58;.75;
   filter&#58; alpha&#40;opacity=75&#41;;*/
&#125;
.menu
&#123;
    font-family&#58; Arial;
    font-size&#58; large;
    font-weight&#58; bold;
    margin-left&#58; 5px;
&#125;
#Menudiv &#123; float&#58; right; width&#58; 88%; /* diamorfose to. exei margin left 5% logo tis diaforas me to logodiv &#40;100-10-88=2&#41;*/ &#125;
#Menudiv ul &#123; list-style&#58; none; &#125;
#Menudiv ul li &#123; float&#58; left; margin-right&#58; 20px; &#125;
.mainNav &#123; background&#58; yellow; padding&#58; 0; margin&#58; 0; &#125; /* dose ta katallila paddings margins gia na to fereis ekei pou theleis */
.secNav &#123; background&#58; navy; padding&#58; 0; margin&#58; 0;&#125;/* dose ta katallila paddings margins gia na to fereis ekei pou theleis */

.primaryStaticHover
&#123;
   color&#58; #800000;
   background&#58; #f0e7d7;
&#125;
.clearfix&#58;before,.clearfix&#58;after&#123;content&#58; "";display&#58; table;&#125;
.clearfix&#58;after&#123;clear&#58;both;&#125;
.clearfix&#123;zoom&#58;1;&#125;

</style>
<body>

    <div id="header" class="clearfix">
        <div id="logodiv">
        	<h1>To site mou</h1>
            <h2>Tagline tou site mou</h2>
        </div>
        <div id="Menudiv">
        	<ul class="mainNav clearfix">
            	<li><a href="#">list item 1</a></li>
                <li><a href="#">list item 2</a></li>
                <li><a href="#">list item 3</a></li>
            </ul>
            <ul class="secNav clearfix">
            	<li><a href="#">list item 1</a></li>
                <li><a href="#">list item 2</a></li>
                <li><a href="#">list item 3</a></li>
                <li><a href="#">list item 4</a></li>
            </ul>
        </div>
    </div>

    <div id="mainconent">

    </div>

</body>
</html>
Έσβησα τα δυναμικά στοιχεία που μου έδωσες και έκανα κάποιες αλλαγές στο markup σου. Φτιάξε ένα νέο document και δες πως φαίνεται ο κώδικας που σου δίνω. Αυτό δεν ήθελες; Χθες έλεγες κάτι για δύο μενού..
Άφησα ωστόσο κάποια styles που έδινες..
.ninja { color: black; visibility: hidden !important; }

Άβαταρ μέλους
dionisis71
Δημοσιεύσεις: 237
Εγγραφή: 04 Μάιος 2009 22:15
Επικοινωνία:

Βοήθεια με το σήσιμο ενος layout..

Δημοσίευση από dionisis71 » 18 Οκτ 2011 22:18

ναι apsuh0s αυτό ήθελα, θα κάτσω να το μελετήσω να δω τι έφταιγε.. παπάδες κάνετε οι cssαδες..

ευχαριστώ

Kypros Lambrou
Δημοσιεύσεις: 96
Εγγραφή: 17 Οκτ 2011 13:29

Βοήθεια με το σήσιμο ενος layout..

Δημοσίευση από Kypros Lambrou » 19 Οκτ 2011 13:52

Ωραία λύση apsuh0s αν και θα ήταν καλύτερα να άφηνες αν με ρωτάς τα clearfix για τώρα αφού ίσως μπερδέψουν στον σκοπό τους άμα δεν την έχεις "πάθει" πρώτα για να δεις το πρόβλημα.
Αν και εγώ χρησιμοποιώ διαφορετική λύση σε κανονικές live σελίδες για το συγκεκριμένο πρόβλημα, γνωρίζεις ότι σε αυτήν που έχεις βάλει με τα :before και τα :after; πιθανότατα να μην δουλεύει σε παλαιότερους browsers έτσι?

Απάντηση

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

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

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