Ubuntu-gr Forum

To Forum της Ελληνικής Κοινότητας Ubuntu-gr
https://forum.ubuntu-gr.org/

Αποριες για HTML/CSS

https://forum.ubuntu-gr.org/viewtopic.php?f=53&t=19788

Σελίδα 2 από 5

Re: Αποριες για HTML/CSS

ΔημοσίευσηΔημοσιεύτηκε: 14 Φεβ 2012, 20:31
από parenthesis
giannosfor έγραψε:Χαίρομαι που υπάρχει ένα θέμα για css ελπίζω να μην έχει πεθάνει.

Έχω αυτό το κώδικα
Κώδικας: Επιλογή όλων
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Hotel</title>
</head>

   <style>
   html, body {
      height:100%;
      background-color:#b0c4de;
      margin: 0;
      padding: 0;
   }
   div {
      border:1px solid black;
   }
   #header{
      background-color:#FFFFFF;
      width:auto;
      height:5em;
   }
   
   #content {
      margin-left:10em;
   }
   
   #nav{
      float : left;
      width: 10em;
   }
   
   #footer {
      clear : both;
      width:auto;
      
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 50px;
      
      background-color:#86AA6A;
   }   
   </style>
   
<body>
   <div id="header">
      Header
   </div>
   <div id="nav">
      nav<br />
      nav<br />
      nav<br />
      nav<br />
      nav<br />
   </div>
   <div id="content">
      content<br />
      content<br />
      content<br />
      content<br />
      content<br />
      content<br />
   </div>
   <div id="footer">
      footer
   </div>
</body>
</html>


Εδώ είναι και τι εμφανίζει στο broswer.

http://imageshack.us/photo/my-images/545/htmlrn.png/

Αυτό που θέλω είναι τα div nav και content να πάρουν το υπόλοιπο ύψος της σελίδας ανεξάρτητα το περιεχόμενο τους.
Off topic:
Αν μπορεί ας με βοηθήσει κάποιος στο εμφανίσω την εικόνα να φαίνεται.


Για δοκίμασε με height: 100% στα #nav και #content, και margin-top: -50px; position: relative στο #footer.

Re: Αποριες για HTML/CSS

ΔημοσίευσηΔημοσιεύτηκε: 14 Φεβ 2012, 21:12
από giannosfor
Τα άλλαξα για να είναι πιο καθαρά.

Κώδικας: Επιλογή όλων
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Hotel</title>
</head>
   <LINK href="style.css" rel="stylesheet" type="text/css">
<body>
   <div id="header">
      Header
   </div>
   <div id="nav">
      nav
   </div>
   <div id="content">
      content
   </div>
   <div id="footer">
      footer   
   </div>
</body>
</html>


Κώδικας: Επιλογή όλων
html, body {
      height:100%;
      background-color:#b0c4de;
      margin: 0;
      padding: 0;
   }
   div {
      border:1px solid black;
   }
   #header{      
      width:auto;
      height:5em;
      background-color:#0D70AE;
   }
   #nav{
      float : left;
      width: 10em;
      height: 100%;
      background-color:#8A0D51
   }
   #content {
      height: 100%;
      background-color:#AE3EA5;
   }
   #footer {
      clear : both;      
      width: 100%;
      height: 50px;
      background-color:#86AA6A;
      margin-top: -50px; position: relative;
   }   


Άλλαξα και λίγο το κώδικα.
Αυτό δείχνει να λειτουργεί.Αυτό που ήθελα όμως ήταν να είναι το footer στο τέλος και στη συγκεκριμένη περίπτωση να φαίνεται εφόσον τα περιεχόμενα των παραπάνω div δεν έχουν αρκετό περιεχόμενο ώστε να αλλάζει το height τους.
Δε ξέρω αν γίνομαι κατανοητός.
Το footer θέλω να είναι στο τέλος πάσι θυσία και το περιεχόμενο της σελίδας να γεμίζει όλο το χώρο(να κάνει expand).
Όταν το περιεχόμενο είναι μεγαλύτερο απ'το μέγεθος της οθόνης απλά αλλάζει το height των δύο divs του nav και του content.Το footer παραμένει κάτω άλλα δεν είναι ορατό.

Να ρωτήσω και κάτι άλλο,υπάρχει κάποιο καλό πρόγραμμα να χρησιμοποιήσω σε ubuntu;
Χρησιμοποιώ το dreamweaver 8 σε wine αν υπάρχει κάτι καλύτερο.

Re: Αποριες για HTML/CSS

ΔημοσίευσηΔημοσιεύτηκε: 15 Φεβ 2012, 09:50
από medigeek
giannosfor έγραψε:Αυτό δείχνει να λειτουργεί.

Ελεγξε το με: http://validator.w3.org/#validate_by_input

