Προς το περιεχόμενο

κεντράρισμα κεντρικού div

heavyaris

Από τον heavyaris
στο Web Design - Development

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

heavyaris Proficient

heavyaris

Δημοσ.
Δημοσ.

παιδιά, έκανα export απο photoshop σε divs, όμως θέλω να κεντράρω την σελίδα, αλλά δεν τα καταφέρνω.

ο κώδικας που είναι υπεύθυνος (υποθέτω) είναι:

>
#Table_01 {
position:absolute;
top:0px;
width:980px;
height:1280px;	
}

και πιο κάτω έχει:

>
<body style="margin-top: 0px; margin-bottom: 0px;">

δοκίμασα να βάλω

>
 margin-left: auto ;
 margin-right: auto ;

αλλά δεν άλλαξε τίποτα.

καμμια ιδέα;

ευχαριστώ.

  • Απαντ. 35
  • Δημ.
  • Τελ. απάντηση
heavyaris Proficient

heavyaris

Δημοσ.
  • Μέλος
Δημοσ.

Δοκίμασε

>
body {
text-align: center;
}

 

αυτό δεν θα κεντραρει και το κείμενο της ιστοσελίδας μαζί;

>
div/table/*_name {
margin-left: auto;
margin-right: auto;
}

 

τα έχω δοκιμάσει και έβγαλα το position: absolute αλλα τιποτα

 

Επίσης βγάλε το position: absolute.

orotoi Mentor

orotoi

Δημοσ.
Δημοσ.

αυτό που λέει ο σπάρτακος. Γενικά το μόνο που χρειάζεται είναι να έχεις ενα γενικό container div το οποίο θα έχει ορισμένο πλάτος (όσο θες να είναι η σελίδα σου) και margin-left και -right να είναι auto.

heavyaris Proficient

heavyaris

Δημοσ.
  • Μέλος
Δημοσ.

παιδια, ευχαριστώ για τις απαντήσεις σας, αλλά τα βλέπω σκούρα τα πράματα, το κάθε ένα slice που έκοψα, έγινε (όπως έπρεπε) div, άλλα με position:absolute, και άρα και να μετακινήσω το κεντρικό div, αυτά όλα θέλουν "πείραγμα", έτσι δεν είναι;

καλά μου είπε ένας φίλος μου, να χρησιμοποιήσω τα κομματιασμένα png απο το photoshop, αλλά να κάνω απο την αρχή εγώ τα divs,στο dreamweaver και να τα ριξω μέσα ένα ένα..

spartakoscs Proficient

spartakoscs

Δημοσ.
Δημοσ.

παιδια, ευχαριστώ για τις απαντήσεις σας, αλλά τα βλέπω σκούρα τα πράματα, το κάθε ένα slice που έκοψα, έγινε (όπως έπρεπε) div, άλλα με position:absolute, και άρα και να μετακινήσω το κεντρικό div, αυτά όλα θέλουν "πείραγμα", έτσι δεν είναι;

καλά μου είπε ένας φίλος μου, να χρησιμοποιήσω τα κομματιασμένα png απο το photoshop, αλλά να κάνω απο την αρχή εγώ τα divs,στο dreamweaver και να τα ριξω μέσα ένα ένα..

 

 

αυτό είναι το καλύτερο ! αυτόματα δεν γίνονται ποτέ 100% σωστά όπως τα θες

heavyaris Proficient

heavyaris

Δημοσ.
  • Μέλος
Δημοσ.

έλα όμως που και έτσι πάλι κολλάω!

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

 

><style type="text/css">
#main {
height: auto;
width: 980px;
height:1280px;
margin-left: auto;
margin-right: auto; 
top: 0px;	 
bottom: 0px;
}
#logo {
position:inherit;
left:0px;
top:0px;
width:250px;
height:50px;
}

#date {
position:inherit;
left:250px;
top:0px;
width:185px;
height:50px;
}

</style></head>

<body bgcolor="#000000">
<div id = "main">

<div id="logo">
	<img src="images/logo.png" width="250" height="50" alt="">
</div>
<div id="date">
	<img src="images/date.png" width="185" height="50" alt="">
</div>
</div>

spartakoscs Proficient

spartakoscs

Δημοσ.
Δημοσ. 

><html>
<head>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}/*για να κάνει σε όλο το document 0px margin και padding !*/
body{
background-color: #000000;
}
#main {
       height: auto;
       width: 980px;
       height:1280px;
       margin-left: auto;
       margin-right: auto; 
}
#logo {
       width:250px;
       height:50px;
       float: left;
}

