wrapper div, δεν ειναι full

παπι · 10 Ιουνίου 2011

Τωρα μαθενω htms css κλπ, το προβλημα μου ειναι οτι το wrapper div δεν ειναι full size

εδω η εικωνα

εδω τα css

>body
{
  background-image: url("bg_tribal_edited_n2.png");
  background-repeat:no-repeat;
  background-position:center top;
  background-attachment:fixed;
  background-color:#ebebeb;
 
}
#wrapper
{
   padding:0px;
   margin:0px;
   text-align:center;
}
#header
{
   padding:auto;
   margin:auto;
   text-align:center;
   background-color:auto;
   height:100px;
   width:1000px;
   border-top-left-radius:10px;
   border-top-right-radius:10px;
}
#content
{
   margin-bottom:auto;
   margin-left:auto;
   margin-right:auto;
   margin-top:20px;
   text-align:left;
   width:1000px;
}
#menu
{
   margin:10px auto auto auto;
   padding:auto auto 10px auto;
   box-shadow: 3px 3px 10px rgba(244,244,244,100);
   text-align:left;
   width:1000px;
}
a.menu_item
{
   margin:0px 10px 0px 10px;
   font-family:Sans-Serif;
   font-size:16px;
   text-decoration:none;
   color:Black;
}
div.lastTattoo
{
   display:inline;
   height:auto;
   width:auto;
   margin:0px 33px 0px 33px;
   float:left;
   text-align:center;
}
img.img
{
   margin:0px 11px 0px 11px;
}
.shadow
{
   box-shadow: 3px 3px 10px rgba(244,244,244,100);
}
#footer
{
   margin-bottom:0%;
   margin-left:auto;
   margin-right:auto;
   margin-top:auto;
   height:100px;
   background-color:Blue;
   width:1000px;
   
}

parsifal · 10 Ιουνίου 2011

Μηδένισε margin και padding στα html και body elements...

παπι · 10 Ιουνίου 2011

Μηδένισε margin και padding στα html και body elements...

Τζιφος

Πληρες html+css

><%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="test_album_Default" %>

<!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 runat="server">
   <title></title>
<style type="text/css">
body
{
  background-image: url("bg_tribal_edited_n2.png");
  background-repeat:no-repeat;
  background-position:center top;
  background-attachment:fixed;
  background-color:#ebebeb;
  margin:0px;
  padding:0px;
 
}
#wrapper
{
   padding:0px;
   margin:0px;
   text-align:center;
}
#header
{
   padding:auto;
   margin:auto;
   text-align:center;
   background-color:auto;
   height:100px;
   width:1000px;
   border-top-left-radius:10px;
   border-top-right-radius:10px;
}
#content
{
   margin-bottom:auto;
   margin-left:auto;
   margin-right:auto;
   margin-top:20px;
   text-align:left;
   width:1000px;
}
#menu
{
   margin:10px auto auto auto;
   padding:auto auto 10px auto;
   box-shadow: 3px 3px 10px rgba(244,244,244,100);
   text-align:left;
   width:1000px;
}
a.menu_item
{
   margin:0px 10px 0px 10px;
   font-family:Sans-Serif;
   font-size:16px;
   text-decoration:none;
   color:Black;
}
div.lastTattoo
{
   display:inline;
   height:auto;
   width:auto;
   margin:0px 33px 0px 33px;
   float:left;
   text-align:center;
}
img.img
{
   margin:0px 11px 0px 11px;
}
.shadow
{
   box-shadow: 3px 3px 10px rgba(244,244,244,100);
}
#footer
{
   margin-bottom:0%;
   margin-left:auto;
   margin-right:auto;
   margin-top:auto;
   height:100px;
   background-color:Blue;
   width:1000px;
   
}
</style>
</head>
<body>
   <div id="wrapper">
       <div id="header" class="shadow">
       <h1>Title</h1>
       </div>
       <div id="menu">
           <a class="menu_item" href="/">Albums</a>
       </div>
       <div id="content" class="shadow">
          Last tattoo
         <br />
         <img class="img" src="GetTattoo.ashx?last=1" height="300" width="300" />
         <img class="img" src="GetTattoo.ashx?last=2" height="300" width="300" />
         <img class="img" src="GetTattoo.ashx?last=3" height="300" width="300" />
       </div>
       <div id="footer">
       THIS IS FOOTER AND IS BLUE 
       </div>
   </div>

</body>
</html>

parsifal · 10 Ιουνίου 2011

Ίσως δεν κατάλαβα ακριβώς το ερώτημα. Το πρόβλημά σου δεν ήταν να εξαφανιστούν τα παρακάτω «κενά»;

Αν όχι, τί εννοείς ακριβώς με το "full size";

macabre_sunsets · 10 Ιουνίου 2011

Δοκίμασε να βάλεις:

>
* {
  margin: 0px;
}

παπι · 10 Ιουνίου 2011

Ίσως δεν κατάλαβα ακριβώς το ερώτημα. Το πρόβλημά σου δεν ήταν να εξαφανιστούν τα παρακάτω «κενά»;

Αν όχι, τί εννοείς ακριβώς με το "full size";

Ναι για τα κενα λεω

εδιτ φυγαν τα πλαινα κενα αλλα κατω εχει ενα τεραστιο

parsifal · 10 Ιουνίου 2011

Σου είπα να μηδενίσεις και του <html> element τα margins-paddings. Στο post #3 βλέπω ότι μόνο του <body> πείραξες.