Το link tag
1. πρέπει να μπει στο <head>
2. πρέπει να τελειώσει με "/>"
αντί
Κώδικας: Επιλογή όλων
<link href="style.css" rel="stylesheet" type="text/css">

..σε
Κώδικας: Επιλογή όλων
<link rel="stylesheet" type="text/css" href="style.css"/>

Re: Αποριες για HTML/CSS

ΔημοσίευσηΔημοσιεύτηκε: 15 Φεβ 2012, 13:33
από giannosfor
Οκ thanks.

Κώδικας: Επιλογή όλων
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" /> -->
<link href='style.css' rel='stylesheet' type='text/css' />
<title>Hotel</title>
</head>   
<body>
   <div id="header">
      Header
   </div>
   <div id="nav">
      nav
   </div>
   <div id="content">
      content
   </div>
   <div id="footer">
      footer   
   </div>
</body>
</html>


Μπορείτε να μου πείτε ένα τρόπο να κάνω την σελίδα expand;

Re: Αποριες για HTML/CSS

ΔημοσίευσηΔημοσιεύτηκε: 17 Φεβ 2012, 21:19
από linuxs
Ίσως δεν κατάλαβα καλά. Τι εννοείς expand? :/

Re: Αποριες για HTML/CSS

ΔημοσίευσηΔημοσιεύτηκε: 17 Φεβ 2012, 22:08
από giannosfor
linuxs έγραψε:Ίσως δεν κατάλαβα καλά. Τι εννοείς expand? :/


Να πιάνει όλη τη σελίδα.
Παράδειγμα αυτή η σελίδα
Θέλω το header να είναι απάνω και το footer να είναι εμφανές στο κάτω μέρος.Και το nav και contain να καλύπτουν όλο τον υπόλοιπο χώρο.

Αν είναι πολύ κακή ερώτηση θα κάτσω να ασχοληθώ λίγο παραπάνω.

Re: Αποριες για HTML/CSS

ΔημοσίευσηΔημοσιεύτηκε: 17 Φεβ 2012, 22:19
από linuxs
Μπερδέυτηκα λίγο. Στο παράδειγμα που έιχες κάνει εσύ ηταν μια χαρά έτσι? Εμένα όλο μου φαίνόταν. Εννοώ αυτό με τα μωβ κόκκινα χρώματα...

Κώδικας: Επιλογή όλων
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" /> -->
<link href='style.css' rel='stylesheet' type='text/css' />
<title>Hotel</title>
</head>   
<body>
   <div id="header">
      Header
   </div>
   <div id="nav">
      nav
   </div>
   <div id="content">
      content
   </div>
   <div id="footer">
      footer   
   </div>
</body>
</html>

Κώδικας: Επιλογή όλων
html, body {
      height:100%;
      background-color:#b0c4de;
      margin: 0;
      padding: 0;
   }
   div {
      border:1px solid black;
   }
   #header{     
      width:auto;
      height:5em;
      background-color:#0D70AE;
   }
   #nav{
      float : left;
      width: 10em;
      height: 100%;
      background-color:#8A0D51
   }
   #content {
      height: 100%;
      background-color:#AE3EA5;
   }
   #footer {
      clear : both;     
      width: 100%;
      height: 50px;
      background-color:#86AA6A;
      margin-top: -50px; position: relative;
   }   


Προσπάθησε να παίξεις με τα DIV και θα το καταλάβεις πως πάει. Πάντως δεν υπάρχει στανταρ ένας τρόπος για να το κάνεις αυτό. Τσέκαρε και αυτό: http://www.cs.uoi.gr/~billys/ μπορεί να σου δώσει καμια ιδέα. Ορίστε και το CSS μου
Κώδικας: Επιλογή όλων
/*********************************************************************

-------------------------     MY CSS       ---------------------------
by vasilis tzivaras
*********************************************************************/




/*************** MAIN CONTENT ***************/

body {
     background: black;
     /*color: #4B4B4B;*/
   /*font-family: 'Comic Sans Ms';*/
}

#main {
   /*background-image: url('../images/main_bg.jpg');*/
}




/*********************************************
      main -> {header, content, footer}
*********************************************/
#header {
   /*height: 150px;*/
   background: white;
   float: center;
}

#content {
   font-family: 'Comic Sans MS';
   text-align: left;
   background: url('../images/content_bg.png');
   width: 837px;
   color: white;
   overflow: hidden;
   margin: 40px auto 0 auto;
   padding: 40px 24px 20px 37px;
   border-style: ridge;
   border-width: 3px;
   border-color: #7A1E1E;
   float: center;
}

#footer {
   width: 100%;
   height: 33px;
   color: white;
   font-family: 'Comic Sans MS';
   text-align: center;
   text-transform: uppercase;
   padding: 24px 0 0 0;*/
}