#date {
       width:185px;
       height:50px;
       float: left;/*η right ανάλογα που θες να το πας !*/
}
#cont{
color: white;
}
.clr{
clear: both;
}

</style>
</head>

<body>
<div id = "main">
<div id="logo"><img src="images/logo.png" width="250" height="50" alt=""></div>
<div id="date"><img src="images/date.png" width="185" height="50" alt=""></div>
<div class="clr"></div>
<div id="cont">your cont</div>
</div>
</body>
</html>

 

ορίστε υποθέτω ότι κάτι τέτοιο θες να κάνεις !!

heavyaris Proficient

heavyaris

Δημοσ.
  • Μέλος
Δημοσ. 

><html>
<head>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}/*για να κάνει σε όλο το document 0px margin και padding !*/
body{
background-color: #000000;
}
#main {
       height: auto;
       width: 980px;
       height:1280px;
       margin-left: auto;
       margin-right: auto; 
}
#logo {
       width:250px;
       height:50px;
       float: left;
}

#date {
       width:185px;
       height:50px;
       float: left;/*η right ανάλογα που θες να το πας !*/
}
#cont{
color: white;
}
.clr{
clear: both;
}

</style>
</head>

<body>
<div id = "main">
<div id="logo"><img src="images/logo.png" width="250" height="50" alt=""></div>
<div id="date"><img src="images/date.png" width="185" height="50" alt=""></div>
<div class="clr"></div>
<div id="cont">your cont</div>
</div>
</body>
</html>

 

ορίστε υποθέτω ότι κάτι τέτοιο θες να κάνεις !!

 

Ευχαριστώ πολύ!

επιτέλους μπορώ να συνεχίσω να βάζω τα κομμάτια (ούτε παζλ να ήταν)

heavyaris Proficient

heavyaris

Δημοσ.
  • Μέλος
Δημοσ.

παιδιά, σκάλωσα, έχω πρόβλημα με τα κενά divs που προσπαθώ να εισάγω για να δώσω την εντύπωση ότι η σελίδα είναι "διάφανη".

χρησιμοποιώ λοιπόν κενά divs ανάμεσα στα boxes. τώρα το χρωμάτισα κόκκινο για να φαίνεται, προσπαθώ να το βάλω κάτω από το αριστερό κουτί αλλά "μαγκώνει" σε ένα μεγάλο κεντρικό κάθετο div (το μαύρο κενό ανάμεσα στα 2 γκρι κουτιά). μήπως δεν είναι σωστό το slicing με τέτοιο τρόπο;

ευχαριστώ πολύ.

http://www.pieria-its.gr/dok/1.html

orotoi Mentor

orotoi

Δημοσ.
Δημοσ.

Δεν θα χρησιμοποιήσεις το image (slice) main.png αλλα αφού είναι απλώς ενα solid χρώμα. Θα δώσεις αυτό το χρώμα που θες στο div με css. Αν και δεν έχω καταλάβει ακριβώς τι θες.. Ανέβασε ίσως κάπου σαν εικόνα το αρχικό σου layout (που έχεις κάνει στο photoshop).

 

Άσχετο με τα παραπάνω.. το logo δεν είναι ωραίο που είναι ίδιο (τελείως ίδιο όμως!!) με logo άλλου site και μάλιστα ίδιου αντικειμένου..

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

Αυτό το θέμα έχει αρχειοθετηθεί και είναι κλειστό για περαιτέρω απαντήσεις.

Προς την λίστα θεμάτων
  • Δημιουργία νέου...