macabre_sunsets · 10 Ιουνίου 2011

Το κάτω θα γεμίσεί όταν του βάλεις περιεχόμενο. Υπάρχει λόγος που το θέλεις γεμάτο;

Εάν το θες για να βάλεις κάποιο footer, τότε νομίζω πως ψάχνεις κάπως λάθος.

parsifal · 10 Ιουνίου 2011

Αν κατάλαβα καλά, αυτό που θέλεις είναι sticky footer.

παπι · 10 Ιουνίου 2011

Το κάτω θα γεμίσεί όταν του βάλεις περιεχόμενο. Υπάρχει λόγος που το θέλεις γεμάτο;

Εάν το θες για να βάλεις κάποιο footer, τότε νομίζω πως ψάχνεις κάπως λάθος.

Ξερω γω, δε θα επρεπε ο footer να παει κατω;

@παρισφαλ εβαλα html{padding:0px; margin:0px;} αλλα δε βλεπω καποια αλλαγη

parsifal · 10 Ιουνίου 2011

Είχα απαντήσει πριν κάνεις το edit. Αν θέλεις το wrapper div να εκτείνεται προς τα κάτω και να πιάνει όλο το ύψος του browser viewport με τον footer να βρίσκεται πάντα τέρμα κάτω ασχέτως του πόσο περιεχόμενο υπάρχει από πάνω του, τότε θα συμφωνήσω με τον macabre: το πηγαίνεις λάθος. Δες αυτό που έγραψα πιο πάνω για sticky footer.

παπι · 10 Ιουνίου 2011

Εκανα οτι λεει εδω, αλλα και τζιφος....

το αρχειο

><%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="test_album_Default" %>

<!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 runat="server">
   <title></title>
<style type="text/css">
   *
   {
       margin:0px;
       
   }
html
{
   height: 100%;
}
body
{
  background-image: url("bg_tribal_edited_n2.png");
  background-repeat:no-repeat;
  background-position:center top;
  background-attachment:fixed;
  background-color:#ebebeb;


  height: 100%
 
}
#wrapper
{
   min-height:100%;
   height: auto !important;
   height: 100%;
   text-align:center;
   margin 0 auto -4em;
}
#header
{
   padding:auto;
   margin:auto;
   text-align:center;
   background-color:auto;
   height:100px;
   width:1000px;
   border-top-left-radius:10px;
   border-top-right-radius:10px;
}
#content
{
   margin-bottom:auto;
   margin-left:auto;
   margin-right:auto;
   margin-top:20px;
   text-align:left;
   width:1000px;
}
#menu
{
   margin:10px auto auto auto;
   padding:auto auto 10px auto;
   box-shadow: 3px 3px 10px rgba(244,244,244,100);
   text-align:left;
   width:1000px;
}
a.menu_item
{
   margin:0px 10px 0px 10px;
   font-family:Sans-Serif;
   font-size:16px;
   text-decoration:none;
   color:Black;
}
div.lastTattoo
{
   display:inline;
   height:auto;
   width:auto;
   margin:0px 33px 0px 33px;
   float:left;
   text-align:center;
}
img.img
{
   margin:0px 11px 0px 11px;
}
.shadow
{
   box-shadow: 3px 3px 10px rgba(244,244,244,100);
}
.footer, .push
{
  height:4em;
   
}
</style>
</head>
<body>
   <div id="wrapper">
       <div id="header" class="shadow">
       <h1>Title</h1>
       </div>
       <div id="menu">
           <a class="menu_item" href="/">Albums</a>
       </div>
       <div id="content" class="shadow">
          Last tattoo
         <br />
         <img class="img" src="GetTattoo.ashx?last=1" height="300" width="300" />
         <img class="img" src="GetTattoo.ashx?last=2" height="300" width="300" />
         <img class="img" src="GetTattoo.ashx?last=3" height="300" width="300" />
       </div>
       <div class="push"></div>
       <div class="footer">
       THIS IS FOOTER AND IS BLUE 
       </div>
   </div>

</body>
</html>

parsifal · 10 Ιουνίου 2011

Κατά γράμμα; Μήπως ξέχασες να βγάλεις το footer div εκτός του wrapper;

Edit, μετά το edit σου: Μέσα έπεσα...

παπι · 10 Ιουνίου 2011

Κατά γράμμα; Μήπως ξέχασες να βγάλεις το footer div εκτός του wrapper;

Edit, μετά το edit σου: Μέσα έπεσα...

Αμα μαθω εγω html/css να με χε... Τοτε για ποιο λογο πρεπει να εχω wrapper; Νομιζα οτι ολη η σελιδα μπαινει μεσα στο wrapper......

parsifal · 10 Ιουνίου 2011

Δεν υπάρχει κανένας κανόνας που να λέει κάτι τέτοιο. "Wrapper" ή "container" κλπ. είναι γενικές έννοιες χωρίς αυστηρό ορισμό του τί πρέπει ή δεν πρέπει να τοποθετούμε εκεί μέσα. Ανάλογα την περίπτωση και τί θέλουμε να επιτύχουμε.

Σύνδεση

wrapper div, δεν ειναι full

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

παπι

parsifal

παπι

parsifal

macabre_sunsets

παπι

parsifal

macabre_sunsets

parsifal

παπι

parsifal

παπι

parsifal

παπι

parsifal

Αρχειοθετημένο

Σύνδεση