/*********************************************
      header -> *header_background*{welcome, menubar}
*********************************************/
/* text-align: value each div manually*/
#welcome {
   height:220px;
   width: 1200px;
   float: center;
   
   font-family: 'Comic Sans MS';
   color: white;
   
   overflow: hidden;
   margin: 5px auto 0px auto;
   padding: 5px 5px 5px 5px;

   /*background: white;*/
}

#header_background {
   background-image: url('../images/header_bg.png');
}

#menubar {
   height: 38px;
   text-align: center;
   background-image: url('../images/menubar.png');
   /*margin-top: 15px;*/
   /*margin-bottom: 15px;*/
}




/*********************************************
   welcome -> {picture, welcome_title, info}
*********************************************/
#picture {
   background-image: url('../images/logo_red.png');
   height: 180px;
   width: 188px;
   margin: 4px 0px 4px 4;
   float: left;
   /*background-color: grey;*/
}

#welcome_title {
   height: 210px;
   width: 642px;
   margin: 4px 20px 4px 20px;
   float: left;
   /*background: green;*/
   text-shadow: 8px 6px 8px #FF0000;
   font-family: "Comic Sans Ms";
   text-align: center;
   font-size: 42px;
}

#info {
   height: 210px;
   width: 300px;
   float: right;
   margin: 4px 4px 4px 0px;
   /*background: blue;*/
   
   font-family: Consolas;
   /*color: white;   */
}




/*********************************************
               CSS classes
*********************************************/
.music_title {
   color: white;
}

.selected {
   color: #860808;
   text-decoration: none;
   word-spacing: 20px;
   font-family: 'Comic Sans MS';
   font-size: 26px;
}

.content_tag {
   height: 250px;
   border-bottom-style: solid;
   border-bottom-width: 2px;
   border-bottom-color: #860808;
   margin-bottom: 30px;
   /*background: green;*/
}

.post_title {
   /*background: purple;*/
}

.post_image {
   float: left;
   /*background: red;*/
   width: 160px;
   height: 180px;
   margin: 0 2 5 5;
}

.post_text {
   /*background: blue;*/
   float: right;
   width: 650px;
   height: 180px;
   margin: 0 2 5 5;
}





/*********************************************
               Headers
*********************************************/
h2 {
   font: normal 175% 'Comic Sans MS';
   color: #B81D1D;
   margin: 0 0 5px 0;
   padding: 15px 0 6px 0;
}





/*********************************************
               Other
*********************************************/
ul {
   list-style-type: none;
   width: 100%;
   padding: 0;
   margin:  0;
}

li {
   display: inline;
}

a {
   color: #992F2F;
   text-decoration: none;
}

a:hover {
   color: white;
   /*background: #C25454; */
   /*text-decoration: underline;*/
}

Re: Αποριες για HTML/CSS

ΔημοσίευσηΔημοσιεύτηκε: 17 Φεβ 2012, 22:29
από giannosfor
Οκ θα το ψάξω.Αν έχεις κάποιο οδηγό ελληνικό.
Στο δικό μου broswer ο footer δεν φαίνεται πρέπει να κάνω scroll down για να το δω.

Re: Αποριες για HTML/CSS

ΔημοσίευσηΔημοσιεύτηκε: 17 Φεβ 2012, 22:38
από linuxs
Ααα, τώρα κατάλαβα νομίζω. Χωρίς scroll down θέλεις? OMG αυτό έχει σχέση με την ανάλυση της οθόνης που έχεις. Αν έχεις δλδ λαπτοπ 15" τότε φυσικά δεν θα σου φαίνεται ολόκληρο και πρέπει να πας πιο κάτω. :/

Re: Αποριες για HTML/CSS

ΔημοσίευσηΔημοσιεύτηκε: 17 Φεβ 2012, 22:50
από giannosfor
linuxs έγραψε:Ααα, τώρα κατάλαβα νομίζω. Χωρίς scroll down θέλεις? OMG αυτό έχει σχέση με την ανάλυση της οθόνης που έχεις. Αν έχεις δλδ λαπτοπ 15" τότε φυσικά δεν θα σου φαίνεται ολόκληρο και πρέπει να πας πιο κάτω. :/


Είναι 19".Θα το προσπαθήσω και θα σε ξαναενοχλήσω.
Το relative γιατί το βάζεις;Εγώ συνήθως έβαζα
Κώδικας: Επιλογή όλων
position : absolute ; bottom : 0;
Για το footer και συνήθως πετύχαινα αυτό που ήθελα.
Όλοι οι χρόνοι είναι UTC + 2 ώρες [ DST ]
Σελίδα 2 από 5
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
http://www.phpbb.com/