-
Centrare div....
Imi bat capul cu o problema si desi stiu css si html 99%, nu pot sa-mi dau seama cum sa ....centrez un div :|
Deci am asa :
<div style="width:1300px">
<div style="width:1000px">
Textul meu
</div>
</div>
Primul div de 1300px il folosesc pentru a pune o imagine pe background, iar al doilea div de 1000px il folosesc pentru text. O sa ma intrebati de ce nu folosesc unul singur... Pai as vrea sa fie vizibil in mai multe rezolutii incepand de la 1024 pana la 1300, dar textul sa nu depaseasca 1024.
Ce am incercat eu si nu a mers. Am pus in div-ul de 1000px margin:auto, lucru care ar fi trebuit sa mi-l centreze automat pe mijloc. De fapt, asta si face, numai ca mi-l centreaza in interiorul div-ului de 1300px. Pff... nu stiu cum sa explic....
De ex daca eu folosesc rezolutia de 1024 si am acolo div-ul de 1300px imi apare scroll in browser jos pentru ca a depasit limita de 1024. Bun, acum div-ul de 1000px e in interiorul celui de 1300px si astfel el se centreaza ok, dar avand bara de jos, tot nu e pe mijloc, e mai in dreapta.
Incercati sa probati si o sa va dati seama despre ce vb aici. Sper sa capat un pic de ajutor.... Multumesc.
EL : Chiar daca dau overflow:hidden, e aceeasi chestie. Se centreaza aiurea. Eu vreu doar sa se centreze pe mijloc indiferent de rezolutie....
-
ai încercat un position:absolute în al doilea div?
-
Poti face asa
Cod HTML:
<div style="width:1300px; background: #eff; min-height: 500px;">
<div style="position: absolute; border: 1 dashed; width: 99%; overflow: hidden;">
<div style="margin: auto; position: relative; width: 1000px;">
Textul meu
</div>
</div>
</div>
-
Nu merge baieti, am probat.... Nici nu avea cum sa mearga pentru ca al doilea div fiind cu positiion:absolute, sta in cel de 1300 px de la capat, ori eu vreu sa-l centrez in 1024px pe mijloc :| Eu am inteles ce ati zis voi, dar eu nu vreau ca textul sa-mi stea in interiorul (stanga) div-ului de 1300, vreau pe mijloc.
Eu vreau ca site-ul sa fie batut in cuie pe 1024 centrat pe mijloc, dar imaginea de pe background sa fie mai mare, adica 1300px. Daca mai aveti vreo idee, veniti cu ea ca eu am stat aseara cateva ore bune si azi la fel....
PS : Asta e singura mea problema, dar ca sa nu ma intrebati, da de ce nu pui imaginea ca background in body, este pentru ca folosesc un slide si daca ar fi in body, nu ar mai functiona, asta ca sa nu mai zic, ca tot site-ul care va avea un maxim de 5 "pagini", vor fi structurate doar in index... deci iese automat varianta cu body....
Daca va vine o idee, spuneti-mi si mie va rog.
-
margin:0 auto
Daca tot nu merge, lasa aici un printscreen cum vrei sa arate ca sincer nu prea-mi dau seama ce vrei sa zici.
-
Poftim. Asa arata codul meu :
Cod PHP:
<style>
#slides {width:1310px; margin:auto;}
#slides .slides_container {width: 1310px; overflow: hidden; background:red; margin:auto;}
#slides .block {margin: auto; position: relative; background:green; color:white; width: 1000px;}
</style>
<div id="slides">
<div class="slides_container">
<div class="block"><span>
1Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
</div>
<div class="block">
2Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div class="block">
3Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div class="block">
4Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</div>
Daca te joci cu rezolutia Ctrl +/- o sa vezi ca textul nu sta pe mijloc incepand de la rezolutia 1024 :|
-
Presupun ca nu ai incercat varianta mea, pentru ca merge perfect.
1920x1080:
http://i.imgur.com/RGf2o.jpg
1024x768 ( nu a iesit bine screenshot, dar in realitate background-ul e cu 300px mai lat decat div-ul textului ):
http://i.imgur.com/Ptqfe.png
-
Multumesc mult pentru raspuns, codul tau functioneaza, dar nu si pe site-ul meu. Am taiat randuri din link-uri catre css si javascript si se pare ca unul dintre scripturi imi creaza problema :| Acum o sa-i incerc sa vad ce si cum. Multumesc inca o data :)
Link : 188.26.178.89
--- Later Edit --- (ca mi-a fost lene sa apas "Edit")
Ca sa vedeti si voi fratilor cum imi deschide slides.min.jquery.js numerotarea slide-urilor....
<a href="#" class="prev">Prev</a><a href="#" class="next">Next</a>
<ul class="pagination"><li class="current"><a href="#0">1</a></li><li><a href="#1">2</a></li><li><a href="#2">3</a></li><li><a href="#3">4</a></li></ul></div>
Pun pariu ca div-ul asta care e inchis si nu are unul de deschidere, imi face problema... Daca pun unul de deschidere inaintea lui, tot la urma mi-l pune :))) Ce problema penibila si de tot rasu' :|
-
Pentru centrarea div-ului pe centru folosesti in css: "margin: 0px auto". Pentru redimensionarea articolului dupa rezolutie folosesti fluid css . - Adaptive CSS-Layouts: New Era In Fluid Layouts? - Smashing Magazine
